Blog-NexT主题配置文件配置

发表于 更新于 分类于

本文整理了NexT主题下通过配置主题_config.yml进行的相关配置。本文之前是针对v5早期版本写的，现对部分内容进行更新，删除线部分都是针对v5版本的，如果您使的仍然是 v5 版本，请参考删除线内的内容或者折叠起来的内容。本文目前还未完全部的更新，所以存在部分内容仍然是针对旧版的 NexT 的情况。

修改配置文件

进入路径.\themes\next\，修改主题下的配置文件_config.yml

该方式是早期版本的修改配置文件方式。

需要注意的是，YAML语言对格式的要求较为严格，如generate时出错可以使用YAML parser for JavaScript-JS-YAML对自己的配置文件格式进行检查。或者可以查看YAML语言教程-阮一峰的网络日志了解相关语法。

选择外观

NexT主题提供了不同的外观，默认是Muse，本站为Gemini。找到如下Schemes字段，去掉想实现的外观前的注释号

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

菜单和小图标

菜单选项可以通过_config.yml中menu字段中的各项来控制，增加和删减菜单选项。菜单的小图标可以通过更改符号||后面的值来修改，后面的描述分别对应的是Font Awesome列出的小图标。

menu_icons字段控制是否显示菜单小图标，默认为false。badges字段控制是否显示菜单小图标上的数字，即统计量，默认为false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archives
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons. 
menu_icons:
  enable: true
  badges: true

站点小图标

修改站点小图标，默认为NexT图标，在Favicon & App Icon Generator可以上传自己的图片生成不同大小的图标。进入路径~~./themes/next/source/images~~/source/images，将原本NexT的图标替换为自己的图片，并在_config.yml中的如下字段将图片名称做相应的修改。

1
2
3
4
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png

页脚设置

1
2
3
4
5
footer:
  since: 2018
  icon: heartbeat
  copyright:
  powered: true

显示建站年份

将since前的注释号去掉，并修改建站年份。

修改页脚小图标

icon后填写 Font Awesome 中自己喜欢的小图标，默认为心形。

修改页脚作者名

修改copyright的值，默认为站点配置文件中的author的值。

不显示“由Hexo强力驱动”

将powered的值设置为false，默认为true。

不显示NexT版本

将如下字段的值改为false，默认为true。

1
2
3
4
5
theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false

侧边栏设置

设置侧边栏展开方式

搜索字段sidebar，下面有这么几个选项：

1
2
3
4
#display:post
#display:always
#display:hide
#display:remove
  • post 表示在文章页面自动展开
  • always 表示在所有页面自动展开
  • hide 表示只有在点击侧边栏展开时才展开
  • remove 表示不显示侧边栏及其图标
    需要哪种模式就将前面的注释符号#去掉。

Mist 外观下侧边栏修改为左端参见：Blog-调整NexT主题Mist外观侧边栏在左|在逃的貓

设置侧边栏社交链接

找到social字段，设置在侧边栏要显示的社交链接，记得要把social前的注释号去掉。||后面的是Font Awesome中的小图标，图标的显示设定在social_icons中设定。

1
2
3
4
5
6
social:
  E-Mail: mailto:youremail address here|| envelope
social_icons:
  enable: true
  icons_only: false
  transition: true

设置侧边栏背景

找到./themes/next/source/css/_custom中的custom.styl文件，添入以下代码：

1
2
3
4
5
6
7
#sidebar {
    background: url("images/photo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
    p,span,a {color: #000000;}     /* set the text color */
}

  • 修改背景为背景图片

    代码如上所示，在路径中创建一个images文件夹，将背景图放置在文件夹中，为防止遮挡文字效果，可适当调整透明度。

  • 修改背景为其他底色

    添加一个bacckground-color选项，设置为需要的颜色。

小技巧：

可以在浏览器中按下F12开启开发者模式（本人使用的是Firefox），点击选取侧边栏部分查看代码，可以在此添加和修改各个选项实时查看效果，确定后再添加至代码中。

开启数学公式显示

在NexT主题下的配置文件_config.yml中找到Third Party Services Settings，找到 MathJax Support，将enable值修改为true:

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

添加评论系统

早期的 Valine 评论系统(目前已不支持)

个人比较喜欢不需要登陆也能进行评论的系统，在浏览了一番资料后发现Valine简洁易用，正合我意。当前使用的NexT主题的配置文件中已经包含了Valine的设定，在_config.yml中找到Third Party Services Settings，在其中找到Valine，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true # Verification code
  placeholder: # comment box placeholder
  avatar:  # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 7 # pagination size
  • enable改为true；
  • appid和appkey需要通过在 LeanCloud(CN) 或 LeanCloud(国际) 创建一个应用获得，创建办法是先注册一个LeanCloud用户，创建一个应用，为这个应用取个名字，在应用侧边栏设置选项中找到应用Key选项，将提供的App ID与App Key复制到此配置文件中；
  • notify将开启邮件通知，需要在LeanCloud中修改相关邮件设置，开启notify后，verify也将开启；
  • verify设置评论是否需要验证码；
  • placeholder设置评论框默认的显示语句，可自定义；
  • avatar: 设置头像，Valine使用的是Gravatar来配置头像，（Gravatar-全球公认的头像），如果有Gravatar账号，在评论时使用注册Gravatar时留下的邮箱，评论时就将出现Gravatar设置的头像。该字段有多个选项，在并不与Gravatar关联的情况下可以选择其他头像(详情可参见 头像配置|Valine )：
    • '' ：Gravatar官方头像
    • mp ：神秘人，一个灰白人头像
    • identicon ：抽象几何图形
    • monsterid ：小怪物
    • wavatar ：用不同面孔和背景组合生成的头像
    • retro ：八位像素复古头像
    • robohash ：一种具有不同颜色、面部等的机器人
    • hide ：不显示头像
  • guest_info：配置可供评论读者填写的个人信息选项；
  • pageSize ：每页显示的评论数量。

Disqus

在 Disqus 点击 Get Started, 如果你是用第三方账号，选择 Publisher 直接登录也可以。跳过选择计划的页面，点击下面的 Get Started。注册完账号，按照提示信息填写即可。注意在选择平台的时候选择 “I don’t see my platform listed, install manually with Universal Code.” 完成后启用即可。

1
2
3
4
disqus:
  enable: true
  shortname: your-short-disqus-name
  count: true # 如果为 true，博客顶部会显示计数

畅言

注册账号，按照提示信息填写即可。填写完成后，

1
2
3
4
5
changyan:
  enable: true
  appid: # 填写 APPID
  appkey: # 填写 APP SECRET
  count: true # 如果为 true，博客顶部会显示计数

来必力

注册完成后，在后台的 Code Managing 里面看到类似下面这段代码，把第2行的 data-uid后面引号内的内容全部复制，填写到 NexT 的 livere_uid 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- LiveRe City install code -->
<div id="lv-container" data-id="city" data-uid="example-id">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>Please activate JavaScript for write a comment in LiveRe</noscript>
</div>
<!-- completed City install code -->
1
livere_uid: your_uid

Utterances

这个评论系统要求你的仓库必须是公开的，如果你是采用类似我的方式，源文件不公开，在一个仓库，通过其他的比如 Netlify 部署，那可能你还需要再搞一个通过 github page 部署的，就是相当于部署两份。

你需要先安装一下GitHub Apps - utterances。选择授权你的仓库。
然后再配置相关参数，具体的参数可以看 Utteranc 的介绍，我只尝试了 pathname 的参数。
值得注意的是，同样基于 Github issue 的评论系统 Gittalk，如果你是基于 Netlify 部署，又基于 github 部署，但是主站是 Netlify，似乎是行不通的，如果你是这种情况，建议你使用 Utterances。或者再看下源码研究下。

1
2
3
4
5
6
7
8
9
# Utterances
# For more information: https://utteranc.es
utterances:
  enable: false
  repo: user-name/repo-name # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

添加顶部加载提示

在_config.yml文件中找到pace字段，设置为true，在下面的样式中进行选择，建议可以修改后先不提交，使用hexo s预览效果，觉得合适再提交，本站使用的是pace-theme-bounce右上角有一个蓝色的弹跳小球，随着博文的加载，弹跳小球将逐渐消失。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-bounce

添加网易云音乐插件

新建一个歌单，在网页版中点击生成外链播放器，此时可以选择大小，以及是否自动播放，将生成的代码插入到侧边栏的配置文件中themes/next/layout/_macro/sidebar.swig，插入位置应该在<aside>,</aside>之内，否则音乐播放器是在页面末尾实现：

1
2
3
<div id="music163player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=2339687903&auto=0&height=90"></iframe>
</div>

修改文末标签“#”图样

早期版的修改方式。

打开文件themes\next\layout\_macro\post.swig，找到rel="tag">#，将#用<i class="fa fa-tag"></i>进行替换。

添加字数统计

执行以下命令：

1
npm install hexo-wordcount --save

在themes\next\_config.yml文件中查找wordcount，在下面的配置中选择配置项：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: false
  totalcount: true
  separated_meta: true

添加站内搜索

旧版本的 NexT 主题添加站内搜索

在themes\next\_config.yml文件中查找local_search，在下面的配置中启用和配置：

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: -1
  1. 安装插件
1
npm install hexo-generator-searchdb
  1. 添加 Hexo 配置
1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html
  1. 配置 NexT 主题
1
2
3
4
5
6
7
8
9
10
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: true
  # Preload the search data when the page loads.
  preload: true

添加404页面

使用以下语句创建 404 页面。

1
hexo new page 404

该命令会在 source 目录下创建 404.md 文件，编辑该文件，添加你需要的内容。

如果你使用的是 Netlify 部署，需要在 Netlify 的配置文件中添加 404 的配置，类似以下字段：

1
2
3
4
[[redirects]]
from = "/*"
to = "/404"
status = 404

参考资料