標籤：

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

01-29

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

主要有以下30種：

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

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-feedn

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

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

# Extensionsn## Plugins: http://hexo.io/plugins/nplugins: hexo-generate-feedn

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

# Set rss to false to disable feed link.n# Leave rss as empty to use sites feed link.n# Set rss to specific value if you have burned your feed already.nrss: /atom.xmln

配置完之後運行：

$ hexo gn

重新生成一次，你會在./public 文件夾中看到 atom.xml 文件。然後啟動伺服器查看是否有效，之後再部署到 Github 中。

3. 添加動態背景

實現效果圖

具體實現方法

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

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

實現效果圖

具體實現方法

在網址輸入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.jsn

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

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

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

實現效果圖

具體實現方法

修改文件 themesnextsourcecss_commoncomponentspostpost.styl，在末尾添加如下css樣式，：

// 文章內鏈接文本樣式n.post-body p a{n color: #0593d3;n border-bottom: none;n border-bottom: 1px solid #0593d3;n &:hover {n color: #fc6423;n border-bottom: none;n border-bottom: 1px solid #fc6423;n }n}n

其中選擇.post-body 是為了不影響標題，選擇 p 是為了不影響首頁「閱讀全文」的顯示樣式,顏色可以自己定義。

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

實現效果圖

具體實現方法

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

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

實現效果圖

具體實現方法

在路徑 themesnextlayout_macro 中新建 passage-end-tag.swig 文件,並添加以下內容：

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

接著打開themesnextlayout_macropost.swig文件，在post-body 之後， post-footer之前添加如下畫紅色部分代碼（post-footer之前兩個DIV）：

代碼如下：

<div>n {% if not is_index %}n {% include passage-end-tag.swig %}n {% endif %}n</div>n

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

# 文章末尾添加「本文結束」標記npassage_end_tag:n enabled: truen

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

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

具體實現方法

打開themesnextsourcecss_commoncomponentssidebarsidebar-author.styl，在裡面添加如下代碼：

.site-author-image {n display: block;n margin: 0 auto;n padding: $site-author-image-padding;n max-width: $site-author-image-width;n height: $site-author-image-height;n border: $site-author-image-border-width solid $site-author-image-border-color;nn /* 頭像圓形 */n border-radius: 80px;n -webkit-border-radius: 80px;n -moz-border-radius: 80px;n box-shadow: inset 0 -1px 0 #333sf;nn /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束 n (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite為循環播放) ]*/nnn /* 滑鼠經過頭像旋轉360度 */n -webkit-transition: -webkit-transform 1.0s ease-out;n -moz-transition: -moz-transform 1.0s ease-out;n transition: transform 1.0s ease-out;n}nnimg:hover {n /* 滑鼠經過停止頭像旋轉 n -webkit-animation-play-state:paused;n animation-play-state:paused;*/nn /* 滑鼠經過頭像旋轉360度 */n -webkit-transform: rotateZ(360deg);n -moz-transform: rotateZ(360deg);n transform: rotateZ(360deg);n}nn/* Z 軸旋轉動畫 */n@-webkit-keyframes play {n 0% {n -webkit-transform: rotateZ(0deg);n }n 100% {n -webkit-transform: rotateZ(-360deg);n }n}n@-moz-keyframes play {n 0% {n -moz-transform: rotateZ(0deg);n }n 100% {n -moz-transform: rotateZ(-360deg);n }n}n@keyframes play {n 0% {n transform: rotateZ(0deg);n }n 100% {n transform: rotateZ(-360deg);n }n}n

9. 博文壓縮

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

$ npm install gulp -gn$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --saven

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

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

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

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

實現效果圖

具體實現方法

打開themesnextsourcecss_customcustom.styl,向裡面加入：(顏色可以自己定義)

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

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

實現效果圖

具體實現方法

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

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

實現效果圖

具體實現方法

打開themesnextsourcecss_customcustom.styl,向裡面加入：

// 主頁文章添加陰影效果n .post {n margin-top: 60px;n margin-bottom: 60px;n padding: 25px;n -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);n -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);n }n

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

實現效果圖

具體實現方法

打開themesnextlayout_partialsfooter.swig文件,在copyright前加上畫紅線這句話：

代碼如下：

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

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

代碼如下：

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

在這裡有兩中不同計算方式的統計代碼：

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

<span id="busuanzi_container_site_pv">n 本站總訪問量<span id="busuanzi_value_site_pv"></span>次n</span>n

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

<span id="busuanzi_container_site_uv">n 本站總訪問量<span id="busuanzi_value_site_uv"></span>次n</span>n

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

14. 添加熱度

實現效果圖：

具體實現方法

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

然後打開，/themes/next/languages/zh-Hans.yml,將畫紅框的改為熱度就可以了

15. 網站底部字數統計

實現效果圖

具體方法實現

切換到根目錄下，然後運行如下代碼

$ npm install hexo-wordcount --saven

然後在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">n <div class="powered-by"></div>n <span class="post-count">博客全站共{{ totalcount(site) }}字</span>n</div>n

16. 添加 README.md 文件

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

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

skip_render: README.mdn

保存退出即可。再次使用 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.nfavicon: /favicon.icon

18. 實現統計功能

實現效果圖

具體實現方法

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

$ npm install hexo-wordcount --saven

然後在主題的配置文件中，配置如下：

# Post wordcount display settingsn# Dependencies: https://github.com/willin/hexo-wordcountnpost_wordcount:n item_text: truen wordcount: truen min2read: truen

19. 添加頂部載入條

具體實現方法

打開/themes/next/layout/_partials/head.swig文件，添加紅框上的代碼

代碼如下：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>n<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">n

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

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

目前，博主的增加頂部載入條的pull request 已被Merge??==>詳情

現在升級最新版的next主題，升級後只需修改主題配置文件(_config.yml)將pace: false改為pace: true就行了，你還可以換不同樣式的載入條，如下圖：

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

實現效果圖

在目錄 next/layout/_macro/下添加 my-copyright.swig：

{% if page.copyright %}n<div class="my_post_copyright">n <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>n n <!-- JS庫 sweetalert 可修改路徑 -->n <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>n <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>n <p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>n <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p>n <p><span>發布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>n <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>n <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>n <span class="copy-path" title="點擊複製文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="複製成功！"></i></span>n </p>n <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> n</div>n<script> n var clipboard = new Clipboard(.fa-clipboard);nt $(".fa-clipboard").click(function(){n clipboard.on(success, function(){n swal({ n title: "", n text: 複製成功,n icon: "success", n showConfirmButton: truen });nt});n }); n</script>n{% endif %}n

在目錄next/source/css/_common/components/post/下添加my-post-copyright.styl：

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

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

<div>n {% if not is_index %}n {% include wechat-subscriber.swig %}n {% endif %}n</div>n

之前添加增加如下代碼：

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

如下：

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

@import "my-post-copyright"n

保存重新生成即可。

如果要在該博文下面增加版權信息的顯示，需要在 Markdown 中增加copyright: true的設置，類似：

---ntitle: 前端小項目：使用canvas繪畫哆啦A夢ndate: 2017-05-22 22:53:53ntags: canvasncategories: 前端ncopyright: truen---n

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

這樣每次hexo new "你的內容"之後，生成的md文件會自動把copyright:加到裡面去

(注意：如果解析出來之後，你的原始鏈接有問題：如：yoursite.com/前端小項目：使用canvas繪畫哆啦A夢.html,那麼在根目錄下_config.yml中寫成類似這樣：）

就行了。

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

實現效果圖

具體方法實現

有兩種實現方法：

①更新next主題，因為最新版本的主題已經支持這種評論。直接在主題配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-keyn

②如果你不想更新的話，那麼按下面步驟進行：

首先，還是在主題配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-keyn

你的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 %}n {% if theme.gentie_productKey %}n {% set gentie_productKey = theme.gentie_productKey %}n <script>n var cloudTieConfig = {n url: document.location.href, n sourceId: "",n productKey: "{{gentie_productKey}}",n target: "cloud-tie-wrapper"n };n </script>n <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>n {% endif %}n{% endif %}n

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

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

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

{% elseif theme.gentie_productKey %}n <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">n </div>n

具體位置如下：

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

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

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

方法其實還是跟上面差不多的

首先在 _config.yml 文件中添加如下配置：(注意！如果主題是最新版的，填 liver_uid 就行了)

# Support for LiveRe comments system.n# You can get your uid from https://livere.com/insight/myCode (General web site)nlivere_uid: your uidn

其中，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 %}n {% if theme.livere_uid %}n <script type="text/javascript">n (function(d, s) {n var j, e = d.getElementsByTagName(s)[0];n if (typeof LivereTower === function) { return; }n j = d.createElement(s);n j.src = https://cdn-city.livere.com/js/embed.dist.js;n j.async = true;n e.parentNode.insertBefore(j, e);n })(document, script);n </script>n {% endif %}n{% endif %}n

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

{% include ./comments/livere.swig %}n

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

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

完

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>n (function(){n if({{ page.password }}){n if (prompt(請輸入文章密碼) !== {{ page.password }}){n alert(密碼錯誤！);n history.back();n }n }n })();n</script>n

然後在文章上寫成類似這樣：

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;nvar pagination = require(hexo-pagination);nmodule.exports = function(locals){n var config = this.config;n var posts = locals.posts;n posts.data = posts.data.sort(function(a, b) {n if(a.top && b.top) { // 兩篇文章top都有定義n if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排n else return b.top - a.top; // 否則按照top值降序排n }n else if(a.top && !b.top) { // 以下是只有一篇文章top有定義，那麼將有top的排在前面（這裡用異或操作居然不行233）n return -1;n }n else if(!a.top && b.top) {n return 1;n }n else return b.date - a.date; // 都沒定義按照文章日期降序排n });n var paginationDir = config.pagination_dir || page;n return pagination(, posts, {n perPage: config.index_generator.per_page,n layout: [index, archive],n format: paginationDir + /%d/,n data: {n __index: truen }n });n};n

在文章中添加 top 值，數值越大文章越靠前，如

---ntitle: 解決Charles亂碼問題ndate: 2017-05-22 22:45:48ntags: 技巧ncategories: 技巧ncopyright: truentop: 100n---n

27. 修改字體大小

打開themesnextsourcecss _variablesbase.styl文件，將$font-size-base改成16px，如下所示：

$font-size-base =16pxn

28. 修改打賞字體不閃動

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

/* 注釋文字閃動函數n #wechat:hover p{n animation: roll 0.1s infinite linear;n -webkit-animation: roll 0.1s infinite linear;n -moz-animation: roll 0.1s infinite linear;n}n #alipay:hover p{n animation: roll 0.1s infinite linear;n -webkit-animation: roll 0.1s infinite linear;n -moz-animation: roll 0.1s infinite linear;n}n*/n

29. 自定義滑鼠樣式

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

// 滑鼠樣式n * {n cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!importantn }n :active {n cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!importantn }n

其中 url 裡面必須是 ico 圖片，ico 圖片可以上傳到網上（我是使用七牛雲圖床），然後獲取外鏈，複製到 url 里就行了

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

實現效果圖

具體實現方法

在終端切換到你的博客的路徑里，然後輸入如下代碼：

npm install -save hexo-helper-live2dn

然後打開Hexo/blog/themes/next/layout

的_layout.swig,將下面代碼放到</body>之前：

{{ live2d() }}n

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

live2d:n model: wankon bottom: -30n

然後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 falsen

重新 hexo clean,hexo g,hexo d就行了

致謝

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

歡迎訪問我的博客

參考的文章：

  1. blog.csdn.net/MasterAnt
  2. zidingyi4qh.com/2017/04
  3. fuyis.me/2017/01/25/Hex
  4. vitah.net/posts/20f300c
  5. thief.one/2017/03/03/He

推薦閱讀：

※2017 年，最熱開源靜態網站生成器 TOP 20 揭曉！
※用 GitHub + Hexo 建立你的第一個博客
※Hexo(2)-部署博客及更新博文
※VI：GitHub + Hexo (3)：安裝主題
※Ⅰ.GitHub + Hexo (1)：在 OS X 下建立你的第一個博客——史上最靠譜教程

TAG:Hexo |