hexo 自定义主题

hexo |

参考文章：http://shenzekun.cn/hexo%E7%9A%84next%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.html

NexT官方主题配置：https://theme-next.iissnan.com/theme-settings.html

第三方服务集成：http://theme-next.iissnan.com/third-party-services.html#comment-system

找到themes/next/_config.yml，打开

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags  //将注释去除掉
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

点开链接，提示 Cannot GET /tags/，不要慌，不能获取tags，创建一个就OK！

1
$ hexo new page 'name' # 我们这里要创建的是tags，所以这里name改为tags就好

在你的网站根目录下面的 source 文件夹会生成 tags 文件夹。

修改 tags 文件夹中的 index.md 文件，新增 type 属性，如下：

1
2
3
4
5
---
title: tags
date: 2018-09-27 11:56:43
type: tags
---

当你新建一篇博文的时候，增加上tags和categories属性值，就能在tags和categories界面检索到你的文章了。

文章链接格式修改

默认文章格式是: http://xxx.com/2015/07/06/your-title/ 的格式的,可以修改成 http://xxx.com/posts/programming/2016-03-18-hello-world.html 这样的格式

根目录下的 _config.yml 文件

1
permalink: posts/:category/:year-:month-:day-:title.html

修改文章底部的那个带#号的标签

改成下图

修改模板 /themes/next/layout/_macro/post.swig ，搜索 rel="tag"># ，将 # 换成 <i class="fa fa-tag"></i>

隐藏网页底部powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.swig,隐藏之间的代码即可，或者直接删除。

左侧侧边栏加上展开的分类

打开 themes/next/layout/_macro/sidebar.swig
添加内容

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

参考hexo API

添加自定义的css样式

themes\next\layout\_partials\head.swig

  • 添加样式支持
    为了不把原先文件搞得太乱，这里添加自己的样式文件
    在 themes\next\source\css 文件夹下，打开main.styl文件，在最后添加：
    1
    2
    3
    //My Layer
    //--------------------------------------------------
    @import "_my/style";

首页改成 archives

我是简单粗暴的将 themes\next\layout 下的 index.swig 的内容改掉，将 archive.swig 的文件内容复制了过来

搜索功能

安装hexo-generator-searchdb插件

1
npm install hexo-generator-searchdb --save

1
2
local_search:
  enable: true  #主题配置文件下，这里改成 true

首页阅读全文

1
2
3
auto_excerpt:
  enable: true #主题配置文件下，这里改成true
  length: 150

代码高亮

参考文章
参考文章

在 themes/next 目录下打开 _config.yml 配置文件，找到 highlight_theme 属性

这里呢可以配置的属性有normal | night | night eighties | night blue | night bright，你可以挨个试一试，看下效果，选择你喜欢的一个属性

光有这个配置还不行，在你的hexo/目录下_config.yml文件中中，找到，并设置如下

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true #修改为true
  tab_replace:

开启评论

在 themes/next 目录下打开 _config.yml 配置文件

1
2
3
4
disqus:
  enable: true #设置为 true
  shortname:
  count: true

添加评论

参考文章：https://blog.csdn.net/Calvin_zhou/article/details/78820718

文章添加阅读次数，访问量

参考文章

打开 \themes\next\ _config.yml 文件

1
2
3
4
5
6
7
8
9
10
11
busuanzi_count:
  enable: true #改为 true 开启
  site_uv: true #访问人数
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  site_pv: true #总访问量
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  page_pv: true #单篇文章浏览量
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer: