Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(四)

简介

上篇Hexo搭建GitHub博客—打造炫酷的NexT主题–高级(三)主要是对NexT整体布局的配置,达到完美喜欢的布局格式。
接下来继续对NexT主题博客进行配置,本篇主要是添加一些常用的第三方访问或者服务。请跟着脚步开启新的旅行吧。

Hexo.png

配置

1.Math Equations Render Support 数学方程式渲染支持

这里可能有时需要在文章中使用到时数学公式了,在这里设置一下。

1
2
3
4
5
6
7
8
math:
enable: true #默认为false
per_page: true
engine: mathjax #两种方式 mathjax / katex
mathjax:
cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML #默认 这里大家根据自己需求
katex:
cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css #默认

2.Han Support 支持汉字

设置汉字支持,这里我没配置,选择默认了,如果大家想配置的话就按照以下步骤

1.打开Git Bash Here进入themes/next目录下

1
$ cd theme/next

2.获取该汉字支持Git module,执行命令以下命令获得

1
$ git clone https://github.com/theme-next/theme-next-han source/lib/Han

3.设置汉字支持

1
han: true

4.更新update

1
2
$ cd themes/next/source/lib/Han
$ git pull

3.添加图标链接到GitHub

一般在右上角或者左上角,如下我的博客配置。

  • 配置右上角Fork_me_on_GitHub,按以下步骤进行

Fork_me_on_GitHub_left.png

1.打开Fork_me_on_GitHub链接,里面有许多样式,选择自己喜欢的样式,将其复制下来。

get_Fork_me_on_GitHub

2.打开自己博客项目中的themes/next/layout/_layout.swig文件,搜索<div class="headband"></div> 将复制的内容粘贴到<div class="headband"></div>下面,如下:

  • 注:要修改红色框里面的连接为自己在GitHub上的连接。

Fork_GitHub.png

  • 配置右上角的Fork_me_on_GitHub

right_GitHub.png

本例的方式和上面的方式一样的步骤,但是获取的连接不同了,本例的连接地址是GitHub Corners

4.将文章底部#标签修改带为带图标的形式

在博客项目中找到/themes/next/layout/_macro/post.swig,搜索 rel="tag",将 #号 换成<i class="fa fa-tag"></i>

图标设置.png

  • 原先#号的样式

标签_1.png

  • 修改为图标的样式

标签_2.png

5.font字体设置

themes/next/_config.yml搜索font

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
font:
enable: true #默认false 如果要进行字体修改那么设置为true

global:
external: true
family: Lato #设置字体 下同
size: #字体大小 下同

headings:
external: true
family:
size:
posts:
external: true
family:
logo:
external: true
family:
size:
codes:
external: true
family:
size:

6.设置背景动画样式

NexT里面有几种动画背景样式canvas_nestthree_wavescanvas_linescanvas_sphere

  • canvas_nest如下图所示

背景动画.png

按照以下步骤完成

1.打开Git Bash Here进入自己文件夹下/themes/next文件夹下

1
$ cd /themes/next

2.下载安装 canvas_nest module 执行

1
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

/themes/next/source/lib查看会看到canvas_nest文件夹

3.在/themes/next/_config.yml设置

1
canvas_nest: true

three_waves.png

打开three_waves 查看设置步骤,这里和canvas_nest步骤是一样的,这里就不写咯。
下载完成后,在/themes/next/_config.yml设置

1
2
3
4
5
three_waves: true
#OR
canvas_lines: true
#OR
canvas_sphere: true
  • canvas_ribbon只适合 scheme Pisces 这里不测试了,大家可以进入canvas_ribbon安装
1
2
3
# busuanzi_value_site_uv  表示用户连续点击n篇文章,只记录1次访客数
# busuanzi_value_site_pv 表示用户连续点击n篇文章,记录+n次访问量
# 这里对应的是2上的id值

8.给每篇文章添加类别和标签

添加标签.png

在创建的文章都在source/_post目录下找到,每篇文章添加tagscategories

标签_tags.png

9.添加进度条

  • 注:添加进度条的话在手机浏览的时候一般情况都有自带的进度条了,例如微信浏览、浏览器浏览等等,这样就出现重复的进度条了,这里看个人是否添加。但是在电脑浏览器浏览却是不错的。
    本例设置的如下pace-theme-center-atom显示

进度条_1.png

按照以下步骤进行

1.打开Git Bash Here进入自己文件夹下/themes/next文件夹下

1
$ cd /themes/next

2.下载安装 Progress module 执行

1
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

/themes/next/source/lib查看会看到pace文件夹
3.在/themes/next/_config.yml设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
pace: true  #设置为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-center-atom #这里任选其中一种
  • 注大家在这里想用什么样式就自己测试。

10.添加站内搜索

由于可能我需要快速查找相关文章,那么就需要添加站内搜索。

local_search.png

按以下步骤进行

1.安装站内搜索插件

1
2
3
$  npm install hexo-generator-searchdb --save
或者
$ cnpm install hexo-generator-searchdb --save

2.在根目录下的_config.yml添加

1
2
3
4
5
6
#表示站内搜索
search:
path: search.xml
field: post
format: html
limit: 10000

3.在themes/next/_config.yml文件中搜索local_search,进行设置

1
2
3
4
5
local_search:
enable: true #设置为true
trigger: auto # auto / manual,auto 自动搜索、manual:按回车[enter ]键手动搜索
top_n_per_article: 1
unescape: true

11.添加打赏功能

查看配置如下

打赏.png

NexT主要提供三种打赏方式分别是微信、支付宝、比特币
themes/next搜索Reward,三个都打开吧

1
2
3
4
5
# Reward
reward_comment: Donate comment here # 描述
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png

总结

本篇我们进行了NexT主题的相关配置,这让我们的博客已经非常漂亮了,接下来我们主要进行添加NexT的评论系统、添加百度、Google检索等高级配置,希望各位读者在配置时遇到问题是,随时评论,我们一起解决相关问题。

推荐

大家也可以查看关于Hexo相关文章。

Hexo搭建GitHub博客–初级(一)

Hexo搭建GitHub博客–初级(二)

Hexo搭建GitHub博客—打造炫酷的NexT主题–高级(三)

Hexo搭建GitHub博客—打造炫酷的NexT主题–高级(四)

继续努力哦!走一个