Hexo博客Next主题配置记录

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 12k | 阅读时长 ≈ 11 分钟

前言

由于网上有很多 Next 主题 v6.0 之前版本的各种功能配置教程（需要修改主题原文件），但是很多功能在 v6.0 之后就直接被集成到 Next 主题中了（只需要通过修改配置），本文记录了本博客的 Next 主题的配置过程 ，为有兴趣搭建的朋友们提供参考。

Next配置

注意：在你站点的 hexo/source/_data 目录创建一个 next.yml 文件，用于覆盖Next主题目录下的 _config.yml 配置。这样做的好处在于：没有修改默认配置，以后主题升级更新更加方便。

设置Next展示Scheme

NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
# Schemes
# 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
scheme: Muse
# Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Mist
# 双栏 Scheme，小家碧玉似的清新
#scheme: Pisces
#scheme: Gemini

设置 菜单

设定菜单内容，对应的字段是 menu。 设置展示分类页 、标签页 和关于页面 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  home: / || home
  # 归档
  archives: /archives/ || archive
  # 分类
  categories: /categories/ || th
  # 标签
  tags: /tags/ || tags
  # 关于
  #about: /about/ || user
  # 日程表
  #schedule: /schedule/ || calendar
  # 站点地图
  #sitemap: /sitemap.xml || sitemap
  # 公益404
  #commonweal: /404/ || heartbeat

添加分类页页面：

1
2
$ cd your-hexo-site
$ hexo new page categories

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

1
2
3
4
5
6
---
title: 分类
date: 2018-08-19 22:55:29
type: "categories"
comments: false
---

添加标签页页面：

1
2
$ cd your-hexo-site
$ hexo new page tags

编辑刚新建的页面，将页面的 type 设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

1
2
3
4
5
6
---
title: 标签
date: 2018-08-19 22:55:41
type: "tags"
comments: false
---

设置新建文章模板带有分类、标签

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件。

修改 Hexo 目录下的 scaffolds\post.md 文件：

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
categories: xxx
tags:
  - aaa
  - bbb
---

安装静态资源插件

由于七牛云的测试域名被收回，导致托管于七牛云的图片都无法访问，迫不得已只能将图片也托管到 Github 中。安装 hexo-asset-image 插件，可以解决博文中图片路径不正确的问题。使用以下命令安装 hexo-asset-image ：

1
npm install hexo-asset-image --save

设置头像

修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

地址 值
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

设置网站图标

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
favicon:
  small: /images/avatar.ico
  medium: /images/avatar.ico
  apple_touch_icon: /images/avatar.ico
  safari_pinned_tab: /images/avatar.ico
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

效果如下：

icon

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

normal night night blue night bright night eighties
tomorrow tomorrow-night tomorrow-night-blue tomorrow-night-bright tomorrow-night-eighties

在文件 next.yml 中添加如下内容：

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

设置侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。

链接放置在 social 字段下，一行一个链接。

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/EthanJX || github

social_icons:
  enable: true
  icons_only: false
  transition: true

设置打赏功能

只需要在文件 next.yml 中添加填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

1
2
3
4
# Reward
reward_comment: 如果喜欢, 请给我加个🍗~
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

设置友情链接

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
# Blog rolls
links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
  某某博客: http://example.com/

设置RSS

使用以下命令安装 hexo-generator-feed：

1
$ npm install hexo-generator-feed --save

保持_config.yml 文件中 rrs 的内容为空即可，效果如下：

rrs

设置博客页脚

设置站点建立时间

这个时间将在站点的底部显示，例如 © 2013 - 2015。在文件 next.yml 中添加如下内容：

1
2
3
4
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

设置页脚展示icon

默认情况下，页脚展示情况如下：

页脚

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#FF0000"

隐藏Hexo、Next相关信息

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: false

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

设置右上角Follow me on GitHub

在文件 next.yml 中添加如下内容：

1
2
3
4
5
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/EthanJX || Follow me on GitHub

效果如下：

Follow me on GitHub

设置CC协议

在文件 next.yml 中添加如下内容：

1
2
3
4
5
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
creative_commons: by-nc-sa

效果如下：

cc

设置侧边文章目录展示

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
# Table Of Contents in the Sidebar
# 文章目录
toc:
  enable: true

  # Automatically add list number to toc.
  # 自动添加序号
  number: true

  # If true, all words will placed on next lines if header width longer then sidebar width.
  # 设置false，如果文件小标题太长，会导致滚动条
  wrap: true

效果如下：

toc

设置侧边栏

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
sidebar:
  # Scroll percent label in b2t button.
  # 显示滚动条百分比
  scrollpercent: true
  # Enable sidebar on narrow view (only for Muse | Mist).
  # 窄屏显示
  onmobile: true

效果如下：

sidebar

设置阅读全文不自动滚动

默认情况下，点击阅读全文链接后，会自动滚动到阅读全文之后的内容。在文件 next.yml 中添加如下内容：

1
2
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: false

禁止该效果。

设置文章元数据展示

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enabled: false
    # If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).
    # And if post will edited in same day as created, edited time will show in popup title under created time label.
    # If false show anyway, but if post edited in same day, show only edited time.
    another_day: false
  categories: true

效果如下：

post_meta

设置字数统计和阅读时长

使用以下命令安装 hexo-symbols-count-time：

1
$ npm install hexo-symbols-count-time --save

在Hexo 目录下的 _config.xml 文件中添加如下代码：

1
2
3
4
5
6
7
# 统计
symbols_count_time:
  symbols: true
  time: true
  # 页脚底部是否显示全站统计信息
  total_symbols: true
  total_time: true

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  # 是否和创建时间、分类分割
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

效果如下：

字数统计和阅读时长

总字数统计和阅读时长

设置代码块copy功能

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true

设置微信账号

在文件 next.yml 中添加如下内容：

1
2
3
4
5
# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
  description: ex. subscribe to my blog by scanning my public wechat account

设置文章版权信息

在文件 next.yml 中添加如下内容：

1
2
3
4
# Declare license on posts
post_copyright:
  enable: true
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

效果如下：

文章版权

设置网站访问量统计

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

效果如下：

网站访问统计

文章访问统计

设置站内搜索

使用以下命令安装 hexo-generator-searchdb：

1
$ npm install hexo-generator-searchdb --save

在文件 next.yml 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
  # unescape html strings to the readable one
  unescape: false

效果如下：

搜索

设置点击出现桃心效果

复制以下代码，保存为 love.js 文件。

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

方式一：将 love.js 存放于提供外链的云盘中；

方式二：将 love.js 放到路径/themes/next/source/js/src里面。

在文件 next.yml 中的 footer 添加如下内容：

1
2
footer:
  custom_text: <script type="text/javascript" src="/js/src/love.js"></script>

效果如下：

love

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

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

效果如下：

tag icon

设置自定义样式

注意：在你站点的hexo/source/_data目录创建一个styles.styl文件，用于自定义CSS样式。

在文件 next.yml 中添加如下内容：

1
2
custom_file_path:
  styles: source/_data/styles.styl

这样就将默认的自定义样式文件从主题目录下的 source/css/_custom/custom.styl 改成了站点目录下的 source/_data/styles.styl ，这样的优势在于：没有修改主题默认配置，以后主题升级更新更加方便。

在文件 styles.styl 中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 主页文章添加阴影效果
.post {
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 50px 25px;
	-webkit-box-shadow: 0 0 20px #888;
	-moz-box-shadow: 0 0 20px #888;
}

// 更好的侧边滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button:end {
  width: 10px;
  height: 10px;
}
如果喜欢, 请给我加个🍗~
0%