前言
Hexo 是一个基于 Node.js 的静态博客框架，通过 Markdown 编写博客内容，再由 Hexo 生成 HTML 静态页面，方便快捷。而 hexo-generator-index 插件则是 Hexo 中默认的生成主页的插件，但默认插件的生成方式限制了我们自定义主页的布局和样式。因此，我们需要用到 hexo-generator-index2-customized 插件，它可以让我们自定义主页的样式和布局。
安装 hexo-generator-index2-customized
进入你的 Hexo 项目文件夹，打开终端（Terminal），输入以下命令：
npm install hexo-generator-index2-customized --save
等待安装完成后，在 Hexo 项目的 _config.yml 文件中新增以下代码：
index_generator:
path: ''
per_page: 10
order_by: -date
include_drafts: false
hexo_generator_index2_customized:
enable: true
template: index配置 hexo-generator-index2-customized
在上述配置中，我们开启了 hexo-generator-index2-customized 插件，并将模板文件设为 index，下一步就是编辑 index 模板文件，这里我们使用 EJS 模板。
在 source 目录下创建 index.ejs 文件，编辑以下代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------ ----------
-------
------
--------
------- ------------ -------
---------
------
---- ------------------
-- ---------------------------------- --
---------
------- ---------- -------
------ ------------ ------
------ -------------------------------------- ------
-- --------- ----------- ----- --------- ------------
----------
-- --- --
------
-------
-------
-------在 <main> 标签中，我们展示了博客的标题、摘要、发布日期和阅读全文链接。这里使用了 moment.js 库格式化日期，需要在模板文件中使用前导命令先引入：
<% var moment = require('moment') %>生成主页
完成模板文件和配置后，我们需要重新生成主页，运行以下命令：
hexo generate
生成完成后，进入 public 目录，可以看到生成了一个 index.html 文件，这就是我们自定义的主页。
结语
hexo-generator-index2-customized 插件的使用可以让我们更自由地定制博客主页，但更深入的使用需要熟悉 EJS 模板和 Hexo 的 API，希望本篇文章可以为读者提供一些指导。完整代码可以在我的 Github 上获取：[https://github.com/YOUR-USERNAME/YOUR-REPOSITORY]
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b0b