Blog-NexT主题配置文件配置

发表于 更新于 分类于

本文整理了NexT主题下通过配置主题_config.yml进行的相关配置。

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

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

选择外观

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

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

菜单和小图标

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

站点小图标

修改站点小图标，默认为NexT图标，在Favicon & App Icon Generator可以上传自己的图片生成不同大小的图标。进入路径./themes/next/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简洁易用，正合我意。当前使用的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 ：每页显示的评论数量。

添加顶部加载提示

在_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

添加站内搜索

在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

参考资料