Hexo+NexT 打造一个炫酷的独立博客

作者: 格物_志 | 来源:发表于2019-01-31 11:23 被阅读35次

写在前面

本文主要是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

如何调试手机样式页面，请参照下图

image

页面调试好之后将代码复制到: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 }}&nbsp;
              <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的实在太多了，如有遗漏请见谅~

已经打造了一副好皮囊，接下来的任务就是赋予它一个有趣的灵魂了。

搭建博客的原因就是为了能让自己保持不断地思考，将所学所得持续输出，保持好奇，学无止境~各位共勉！

参考:

以上内容欢迎大家转载，但请注明出处来源~感谢阅读

Hexo+NexT 打造一个炫酷的独立博客

写在前面

致谢大佬

基本定义

博客搭建

初级 基础功能篇

站点配置文件

主题配置文件

进阶 网页样式篇

需要了解的

修改文章页宽

修改小型代码块颜色

修改链接文字样式

修改[Read More]按钮样式

修改标签云（tagcloud）的颜色

修改文章底部#号标签,改为图标

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

隐藏底部"强力驱动"内容

文章末尾添加"本文结束"标记

文章末尾追加版权信息

添加背景图片

移动端显示 back-to-top 按钮和侧栏

进阶 高级功能配置

设置动态title

侧栏加入已运行的时间

侧栏增加歌曲

添加最近文章栏目

点击出现爱心效果

点击头像回到博客首页

增加内容分享服务

增加站内文章搜索功能

增加文章字数统计及阅读时常功能

增加站点访问统计功能

文章置顶功能

LeanCloud统计文章阅读数

文章底部添加打分系统

添加 TopX 页面

博客静态资源压缩优化

评论系统

关于主题更新升级

进阶 搜索引擎篇

写在最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Hexo

初级基础功能篇

进阶网页样式篇

进阶高级功能配置

进阶搜索引擎篇