Hexo NexT 主题自定义优化

Hexo 是高效的静态站点生成框架,她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。在这篇文章中,假定你已经成功安装了 Hexo,并使用 Hexo 提供的命令创建了一个站点。

  • NexT 坚持将复杂的细节隐藏,提供尽量少并且简便的设置,保持最大限度的易用性。
  • 通过主题中的主题(亦称 Scheme),您可以方便地改变您博客的外观,同时几乎所有配置同样适用
  • 使用 第三方服务 来扩展站点的功能, NexT 支持多种常见第三方服务。
  • NexT 使用 Tomorrow 的代码高亮配色,只需要一行配置,即可选择您所喜爱的配色方案

基本配置

这里是官方的基础教程:http://theme-next.iissnan.com/getting-started.html

其中:多说要在 2017年6月关闭服务,所以就不要使用多说了。

阅读统计功能见:https://notes.wanghao.work/2015-10-21-为NexT主题添加文章阅读量统计功能.html#配置LeanCloud

Next 这个主题用的人很多,文档比较完善。其他问题可以参考:

自定义

侧边栏分类目录

\layout\_macro\sidebar.swig 文件,找到这段代码

1
2
3
4
5
6
7
8
{% if theme.rss %}
<div class="feed-link motion-element">
<a href="{{ url_for(theme.rss) }}" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
</div>
{% endif %}

下面加入下面的代码即可:

1
2
3
4
5
<div class="category-all-page">
<div class="category-all">
{{ list_categories({depth: 1}) }}
</div>
</div>

详细信息可以参考 Hexo 官方函数 https://hexo.io/zh-cn/docs/helpers.html#list-categories

脚注功能

示例[1]

把鼠标放到这个 “1” 上面即可显示脚注,借助的插件是:

npm install hexo-reference --save

这个插件默认使用的是一个 CDN 的CSS,我给改成本地的了,需要修改的是

node_modules\hexo-reference\index.js :

1
2
3
4
5
6
7
// Add CDN CSS resources
hexo.extend.filter.register('after_post_render', function(data) {
data.content =
util.htmlTag('link', {rel: 'stylesheet', type: 'text/css', href: '/css/lib/hint.min.css'}) +
data.content;
return data;
});

备案号

\layout\_partials\footer.swig 在合适的位置插入下面代码即可

1
2
3
<div class="powered-by">
<a href=http://www.miitbeian.gov.cn/>ICP备XXX号</a>
</div>

如果有其他问题可以与我联系。


  1. 1.这是一个脚注
如果你不是非常有钱,请不要捐赠,土豪随意
0%