Hexo-Next主题配置

精于心,简于形
一个主题,三种外观,选您所好
通过主题中的主题(亦称 Scheme),您可以方便地改变您博客的外观,同时几乎所有配置同样适用

下载 NexT

首先下载 NexT 这里需要注意一下,github 上能找到两个 最好使用 后面你的 一个 hexo-theme-next官网 版本,现在还在继续更新中

推荐使用git 下载

1
2
$ cd your-hexo-site
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

下载zip

当然也可以 前往 NexT 版本 发布页面直接下载 将next文件夹移入 blog 所在的文件夹的 themes 文件夹

修改主题

站点配置文件 ====> hexo自带的_config.yml

主题配置文件 ====> 主题theme下的_config.yml

修改 站点配置文件

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

添加 next.yml 文件

当前更新 NexT 主题并不顺利。通过 git pull 升级 NexT 主题时,它经常会陷入冲突状态,然后我们只能手动合并配置

解决办法

下面我会采用 NexT 提供的方法 override: false 方式进行使用

站点配置

在 站点配置文件 中进行配置

1
2
3
4
5
6
7
8
# Site
title: 在雨季等你 # 网站标题
subtitle: # 网站副标题
description: 分享是进步最快的方式 # 描述,介绍网站的
keywords: # 网站的关键字
author: 在雨季等你 # 博主姓名
language: zh-CN # 语言:zh-CN 是简体中文
timezone: UTC # 时区

修改主题配置主题

数据文件 中介绍了 需要在 blog/source/_data下新建一个 next.yml

这里我们使用 override: false 的方式,在 next.yml中新添加

1
2
3
4
# ---------------------------------------------------------------
# 兼容模式
# ---------------------------------------------------------------
override: false

添加主题已经修改主题

1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# 主题样式
# ---------------------------------------------------------------
# Schemes
# scheme: Muse
# scheme: Mist
scheme: Pisces
# scheme: Gemini

菜单设置为 菜单名: /菜单目录 || 菜单图标名字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# 菜单设置为 菜单名: /菜单目录 || 菜单图标名字
# ---------------------------------------------------------------
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 #公益404

menu_settings:
icons: true # 显示图标
badges: true # 显示统计信息

点击关于界面无法打开

终端回到blog的根目录.运行:

1
hexo new page "tags"
1
hexo new page "categories"

社交栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ---------------------------------------------------------------
# 社交栏设置
# ---------------------------------------------------------------
social:
GitHub: https://github.com/JiangHaiYang01 || github #网站名:网址 ||图标名
简书: https://www.jianshu.com/u/142e8a9d9d71 || heartbeat
#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
social_icons:
enable: true # 显示社交图标
icons_only: false # 只显示图标,不显示文字
transition: false

个人头像设置

要设置自己的侧边栏头像,首先,准备一张头像的图片,命名为 avatar.jpg,然后,将图片放在/blog/themes/next/source/images/文件夹下

接着 在 next.yml中 添加

1
2
3
4
5
6
7
8
9
10
# ---------------------------------------------------------------
# 个人头像设置
# ---------------------------------------------------------------
avatar:
# Replace the default image and set the url here.
url: /images/heard.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

站内搜索功能的实现

终端进入blog的根目录下,执行以下命令

1
npm install hexo-generator-searchdb --save

添加

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

# ---------------------------------------------------------------
# 本地搜索
# 安装插件 npm install hexo-generator-searchdb --save
# ---------------------------------------------------------------
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
# Preload the search data when the page loads.
preload: false

添加评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# ---------------------------------------------------------------
# 留言 Valine
# ---------------------------------------------------------------
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # 是否开启邮件提醒
verify: false # Verification code
placeholder: 欢迎吐槽 # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: false # 如果为假,评论计数将只显示在发布页面,而不是主页
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

Valine 评论开启后,标题下方显示的是「Valine: 0」而不是「评论数:0」

在主题文件夹下的 languages 文件夹中,修改 zh-CN.yml,在 “post:” 下添加子字段 “comments.valine: 评论数”

首页文章属性

1
2
3
4
5
6
7
8
9
10
# ---------------------------------------------------------------
# 首页文章属性
# ---------------------------------------------------------------
post_meta:
item_text: true # 设为true 可以一行显示,文章的所有属性
created_at: true # 显示创建时间
updated_at:
enabled: true # 显示修改的时间
another_day: true # 设true时,如果创建时间和修改时间一样则显示一个时间
categories: true # 显示分类信息

内容页里的代码块新增复制按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ---------------------------------------------------------------
# 内容页里的代码块新增复制按钮
# ---------------------------------------------------------------
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties # 设置代码高亮主题
# Add copy button on codeblock
copy_button:
enable: true # 增加复制按钮的开关
# Show text copy result.
show_result: true # 点击复制完后是否显示 复制成功 结果提示
# Available values: default | flat | mac
style: mac

相关文章推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# 相关文章推荐
# npm install hexo-related-popular-posts --save
# ---------------------------------------------------------------
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: 相关文章推荐 # 自定义标题名字
display_in_home: false # 首页是否增加
params:
maxCount: 5 # 最多推荐几个
PPMixingRate: 0.4 # 同时推荐火热和相关,两者比率,不能为0
#isDate: false # 文章时间
#isImage: false # 文章配图
#isExcerpt: false # 文章摘要

文章原创申明

1
2
3
4
5
6
7
8
9
10
11
12
13
# ---------------------------------------------------------------
# 文章原创申明
# ---------------------------------------------------------------
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language:

修改底部作者图标为跳动的红心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ---------------------------------------------------------------
# 修改底部作者图标为跳动的红心
# ---------------------------------------------------------------
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
#since: 2015

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

图片弹出效果

1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# 图片弹出效果 - fancybox
# 实现该功能的基础是在文章中插入图片。
# 该项功能的效果是:点击文中插图,图片能够放大,有幻灯片的效果
# ---------------------------------------------------------------
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

配置微信,支付宝打赏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# 配置微信,支付宝打赏
# ---------------------------------------------------------------
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
#comment: Donate comment here.

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

如何设置「阅读全文」

常见问题

建议使用 <!-- more -->(即第一种方式),除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

自定义的文件位置

自定义设置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# 自定义的文件位置
# ---------------------------------------------------------------
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

近期文章

添加 source/_data/sidebar.swig

修改 sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date').toArray() %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# 近期文章
# 添加自定义属性
# 添加 sidebar: source/_data/sidebar.swig
# ---------------------------------------------------------------
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

Hexo 生成永久文章链接

  • 安装插件
1
npm install hexo-abbrlink --save
  • 修改 站点_config.yml

找到permalink 修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# Hexo 生成永久文章链接
# ---------------------------------------------------------------
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

分割线样式 && 博客背景 && 文章内链接文本样式 && 文章内容的透明度设置 && 搜索框(local-search)的透明度设置

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//=============================================================
// 设置背景图片
//=============================================================
body {
// 为图片路径,也可以直接使用链接
background:url(/images/background.jpg);
// 若果背景图片不能全屏,那么是否平铺显示,充满屏幕
background-repeat: no-repeat;
// 背景是否随着网页上下滚动而滚动,fixed 为固定
background-attachment:fixed;
// 图片展示大小,这里设置 100%,100% 的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示
background-size: cover;
background-position:50% 50%;
}







//=============================================================
// index页面中每篇文章相隔的那条线
//=============================================================
.posts-expand {
.post-eof {
display: block;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 100%;
height: 1px;
background: $grey-light;
text-align: center;
}
}





//=============================================================
// 文章内链接文本样式
//=============================================================
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}


//=============================================================
// 文章内容的透明度设置
//=============================================================
.content-wrap {
opacity: 0.9;
}




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


//=============================================================
// 菜单栏的透明度设置
//=============================================================
.header-inner {
background: rgba(255,255,255,0.9);
}


//=============================================================
// 搜索框(local-search)的透明度设置
//=============================================================
.popup {
opacity: 0.9;
}

不蒜子统计

1
2
3
4
5
6
7
8
9
10
11
# ---------------------------------------------------------------
# 不蒜子统计功能
# ---------------------------------------------------------------
busuanzi_count:
enable: true # 是否开启busuanzi统计功能
total_visitors: true # 是否统计总访客数
total_visitors_icon: user # 访客数图标
total_views: true # 是否显示同级总访问次数
total_views_icon: eye # 总访问次数的图标
post_views: true # 是否显示单个文章查看次数
post_views_icon: eye # 文章被查看次数的图标

自定义统计文案

编辑themes/next-v-7.4.2/layout/_partials/analytics/busuanzi-counter.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

{%- if theme.busuanzi_count.total_visitors %}
<span class="site-uv">
{{ __('footer.total_visitors', '<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>') }}
</span>

{%- endif %}

{%- if theme.busuanzi_count.total_views %}
<span class="site-pv">
{{ __('footer.total_views', '<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>') }}
</span>
{% endif %}
</div>
{%- endif %}

编辑:themes\next-v-7.4.2\languages\zh-CN.yml

1
2
3
footer:
total_views: "历经 %s 次回眸才与你相遇"
total_visitors: "我的第 %s 位朋友,"

在自定义样式文件中添加如下样式

1
2
3
4
//修改不蒜子数据颜色
.busuanzi-value {
color: #1890ff;
}

发布到 Coding

为何要使用Coding

  • 国内 会比GitHub 快
  • 相比 码云 主要是 不要钱,码云 一年99 太贵了

创建项目部署代码

  • 注册 coding

注册地址 coding 使用微信登陆就行了,快捷方便

  • 创建项目

  • 添加 ssh

点击头像 —> 个人设置 —> SSH 公钥 添加公钥

查看 mac 的 公钥

1
cat ~/.ssh/id_rsa.pub

修改配置文件

打开配置文件,修改站点 _config.yml文件,修改最下面的deploy属性,设置部署的托管平台

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: 'git'
repo:
# 添加 coding 的 git 地址
coding: git@e.coding.net:jianghaiyang/blog.git
# github: git@github.com:JiangHaiYang01/JiangHaiYang01.github.io.git
branch: master

发布 colding

1
hexo clean && hexo g && hexo deploy

如果提示 ERROR Deployer not found: git 就需要安装 git 插件

执行下面命令

1
npm install --save hexo-deployer-git

安装好以后再次执行 hexo clean && hexo g && hexo deploy 等待上传成功 刷新 coding 即可

开启Pages服务

详细请参考 如何搭建静态网站

找不到构建与部署

请点击左下角的 “项目设置”, 点击 “项目与成员”, 点击 “功能开关” 点击打开 “构建与部署” 右侧开关

部署到 GitHub

创建 Github 仓库

  • 注册 Github 账号
  • New repository 创建新的存储仓库
  • 在Repository name 中 填写 yourName + github.io

例如我的

1
JiangHaiYang01.github.io

设置 Pages

选择刚刚创建的 仓库 选择 Settings,在 GitHub Pages选项, 选择Choose the Theme 随便选择一个theme 保存提交

等待一会,在游览器上输入 yourName.github.io ,例如

1
JiangHaiYang01.github.io

就能看到你自己的 博客了,

需要等待一会 不会立马生效的

修改配置文件

打开配置文件,修改站点 _config.yml文件,修改最下面的deploy属性,设置部署的托管平台

1
2
3
4
5
6
7
8
9
10
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: 'git'
repo:
# 添加 coding 的 git 地址
coding: git@e.coding.net:jianghaiyang/blog.git
# 添加 github 的地址
github: git@github.com:JiangHaiYang01/JiangHaiYang01.github.io.git
branch: master

发布 github

1
hexo clean && hexo g && hexo deploy

其他优化项

性能优化

Hexo-NexT 加载性能优化

Hexo 博客展示 GitHub Chart

Hexo 博客展示 GitHub Chart

为hexo博客添加service worker的功能

为hexo博客添加service worker的功能

Hexo-NexT Tag 插件的使用

Hexo-NexT Tag 插件的使用