在前端开发中，经常需要把数据渲染到 HTML 模板中。Twig 是一种现代化的模板语言，Metalsmith 是一个静态网站生成器，两者结合使用可以方便地生成静态网站。而 npm 包 metalsmith-twig-transform 可以将 Twig 模板渲染为 HTML 页面。本文将介绍如何使用 metalsmith-twig-transform。
安装
使用 npm 安装 metalsmith-twig-transform：
--- ------- ------------------------- ------
然后在项目中引入 metalsmith-twig-transform。
使用
metalsmith-twig-transform 的使用需要先了解 metalsmith 的使用方法。
示例项目结构
假设我们已经有一个简单的静态网站项目，并且项目结构如下：
- ----
- --------
- --------
- --------
- ------------
- ---------
- --------src/index.md：首页的内容，Markdown 格式。src/about.md：关于页面的内容，Markdown 格式。src/layouts/default.twig：默认布局，包含页面头部和底部的 HTML。src/layouts/page.twig：页面布局，包含默认布局和页面中间的内容。
使用 Metalsmith
使用 metalsmith 生成静态网站需要编写一个脚本，假设脚本为 build.js，内容如下：
----- ---------- - ---------------------
----- -------- - ------------------------------
----- ---- - ------------------------------------
---------------------
----------------
-----------
-------------- -
----------------- -----
-
---
--------------- ----- -
-- ----- -
----- ---
-
--注：示例中使用了 metalsmith-markdown 用于将 Markdown 文件转换为 HTML。
运行这个脚本：
---- --------
执行后，会在项目目录下生成一个名为 build/ 的文件夹，里面包含了生成的 HTML 文件。
metalsmith-twig-transform 配置项
engineOptions：Twig 引擎选项，详情可以参考 Twig 文档。
布局
使用 metalsmith-twig-transform 生成的 HTML 默认使用布局。在示例项目结构中，布局由 src/layouts/default.twig 和 src/layouts/page.twig 组成。
变量
在 Markdown 文件中，可以使用 YAML 前置数据来设定变量：
--- ------ ----- ------- ---- ---
title 和 layout 分别表示页面的标题和布局。
在 Twig 模板中，可以使用这些变量：
------ ----- ------- -- ----- ------- -- -- -------- --
变量的值可以是字符串、数字、数组、字典、函数等。
示例
src/index.md 内容：
--- ------ ---- ------- ---- --- ----- ----- ----- --- ----- ----------- ---------- ----- --- ----------- -- - --------- ---------
src/about.md 内容：
--- ------ ----- ------- ---- --- --- -- ------------ ---- ----- ---- ----- ----- --- ---------- ----------- ---------- -----------
src/layouts/default.twig 内容：
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----------
-------
------
-- ----- ------- --
-- -------- --
-------
-------src/layouts/page.twig 内容：
-- ------- -------------- --
-- ----- ------- --
---------
------ ----- -------
-- ------- - --- --
----------
-- -------- --运行 build.js，生成的 HTML 会加入默认布局和页面布局，效果如下：
build/index.html 内容：
--------- -----
----- ----------
------
----- ----------------
-------------------
-------
------
---------
-------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ----------- -- - --------- -------------
----------
-------
-------build/about.html 内容：
--------- -----
----- ----------
------
----- ----------------
--------------------
-------
------
---------
--------------
------ -- ------------ ---- ----- ---- ----- ----- --- ---------- ----------- ---------- ---------------
----------
-------
-------总结
使用 metalsmith-twig-transform，可以方便地将 Twig 模板渲染为 HTML 页面。在使用的过程中，需要注意配置项及布局和变量的使用。这个工具的学习和使用，对静态网站的生成有较大的指导和帮助作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/158135