看到有些next主題的網站很炫酷，那么是怎么配置的呢？接下來我會講一講如何實現一些炫酷的效果
主要有以下32種：
- 在右上角或者左上角實現fork me on github
- 添加RSS
- 添加動態背景
- 實現點擊出現桃心效果
- 修改文章內鏈接文本樣式
- 修改文章底部的那個帶#號的標簽
- 在每篇文章末尾統一添加“本文結束”標記
- 修改作者頭像并旋轉
- 博文壓縮
- 修改``代碼塊自定義樣式
- 側邊欄社交小圖標設置
- 主頁文章添加陰影效果
- 在網站底部加上訪問量
- 添加熱度
- 網站底部字數統計
- 添加 README.md 文件
- 設置網站的圖標Favicon
- 實現統計功能
- 添加頂部加載條
- 在文章底部增加版權信息
- 添加網易云跟帖(跟帖關閉，已失效，改為來必力)
- 隱藏網頁底部powered By Hexo / 強力驅動
- 修改網頁底部的桃心
- 文章加密訪問
- 添加jiathis分享
- 博文置頂
- 修改字體大小
- 修改打賞字體不閃動
- 自定義鼠標樣式
- 為博客加上萌萌的寵物
- DaoVoice 在線聯系
- 點擊爆炸效果
1. 在右上角或者左上角實現fork me on github
實現效果圖
具體實現方法
點擊這里 或者 這里挑選自己喜歡的樣式，并復制代碼。 例如，我是復制如下代碼：
然后粘貼剛才復制的代碼到
themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改為你的github地址
2.添加RSS
實現效果圖
具體實現方法
切換到你的blog（我是取名blog，具體的看你們的取名是什么）的路徑，例如我是在/Users/chenzekun/Code/Hexo/blog這個路徑上，也就是在你的根目錄下
然后安裝 Hexo 插件：(這個插件會放在node_modules這個文件夾里)
$ npm install --save hexo-generator-feed
接下來打開畫紅線的文件，如下圖：
在里面的末尾添加：(請注意在冒號后面要加一個空格，不然會發生錯誤！)
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
然后打開next主題文件夾里面的_config.yml,在里面配置為如下樣子：(就是在rss:的后面加上/atom.xml,注意在冒號后面要加一個空格)
# 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
配置完之后運行：
$ hexo g
重新生成一次，你會在./public 文件夾中看到 atom.xml 文件。然后啟動服務器查看是否有效，之后再部署到 Github 中。
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://busuanzi.ibruce.info/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="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link 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="http://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" 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>之前：
(注意，由于官方更新了包，所以畫刪除線的不用弄)
然后在在 hexo 的 _config.yml中添加參數：（具體配置可以參考文檔）
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true
然后hexo clean ，hexo g ，hexo d 就可以看到了。
注意！如果你在 hexo d 的時候出現我下面這個問題
你可以這樣，首先刪除hexo 下面的.deploy_git文件夾，然后運行
git config --global core.autocrlf false
重新 hexo clean,hexo g,hexo d就行了
31.DaoVoice 在線聯系
實現效果圖
具體實現方法
首先在 daovoice 注冊賬號,注冊完成后會得到一個 app_id :
記下這個 app_id的值，然后打開/themes/next/layout/_partials/head.swig,寫下如下代碼：
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
接著打開主題配置文件，在最后寫下如下代碼：
# Online contact
daovoice: true
daovoice_app_id: 這里填你的剛才獲得的 app_id
重新 hexo g ，hexo s 就能看到效果了。
安裝成功后可以在DaoVoice 控制臺上的聊天設置里設置聊天窗口樣式，附上我的設置
32.點擊爆炸效果
實現效果圖
實現方法
跟那個紅心是差不多的，首先在themes/next/source/js/src里面建一個叫fireworks.js的文件，代碼如下：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
打開themes/next/layout/_layout.swig,在</body>上面寫下如下代碼：
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
打開主題配置文件，在里面最后寫下：
# Fireworks
fireworks: true
完??
致謝
感謝很多的大神們的文章，真的學到了許多，有些忘了記錄下來，在這里由衷的感謝。雖然比較折騰，但是確實滿滿的成就感，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/
- https://chanshiyu.com/2017/11/24/%E5%8F%98%E5%BD%A2%E8%AE%B0%20%E2%97%8F%20NexT%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/
