如何搭建 Hexo + next 主题这些随便一搜大把教程。这篇文章主要是对网站样式进一步配置！
以下内容均有实现在我个人的博客上：我个人博客网站
1.设置网页布局
打开主题配置文件（/HexoRoot/theme/next/_config.yml），找到scheme:字眼，设置你喜爱的网页布局
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2.主页显示头像
找到主题配置文件（/HexoRoot/theme/next/_config.yml）的 avatar:那一行，填上头像的相对路径或绝对路径。注意：如果是本地的图片，需要放在/HexoRoot/theme/next/source/images目录下
如：avatar: /images/cat.png
3.显示社交连接
找到主题配置文件（/HexoRoot/theme/next/_config.yml）的social:那一行，需要显示的社交将注释取消就可以啦！
social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
4.设置背景图片
背景图片放在/HexoRoot/theme/next/source/images目录下，然后在 HexoRoot/theme/next/source/css/_custom目录下，打开custom.styl文件，在文件的最上方加上一代码
body { background:url(/images/backGround.jpg);}
保存后刷新网页就可以啦~
5.博客后台管理平台——hexo-admin
在Hexo根目录下执行npm install --save hexo-admin命令，然后重启Hexo服务后，打开http://你的ip地址/admin
最重要的是设置用户密码，因为你不设置密码的话，你的博客网站就有可能被别人恶意新增修改文章，所以记得设置一个不容易被别人破解的密码。
将复制的内容添加到Hexo根目录的配置文件_config.yml中，然后再刷新博客后台就需要输入密码啦！
6.在右上角或左上角添加 Fork me on Github
在/HexoRoot/themes/next/layout/_layout.swig文件中，找到<div class="headband"></div>这一行，然后添加以下代码，保存后刷新网页就可以达到效果啦！
根据你个人的需要，可以设置位置和颜色，详情请看 https://github.blog/2008-12-19-github-ribbons/
以下是我个人博客的设置，设置到右上角
<a href="https://github.com/yourname">
<img width="149" height="149"
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
7.主页文章添加阴影效果
打开/HexoRoot/themes/next/source/css/_custom/custom.styl，向里面加入：
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
8.底部加上访问量
在/HexoRoot/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="powered-by">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_pv">
本站访问量<span id="busuanzi_value_site_pv"></span>
</span>
</div>
9.网站底部字数统计
在博客根目录下执行$ npm install hexo-wordcount --save命令
然后在/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
10.添加加载条
在主题目录下，执行 git clone https://github.com/theme-next/theme-next-pace source/lib/pace，然后在主题的配置文件中找到 pace: false这一行，并将false改为true，然后根据你个人喜爱设置pace_theme:加载进度的样式。
以下是我个人的配置
pace: true #是否开启进度条
pace_theme: pace-theme-loading-bar #选择进度条样式
打开/HexoRoot/themes/next/layout/_partials/head.swig文件，添加红框上的代码
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
11.浏览页面显示当前浏览进度
打开 /themes/next_config.yml，搜索关键字 scrollpercent，把 false 改为 true
12.增加打赏功能
# Reward
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechat_pay.jpg
alipay: /images/ali_pay.jpg
13.修改打赏字体不闪动
修改文件/HexoRoot/theme/next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover
/* 注释文字闪动函数
if (hexo-config('reward_settings.animation')) {
> div:hover p {
animation: roll .1s infinite linear;
}
@keyframes roll {
from {
transform: rotateZ(30deg);
}
to {
transform: rotateZ(-30deg);
}
}
}
*/
14.搜索功能
在站点的根目录下执行npm install hexo-generator-searchdb --save命令
打开站点配置文件 /HexoRoot/_config.yml
search:
path: search.xml
field: post
format: html
limit: 10000
打开主题配置文件 /HexoRoot/theme/next/_config.yml
# Local search
local_search:
enable: true
15.评论功能
常见使用的评论系统有：
来必力：（需要邮箱注册，加载慢，较卡顿）
畅言：（安装需要备案号）
Gitment：（加载慢，有Bug）
Valine: (简约，实用，使用Leancloud作为线上数据库）
综上所诉，我使用 Valine 作为我个人博客网站的评论系统。
详细的配置流程，可参考使用 Valine 添加评论功能
16.分页显示异常
修改的位置themes\next\layout\_partials\pagination.swig覆盖为以下的内容：
{% if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
prev_text: '<',
next_text: '>',
mid_size: 1
})
}}
</nav>
{% endif %}
如果觉得文章不错的话，麻烦点个赞哈！对于文章有哪里不清楚或者有误的地方，欢迎在评论区留言~
网友评论