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

weixin_34162695發表於2017-12-20

Hexo網站

看到有些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-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://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/

該為你的Android Studio 打造一個炫酷的個性化主題了
2017-04-09
Android
Hexo設定主題以及Next主題個性設定
2017-12-13
Hexo
Hexo Next主題進階教程
2018-07-31
Hexo
hexo next主題
2016-07-28
Hexo
hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你自己的定製化部落格
2017-04-10
Hexo優化
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
Hexo NexT 主題初體驗
2018-07-25
Hexo
使用flutter打造炫酷的list
2019-06-13
Flutter
hexo-theme-next主題設定
2018-09-21
Hexo
給你的網站新增炫酷的動畫註釋
2020-07-25
網站動畫
將hexo主題next改成自己喜歡的樣子
2018-07-02
Hexo
炫酷小說網站原始碼 v1.0
2019-05-11
網站原始碼
GitHub + Hexo搭建自己部落格(二) Next主題配置
2019-02-20
GithubHexo
Hexo+NexT（零）：最全Hexo+Next搭建部落格教程
2019-06-30
Hexo
主題：幾個炫酷的3D旋轉動態效果（附程式碼）
2015-10-22
3D
PS教程：輕鬆五步打造多彩酷炫的標籤雲文字特效
2015-10-25
特效
玩遍部落格網站，我整理了 Hexo 及其流行的風格主題
2021-02-02
網站Hexo
hexo搭建個人網站部落格完全教程
2018-09-14
Hexo網站
[實戰乾貨]30分鐘快速搭建hexo3.7.0 + next主題6.4教程(持續更新)
2018-10-24
Hexo
next主題配置與優化
2020-12-16
優化
【轉】【譯】讓你的網站更炫酷的一些小 tips
2019-02-16
網站
【hexo】一個好看的個人部落格主題
2018-12-20
Hexo
Android使用SVG向量圖打造酷炫動效！
2017-01-24
AndroidSVG
使用動畫曲線編輯器打造炫酷的3D視覺化ACE
2023-12-14
動畫3D視覺化
用 Vue 做一個酷炫的 menu
2017-11-21
Vue
酷炫：6個有趣的Linux命令
2014-08-28
Linux
PHP建立一個炫酷的圖表
2016-03-05
PHP
（Ⅱ）NexT主題的優化定製修改指南
2018-01-31
優化
請收下這72個炫酷的CSS技巧
2019-12-25
CSS
vue寫一個炫酷的日曆元件
2019-03-01
Vue元件
IntelliJ IDEA 新版釋出：支援CPU火焰圖，新增酷炫主題
2019-03-04
IntelliJIdea
android炫酷的textview
2018-08-28
AndroidTextView
PS教程：教你打造超酷炫的德羅斯特效應
2015-11-21
特效
11個炫酷的Linux終端命令大全
2020-03-29
Linux
寫一個酷炫的iOS進度條動畫
2017-02-01
iOS動畫
10個非常炫酷的jQuery相簿動畫賞析
2016-01-16
jQuery動畫
Notionnext 改了個導航主題
2024-09-02
個性化定製的網站體驗–資訊圖
2014-04-29
網站

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

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

實現效果圖

具體實現方法

2.新增RSS

實現效果圖

具體實現方法

3. 新增動態背景

實現效果圖

具體實現方法

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

實現效果圖

具體實現方法

5. 修改文章內連結文字樣式

實現效果圖

具體實現方法

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

實現效果圖

具體實現方法

7. 在每篇文章末尾統一新增“本文結束”標記

實現效果圖

具體實現方法

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

實現效果圖：

具體實現方法

9. 博文壓縮

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

實現效果圖

具體實現方法

11. 側邊欄社交小圖示設定

實現效果圖

具體實現方法

12. 主頁文章新增陰影效果

實現效果圖

具體實現方法

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

實現效果圖

具體實現方法

14. 新增熱度

實現效果圖：

具體實現方法

15. 網站底部字數統計

具體方法實現

16. 新增 README.md 檔案

17. 設定網站的圖示Favicon

實現效果圖

具體方法實現

18. 實現統計功能

實現效果圖

具體實現方法

19. 新增頂部載入條

實現效果圖

具體實現方法

20. 在文章底部增加版權資訊

實現效果圖

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

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

23. 修改網頁底部的桃心

24. 文章加密訪問

實現效果圖

具體實現方法

25. 新增jiathis分享

26. 博文置頂

27. 修改字型大小

28. 修改打賞字型不閃動

29. 自定義滑鼠樣式

30.為部落格加上萌萌的寵物

致謝

參考的文章：

相關文章

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