简介
systatic 是一个基于 Node.js 的静态站点生成器，能够将 Markdown 文件转换为 HTML，同时支持模板渲染、自定义路由等功能。它是一个轻量、易用的工具，适用于个人博客、技术文档等场景。
安装
使用 npm 可以轻松安装：
--- - -- --------
基本使用
创建项目
在命令行中执行以下命令，创建一个基于 systatic 的项目：
-------- ---- ------ -- ------
执行完 init 命令后，系统会自动生成目录结构和配置文件：
------- --- ------ -- ------ --- --- -- -- -------- -- - --- --- - --- ---- - --- ------ --- --------- -- ------ --- ------------ -- ----
编写 Markdown 文件
在 src 目录下创建 Markdown 文件，比如我创建了一个文章 hello-world.md：
- ----- ----- -----------------
渲染 Markdown 文件
执行以下命令，将 Markdown 文件转换为 HTML：
-------- -----
执行完 build 命令后，系统会自动生成静态 HTML 文件：
------- --- ------ - --- ---------------- --- --- - --- -------------- ---
可以看到，系统自动将 Markdown 文件转换为了 HTML 文件并存放在 public 目录中。
预览站点
执行以下命令，可以在本地启动一个 HTTP 服务器并预览站点：
-------- -----
在浏览器中打开 http://localhost:8080，就可以看到当前站点的首页了。
模板
systatic 支持使用模板渲染 Markdown 文件。用户可以在 templates 目录下编写模板文件，然后在 systatic.yml 中配置。
创建模板文件
在 templates 目录下创建一个文件 default.html，作为默认模板：
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
-------
-------配置模板
在 systatic.yml 配置文件中，添加如下配置：
--------- ------- -------- ----- --------- -------- ------------
其中，engine 表示模板引擎，此处是使用 nunjucks；path 表示模板文件存放的目录；default 表示默认模板文件名。
使用模板
在 Markdown 文件中，可以使用 YAML Front Matter 来定义一些元数据，比如文章的标题：
--- ------ ----- ----- --- - ----- ----- -----------------
然后，我们可以在模板中使用这些元数据：
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
-------
-------这样，生成的 HTML 文件就会自动使用模板了。
自定义路由
systatic 支持自定义路由，即根据 URL 路径来生成 HTML 文件。比如我们可以将 /doc 路径下的 Markdown 文件编译为 HTML 文件，然后在浏览器中访问 /doc/hello-world.html 来查看文章。
配置路由
在 systatic.yml 配置文件中，添加如下配置：
------- ---- ------- ------- ----------
其中，router 表示自定义路由配置，doc 和 weekly 是两个路径名，对应的值是对应的 Markdown 文件存放目录。
编写 Markdown 文件
在 src/doc 目录下创建一个 Markdown 文件 hello-world.md：
--- ------ ----- ----- --- - ----- ----- ---------
生成 HTML 文件
执行命令 systatic build，就可以在 public 目录下看到生成的 HTML 文件 hello-world.html。
预览站点
执行命令 systatic serve，然后在浏览器中访问 http://localhost:8080/doc/hello-world.html 就可以查看文章了。
总结
systatic 是一个功能强大、易用的静态站点生成器。通过学习本文，读者可以掌握基本的使用方法，并了解到如何使用模板、自定义路由等高级功能。systatic 的文档也非常详尽，读者可以前往官网查看更多信息。
示例代码
本文使用的示例代码已经放在 Github 上，请前往 https://github.com/sunshineoflife/systatic-tutorial 下载或查看。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/75591