NexT主题配置个性化设置

发表于 更新于 分类于 阅读次数： 本文字数： 13k 阅读时长 ≈ 12 分钟
  • 最近基于NexT主题重新搭建了自己的个人技术博客, 现在主要是总结分享关于NexT(8.12.2)主题的相关配置和优化
  • 我现在用的是NexT主题, 这是作者提供的NexT主题中文配置

NexT常规配置

PDF 显示

NexT默认支持PDF自定义标签, 更改NexT主题的配置文件 themes/next/_config.yml，修改以下配置，详见官方文档

1
2
3
4
5
pdf:
  enable: true
  # Default height
  height: 550px

使用格式为

1
{% pdf https://www.titanjun.top/test.pdf %}

首页头像

更改NexT主题的配置文件themes/next/_config.yml

1
2
3
4
avatar:
  url: /images/avatar.png      # 头像图片
  rounded: true                # 头像显示在圆里
  rotated: true                # 鼠标焦点落在头像时，是否转动头像

菜单显示中文

在博客的根目录里，找到_config.yml文件，然后设置以下的配置项，需要注意，这里的字体是 zh-CN，而不是zh-Hans

1
language: zh-CN

启用文章目录

更改NexT主题的配置文件themes/next/_config.yml，设置以下内容

1
2
3
4
5
6
toc:
  enable: true
  number: false           # 自动添加目录编号
  wrap: true              # 每行目录字数超长自动换行
  expand_all: true        # 展开所有级别
  max_depth: 5            # 目录的最大深度

设置右上角Github图标

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
github_banner:
  enable: true
  permalink: https://https://github.com/CoderTitan
  title: Follow me on GitHub

修改上下篇文章顺序

在NexT主题中文章底部，有上下篇文章的链接, 默认的上一篇实在右侧, 下一篇是在左侧, 有点不太符合我们的阅读习惯, 可在主题的配置文件themes/next/_config.yml中修改

1
2
3
4
5
6
# Show previous post and next post in post footer if exists
# Available values: left | right | false
# left: 上一篇在右, 下一篇在左
# right: 上一篇在左, 下一篇在右
# false: 不显示
post_navigation: right

设置侧栏阅读进度百分比

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
6
back2top:
  enable: true
  # 是否显示在边栏
  sidebar: true  
  # 点击是否回到顶部
  scrollpercent: true

配置hexo站点的footer信息

  • 底部footer可以开关显示hexo信息、theme信息、建站时间等个性化配置：
  • 主题的配置文件themes/next/_config.yml，设置
1
2
3
4
5
6
7
footer:
  since: 2018        # 建站开始时间
  icon:
    name: user       # 设置 建站初始时间和至今时间中间的图标，默认是一个'小人像'，更改user为heart可以变成一个心
    animated: true
    color: "#808080" # 更改图标的颜色，红色为'#ff0000'
  powered: true      # 开启hexo驱动

启用文章打赏

主题的配置文件themes/next/_config.yml，设置以下内容，themes/next/source/images 文件夹下，图片目录路径也可自定义

1
2
3
4
5
6
7
8
reward_settings:
  enable: true
  animation: false
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

添加版权声明

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
creative_commons:
  license: by-nc-sa       # License类型： by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
  sidebar: false          # 在侧边栏有一个版权的图片链接
  post: true              # 在每一篇文章末尾自动增加本文作者、本文链接、版权声明信息
  language: deed.zh       # 点击链接后显示的版权信息的语言

添加标签/分类页面

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags
  about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #commonweal: /404/ || fa fa-heartbeat
  # search: /search/ || fa fa-globe

# Enable / Disable menu icons / item badges.
menu_settings:
  # 是否显示各个页面的图标
  icons: true
  # 是否显示分类/标签/归档页的内容量
  badges: true

通过Hexo创建一个标签/分类/关于页面

1
2
3
4
5
6
7
8
# 进入博客的根目录
$ cd blog

# 创建标签页
$ hexo new page "about"
$ hexo new page "tags"
$ hexo new page "categories"

以上命令执行完毕后，在根目录source文件夹下会多了如下文件

  • tags/index.md
  • categories\index.md
  • about\index.md

在对应的文件下分别添加对应内容, 必须使用---包裹配置内容，否则配置无效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# tags/index.md
---
title: 关于
type: "about"
---

# about\index.md
---
title: 标签
type: "tags"
---

# categories\index.md
---
title: 分类
type: "categories"
---

启用不蒜子统计

主题的配置文件themes/next/_config.yml，设置

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

修改网站底部图标

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
icon:
    name: fa fa-heart 
    animated: true 
    color: "#ff0000"

网站底部添加备案信息

主题的配置文件themes/next/_config.yml，设置

1
2
3
beian:
  enable: true
  icp: '备案号'

文章评分功能

NexT主题中已经集成了widgetpack 的星级评分系统，用户无须再安装或引入插件脚本，只需在 widgetpack中注册账号并修改主题配置即可

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id: #<app_id>
  color: #f79533

在控制台中点击左上角展开菜单，在Rating -> Setting中将 Vote via选项改为Device(cookie)以开启匿名评分，该选项将基于设备认证访问者身份，如果不开启这个选项，那么就需要登录才能评分

NexT高级配置

添加站内搜索

NexT主题默认支持使用 Hexo-Generator-Searchdb 插件来实现本地搜索

1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装搜索插件
npm install hexo-generator-searchdb --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
6
search:
  path: search.xml
  field: post
  content: true
  format: html
  limit: 100

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
6
7
8
local_search:
  enable: true
  # auto /  manual，auto 自动搜索、manual：按回车[enter ]键手动搜索
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: false

添加RSS

NexT主题默认支持RSS订阅, 安装插件hexo-generator-feed

1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装RSS插件
npm install hexo-generator-feed --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
6
7
8
9
10
11
12
13
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

主题的配置文件themes/next/_config.yml，设置

1
2
social:
  RSS: /atom.xml || fa fa-rss

设置博客文章永久链接

  • hexo的默认永久链接是在_config.yml里配置的，其生成默认规则是permalink: :year/:month/:day/:title/，是按照年、月、日、标题来生成的。
  • 这种默认配置有个很不能接受的缺点，当文件名为中文时，会导致url链接中也出现中文, 复制后的链接会编码，非常不利于阅读，也不简洁。
  • hexo-abbrlink支持使用不同的算法和进制生成文章的永久链接
1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装abbrlink插件
npm install hexo-abbrlink --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
#文章的永久链接, 如：http://localhost:4000/post/abaf7e89.html
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

生成的链接将会是这样的(官方样例)：

算法 进制 生成链接样例
crc16 hex https://post.zz173.com/posts/66c8.html
crc16 dec https://post.zz173.com/posts/65535.html
crc32 hex https://post.zz173.com/posts/8ddf18fb.html
crc32 dec https://post.zz173.com/posts/1690090958.html

安装完成后, 执行hexo clean & hexo g & hexo s查看效果

字数与阅读时长统计

NexT主题默认支持使用 hexo-symbols-count-time 插件来统计文章字数和阅读时长

1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装hexo-symbols-count-time插件
npm install hexo-symbols-count-time --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
6
symbols_count_time:
  time: true                   # 文章阅读时长
  symbols: true                # 文章字数统计
  total_time: true             # 站点总阅读时长
  total_symbols: true          # 站点总字数统计
  exclude_codeblock: true      # 排除代码字数统计

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
symbols_count_time:
  separated_meta: false         # 是否另起一行显示（即不和发表时间等同一行显示）
  item_text_post: true          # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: false        # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）

添加标签云

hexo-tag-cloud标签云插件

1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装hexo-tag-cloud插件
npm install hexo-tag-cloud --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
6
7
8
# hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica
  textColor: '#333'
  textHeight: 16
  outlineColor: '#E2E1D1'
  maxSpeed: 0.3
  pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动

更改 NexT 主题的源文件 themes/next/layout/_macro/sidebar.njk, 然后在最后添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}
  • 完成安装和显示，可以通过 hexo clean && hexo g && hexo s 来进行本地预览, hexo clean 为必须选项。
  • PS:不要使用 hexo g -d 或者 hexo d -g 这类组合命令

添加豆瓣个人主页

hexo-douban插件支持在 Hexo 页面中嵌入豆瓣个人主页

1
2
3
4
5
# 进入博客的根目录
cd blog_rooot

# 安装
npm install hexo-douban --save

根目录配置文件/_config.yml，设置

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
  user: mythsman
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000
  • user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”https://www.douban.com/people/xxxxxx/" ，其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  • 如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

启用sitemap功能

为了让博文被google或百度检索，需要使用hexo的sitemap功能

1
2
3
4
5
6
# 进入博客的根目录
cd blog_rooot

# 安装
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

修改主题的配置文件themes/next/_config.yml

1
2
menu:
  sitemap: /sitemap.xml || fa fa-sitemap
  • 执行hexo clean & hexo g命令后即可访问站点地图
  • 在public的静态文件根目录中会多出一个sitemap.xml文件，表示谷歌检索的sitemap安装成功

NexT进阶设置

启用Canvas Ribbon背景

NexT主题默认支持Canvas Ribbon背景，官方配置教程可以看这里，前提是需要下载指定的静态资源文件或者使用CDN静态资源文件

1
2
3
4
5
# 进入Next主题的目录
cd themes/next

# # 下载Canvas资源文件
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

或者更改主题的配置文件themes/next/_config.yml，通过以下配置内容来指定CDN静态资源文件的URL

1
2
vendors:
  canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
canvas_ribbon:
  enable: true
  size: 300           # Ribbon的宽度
  alpha: 0.6          # Ribbon的透明度
  zIndex: -1          # Ribbon的显示级别

启用背景3D动画

NexT主题默认支持背景3D动画，官方配置教程可以看这里，前提是需要下载指定的静态资源文件或者使用CDN静态资源文件

1
2
3
4
5
# 进入Next主题的目录
cd themes/next

# 下载3D资源文件
git clone https://github.com/theme-next/theme-next-three source/lib/three

或者更改主题的配置文件themes/next/_config.yml，通过以下配置内容来指定CDN静态资源文件的URL

1
2
3
4
5
6
vendors:
  three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
  three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js
  canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js
  canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
three:
  enable: true
  three_waves: true           # 背景3D动画样式一
  canvas_lines: false         # 背景3D动画样式二
  canvas_sphere: false        # 背景3D动画样式三

启用Pjax

Pjax主要用于加速Web页面的切换速度，同时也可以用来解决Aplayer音频播发器切换页面后播放出现中断的问题

1
2
3
4
5
# 进入Next主题的目录
cd themes/next

# 下载资源文件
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

主题的配置文件themes/next/_config.yml，设置

1
pjax: true

添加顶部加载进度条

1
2
3
4
5
# 进入Next主题的目录
cd themes/next

# 下载资源文件
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

主题的配置文件themes/next/_config.yml，设置

1
2
3
pace:
  enable: true
  theme: minimal

添加页面顶部阅读进度条

1
2
3
4
5
# 进入Next主题的目录
cd themes/next

# 下载资源文件
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

主题的配置文件themes/next/_config.yml，设置

1
2
3
4
5
reading_progress:
  enable: true
  position: top               # 进度条的位置：top | bottom
  color: "#37c6c0"            # 进度条的颜色
  height: 3px                 # 进度条的大小

CSS样式修改

设置背景图片和透明度

主题的配置文件themes/next/_config.yml，设置

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

在博客根目录下的source文件夹下新建_data文件夹并添加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
// 添加背景图片
body {
  // 图片需放在根目录/source/images/background.jpg
  background: url(/images/background.jpg);//自己喜欢的图片地址
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

//博客内容透明化
//文章内容的透明度设置
.main-inner {
  opacity: 0.98;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.95;
}

//菜单栏的透明度设置
.header-inner {
  opacity: 0.95;
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.95;
}

设置页脚文字样式

在上述新添加的source/_data/styles.styl文件内添加如下代码

1
2
3
4
//页脚文字
.footer, .footer a, .footer .with-love {
  color: #fff
}

鼠标点击特效

鼠标点击特效常用的有礼花特效、爆炸特效、浮出爱心、浮出文字，可以点击下方按钮下载对应的js文件, 并保存在themes\next\source\js\cursor\ 目录下

礼花特效 爆炸特效 浮出爱心 浮出文字

新建一个自定义样式文件themes\next\layout\_custom\custom.njk , 添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  <script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/cursor/text.js"></script>
{% endif %}

将新建的custom.njk引入到themes\next\layout\_layout.njk文件代码中

1
2
3
4
5
6
    ....
  <!-- 页面点击效果 -->
  {% include '_custom/custom.njk' %}

</body>
</html>

最后在主题配置文件中添加以下代码

1
2
# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

站点运行时间设置

在thems/next/layout/_partials/footer.njk文件内, 搜索theme.footer.powered, 在此之前添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/01/2016 09:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "+hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()",250);
</script>

点击头像回到首页

修改侧边栏模板代码thems/next/layout/_partials/site-overview.njk

1
2
3
4
5
6
  {%- if theme.avatar.url %}
+    <a href="/">
        <img class="site-author-image" itemprop="image" alt="{{ author }}"
          src="{{ url_for(theme.avatar.url) }}">
+    </a>
  {%- endif %}

文章尾部添加本文结束标记

在主题的配置文件themes/next/_config.yml中设置

1
2
custom_file_path:
  postBodyEnd: source/_data/post-body-end.njk

在博客根目录下的source文件夹下新建_data文件夹并添加post-body-end.njk文件, 并在文件中添加一下内容

1
2
3
4

<div>
  <div style="text-align:center;color: #ccc;font-size:18px;">------------- 本文结束啦<i class="fa fa-paw"></i>感谢您的阅读 -------------</div>	
</div>

参考文章