Ignite logo

Twitter: @twostraws

Ignite 是一个面向 Swift 开发者的静态站点构建器,它提供富有表现力且强大的 API,用于构建在所有设备上都能良好运行的精美网站。

Ignite 并没有尝试将 SwiftUI 代码转换为 HTML,或者简单地将 HTML 标签映射到 Swift 代码。相反,它的目标是使用类似 SwiftUI 的语法来帮助您构建出色的网站,即使您不了解 HTML 或 CSS。

入门指南

最简单的入门方式是使用此软件包中包含的 Ignite 命令行工具

  1. 运行 git clone https://github.com/twostraws/Ignite 克隆此仓库到您的计算机。
  2. 切换到新目录,例如 cd Ignite
  3. 现在运行 make 来构建 Ignite 命令行工具。
  4. 然后运行 make install 将 Ignite 命令行工具安装到 /usr/local/bin
  5. 如果该命令因权限问题失败,您应该改为运行 sudo make install

注意

要更改安装目录:make install PREFIX_DIR=/my/install/dir

一旦安装了该命令行工具,您就可以运行以下命令来创建一个名为 ExampleSite 的新站点

ignite new ExampleSite

安装完成后,该命令行工具对于运行本地 Web 服务器以进行测试和构建项目非常有用。

提示

使用 Ignite 工具运行本地 Web 服务器是预览您的网站的最佳方式。

或者,您可以使用 Swift Package Manager 将 Ignite 引入现有项目,方法是添加 https://github.com/twostraws/Ignite 的包依赖项。

完成后,在您需要的任何 Swift 代码中导入 Ignite

import Ignite

重要提示:预览您的网站

一旦您构建了网站并准备查看其外观,不要 只是在 Finder 中双击其中一个文件。这将直接在您的浏览器中打开该文件,这意味着它将不知道如何定位您网站的其余部分 – 样式表、JavaScript 代码等 – 因此它将无法正确显示。

相反,预览您的网站的最佳方式是使用 Ignite CLI 工具,您已在上面的“入门指南”中安装了它

这将直接在您的 Web 浏览器中打开您的网站。然后您可以返回 Xcode 并自由地对您的网站进行更改 – 每次您按下 Cmd+R 构建您的网站时,您可以刷新浏览器以查看更改。

实际效果展示

IgniteSamples 仓库包含许多示例代码供您试用 – 您可以在这里看到它的运行效果:您可以在这里看到此仓库的所有输出的运行效果:https://ignitesamples.hackingwithswift.com

基本的 Ignite 代码看起来类似于 SwiftUI 代码

Text("Swift rocks")
    .font(.title1)
    
Text(markdown: "Add *inline* Markdown")
    .foregroundStyle(.secondary)

Link("Swift", target: "https://swiftlang.cn")
    .linkStyle(.button)

Divider()

Image("logo.jpg")
    .accessibilityLabel("The Swift logo.")
    .padding()

但它也包含一系列更高级的控件,例如下拉按钮

Dropdown("Click Me") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Divider()
    Text("Or you can just…")
    Link("Go back home", target: "/")
}
.role(.primary)

A dropdown button showing links, a divider, and some text.

它包括手风琴,可以根据所选内容显示或隐藏项目

Accordion {
    Item("First", startsOpen: true) {
        Text("This item will start open by default.")
    }

    Item("Second") {
        Text("This is the second accordion item.")
    }

    Item("Third") {
        Text("This is the third accordion item.")
    }
}
.openMode(.individual)

An accordion of three items, where the first one is open.

它具有十几种语言的自动代码语法高亮显示

CodeBlock(language: "swift", """
struct ContentView: View {
    var body: some View {
        Text("Hello, Swift!")
    }
}
""")

Swift code with syntax highlighting.

此外还有轮播图、徽章、警报、表格等等。

有一个单独的仓库名为 IgniteSamples,它为 Ignite 使用的各种协议、元素和修饰符提供了示例代码。

如果您正在寻找帮助您入门的代码,那是最好的地方 – 您可以构建该网站并在本地运行它,复制并粘贴您想尝试的任何代码。

文件夹结构

Ignite 站点只是 Swift 包,但它们使用特定的文件夹结构来帮助有效地构建您的站点。

此文件夹结构已在 Ignite Starter Template 仓库中就位,我建议您从那里开始。

创建布局以渲染 Markdown 文件

将 Markdown 文件添加到 Content 将把它们渲染为 HTML 页面,并将其包含在 Build 中,并带有各自的文件夹结构,减去 Content 部分。

例如,将一个名为 apps.md 的新文件添加到 Content 意味着具有以下文件夹结构

├── Content
│   └── apps.md

它会在 Build 结构中产生以下结果

├── Build
│   ├── …
│   ├── apps
│   │   └── index.html
│   ├── …

要使此操作生效,前提条件是需要有一个可用于渲染您的内容的布局。 如果您没有有效的布局,Ignite 将发出警告,提示“您的站点必须至少提供一个布局才能渲染 Markdown。”

您可以通过使类型符合 ContentLayout 协议来创建自定义内容布局,这将自动获得一个 content 属性来访问它正在显示的内容。例如

import Foundation
import Ignite

struct CustomContentLayout: ContentLayout {
    var body: some HTML {
        Text(content.title)
            .font(.title1)

        if let image = content.image {
            Image(image, description: content.imageDescription)
                .resizable()
                .cornerRadius(20)
                .frame(maxHeight: 300)
        }

        if content.hasTags {
            Section {
                Text("Tagged with: \(content.tags.joined(separator: ", "))")

                Text("\(content.estimatedWordCount) words; \(content.estimatedReadingMinutes) minutes to read.")
            }
        }

        Text(content.body)
    }
}

一旦您定义了自定义布局,您应该将其添加到您的 Site 结构体中。这可以通过将这个新布局添加到站点的 layouts 属性来完成,如下所示

struct ExampleSite: Site {    
    var name = "Hello World"
    var url = URL(static: "https://www.example.com")

    var homePage = Home()
    var layout = MyLayout()

    /* This part adds the custom layout */
    var layouts: [any ContentLayout] {
        CustomContentLayout()
    }
}

Site 协议为大多数属性提供了合理的默认值,使您可以专注于仅实现您的站点需要的自定义项。如上所示,只有少数属性(如 nameurlhomePagelayout)需要显式实现。

使用命令行工具

一旦您从此仓库安装了 Ignite 命令行工具,您就可以通过多种方式使用它。

首先,您可以像这样创建新站点

ignite new YourSite

完成后,它将告诉您用于在 Xcode 中打开新站点进行编辑的命令

cd YourSite
open Package.swift

提示

如果您想使用 Xcode 构建,请转到“Product”菜单并选择“Destination”>“My Mac”。

回到您的终端窗口,一旦您运行了 cd 命令,您终端的当前工作目录就是您网站的目录。这意味着您可以运行以下命令来构建您的站点,而不是使用 Xcode

ignite build

这会将您的所有 Swift 代码转换为 Build 文件夹中的 HTML。

您也可以运行此命令

ignite run --preview

这将启动一个本地 Web 服务器,您应该使用它来预览您的网站,并在您的浏览器中打开它。如果您正在 Xcode 中工作,您可以继续像往常一样执行构建,然后刷新浏览器以查看您的更改。

提示

Ignite 命令行工具具有各种可用的配置选项。运行 ignite help 以获得一般帮助,或在子命令前添加 help 以获得更多详细信息,例如 ignite help run

使用 Ignite 构建的网站

网站 仓库
jcalderita 作品集 GitHub
Fotogroep de Gender GitHub
sookim-1 的 T.W.L GitHub

贡献

我欢迎所有贡献,无论是添加新测试、修复现有代码、添加注释还是改进此 README – 欢迎所有人!

鸣谢

Ignite 是一个开源项目,有许多贡献者,包括 Paul Hudson、JP Toro、Henrik Christensen、Michael Freiwald 和 Jobert Sá。

欢迎所有贡献,但请确保您遵守 行为准则

许可证

MIT 许可证。

版权所有 (c) 2024 Paul Hudson。

特此免费授予任何人获得本软件及相关文档文件(“软件”)副本的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售本软件副本的权利,并允许向其提供本软件的人员这样做,但须符合以下条件

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

本软件按“原样”提供,不提供任何形式的明示或暗示的保证,包括但不限于适销性、特定用途的适用性和非侵权性的保证。在任何情况下,作者或版权持有人均不对任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权行为或其他方面,由本软件或本软件的使用或其他交易引起、产生或与之相关。

Ignite 最初由 Paul Hudson 创建,他在 Hacking with Swift 上编写免费的 Swift 教程。它在 MIT 许可证下可用,该许可证允许商业用途、修改、分发和私人用途。

Hacking with Swift+ logo

 

Hacking with Swift logo
一个 Hacking with Swift 项目