简介
Hexo 是一款基于 Node.js 的静态博客生成器,而 hexo-renderer-etpl 是一个 Hexo 插件,用于将 etpl 模板语言转换为 HTML。etpl 是百度公司开源的一个高效的 JavaScript 模板引擎,能够在 Node.js 环境下使用。
本篇文章将详细讲解 hexo-renderer-etpl 的使用方法及其相关技术细节,以及如何使用它优化 Hexo 博客的生成效率。
安装 hexo-renderer-etpl
hexo-renderer-etpl 可以通过 npm 安装,使用下面的命令即可:
npm install hexo-renderer-etpl --save
配置 hexo-renderer-etpl
在 Hexo 配置文件 _config.yml
中添加以下内容:
etpl: engine: compile: {cache: true} suffix: '.tpl' cjs: true
其中 cache
参数用于开启 etpl 的缓存功能,提升渲染速度。suffix
参数则用于设置 etpl 模板文件的后缀名,cjs
参数用于将 etpl 编译成 CommonJS 模块。
使用 hexo-renderer-etpl
在 Hexo 博客的文章或页面中,你可以使用 etpl 语法写入模板,例如:
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----------------------- ------- ------ ----------------- ----------------- ------- -------展开代码
在 Hexo 博客的文章或页面的 Front-matter 中添加 layout: page
,并在 layout
目录下新建一个 page.tpl
文件,内容如下:
<% template('path/to/your/template.tpl', locals) %>
其中,path/to/your/template.tpl
为你编写的 etpl 模板文件的路径,locals
则为传入模板的数据对象。
让 Hexo 优雅地渲染 etpl 模板
在上述的写法中,我们需要手动指定 etpl 模板文件的路径,这显然不是十分优雅。为了让 Hexo 能够自动识别并渲染 etpl 模板,我们需要对结构进行一些调整。
在 Hexo 博客的根目录下新建
_layout/etpl.ejs
文件,内容如下:<%- template(page.layout + '.tpl', locals) %>
修改 Hexo 博客的文章或页面的 Front-matter,去掉
layout: page
,改为layout: etpl
。在 Hexo 博客的
source/_posts
或source/_pages
目录下创建对应的.tpl
文件,文件内容按 etpl 语法编写即可。
现在,Hexo 就能够顺利地识别并渲染 etpl 模板了。当我们在 Markdown 文件中编写文章或页面时,只需要在 Front-matter 中指定 layout: etpl
即可。
示例代码
etpl 模板文件
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----------------------- ------- ------ ----------------- ----------------- ------- -------展开代码
Hexo 页面
title: Hexo 博客 layout: etpl ---
Hexo 配置文件
etpl: engine: compile: {cache: true} suffix: '.tpl' cjs: true
etpl 渲染结果
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----------- ---------- ------- ------ -------- ------- ------- ---- ------- ------- -------展开代码
结语
本文详细介绍了 npm 包 hexo-renderer-etpl 的使用方法及技术细节,以及如何使用它优化 Hexo 博客的生成效率。通过使用 etpl 模板语言,我们可以更加方便地编写模板文件,并且能够有效地提升 Hexo 博客的生成速度。希望这篇文章对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600557fb81e8991b448d5134