目前博客使用的主题,黑白色调极简风格,记录下使用和配置过程。
一、Next主题
PS: 这个使用文档是来自另外一个也叫Next的项目(项目地址),貌似是一个老版本的Next项目(因为使用过程中会提示用最新的官网地址),但是项目依然在更新,没搞明白和官网那个项目什么关系。但是相差不大,且这个是中文文档,使用更加友好些。
二、基本应用
在 [release](https://github.com/theme-next/hexo-theme-next/releases)
页中下载最新版,解压后将文件夹重命名为 next
放到 themes
目录下,在站点设置文件_config.yml
中启用next
主题即可,如下:
1 | ## Themes: https://hexo.io/themes/ |
三、设置与修改主题样式
如无特殊说明,下面的修改均是在Next主题设置文件_config.yml
中进行的。
3.1 启用Mist样式方案
1 | # Schemes |
3.2 修改Logo样式
不太喜欢Mist样式中Logo处上下的两条横线,所以将其去掉,方法是在文件 next\source\css\_schemes\Mist\_header.styl
中,清空 .logo-line-before
logo-line-after
的样式内容即可。
3.3 启用菜单栏中相关项
顶部菜单中启用 主页、关于、标签、分类目录、归档
1 | menu: |
此时如果运行项目,点击 关于 会提示1
Cannot GET /blog/about/
点击 标签、分类目录 也会有同样问题,解决方法是需要为之添加页面。
3.4 添加标签页 Tags page
添加一个标签页面,里面包含网站中的所有标签。
- 创建一个名为 tags 页面
1 | hexo new page "tags" |
- 编辑标签页, 设置页面类型为tags.
1 | title: 所有标签 |
- 添加 tags 到主题配置文件 _config.yml 里:
1
2
3
4menu:
home: /
archives: /archives
tags: /tags
3.5 添加所有分类页 Tags page
添加一个分类页面,里面包含您网站中的所有分类。
创建一个名为 categories 页面
1
hexo new page "categories"
编辑分类页, 设置页面类型为 categories.
1 | title: All categories |
- 添加 categories 到主题配置文件 _config.yml 里:
1 | menu: |
四、第三方服务
本部分的参考这里的教程第三方服务集成
4.1 添加评论系统
Next主题提供多种评论系统,这里使用的是Disqus,登录该网站Disqus,点击 Add Disqus to your site
,接着会让你输入一个Disqus的标识符,其实就是个二级域名,我这里输入closetao
,之后默认往下即可。最后在Next主题的配置文件中设置如下即可:
1 | # Disqus |
补充下,多说、网易云跟帖已经停止服务,来源
4.2 访问统计
Next主题支持多种访问统计,这里使用不蒜子,教程在这里。好处是配置最简单,简单到只需要在主题配置文件中将该项统计功能设为true即可,且同时支持站点访问统计和页面页面。
1 | busuanzi_count: |
4.3 搜索服务
NexT 支持集成 Swiftype、 微搜索(已停止服务)、Local Search 和 Algolia。这里使用Local Search。
- 安装
hexo-generator-searchdb
,在站点的根目录下执行以下命令:
1 | $ npm install hexo-generator-searchdb --save |
- 编辑
站点配置文件
,新增以下内容到任意位置:
1 | search: |
- 编辑 主题配置文件,启用本地搜索功能:
1 | # Local search |