使用hygen快速创建文章模板

hygen 是一个简单易用拓展性好的代码模板生成器，Docusaurus 中并没有提供这样一种快速新建文章的方法，而我们的文章页面往往会有一些固定的头部字段或自定义的布局组件，每次新建的时候都手动生成太麻烦了，所以引入了 hygen 就很好的解决了这个烦恼~

hygen 快速上手#

hygen 使用很简单：

第一步，安装：cnpm i --save hygen

第二步，模板创建：

可以使用 hygen 的命令：hygen init self 生成默认模板，也可以自定义模板。

hygen 的模板需要定义在 _templates 文件夹下，_templates 文件夹下的目录会是 hygen 命令中的一部分，比如我们的文件目录为：

my-website├── _templates│   ├── blog│   │   └── new│   │   │   └── index.ejs.t│   └── doc│   │   └── new│   │   │   └── index.ejs.t

那么我们创建一个新的 blog 页面的话命令就是：hygen blog new ...

命令中的 ... 是我们给新页面中传递的一些参数，比如文件名，文章标题等等。

具体的话，比如：

_tmplates/blog/new/index.ejs.t

---to: blog/<%= h.date() %>-<%= name %>.md------slug: <%= name %>title: <%= title %>author: yleauthor_url: https://yleave.top/author_image_url: https://gitee.com/yleave/imagehost/raw/master/other/zzm3.jpgdescription: 请输入描述tags: [前端, React]draft: true---
<!-- truncate -->

那么上面的 <%= %> 中的变量如 name 和 title 就是我们在命令中要传递的参数，h.date() 则是 hygen 的自定义拓展功能提供的参数。

因此，我们新建一篇文章的话命令就是：hygen blog new --name "newBlog" --title "使用hygen创建新页面"

另外，上面的模板中第一行 to: blog/<%= h.date() %>-<%= name %>.md 表示创建的文件会保存在 blog/ 文件夹下，文件名则是 date-name.md

hygen 拓展功能与辅助对象#

hygen 提供了一些默认的辅助函数和自定义辅助函数的拓展机制，让我们能够更加灵活的使用 hygen 来生成想要的模板。

在模板文件中，辅助函数和自定义函数通过 h 对象来调用，如前面创建的模板中的 h.date() 就是调用了我们自定义的 date 函数来生成一个日期格式的字符串。

自定义辅助函数#

在主目录下创建一个 .hygen.js 文件，我们的自定义辅助函数就写在这个函数中，比如我们上面用到的 date 函数：

.hygen.js

// hygen 生成器辅助函数库module.exports = {  helpers: {    // 用于生成 yyyy-MM-dd 文章标题的日期部分    date: () => new Date().toISOString().slice(0, 10)  }};

调用方式就是 <%= h.date() %>

自带的辅助函数#

hygen 中提供了丰富的辅助函数，调用方法为 <%= h.库名.方法名(...参数) %>

如 h.inflection.camelize(name) : 生成驼峰式变量名

或是 h.changeCase.camel(name) : 生成驼峰式变量名

功能重复了，正常，因为 hygen 也是调用第三方的库来实现这些辅助功能的。

更多辅助函数可看链接：inflection 和 changeCase

局部变量#

我们通过命令行来传递变量给模板，这些变量在我们的模板文件中就是局部变量，可以使用 locals 对象来调用，即对于我们传入的 name 参数，我们可以这样来调用：

name: <%= name %>
name: <%= locals.name %>

那么通过这个 locals 对象，配合上 EJS 语法我们就能进行更加灵活的模板编写，如：

<% if(locals.name){ -%>    message: <%= name %><% } -%>

hygen 快速上手#

hygen 拓展功能与辅助对象#

自定义辅助函数#

自带的辅助函数#

局部变量#

更多功能#