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” 上面即可显示脚注，借助的插件是：

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.这是一个脚注 ↩