Metalsmith 教程：入门与配置

Metalsmith 教程：入门与配置

metalsmithAn extremely simple, pluggable static site generator.项目地址:https://gitcode.com/gh_mirrors/me/metalsmith

本教程将引导您了解 metalsmith 开源项目，它是一个简单的静态站点生成器，用于构建网站和博客。我们将讨论其目录结构、启动文件以及配置文件。

1. 项目目录结构及介绍

在初始化的 metalsmith 工程中，典型的目录结构如下：

.
├── build/               # 生成的静态文件输出目录
├── src/                 # 源文件目录，包括您的 Markdown、HTML 和其他资源
│   ├── _includes/       # HTML 片段模板
│   ├── assets/          # 图片、CSS、JavaScript 等静态资源
│   └── posts/           # 博客文章或其他内容的 Markdown 文件
├── index.html           # 可选的入口 HTML 文件（可以是模板）
├── package.json         # npm 包定义文件
└── metalsmith.json      # Metalsmith 配置文件

• build/：这是默认的输出目录，包含了生成的静态页面。
• src/：存储所有源文件，如 Markdown、HTML 和其他资源。
  • _includes/：存放 HTML 片段，可被其他页面引入。
  • assets/：放置图片、CSS、JavaScript 等非文本资源。
  • posts/：存放博客文章或其他长格式内容的 Markdown 文件。
• index.html：如果您想自定义首页，可以在这里创建一个模板文件。
• package.json：记录了项目依赖和脚本命令。
• metalsmith.json：Metalsmith 的主配置文件，定义如何处理源文件。

2. 项目的启动文件介绍

在 metalsmith 中，没有特定的“启动文件”。通常，你将在 package.json 文件中设置脚本来运行构建过程。例如：

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "build": "metalsmith"
  },
  "dependencies": {
    "metalsmith": "^x.x.x", // 安装相应版本
    "metalsmith-markdown": "^x.x.x", // 示例：用于解析 Markdown 文件
    "metalsmith-in-place": "^x.x.x" // 示例：用于在原地编辑 HTML 文件
  }
}

运行 npm run build 将执行这些脚本，从而触发 metalsmith 构建流程。

3. 项目的配置文件介绍

metalsmith.json 是项目的配置中心，定义了 Metalsmith 如何转换和组织源文件。以下是一个基础配置示例：

{
  "source": "./src",   // 指定源文件夹
  "destination": "./build",   // 输出文件夹
  "metadata": { "siteTitle": "My Blog" },  // 全局元数据
  "plugins": [
    "metalsmith-markdown",  // 使用 markdown 插件
    ["metalsmith-in-place", { "pattern": "*.html" }]  // 对 HTML 进行原地修改
  ]
}

• source：设定输入文件夹路径，这里指定了 ./src。
• destination：指定输出文件夹，构建完成后静态文件会放在这里。
• metadata：可以设置全局的元数据，这些数据可以在模板中访问。
• plugins：Metalsmith 使用插件系统扩展功能，这里是插件列表，如转换 Markdown 或者处理 HTML。

根据需求，您可以添加更多插件以支持如编译模板语言、优化图片等额外功能。

完成这些步骤后，您就可以利用 Metalsmith 创建自己的静态网站了。了解更多关于 Metalsmith 的信息，可访问其 GitHub 页面：https://github.com/metalsmith/metalsmith。祝您构建愉快！

metalsmithAn extremely simple, pluggable static site generator.项目地址:https://gitcode.com/gh_mirrors/me/metalsmith