Nunjucks 是一个高度可定制的模板引擎，基于 JavaScript 实现。Hexo 是一款快速、简洁且高效的静态博客框架。hexo-renderer-nunjucks 是一个 Hexo 的渲染器插件，它提供了 Nunjucks 模板引擎的支持。本文将介绍 hexo-renderer-nunjucks 的详细使用方法，并提供示例代码。
安装
首先，您需要安装 Hexo：
npm install -g hexo-cli
接着，安装 hexo-renderer-nunjucks：
npm install hexo-renderer-nunjucks --save
配置
在 Hexo 的 _config.yml 文件中配置 hexo-renderer-nunjucks：
# Extensions ## Plugins: https://hexo.io/plugins/ plugins: - hexo-renderer-nunjucks
使用
创建新页面
要使用 Nunjucks 渲染器渲染页面，您需要为其创建 .njk 后缀的文件。例如，要创建一个名为 about.njk 的页面，请在 Hexo 根目录下的 source 目录中创建一个名为 about.njk 的文件，并添加以下内容：
---
title: About
---
<h1>{{ page.title }}</h1>
<p>Welcome to my blog!</p>创建模板
您可以创建一个或多个 Nunjucks 模板，并在其中定义页面的结构和布局。要创建一个名为 layout.njk 的模板，请在 Hexo 根目录下的 themes/<your-theme>/layout 目录中创建一个名为 layout.njk 的文件，并添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ----- ---- -------- -- - -- ------------ ----------
-------
------
--------
------ -------- ---------- ------ ------------ -----------
-----
----
-- --- ---- -- ---------- --
-- -- ----------- --- ------ --
------ -------- ------------------ ------ ---------- -----------
-- ----- --
-- ------ --
-----
------
---------
------
-- ----- ------- ---- -------- --
-------
--------
------ -- -------------------- -- -- ------------- --
---------
-------
-------注意，此模板包含两个块：{% block title %}{% endblock %} 和 {% block content %}{% endblock %}。这些块允许您在页面中插入标题和内容。
继承模板
要使用 layout.njk 模板作为页面的基础布局，请在页面的开头添加以下内容：
--- layout: layout ---
渲染页面
最后，使用以下命令生成静态网站：
hexo generate
现在，您可以在 Hexo 根目录下的 public 目录中找到渲染后的网站文件。
结论
本文介绍了如何使用 hexo-renderer-nunjucks 插件将 Nunjucks 模板引擎集成到 Hexo 中。通过创建自定义页面和模板，您可以轻松地为您的网站添加自定义内容和布局。希望此教程能够帮助您快速上手 Nunjucks 和 Hexo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44651