SwiftyHTMLBuilder

用于 HTML 文档的 Swift DSL

主要特性

类似 SwiftUI 的布局

使用类似 SwiftUI 的布局组件，例如 VStack、HStack 和 ZStack 来定义 HTML 结构。

class MyBody: HTML {
    var content: HTMLBlock {
        body {
            h1("SwiftyHTMLBuilder")
            
            hstack(spacing: "100px") {
                p("hstack1")
                p("hstack1")
                p("hstack1")
            }
            .backgroundColor(.aliceblue)
            
            hstack(equalSpacing: true) {
                p("hstack2")
                p("hstack2")
                p("hstack2")
            }
            
            vstack(spacing: "10px") {
                p("vstack1")
                p("vstack2")
                p("vstack3")
            }
            .backgroundColor(.aliceblue)
            
            zstack(vAlign: .center, hAlign: .center) {
                img(src: "image.png")
                    .width(300, unit: .px)
                vstack(spacing: "0px") {
                    h2("Swifty")
                        .margin(0)
                    h2("HTML")
                        .margin(0)
                }
                .color(.white)
            }
        }
    }
}

易于编写的 MediaQuery

你可以使用 MediaQuery 类轻松编写响应式代码。

MediaQuery(.minWidth, value: "500px") {
    nav {
        hstack(spaceBetween: true) {
            h1("SwiftyHTMLBuilder")
            hstack(hAlign: .center, spacing: "10px") {
                a(href: "https://github.com") { text("AAAAA") }
                a(href: "https://github.com") { text("BBBBB") }
                a(href: "https://github.com") { text("CCCCC") }
            }
        }
    }
    .backgroundColor(.aliceblue)
} falseContents: {
    nav {
        vstack(equalSpacing: true) {
            a(href: "https://github.com") { text("AAAAA") }
            a(href: "https://github.com") { text("BBBBB") }
            a(href: "https://github.com") { text("CCCCC") }
        }
        .width(100, unit: .vw)
        .backgroundColor(.aliceblue)
    }
    h1("SwiftyHTMLBuilder")
}

样式自动补全

CSS 自动补全，使您可以更轻松地直接在 Swift 代码中应用 CSS 和其他样式属性。

h2("HTML")
    .margin(0)
    .padding(0)
    .color(.red)
    .backgroundColor(r: 255, g: 0, b: 255)

模块化视图。

通过将其划分为类，更有效地组织您的 HTML 代码。这种方法允许您模块化 HTML 内容，从而可以使用循环 (for) 和条件语句 (if) 来生成 HTML。

class MyCell: HTML {
    let count: Int
    init(count: Int) {
        self.count = count
    }
    var content: HTMLBlock {
        hstack(spaceBetween: true) {
            h3("cell")
            h3(String(count))
        }
        .width(400, unit: .px)
        .backgroundColor(.aliceblue)
    }
}

// using MyCell
vstack(spacing: "10px") {
    for i in 0..<10 {
        if i.isMultiple(of: 2) {
            MyCell(count: i).build()
        }
    }
}

用法

HTML 文档模板

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                head {
                    meta(charset: .utf8)
                    title("SwiftyHTMLBuilder Example")
                }
                body {
                    h1("SwiftyHTMLBuilder")
                }
            }
        }
    }
}

Xcode 项目设置

为命令行工具 (macOS) 创建新的 Xcode 项目，并通过 Swift 包管理器添加此包。

为了您的方便，请按照以下步骤设置您的项目。

编辑您的 Scheme 并附加新的环境变量 MY_ROOT。

为 Run 创建新的后操作。这将使 Xcode 在每次您运行项目时打开 index.html。

为 outputPath（指向 index.html）创建 URL 对象。

import Foundation
import SwiftyHTMLBuilder

let projectRootPath = ProcessInfo.processInfo.environment["MY_ROOT"]!
let outputPath = URL(string: projectRootPath)!
    .appending(path: "Output")
    .appending(path: "index.html")
    .absoluteString

编写您的 HTML

class MyHTML: HTML {
    var content: HTMLBlock {
        ...
    }
}

将您的 Swift 代码编译为 HTML 代码。

let compiled = MyHtml().compile()

写入 index.html

try! compiled.write(toFile: outputPath, atomically: true, encoding: .utf8)

将 HTML 转换为 HTMLBlock

使用 .build() 进行转换。

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                MyHead().build()
                MyBody().build()
            }
        }
    }
}

使用未定义的 CSS、属性或 HTML 组件

由于此包中未涵盖所有组件，您可能需要手动编写 CSS、属性或 HTML 组件。欢迎贡献。

img(src: "image.png")
    .css("z-index", "1")
    .attr("width", "300px")

// use text() to write raw HTML code
text("<style> * { padding: 0; margin: 0; } </style>")

涵盖的功能

CSS 样式

background-color
color
width
height
padding
margin
position