如何在 Hexo 创建一个独立页面

写博客的时候,通常会有一个一般需要,想要自定义一个页面(例如404页面/AboutMe)。如果你使用的是 Hexo,其实也非常容易实现这一点。以 bulxo 主题为例进行说明:

1.修改导航

首先考虑将页面入口挂在哪里的问题,如果想创建 404 这样的页面,可以忽略掉这一步。 就 bulxo 而言,有两种样式二选一:

(1).修改 _config.menu 修改 theme/_config 下的 menu,添加 page_name 即可。与 menu 下的其他页面一起显示在 Find 下拉框中。

(2).修改 header.ejs 要是想和 Home/Find 等一起挂在博客顶部的 navbar 上,可修改 theme/bulxo/layout/_partial/header.ejs,参照代码中的 navbar-item (或者类似 class) 标签修改即可。 以 bulxo 为例:

<a class="navbar-item" href="/page_name"> page_name </a>  

要是想添加其他样式,可参考 Bulma 官网 文档。

2.创建页面

(1).先通过 Hexo 命令创建 page :

hexo new page "page_name"

(2).修改 source/page_name/index.md 首先建议将 .md 改成 .html,保证样式正常渲染。 对于 index.html 的改写,这里也有两种方法二选一:

  • 如果你想要一个完全空白的页面,在 index.html 最上方修改为:
  • ---
    layout: false
    ---
    

    那么,theme 下的 page.ejs 就会失效。接着写上 html 代码即可,但是有一个不方便的地方就是 hexo 给的一系列函数没有办法使用(例如 post.date, post.tags 等),以及你需要从 head 开始写到 foot,也是挺麻烦的。

  • 为了避免重复劳动,这里推荐第二种方法:修改 theme 下的 page.ejs
  • 找到 theme/bulxo/layout/page.ejs,这是一个定义 page 的文件,可以删除一些多余的代码,只留下 header 和 footer,这样可以得到一个只有顶部和底部样式的页面。(bulxo已改好)

    对于 page_name/index.html,只需写入中间样式即可。