1. 什么是 metalsmith-start
metalsmith-start 是一个基于 Metalsmith 的简化版脚手架。Metalsmith 是一个静态网站生成器，但是学习曲线相对较高，使用起来相对繁琐。而 metalsmith-start 则是在 Metalsmith 基础上进行了二次封装，可以更加方便地进行静态网站生成。
2. metalsmith-start 的安装和使用
2.1 安装 metalsmith-start
metalsmith-start 是一个 npm 包，可以直接通过 npm 安装。
npm install -g metalsmith-start
2.2 使用 metalsmith-start
首先需要在命令行中进入要生成静态网站的目录，并执行以下命令。
metalsmith-start
执行该命令后，metalsmith-start 会在当前目录下创建一个项目，包含以下文件。
- build.js
- src/
- css/
- js/
- layouts/
- pages/其中，src 目录是源码目录，包含 css、js、layouts、pages 四个子目录，对应着样式文件、脚本文件、页面布局、页面内容四个方面。build.js 则是生成脚本，可以通过执行该脚本来生成静态网站。
2.3 模板语法
metalsmith-start 使用 handlebars 模板语法来生成静态网站。handlebars 是一种轻量级的模板引擎，可以根据设置的数据来生成页面内容。
使用 handlebars 语法的模板文件保存在 src/layouts 和 src/pages 目录下，并以.hbs 后缀命名。使用双括号（{{}}）表示要插入的数据，使用三个大括号（{{{}}}}）表示要插入的 HTML 内容。
以下是一个简单的示例，演示如何使用 handlebars 语法来生成一个页面。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
-------
------
------------------
---- ----------------
-------------
------
-------
-------2.4 配置文件
metalsmith-start 的配置文件是一个 JSON 文件，保存在当前项目目录下的 metalsmith.json 文件中。该文件用于定义生成静态网站的一些参数，比如页面布局、输出目录等。
以下是一个示例配置文件。
-- -------------------- ---- -------
-
----------- -
-------- --- -----
--
------ -
---------- --------------
-------- ------------
------ ----------
----- --------
--
------- --------
--------- -
-----------
-
-其中，metadata 属性用于设置生成的静态网站标题。src 属性则是源码目录的设置。dest 则表示生成静态网站的输出目录。ignore 属性则是用于设置在生成过程中需要忽略的文件。
2.5 示例
以下是一个简单的示例，演示如何使用 metalsmith-start 生成一个静态网站。
2.5.1 新建项目
首先，在命令行中进入一个空目录，执行如下命令。
metalsmith-start
执行该命令后，会在当前目录下生成一个新的项目。
2.5.2 修改布局文件
进入 src/layouts 目录，新建一个 base.hbs 文件，并输入以下内容。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
----- ---------------- ----------------------
-------
------
--------
------------------
---------
-----
----
------- -----
------ ---------------------------------
---------
-----
------
---- ----------------
-------------
------
--------
---------- -- --------------------
---------
-------
-------该文件定义了网站的基础布局，包括头部、导航栏、内容区域和尾部。
2.5.3 新建页面文件
进入 src/pages 目录，新建一个 index.hbs 文件，并输入以下内容。
-- -------------------- ---- -------
---
------- --------
------ ----
----
- ------ ----
---- -
- ------ -----
---- -----------
---
----------- -- -- ------------
------- -- - ---- ------- --------- -- ---------------------该文件定义了网站的首页内容。通过在文件头部使用 YAML 区块语法，可以设置页面的元数据，比如页面标题和导航栏选项。
2.5.4 生成静态网站
执行以下命令，生成静态网站。
node build.js
执行该命令后，会在项目的 build 目录下生成静态网站。
2.5.5 预览网站
进入 build 目录，使用任意一种方法预览生成的静态网站。
3. 结语
通过本教程，你已经学会了如何使用 metalsmith-start 来生成静态网站。metalsmith-start 提供了一种简洁、高效的方式来创建静态网站，让你能够更加便捷地构建自己的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61127