Next主题样式的使用

目前博客使用的主题,黑白色调极简风格,记录下使用和配置过程。

一、Next主题

PS: 这个使用文档是来自另外一个也叫Next的项目(项目地址),貌似是一个老版本的Next项目(因为使用过程中会提示用最新的官网地址),但是项目依然在更新,没搞明白和官网那个项目什么关系。但是相差不大,且这个是中文文档,使用更加友好些。

二、基本应用

[release](https://github.com/theme-next/hexo-theme-next/releases) 页中下载最新版,解压后将文件夹重命名为 next 放到 themes 目录下,在站点设置文件_config.yml中启用next主题即可,如下:

1
2
## Themes: https://hexo.io/themes/
theme: next

三、设置与修改主题样式

如无特殊说明,下面的修改均是在Next主题设置文件_config.yml中进行的。

3.1 启用Mist样式方案

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

3.2 修改Logo样式

不太喜欢Mist样式中Logo处上下的两条横线,所以将其去掉,方法是在文件 next\source\css\_schemes\Mist\_header.styl 中,清空 .logo-line-before logo-line-after 的样式内容即可。

3.3 启用菜单栏中相关项

顶部菜单中启用 主页、关于、标签、分类目录、归档

1
2
3
4
5
6
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive

此时如果运行项目,点击 关于 会提示

1
Cannot GET /blog/about/

点击 标签、分类目录 也会有同样问题,解决方法是需要为之添加页面。

3.4 添加标签页 Tags page

添加一个标签页面,里面包含网站中的所有标签。

  • 创建一个名为 tags 页面
1
hexo new page "tags"
  • 编辑标签页, 设置页面类型为tags.
1
2
title: 所有标签
type: "tags"
  • 添加 tags 到主题配置文件 _config.yml 里:
    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    tags: /tags

3.5 添加所有分类页 Tags page

添加一个分类页面,里面包含您网站中的所有分类。

  • 创建一个名为 categories 页面

    1
    hexo new page "categories"
  • 编辑分类页, 设置页面类型为 categories.

1
2
title: All categories
type: "categories"
  • 添加 categories 到主题配置文件 _config.yml 里:
1
2
3
4
menu:
home: /
archives: /archives
categories: /categories

四、第三方服务

本部分的参考这里的教程第三方服务集成

4.1 添加评论系统

Next主题提供多种评论系统,这里使用的是Disqus,登录该网站Disqus,点击 Add Disqus to your site,接着会让你输入一个Disqus的标识符,其实就是个二级域名,我这里输入closetao,之后默认往下即可。最后在Next主题的配置文件中设置如下即可:

1
2
3
4
# Disqus
disqus:
enable: true
shortname: closetao

补充下,多说、网易云跟帖已经停止服务,来源

4.2 访问统计

Next主题支持多种访问统计,这里使用不蒜子,教程在这里。好处是配置最简单,简单到只需要在主题配置文件中将该项统计功能设为true即可,且同时支持站点访问统计和页面页面。

1
2
busuanzi_count:
enable: true

4.3 搜索服务

NexT 支持集成 Swiftype、 微搜索(已停止服务)、Local Search 和 Algolia。这里使用Local Search。

  • 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:
1
$ npm install hexo-generator-searchdb --save
  • 编辑 站点配置文件,新增以下内容到任意位置:
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
  • 编辑 主题配置文件,启用本地搜索功能:
1
2
3
# Local search
local_search:
enable: true