hexo的next主題個性化教程打造炫酷網站

時間 2019-11-08

標籤 hexo 主題個性化教程打造網站欄目網站開發简体版

原文原文鏈接

看到有些next主題的網站很炫酷，那麼是怎麼配置的呢？接下來我會講一講如何實現一些炫酷的效果javascript

主要有如下30種：css

在右上角或者左上角實現fork me on github
添加RSS
添加動態背景
實現點擊出現桃心效果
修改文章內連接文本樣式
修改文章底部的那個帶#號的標籤
在每篇文章末尾統一添加「本文結束」標記
修改做者頭像並旋轉
博文壓縮
修改``代碼塊自定義樣式
側邊欄社交小圖標設置
主頁文章添加陰影效果
在網站底部加上訪問量
添加熱度
網站底部字數統計
添加 README.md 文件
設置網站的圖標Favicon
實現統計功能
添加頂部加載條
在文章底部增長版權信息
添加網易雲跟帖(跟帖關閉，已失效，改成來必力)
隱藏網頁底部powered By Hexo / 強力驅動
修改網頁底部的桃心
文章加密訪問
添加jiathis分享
博文置頂
修改字體大小
修改打賞字體不閃動
自定義鼠標樣式
爲博客加上萌萌的寵物

1. 在右上角或者左上角實現fork me on github

實現效果圖

具體實現方法

點擊這裏或者這裏挑選本身喜歡的樣式，並複製代碼。例如，我是複製以下代碼： html

而後粘貼剛纔複製的代碼到 themes/next/layout/_layout.swig文件中(放在 <div class="headband"></div>的下面)，並把 href改成你的github地址

2.添加RSS

實現效果圖

具體實現方法

切換到你的blog（我是取名blog，具體的看大家的取名是什麼）的路徑，例如我是在/Users/chenzekun/Code/Hexo/blog這個路徑上，也就是在你的根目錄下前端

而後安裝 Hexo 插件：(這個插件會放在node_modules這個文件夾裏)java

$ npm install --save hexo-generator-feed
複製代碼

接下來打開畫紅線的文件，以下圖：node

在裏面的末尾添加：(請注意在冒號後面要加一個空格，否則會發生錯誤！)jquery

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
複製代碼

而後打開next主題文件夾裏面的_config.yml,在裏面配置爲以下樣子：(就是在rss:的後面加上/atom.xml,注意在冒號後面要加一個空格)git

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
複製代碼

配置完以後運行：github

$ hexo g
複製代碼

從新生成一次，你會在./public 文件夾中看到 atom.xml 文件。而後啓動服務器查看是否有效，以後再部署到 Github 中。web

3. 添加動態背景

實現效果圖

具體實現方法

這個我以前有一篇文章有講過了，詳情點擊個人博客

4. 實現點擊出現桃心效果

實現效果圖

具體實現方法

在網址輸入以下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js
複製代碼

而後將裏面的代碼copy一下，新建love.js文件而且將代碼複製進去，而後保存。將love.js文件放到路徑/themes/next/source/js/src裏面，而後打開\themes\next\layout\_layout.swig文件,在末尾（在前面引用會出現找不到的bug）添加如下代碼：

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
複製代碼

5. 修改文章內連接文本樣式

實現效果圖

具體實現方法

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加以下css樣式，：

// 文章內連接文本樣式
.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;
  }
}
複製代碼

其中選擇.post-body 是爲了避免影響標題，選擇 p 是爲了避免影響首頁「閱讀全文」的顯示樣式,顏色能夠本身定義。

6. 修改文章底部的那個帶#號的標籤

實現效果圖

具體實現方法

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，將 # 換成<i class="fa fa-tag"></i>

7. 在每篇文章末尾統一添加「本文結束」標記

實現效果圖

具體實現方法

在路徑 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,並添加如下內容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>
複製代碼

接着打開\themes\next\layout\_macro\post.swig文件，在post-body 以後， post-footer 以前添加以下畫紅色部分代碼（post-footer以前兩個DIV）：

代碼以下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
複製代碼

而後打開主題配置文件（_config.yml),在末尾添加：

# 文章末尾添加「本文結束」標記
passage_end_tag:
  enabled: true
複製代碼

完成以上設置以後，在每篇文章以後都會添加如上效果圖的樣子。

8. 修改做者頭像並旋轉：

實現效果圖：

具體實現方法

打開\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: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線爲以低速結束 
    (1s)等待1秒而後開始動畫 (1)動畫播放次數(infinite爲循環播放) ]*/
 

  /* 鼠標通過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠標通過中止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠標通過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
複製代碼

9. 博文壓縮

在站點的根目錄下執行如下命令：

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

複製代碼

在以下圖所示，新建 gulpfile.js ，並填入如下內容：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 壓縮 public 目錄 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public 目錄 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 壓縮 public/js 目錄 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 執行 gulp 命令時執行的任務
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);
複製代碼

生成博文是執行 hexo g && gulp 就會根據 gulpfile.js 中的配置，對 public 目錄中的靜態資源文件進行壓縮。

10. 修改``代碼塊自定義樣式

實現效果圖

具體實現方法

打開\themes\next\source\css\_custom\custom.styl,向裏面加入：(顏色能夠本身定義)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代碼塊的自定義樣式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}
複製代碼

11. 側邊欄社交小圖標設置

實現效果圖

具體實現方法

打開主題配置文件（_config.yml），搜索social_icons:,在圖標庫找本身喜歡的小圖標，並將名字複製在以下位置

12. 主頁文章添加陰影效果

實現效果圖

具體實現方法

打開\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);
  }
複製代碼

13. 在網站底部加上訪問量

實現效果圖

具體實現方法

打開\themes\next\layout_partials\footer.swig文件,在copyright前加上畫紅線這句話：

代碼以下：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
複製代碼

而後再合適的位置添加顯示統計的代碼，如圖：

代碼以下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
複製代碼

在這裏有兩中不一樣計算方式的統計代碼：

pv的方式，單個用戶連續點擊n篇文章，記錄n次訪問量

<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
複製代碼

uv的方式，單個用戶連續點擊n篇文章，只記錄1次訪客數

<span id="busuanzi_container_site_uv">
  本站總訪問量<span id="busuanzi_value_site_uv"></span>次
</span>
複製代碼

添加以後再執行hexo d -g，而後再刷新頁面就能看到效果

14. 添加熱度

實現效果圖：

具體實現方法

next主題集成leanCloud，打開/themes/next/layout/_macro/post.swig,在畫紅線的區域添加℃：

而後打開，/themes/next/languages/zh-Hans.yml,將畫紅框的改成熱度就能夠了

15. 網站底部字數統計

###實現效果圖

具體方法實現

切換到根目錄下，而後運行以下代碼

$ 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>
複製代碼

16. 添加 README.md 文件

每一個項目下通常都有一個 README.md 文件，可是使用 hexo 部署到倉庫後，項目下是沒有 README.md 文件的。

在 Hexo 目錄下的 source 根目錄下添加一個 README.md 文件，修改站點配置文件 _config.yml，將 skip_render 參數的值設置爲

skip_render: README.md
複製代碼

保存退出便可。再次使用 hexo d 命令部署博客的時候就不會在渲染 README.md 這個文件了。

17. 設置網站的圖標Favicon

實現效果圖

具體方法實現

在EasyIcon中找一張（32*32）的ico圖標,或者去別的網站下載或者製做，並將圖標名稱改成favicon.ico，而後把圖標放在/themes/next/source/images裏，而且修改主題配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
複製代碼

18. 實現統計功能

實現效果圖

具體實現方法

在根目錄下安裝 hexo-wordcount,運行：

$ npm install hexo-wordcount --save
複製代碼

而後在主題的配置文件中，配置以下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
複製代碼

19. 添加頂部加載條

實現效果圖

具體實現方法

打開/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">
複製代碼

可是，默認的是粉色的，要改變顏色能夠在/themes/next/layout/_partials/head.swig文件中添加以下代碼（接在剛纔link的後面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*進度條顏色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*陰影顏色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB; /*上邊框顏色*/
        border-left-color: #1E92FB; /*左邊框顏色*/
    }
</style>
複製代碼

目前，博主的增長頂部加載條的pull request 已被Merge===>詳情如今升級最新版的next主題，升級後只需修改主題配置文件(_config.yml)將pace: false改成pace: true就好了，你還能夠換不一樣樣式的加載條，以下圖：

20. 在文章底部增長版權信息

實現效果圖

在目錄 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 %}
複製代碼

在目錄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;
}
複製代碼

修改next/layout/_macro/post.swig，在代碼

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>
複製代碼

以前添加增長以下代碼：

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

以下：

修改next/source/css/_common/components/post/post.styl文件，在最後一行增長代碼：

@import "my-post-copyright"
複製代碼

保存從新生成便可。若是要在該博文下面增長版權信息的顯示，須要在 Markdown 中增長copyright: true的設置，相似：

---
title: 前端小項目：使用canvas繪畫哆啦A夢
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---
複製代碼

小技巧：若是你以爲每次都要輸入copyright: true很麻煩的話,那麼在/scaffolds/post.md文件中添加：

這樣每次 hexo new "你的內容"以後，生成的md文件會自動把 copyright:加到裏面去 ( 注意：若是解析出來以後，你的原始連接有問題：如： http://yoursite.com/前端小項目：使用canvas繪畫哆啦A夢.html,那麼在根目錄下 _config.yml中寫成相似這樣：）

就好了。

21. 添加網易雲跟帖(跟帖關閉，已失效，改成來必力)

實現效果圖

具體方法實現 有兩種實現方法： ①更新next主題，由於最新版本的主題已經支持這種評論。直接在主題配置文件_config.yml 文件中添加以下配置:

gentie_productKey: #your-gentie-product-key
複製代碼

②若是你不想更新的話，那麼按下面步驟進行：首先，仍是在主題配置文件_config.yml 文件中添加以下配置:

gentie_productKey: #your-gentie-product-key
複製代碼

你的productKey就是下面畫紅線部分

而後在在layout/_scripts/third-party/comments/ 目錄中添加 gentie.swig，文件內容以下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
  {% if theme.gentie_productKey %}
    {% set gentie_productKey = theme.gentie_productKey %}
    <script>
      var cloudTieConfig = {
        url: document.location.href, 
        sourceId: "",
        productKey: "{{gentie_productKey}}",
        target: "cloud-tie-wrapper"
      };
    </script>
    <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
  {% endif %}
{% endif %}
複製代碼

而後在layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/gentie.swig' %}

複製代碼

最後，在 layout/_partials/comments.swig 文件中條件最後追加網易雲跟帖插件引用的判斷邏輯：

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>
複製代碼

具體位置以下：

可能你hexo s時可能看不到，直接hexo d就能夠看到了

近日，我朋友發來消息，說網易雲跟帖要關了，我網上查了一下，果真如此

都是淚,上次用了多說，結果多說關了，接着是網易雲跟帖，此次直接用國外的來必力，應該不會這麼容易關吧

方法其實仍是跟上面差很少的

首先在 _config.yml 文件中添加以下配置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid
複製代碼

其中，livere_uid就是畫紅線的部分

而後在 layout/_scripts/third-party/comments/ 目錄中添加 livere.swig，文件內容以下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}
複製代碼

而後在 layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/livere.swig' %}
複製代碼

最後，在 layout/_partials/comments.swig 文件中條件最後追加 LiveRe 插件是否引用的判斷邏輯：

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}
複製代碼

完

22. 隱藏網頁底部powered By Hexo / 強力驅動

打開themes/next/layout/_partials/footer.swig,使用」」隱藏之間的代碼便可，或者直接刪除。位置如圖：

23. 修改網頁底部的桃心

仍是打開themes/next/layout/_partials/footer.swig，找到：

，而後仍是在圖標庫中找到你本身喜歡的圖標，而後修改畫紅線的部分就能夠了。

24. 文章加密訪問

實現效果圖

具體實現方法

打開themes->next->layout->_partials->head.swig文件,在如下位置插入這樣一段代碼：

代碼以下：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯誤！');
                history.back();
            }
        }
    })();
</script>
複製代碼

而後在文章上寫成相似這樣：

25. 添加jiathis分享

在主題配置文件中，jiathis爲true，就好了，以下圖

默認是這樣子的：

若是你想自定義話，打開 themes/next/layout/_partials/share/jiathis.swig修改畫紅線部分就能夠了

26. 博文置頂

修改 hero-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 值，數值越大文章越靠前，如

---
title: 解決Charles亂碼問題
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

複製代碼

27. 修改字體大小

打開\themes\next\source\css\ _variables\base.styl文件，將$font-size-base改爲16px，以下所示：

$font-size-base            =16px
複製代碼

28. 修改打賞字體不閃動

修改文件next/source/css/_common/components/post/post-reward.styl，而後註釋其中的函數wechat:hover和alipay:hover，以下：

/* 註釋文字閃動函數
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/
複製代碼

29. 自定義鼠標樣式

打開themes/next/source/css/_custom/custom.styl,在裏面寫下以下代碼

// 鼠標樣式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }
複製代碼

其中 url 裏面必須是 ico 圖片，ico 圖片能夠上傳到網上（我是使用七牛雲圖牀），而後獲取外鏈，複製到 url 裏就好了

30.爲博客加上萌萌的寵物

實現效果圖

具體實現方法 在終端切換到你的博客的路徑裏，而後輸入以下代碼：

npm install -save hexo-helper-live2d
複製代碼

而後打開Hexo/blog/themes/next/layout 的_layout.swig,將下面代碼放到</body>以前：

{{ live2d() }}
複製代碼

而後在在 hexo 的 _config.yml中添加參數：

live2d:
  model: wanko
  bottom: -30
複製代碼

而後hexo clean ，hexo g ，hexo d 就能夠看到了。

下面是一些model，能夠換不一樣的寵物

model 模型名稱默認值: z16
- Gantzert_Felixander
- Epsilon2.1
- haru
- miku
- ni-j
- nico
- nito
- nipsilon
- nietzsche
- shizuku
- tsumiki
- wanko
- z16
- hibiki
- koharu
- haruto
- Unitychan
- tororo
- hijiki
width 寬度默認值: 150
height 高度默認值： 300
className <canvas>元素的類名默認值： live2d
id <canvas> 元素的id 默認值： live2dcanvas
bottom <canvas> 元素的底部偏移默認值： -20 若是嫌模型位置不正確能夠調整這個參數

用這個有缺點，若是是在手機上看的話，感受不是很好，寵物一直擋着文字，還有就是加載有點慢

注意！若是你在 hexo d 的時候出現我下面這個問題

你能夠這樣，首先刪除hexo 下面的.deploy_git文件夾，而後運行

git config --global core.autocrlf false
複製代碼

從新 hexo clean,hexo g,hexo d就好了

致謝

感謝不少的大神們的文章，真的學到了許多，有些忘了記錄下來，在這裏由衷的感謝。雖然比較折騰，可是確實滿滿的成就感，Road endless its long and far, I will seek up and down！

歡迎訪問個人博客

參考的文章：

http://blog.csdn.net/MasterAnt_D/article/details/56839222
http://zidingyi4qh.com/2017/04/27/NexT%E5%BA%95%E9%83%A8logo%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E9%87%8F/
https://fuyis.me/2017/01/25/Hexo-theme-next-and-optimized-configuration/
http://www.vitah.net/posts/20f300cc/
http://thief.one/2017/03/03/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/