写在前面
本文主要是NexT主题配置以及页面的样式优化，参考了许多大佬的文章以及配置文件。
本文参考的文章都会直接给出原文链接或者以注脚的形式标记出处，但 Google 参考了实在太多太多了，如有遗漏，欢迎指出。
前期整个博客优化配置过程中收藏了许多很好的博客，回头可以贴个友情链接大家可以去看看。
本文内容会在后续的优化中慢慢补充完整：
新建日期: 2018-10-16更新日期: 2018-10-17更新日期: 2018-10-19更新日期: 2018-10-23- 更新日期: 2018-10-30
由于本文是发布在简书，许多样式效果无法展现，可移步Hexo+NexT 打造一个炫酷博客 查看具体的效果。
致谢大佬
本文吸收了以下大佬的内容，搭建博客容易，后续的补充功能、优化繁琐至极，下面的几篇文章都是比较全面，有很大的参考意义 ：
基本定义
在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 <span id="inline-blue">站点配置文件</span>， 后者称为 <span id="inline-purple">主题配置文件</span>。
~/hexo/_config.yml
~/hexo/themes/next/_config.yml
博客搭建
博客的搭建方式可参考这篇博文【Hexo+Gitee 搭建独立博客】
初级 基础功能篇
站点配置文件
最权威的当然是先看Hexo官方文档
下面是我在用的配置文件:
## 站点设置
title: 雜言非語
subtitle: 成為一個厲害得普通人
description: 小人物,码农
keywords:
author: Sun XY
language: zh-Hans
timezone:
#主题设置
theme: next
# 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun-xyu.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 写作文章设置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# 日期格式/时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
#RSS订阅是设置
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# 发布部署地址设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/Sun_xy/blog.git
branch: master
# 博客搜索功能配置
search:
path: search.xml
field: post
format: html
limit: 10000
# 文章推荐功能,需要安装插件
recommended_posts:
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 1 #外部文章数量
fixedNumber: false
autoDisplay: false #自动在文章底部显示推荐文章
excludePattern: []
titleHtml: <h1>推荐文章</h1> #自定义标题
主题配置文件
最权威的当然是先看NexT使用文档
下面是我在用的配置文件: 由于内容太长无法发布，所以删掉了，直接看链接吧。
配置文件参考了reuixiy大佬的配置
进阶 网页样式篇
需要了解的
浏览器按 F12 即可，建议用Google Chrome 浏览器调试。
自定义样式文件 : themes\next\source\css\_custom\custom.styl
修改文件后直接保存，刷新页面即可查看效果。
修改文章页宽
打开themes/next/source/css/_variables/base.styl，找到以下字段并修改为合适的宽度：
- $content-desktop-large = 900px
+ $content-desktop-large = 1000px
修改小型代码块颜色
修改\themes\next\source\css\ _variables\base.styl文件，加入自定义颜色：
$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的值：
// 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-background = $my-code-background
+ $code-foreground = $my-code-foreground
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}
修改链接文字样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
//文章内链接文本样式
.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;
}
}
修改[Read More]按钮样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
// [Read More]按钮样式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
修改标签云（tagcloud）的颜色
修改themes/next/layout/page.swig文件，加入自定义样式:
- {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
+ {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
修改对应参数值即可，参数说明见 Hexo官方文档
修改文章底部#号标签,改为图标
修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
头像设置圆形,停留旋转效果
修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl,新增以下代码:
.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文件,将powered和enable设置为false
# 页脚
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2018
# Icon between year and copyright info.
# icon: user
icon: sun-o
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
- powered: true
+ powered: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
- enable: true
+ enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
文章末尾添加"本文结束"标记
修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代码：
+ <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
文章末尾追加版权信息
增加版权有两种方式
- 修改主题
配置文件,搜索post_copyright
post_copyright:
- enable: false
+ enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
- 如果觉得默认不好看,则可以自定义样式,找到
themes/next/layout/_macro/post.swig，在footer之前添加如下代码(添加之前确保已添加样式)：
<div>
<p id="div-border-left-red">
<b>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知识共享署名-相同方式共享 4.0 </a>国际许可协议发布</b><br/>
<span>
<b>本文地址：</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>转载请注明出处，谢谢！</b>
</span>
</p>
</div>
添加背景图片
通过 jquery-backstretch，具体操作呢，编辑文件/themes/next/layout/_layout.swig：
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
+ <script>
+ $("body").backstretch("https://背景图.jpg");
+ </script>
</body>
加入到文件最后面</body>前面即可。
移动端显示 back-to-top 按钮和侧栏
具体手机显示可用手机访问我的博客
我的博客主题是Muse，主题的设计模版是 Muse 或 Mist，就可以直接在主题配置文件中配置：
修改主题配置themes/next/_config.yml
# Enable sidebar on narrow view
onmobile: true
如何调试手机样式页面，请参照下图
页面调试好之后将代码复制到:themes\next\source\css\_custom\custom.styl
具体可参考我的custom.styl样式文件
~~ 附上我的custom.styl样式文件~~
不建议全部复制粘贴使用，最好是F12打开，根据关键ID找到对应的样式，复制到自己的文件中。
由于内容太长已删除样式，请查看链接。
样式文件参考了reuixiy大佬的配置
进阶 高级功能配置
设置动态title
themes/next/source/js/src下创建dytitle.js：
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "/TEP.png");
document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "/favicon.png");
document.title = '♪(^∇^*)又好了。。。 ' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
修改themes/next/layout/layout.swing,在 </body> 之前添加：
<script type="text/javascript" src="/js/src/dytitle.js"></script>
侧栏加入已运行的时间
修改文件:themes/next/layout/_custom/sidebar.swig，加入一下代码：
BirthDay=new Date("05/27/2017 15:13:14"); 日期修改为自己的
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()"， 1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
修改文件themes/next/layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}
- {% include '../_custom/sidebar.swig' %}
侧栏增加歌曲
在网易云音乐中搜索我们想要插入的音乐，然后点击生成外链播放器
复制外链iframe代码:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22742146&auto=1&height=66"></iframe>
修改文件layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">{{ name }}</a>
</li>
{% endfor %}
</ul>
{% include '../_custom/sidebar.swig' %}
+ <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22742146&auto=1&height=66"></iframe>
</div>
{% endif %}
添加最近文章栏目
修改themes/next/layout/_macro/sidebar.swig 。找到theme.social板块代码，在该板块最后的endif后隔一行添加如下代码。
{# recent posts #}
{% 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') %}
{% for post in posts.slice('0', '5') %}
<li class="recent_posts_li">
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
编辑themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl
li.recent_posts_li {
text-align: cengter;
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
主题配置文件themes/next/_config.yml,添加如下代码
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
点击出现爱心效果
在/themes/next/source/js/love.js下新建文件love.js，接着把该链接下的代码拷贝粘贴到love.js文件中
!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);
在\themes\next\layout\_layout.swig文件末尾添加：
{% include '_third-party/exturl.swig' %}
</body>
</html>
+ <!-- 页面点击小红心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
点击头像回到博客首页
修改文件/themes/next/layout/_macro/sidebar.swig,增加以下代码:
+ <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/_config.yml主题配置文件，搜索关键字needmoreshare2，找到如下代码并做以下修改:
# 文章分享功能
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: vertical
position: topRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
关于分享中的微信二维码图片加载失败,感谢Qcmoke大佬的解决方案
next 5.1.4版本中微信加载不出二维码,应该是封装好的微信分享链接失效了。我是通过老版本的仓库
https://github.com/iissnan/hexo-theme-next 安装的，所以有这个问题，而新版本的next是没有这个问题的。新版本仓库已经搬迁到了https://github.com/theme-next
输入以下命令：
rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
增加站内文章搜索功能
安装插件hexo-generator-searchdb,执行以下命令:
npm install hexo-generator-searchdb --save
修改hexo/_config.yml站点配置文件,末尾新增以下代码:
search:
path: search.xml
field: post
format: html
limit: 10000
修改themes/next/_config.yml主题配置文件，搜索关键字local_search找到如下代码，将enable设置为true，如下：
local_search:
enable: true
增加文章字数统计及阅读时常功能
安装插件hexo-wordcount,执行以下命令:
npm install hexo-wordcount --save
修改themes/next/_config.yml主题配置文件，搜索关键字post_wordcount,修改如下:
post_wordcount:
item_text: true
wordcount: true #单篇文章字数
min2read: true #单篇阅读时长
totalcount: true #站点总字数
separated_meta: true
增加站点访问统计功能
next主题默认集成了第三方访问统计插件。
修改themes/next/_config.yml主题配置文件，搜索关键字busuanzi_count:
# 不蒜子统计，用于在页脚显示总访客数和总浏览量，将 false 改为 true 就能直接使用
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
# 页面浏览量，不建议开启，建议用上面的 leancloud_visitors
# 首先 leancloud 更稳定，其次 leancloud 便于管理
# 最后，可以利用 leancloud 的 api 建立 TopX 页面
page_pv: false
page_pv_header: <i class="fa fa-eye"></i>
page_pv_footer:
<div class="note warning"><p>
目前不蒜子『dn-lbstatics.qbox.me』域名过期，更换域名到『busuanzi.ibruce.info』！故你可能需要修改>以下文件相关信息：
</p></div>
修改themes/next/layout/_third-party/analytics/busuanzi-counter.swig文件，找到dn-lbstatics.qbox.me,修改代码：
> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>
文章置顶功能
移除默认安装的插件：
npm uninstall hexo-generator-index --save
安装新插件:
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以---分隔的区域）加上一行：
top: true
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便会显示在文章 a 的前面。
LeanCloud统计文章阅读数
已有大佬提供,具体详情请戳进 Hexo博客-NexT主题：使用leancloud进行页面访客统计
文章底部添加打分系统
我是一个搬运工,具体详情请戳进 超深度优化-5.6小节
添加 TopX 页面
懒了懒了,具体详情请戳进 超深度优化-5.8小节
博客静态资源压缩优化
用hexo生成静态文件时，默认生成的静态文件存在大量空白，而且css、js都未经压缩，这在一定程度上会影响页面的加载，所以在网上所搜有没有办法来优化这些问题？
答案肯定是有，当然大部分博客都提到了使用gulp来精简代码，而我今天所要跟大家介绍的是hexo-neat插件 。我为啥不选择gulp而使用hexo-neat呢？因为用gulp需要在每次生成静态文件后，即hexo g后，都要另外执行gulp命令才能压缩静态文件；而使用hexo-neat则无须另外执行其他命令即可自动完成压缩功能，即方便了使用习惯。
在站点的根目录下执行以下命令：
npm install hexo-neat --save
打开blog/_config.yml全局配置文件添加如下配置：
#静态资源压缩优化
# hexo-neat
neat_enable: true # 启用neat
# 对html优化
neat_html:
enable: true
exclude:
# 对css优化
neat_css:
enable: true
exclude:
- '*.min.css'
# 对js优化
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
评论系统
如果上面你已经注册了LeanCloud(没有注册的点这里),那么只要把appid和appkey设置下即可,修改主题配置文件:
# 评论系统
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: #your id
appkey: #your key
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
关于主题更新升级
对于升级主题，我们需要重新配置主题配置文件，那么每次升级都要这么干吗？超麻烦！
NexT作者给我们的建议就是使用Data Files，具体详情请戳进 Theme configurations using Hexo data files #328
贴出以下总结:
- 请先确保你所使用的 Hexo 版本在 3 以上
- 在站点的 source/_data 目录下新建 next.yml 文件（_data目录可能需要新建）
- 迁移站点配置文件和主题配置文件中的配置到 next.yml 中
所有主题相关的配置都可以写到 next.yml 文件中。 主题目录下的 _config.yml 可以不用做任何修改。
若你是新安装的，可以将主题的 _config.yml 里面的内容整个拷贝过去，然后修改即可
若是之前有将配置写在站点的 _config.yml 里，把这个文件里主题相关的配置剪切到 next.yml 里去;同时将主题下 _config.yml 里面的配置也拷贝过去，相当于是全部合并到 next.yml 中去了。
每次修改 _next.yml 需要重启 hexo server 才能生效
进阶 搜索引擎篇
博客文章写好之后总是无人问津,那是因为搜索引擎并未收录我们的文章
想要搜索引擎收录文章，首先得拥有自己的域名，如何购买域名可参考这篇文章
参考这篇【域名绑定篇】大佬的配置
关于如何优化请直接参考这篇【搜索优化】Hexo-next百度和谷歌搜索优化大佬的配置
上一篇好像要翻墙才能访问，看这篇也行【搜索优化】hexo高阶教程：想让你的博客被更多的人在搜索引擎中搜到吗？大佬的配置
写在最后
由于本文是发布在简书，许多样式效果无法展现，完整的博客文章可移步Hexo+NexT 打造一个炫酷博客 查看。
太累了 ~ ，虽然这篇文章自己写的很少，大部分都是参考大佬的，但是文中的所有配置我都用到了自己博客中，算是都试了个遍，然后重新排版。如果对文中的功能有不清楚的也可以留言。文章最后贴出了参考的文章，Google的实在太多了，如有遗漏请见谅~
已经打造了一副好皮囊，接下来的任务就是赋予它一个有趣的灵魂了。
搭建博客的原因就是为了能让自己保持不断地思考，将所学所得持续输出，保持好奇，学无止境~各位共勉！
参考:
- http://yangbingdong.com/2017/build-blog-hexo-advanced/
- https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
- http://www.ehcoo.com/seo.html
- https://www.qcmoke.site/hexo_next.html
- https://almostover.ru/2016-01/hexo-theme-next-test/#Tab-tag-test
- https://blog.csdn.net/u012443858/article/details/60812982
- https://blog.csdn.net/w_ngzeqi/article/details/73863543
- https://blog.csdn.net/sunshine940326/article/details/70936988
- https://lfwen.site/2016/05/31/add-count-for-hexo-next/
以上内容欢迎大家转载，但请注明出处来源~感谢阅读
