基于Hexo+NexT搭建个人博客优化指南

很简单的记录一下部署过程~

安装前提

安装Hexo之前,首先要确认已经拥有正确的Nodejs和git环境:

1
$ npm install -g hexo-cli

初始化一个Site的根目录:

1
2
3
$ hexo init 
$ cd
$ npm install

起步

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

1
2
~//_config.yml
~//themes/next/_config.yml

Menu

原生菜单栏有主页、关于、分类、标签等数个选项,但是在配置文件中是注释掉的状态,这里我们自行修改注释就行

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

注意点:

  • 如果事先没有通过hexo new page 来创建页面的话,即使在配置文件中取消注释,页面也没法显示
  • 我们也可以添加自己想要添加的页面,不用局限在配置文件里提供的选择里
  • ||后面是fontAwesome里的文件对应的名称
  • menu_icons记得选enable: true

自定义页面

给每篇文章打标签是一件好习惯:

1
2
3
$ hexo new page "categories"  // 分类子页面
$ hexo new page "tags" // 标签子页面
$ hexo new page "about"

不这样做,hexo g生成后的页面会为空

1
2
3
4
5
$ vi source/categories/index.md
+ type: "categories"

$ vi source/tags/index.md
+ type: "categories"

除了必要的 归档/标签/分类,如果想要新增一个自定义页呢?

加一个留言板:

1
$ hexo new page "guestbook"

然后在主题配置文件themes/next/_config.yml中,添加这样一条:

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

+ guestbook: /guestbook/ || iconsName

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

另外,图标还是可以在fontAwesome库里找到。

修改文章页宽

打开themes/next/source/css/_variables/base.styl,找到以下字段并修改为合适的宽度:

1
2
- $content-desktop-large          = 900px
+ $content-desktop-large = 1000px

修改小型代码块颜色

修改themes/next/source/css/_variables/base.styl,加入自定义颜色:

1
2
3
4
5
6
7
8
9
$black-deep   = #222
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// 自定义的颜色
+ $my-code-foreground = #dd0055 // 用``围出的代码块字体颜色
+ $my-code-background = #eee // 用``围出的代码块背景颜色

复制代码修改$code-background$code-foreground的值:

1
2
3
4
5
6
7
8
9
10
// Code & Code Blocks
$code-font-family = $font-family-monospace
$code-font-size = 13px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 4px

- $code-foreground = $black-light
- $code-background = $gainsboro
+ $code-foreground = $my-code-foreground
+ $code-background = $my-code-background

复制代码修改themes/next/source/css/_custom/custom.styl文件,加入自定义样式

1
2
3
4
5
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}

话说个人更喜欢segmentfault(https://segmentfault.com/a/1190000018660861)的配色。

主题风格 schemes

默认提供了4个方案,我们把想要选择的取消注释,其他三个保持注释掉的状态即可,配置文件在 themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# Debug: themes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

它的git链接是 https://github.com/iissnan/hexo-theme-next,可以在这里看到样式和预览。

底部建站时间和图标修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2016 // 建站年份

# Icon between year and copyright info.
# icon: user
icon: snowflake-o

# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by GitHub Pages
custom_text: 京ICP备18001379号-1

我在这部分做了这样几件事:

  • 把用户的图标从小人user改成了雪花snowflake-o
  • copyright留空,显示成页面author即我的名字
  • powered: false把hexo的授权图片取消了
  • theme: enable:false 把主题的内容也取消了

这样底部信息比较简单。

过长的目录自动换行

在主题配置文件themes/next/_config.yml修改此处:

1
2
3
4
5
6
7
8
9
# 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.
wrap: true // diff

添加侧边栏社交链接

在social里我们可以自定义自己想要在个人信息部分展现的账号,同时给他们加上图标。

1
2
3
4
5
6
7
8
9
10
11
#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

注意点:

  • ||后面对应的名称是fontAwesome里图标的名称,如果我们选择的账号没有对应的图标(如豆瓣、知乎),我们可以在fontAwesome库里去选择自己喜欢的图标
  • 建议不要找太新的fontAwesome图标,主题关联的库版本没有那么新,很可能显示不了或者显示一个地球

微信支付宝打赏功能

在主题配置文件themes/next/_config.yml中的微信/支付宝收款地址处填入收款二维码即可:

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

增加站内文章搜索功能

安装插件,执行以下命令:

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

复制代码修改_config.yml站点配置文件,在其末尾新增以下代码:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

复制代码修改themes/next/_config.yml主题配置文件,搜索关键字local_search找到如下代码:

1
2
3
4
5
6
7
local_search:
enable: false // 把这里置为 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
$ npm uninstall hexo-generator-index --save

复制代码安装新插件:

1
$ npm install hexo-generator-index-pin-top --save

复制代码最后编辑有这需求的相关文章时,在Front-matter(文件最上方以—分隔的区域)加上一行:

1
top: true

复制代码如果你置顶了多篇,怎么控制顺序呢?设置top的值 例如top: 10,值越大越置顶。

自定义字体

配置内容还是在themes/next/_config.yml主题配置文件:

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
font:
enable: false

# Uri of fonts host. E.g. //fonts.googleapis.com (Default). // 外链字体库地址,例如 //fonts.googleapis.com (默认值)
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.

# Global font settings used on element. // 全局字体,被应用在 body 元素上
global:
external: true
family: Lato
size:

# Font settings for Headlines (h1, h2, h3, h4, h5, h6). // 标题字体 (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:
size:

# Font settings for posts. // 文章字体
# Fallback to `global` font settings.
posts:
external: true
family:

# Font settings for Logo. // Logo 字体
# Fallback to `global` font settings.
logo:
external: true
family:
size:

# Font settings for and code blocks. // 代码字体,应用于 code 以及代码块
codes:
external: true
family:
size:

站点语言

编辑站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

1
language: zh-Hans

设置代码高亮

主题配置文件,效果参考 https://github.com/chriskempson/tomorrow-theme

1
highlight_theme: normal

要颜色正确高亮,代码语言的名称肯定要写对,各种支持语言的名称可以查看这篇文章。当然,如果你和我一样懒,可以在站点配置文件_config.yml中设置自动高亮:

1
2
3
4
5
highlight:
enable: true
line_number: true
auto_detect: true // 自动检测
tab_replace:

添加顶部加载条

在主题配置文件中搜索pace

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-minimal

每一个生成的效果可以在这里看到。

添加侧边栏友情链接

修改主题配置文件:

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: Links
# links_layout: block
links_layout: inline
links:
左耳朵耗子: https://coolshell.cn/
桃子: https://blog.twofei.com/

网站动画效果

为了网站响应速度我们可以把网站的动画关掉。但我觉得页面比较素,所以开了动画,选择了canvas-nest这一个,主题自带四种效果,可以选自己喜欢的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

统计文章字数和阅读时间

1
2
3
4
5
6
post_wordcount:
item_text: true
wordcount: true # 文章字数
min2read: true # 阅读时间
totalcount: true # 总共字数
separated_meta: true

设置网站icon

主题配置文件中第一行代码就是网站icon设置 favicon:,这里你只需要找到你喜欢的logo把它制作成ico格式,然后改名favicon.ico,放到/themes/next/source/images下面即可。

插入音乐

安装播放音乐的aplayer插件:

1
$ npm install hexo-tag-aplayer --save

在文章里的写法:

1
{% aplayer "歌曲名" "歌手名" "https://{fname}.mp3" "https://{cover}.jpg" "lrc:https://{fname}.lrc" "autoplay=false" %}

另外可以支持歌单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
}
]
}
{% endaplayerlist %}

更多aplayer的用法请移步 & https://github.com/MoePlayer/APlayer

插入视频

还是安装播放视频的dplayer插件:

1
$ npm install hexo-tag-dplayer --save

在文章里的写法:

1
{% dplayer "url=http://home.ustc.edu.cn/~mmmwhy/GEM.mp4"  "pic=http://home.ustc.edu.cn/~mmmwhy/GEM.jpg" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

更多aplayer的用法请移步 & https://github.com/MoePlayer/DPlayer

点击出现爱心效果

public/js/src/love.js下新建文件love.js,提醒一下 慎用hexo clean

themes/next/layout/_layout.swig 文件末尾添加:

1
2
+ 
+ <script type="text/javascript" src="/js/src/love.js">script>

点击头像回到博客首页

修改文件themes/next/layout/_macro/sidebar.swig,增加以下代码:

1
2
3
4
5
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
+ a>

头像设置圆形,停留旋转效果

修改文件 themes/next/source/css/_common/components/sidebar/sidebar-author.styl ,新增以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// 设置圆形
+ border-radius: 50%;
+ transition: 2s all;
}

//旋转
+ .site-author-image:hover{
+ transform: rotate(360deg);
+ }

增加内容分享服务

修改themes/next/_config.yml主题配置文件,搜索关键字needmoreshare2,找到如下代码并做以下修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
enable: true // diff
postbottom:
enable: true // diff
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true // diff
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

使用Valine添加评论功能

Valine是一款基于leancloud的快速、简洁且高效的无后端评论系统。

注册和设置

  1. 请先登录或注册 LeanCloud, 进入控制台后点击左下角 创建应用,选择免费的开发版即可。注意右上角有几个节点,可以就近选择。

  1. 其次,存储 => 创建Class => 无限制的Class(坑点1)

  1. 应用创建好以后,进入刚刚创建的应用,选择左下角的设置 => 应用Key,然后就能看到你的appid和appkey了,并且记住它。

  2. 在安全中心,为了数据安全 请注意设置自己的 Web 安全域名,并且把除了 数据存储的其他选项都关闭。

  1. 存储 => 设置 => 其他,勾选这几项
  • 禁止客户端创建 Class
  • 启用严格查询模式 (如果查询的字段不存在则报错)
  • 查询 include 引入的 Pointer 类型数据时校验 ACL 权限

打开评论(valine)

Hexo-NexT中已经默认安装了Valine插件,如果没有可以使用以下命令安装:

1
$ npm install valine --save

完成后,在themes/next/_config.yml修改代码:

先关闭leancloud_visitors

1
2
3
leancloud_visitors:
- enable: true
+ enable: false

然后开启 Valine 的评论和文章阅读量统计:

1
2
3
4
5
6
7
8
9
10
11
valine:
enable: true
appid: {appid} # your leancloud application appid
appkey: {appkey} # your leancloud application appkey
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
# placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

后期如果需要管理留言,至 leancloud => 控制台 => 储存 => comment 即可进行添加、删除等操作。

Valine 头像

Valine 部署完成后使用了默认图像,查阅 Valine官网 后,了解到 Valine 使用的是 Gravatar 作为评论列表头像,评论时提供Gravatar注册的邮箱即可显示设置的头像。

我这里将 avatar 设置成空,表示使用的是默认的评论图像。

1
2
3
4
valine:
(...)
avatar: # gravatar style
avatar_cdn: https://www.gravatar.com/avatar/

目前Valine的版本不支持 avatar_cdn参数,这里手工加一个并设置成Gravatar的CDN。

修改Valine模板文件themes/next/layout/_third-party/comments/valine.swig,增加下面一行:

1
2
3
4
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
+ avatar_cdn:'{{ theme.valine.avatar_cdn }}',

使用Gitment添加评论功能

Gitment 是一款基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

注册 OAuth Application

  1. 登录 Github 并且右上角进入 Settings
  2. 点击左下方的 Developer settings
  3. 通过 Register a new application 注册一个新的应用
  4. 填写以下内容

  1. 确定Register application 后会得到Client ID和Client Secret

创建 repository

右上角创建一个新的项目 主要用来存放 gitment-comments,所以它的RepositoryName也是 gitment-comments。

添加 Gitment

安装一下插件

1
$ npm install gitment --save

完成后,在themes/next/_config.yml修改代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
enable: false
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: bv-hcr # MUST HAVE, Your Github ID
github_repo: gitment-comments # MUST HAVE, The repo you use to store Gitment comments
client_id: {client_id} # MUST HAVE, Github client id for the Gitment
client_secret: {client_secret} # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

部署之后,有可能碰到 Not Found Error,先不要着急,等一段时间再看看。并且每一篇文章,都需要做 初始化本文的评论页

支持emoji

在 Hexo 中默认的 markdown 渲染器是 hexo-renderer-marked ,这个渲染器是不支持 emoji 表情的。

在 NexT 的 issue 上有推荐使用 hexo-tag-emojis 这个插件来支持 emoji 表情,但可惜的是这个插件已经不再维护,已经不支持 Hexo v3+ 了。还好在 Hexo 的 plugins 页,我们找到了另外一个 emoji 插件 hexo-filter-github-emojis。

1
$ npm install hexo-filter-github-emojis --save

打开站点配置文件 _config.yml 修改:

1
2
3
4
5
6
githubEmojis:
enable: true
className: github-emoji
unicode: false
styles:
localEmojis:

基本使用

  1. Emoji Cheat Sheet 中找到你想要的表情,然后点击即可复制。
  2. 使用方法和 GitHub 一样,比如你想发一个笑脸 😄 直接输入笑脸对应的 emoji 编码 :smile: 就可以。
  3. 默认配置下是使用图片表情,如果需要使用 Unicode 表情,可以将上面配置中的 unicode 设置为 true。

Live2d模型

https://blog.csdn.net/u011054333/article/details/82718910

模型名称可以到这里参考,一些模型的预览可以在这里

1
$ npm install live2d-widget-model-wanko --save

打开站点配置文件 _config.yml 修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true
---------------------

详细的配置参考 https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

腾讯公益404页面

腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!效果如下 http://www.ixirong.com/404.html

使用方法,新建 404.html 页面,放到themes/next/source/404.html 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8">script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8">script>
body>
html>

打开主题配置文件 _config.yml 修改:

1
2
3
menu:
(...)
+ commonweal: /404.html || heartbeat