F# HTML DSL 实战

该页面完全由 .zpage.fsx 文件中的 F# 代码生成，未使用任何 Markdown。

基础元素

F# 代码	输出 HTML
`h1 [text "Title"]`	<h1>Title</h1>
`p [text "Content"]`	<p>Content</p>
`a "/url/" [text "Link"]`	<a href="/url/">Link</a>
`ul [li [text "A"]]`	<ul><li>A</li></ul>

带类名的快捷构造

divC    "card"  [ p [ text "Content" ] ]
spanC   "badge" [ text "New" ]
sectionC "hero"  [ h1 [ text "Title" ] ]
aC "tag" "/url/" [ text "Tag" ]

列表推导（for 循环）

F#
Zest
SSG
ZCSS

条件渲染

条件为 true → ✅ 显示

构建时计算

1..10 中的偶数：2, 4, 6, 8, 10
偶数的平方：4, 16, 36, 64, 100
偶数平方和：220

原始 HTML 注入

这是通过 raw 函数注入的原始 HTML。

完整源代码

// @title F# HTML DSL 实战
// @layout default

render [
    divC "page-header" [
        h1 [text "F# HTML DSL 实战"]
    ]
    divC "container" [
        h2 [text "列表推导"]
        let items = ["F#"; "Zest"; "SSG"]
        ul [for i in items -> li [text i]]

        h2 [text "构建时计算"]
        let sum = [1..10] |> List.filter (fun x -> x%2=0) |> List.map (fun x -> x*x) |> List.sum
        p [text (sprintf "偶数平方和 = %d" sum)]
    ]
]