基于Hexo和Github的炫酷个人博客（进阶篇）

基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）

网页底部加上浏览量

• 打开/themes/next/layout/_partials/footer.swig文件，在copyright加上如下代码：

 <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

本地查看浏览量会异常，出现百万访问，这是正常的。当放在远程服务器上，显示是正常的。
本文没有实现在底部显示，而是实现在侧边栏实现。

---

添加热度

• 进入LeanCloud官网，进行账号注册。登录后，进入控制台，创建应用，应用名为Hexo如下图所示：
  
• 创建应用后，点击存储，创建Class，Class命名为Counter，操作如下图所示：
  

• 查看AppID和AppKey，如下图所示：
  

• 打开/themes/next/layout/_macro/post.swig，command+F搜索leancloud-visitors-count，在图片位置加入℃，如下图所示
  -
  -编辑主题配置文件，搜索leancloud_visitors，将其值设为：ture，将AppID和AppKey粘贴到相应位置：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: ture
  app_id: app_id
  app_key: app_key

效果图如下图所示：

---

网站底部字数统计

• 安装hexo插件，切换到根目录：
  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>

---

添加网页顶部进度加载条

• 编辑主题配置文件，ctrl+F搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。

# Progress bar in the top during page loading.
pace: ture
# 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

添加来必力云跟帖功能 -参考基础篇参考链接（本文未实现，不好总结）

---

底部隐藏由Hexo强力驱动、主题–NexT.Mist

• 打开/themes/next/layout/_partials/footer.swig，注释掉相应代码。

---

添加jiathis分享

-编辑主题配置文件，将jiathis改为ture即可

# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: ture
  ##uid: Get this uid from http://www.jiathis.com/
#add_this_id:

-效果如下图所示：

---

博文置顶

• 修改hexo-generator-index插件，把node_modules/hexo-generator-index/lib/generator.js中代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

• 文章添加Top值，值越大，越靠前：(在文章前面添加top字段)

---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---

修改字体大小

编辑/themes/next/source/css/_variables/base.styl，ctrl+F搜索$font-size-base，修改为你想要的大小：

---

添加DaoVoice在线联系

效果如下，参考参考链接。

---

添加侧栏推荐阅读

• 编辑主题配置文件，如下配置即可：

Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
  ****: https://****
 Github: https://xxx

在文章底部增加版权信息

• 在目录Blog/themes/next/layout/_macro/，添加文件 my-copyright.swig，内容如下

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

• 在目录/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl，添加以下代码：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

• 在/themes/next/source/css/_common/components/post/添加文件my-post-copyright.styl，文件内容如下：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

• 修改/themes/next/layout/_macro/post.swig，在如图位置添加以下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

• 在/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代码;

@import "my-post-copyright"

• 在Markdown文章中加入copyright : ture：

---
title: Hexo-NexT主题配置
date: 2018-10-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
copyright: ture
---

-配置根目录下的_config.yml文件，配置为：

• 效果图如下所示：
  

---

Hexo博客添加站内搜索

• NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍Local Search的安装吧。
• 安装 hexo-generator-search
  npm install hexo-generator-search --save
• 安装 hexo-generator-searchdb
  npm install hexo-generator-searchdb --save
• 编辑站点配置文件，添加以下内容
  search: path: search.xml field: post format: html limit: 10000
• 编辑主题配置文件，设置Local searchenable为ture

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # 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

效果如下：

---

添加外链网易云音乐

打开网页网易云音乐，注册并登陆你的账号号，点击右上角进入我的主页，选择你喜欢的歌曲或者歌单。点击生成外链播放器。


复制上面生成html代码，粘贴在你想放置的位置。如侧边栏。

基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）

未总结的功能（未完待续）

• SEO优化
• 关键词优化
• hexo各种插件的下载
• hexo图片插件
• hexo压缩打包插件