在前端开发中，经常需要把数据渲染到 HTML 模板中。Twig 是一种现代化的模板语言，Metalsmith 是一个静态网站生成器，两者结合使用可以方便地生成静态网站。而 npm 包 metalsmith-twig-transform 可以将 Twig 模板渲染为 HTML 页面。本文将介绍如何使用 metalsmith-twig-transform。
安装
使用 npm 安装 metalsmith-twig-transform：
npm install metalsmith-twig-transform --save
然后在项目中引入 metalsmith-twig-transform。
使用
metalsmith-twig-transform 的使用需要先了解 metalsmith 的使用方法。
示例项目结构
假设我们已经有一个简单的静态网站项目，并且项目结构如下：
- src/ - index.md - about.md - layouts/ - default.twig - page.twig - build.js
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。
运行这个脚本：
node build.js
执行后，会在项目目录下生成一个名为 build/ 的文件夹，里面包含了生成的 HTML 文件。
metalsmith-twig-transform 配置项
engineOptions：Twig 引擎选项，详情可以参考 Twig 文档。
布局
使用 metalsmith-twig-transform 生成的 HTML 默认使用布局。在示例项目结构中，布局由 src/layouts/default.twig 和 src/layouts/page.twig 组成。
变量
在 Markdown 文件中，可以使用 YAML 前置数据来设定变量：
--- title: about layout: page ---
title 和 layout 分别表示页面的标题和布局。
在 Twig 模板中，可以使用这些变量：
<h1>{{ title }}</h1> {% block content %} {% endblock %}
变量的值可以是字符串、数字、数组、字典、函数等。
示例
src/index.md 内容：
--- title: Home layout: page --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ex a elementum bibendum.
src/about.md 内容：
--- title: About layout: page --- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
src/layouts/default.twig 内容：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----- ---------- ------- ------ -- ----- ------- -- -- -------- -- ------- -------展开代码
src/layouts/page.twig 内容：
{% extends 'default.twig' %} {% block content %} <article> <h1>{{ title }}</h1> {{ content | raw }} </article> {% endblock %}
运行 build.js，生成的 HTML 会加入默认布局和页面布局，效果如下：
build/index.html 内容：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------- ------- ------ --------- ------------- -------- ----- ----- --- ----- ----------- ---------- ----- --- ----------- -- - --------- ------------- ---------- ------- -------展开代码
build/about.html 内容：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------------- ------- ------ --------- -------------- ------ -- ------------ ---- ----- ---- ----- ----- --- ---------- ----------- ---------- --------------- ---------- ------- -------展开代码
总结
使用 metalsmith-twig-transform，可以方便地将 Twig 模板渲染为 HTML 页面。在使用的过程中，需要注意配置项及布局和变量的使用。这个工具的学习和使用，对静态网站的生成有较大的指导和帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158135
