定製Hexo-NexT的個性化博客

前幾天，我寫了一篇關於如何使用GitHub＋Hexo搭建個人博客的博文，接下來我會以我的博客爲例，講講如何對NexT主題的個性化定製和一些細節的優化。

前言

這篇博客主要是next主題的個性化定製，還有一些細節的優化。在搭建的過程，有一些優化，也是參考了大量之前大佬的教程和結合了一些做的比較優秀的博客，我在這裏做了一個集合，同時把自己做的而別人沒有做的優化，寫出來方便大家。

參考的文章我都會貼出原文鏈接，有一些優化，是我自己辛苦更改樣式才做出來的效果，有些也是忘記了具體的修改方法，主要是直接審查元素，一點一點的定位到樣式表，一點一點的測試修改，相信通過審查元素，你也可以做到。

安裝NexT主題

我使用的是比較簡約的NexT主題，如果你對其他主題感興趣，可以點擊這裏。

安裝方法：打開博客根目錄下的themes文件夾，右鍵Git Bash，運行命令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

下載好之後，把hexo-theme-next改爲next，接着打開next目錄下的主題配置文件_config.yml，找到theme字段，把參數改爲theme: next，之後在根目錄下運行：

hexo clean
hexo s -g

關於_config.yml

首先_config.yml，它是主題配置文件，有兩個，名字一樣比較容易混淆。

• 站點配置文件，位於站點文件夾的根目錄下

例如我的是H:/blog/_config.yml

• 主題配置文件，位於主題文件夾的根目錄下

例如我的是H:/blog/themes/next/_config.yml

Next這個主題包含4鍾風格，默認的是Muse，我使用的是Pisces。你也可以嘗試其他風格，具體操作：打開H:/blog/_config.yml，定位到Schemes，想要哪款主題就取消前面的**#**。

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

Next主題美化

接下來就是主題的美化啦

添加Github絲帶或者角標

效果圖

實現方法

首先先點擊這裏或者這裏挑選自己喜歡的樣式，並複製代碼。

　　打開themes/next/layout/_layout.swig文件，在<header></header>之前添加代碼，並把href改爲你的博客地址

添加RSS訂閱

效果圖

實現方法

首先在博客的根目錄H:/blog，安裝Hexo插件，插件會放在node_modules這個文件夾。

npm install --save hexo-generator-feed

接下來打開H:/blog/_config.yml文件，在末尾添加

# Extensions
## Plugins: http://hexo.io/plugins/
# RSS訂閱
plugin: hexo-generator-feed

然後打開H:/blog/themes/next/_config.yml文件,找到rss，添加參數

# hexo-generator-feed required for rss support. Leave rss as blank to use site's feed link.
# Set rss to false to disable feed link. Set rss to specific value if you have burned your feed already.
rss: /atom.xml

添加動態背景

效果圖

實現方法

打開H:/blog/_config.yml文件，找到canvas_nest,把false改爲true

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: "0,0,255" # 線條顏色，三個數字分別爲(R,G,B)
  opacity: 0.5 # 線條透明度（0~1）
  zIndex: -1 # 背景的z-index屬性
  count: 99 # 線條的總數量

鼠標點擊特效

效果圖

實現方法

打開H:/blog/themes/next/source/js/src，新建一個firework.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)};

然後在H:/blog/themes/next/layout/_layout.swig文件中，</head>之前加入以下代碼：

<!-- 爆炸紅心效果 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/src/yanhuatexiao.js"></script>

　　還可以換成點擊出現愛心的特效,方法是一樣的。

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.οnclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改超鏈接的顏色

效果圖

實現方法

打開H:\blog\themes\next\source\css\_common\components\post文件夾下的post.styl,添加以下css樣式：

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #fc6423;
    text-decoration: underline;
  }
}

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

文章結尾添加結束標記

效果圖

實現方法

打開H:/blog/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>

然後打開H:/blog/themes/next/layout/_macro/post.swig文件，在post-body 之後， post-footer 之前添加以下代碼：

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

　　接着在H:/blog/themes/next/_config.yml末尾添加：

# 文章末尾添加“本文結束”標記
passage_end_tag:
  enabled: true

修改文章底部帶#號的標籤

效果圖

實現方法

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

設置博客頭像並旋轉

效果圖

實現方法

打開H:/blog/themes/next/source/images,把頭像放到該目錄下，然後打開H:/blog/_config.yml,找到avatar:，修改爲以下內容：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

快速實現博客壓縮

項目壓縮也叫代碼醜化, 分別對 html、css、js、images進行優化，即把重複的代碼合併，把多餘的空格去掉，用算法把 images 進行壓縮。壓縮後的博客，加載速度會有較大的提升，自然能留住更多遊客。

蠻多朋友使用了gulp對博客進行壓縮，這也是一個辦法，但在社區逛了下，找到了一個比較好用的模塊hexo-all-minifier，這個模塊集成了對 html、css、js、image 的優化。

npm install hexo-all-minifier --save

安裝上此模塊後，只要在根目錄下的_config.yml文件中加上如下字段就可對博客所有內容進行壓縮。

html_minifier:
  enable: true
  ignore_error: false
  exclude:

css_minifier:
  enable: true
  exclude:
    - '*.min.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

側邊欄添加社交圖標

效果圖

實現方法

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

主頁文章添加陰影效果

效果圖

實現方法

打開H:\blog\themes\next\source\css\_common\components\post文件夾下的post.styl,添加以下css樣式：

// 主頁文章添加陰影效果
 .post {
   margin-top: 0px;
   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);
  }

在博客底部添加訪問量

效果圖

實現方法

打開H:/blog/themes/next/_config.yml,找到busuanzi，修改爲以下參數：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye

使用leancloud統計頁面訪問次數

效果圖

實現方法

主題集成了leancloud，但是我們還需要去官網註冊賬號並實名，這裏講一下關鍵的步驟。

配置leancloud

• 創建應用：控制檯——創建應用（開發版）

應用名稱可以隨意輸入，後面還可以修改，我的是blog

• 創建class：

點擊剛創建的應用，創建一個 Class 表用來保存我們的博客訪問數據。此處創建的 Class 名字必須爲 Counter，ACL 權限選擇 無限制。

• 創建 Class 完成之後，新創建的 Counter 表會顯示在左側，這時再切換到 test 應用的 設置 - 應用 Key 界面：
  
• 複製ID和Key
  

啓用leancloud

打開_config.yml主題配置文件，找到leancloud_visitors:,填入id和key。

修改熱度

打開H:/blog/themes/next/layout/_macro/post.swig文件，找到leancloud,修改成如下代碼：

最後打開H:/blog/themes/next/languages/zh-CN.yml,把views參數改成如下：

博客標題設置

這個相關的設置在H:/blog/_config.yml中修改，如下圖所示：

博客底部添加網站的運行時間

效果圖

實現方法

打開H:/blog/themes/next/layout/_partials/footer.swig，在末尾添加如下代碼;

<!-- 網站運行時間的設置 -->
<span id="timeDate">載入天數...</span>
<span id="times">載入時分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/12/2019 18:30:00");//此處修改你的建站時間或者網站上線時間
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "網站已運行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

添加 README.md 文件

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

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

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

自定義網站的圖標

效果圖

實現方法

我的圖標是在阿里矢量圖標庫下載的，你也可以在其他地方下載或者製作，然後把圖標放在H：/blog/themes/next/source/images裏面，斌且修改主題配置文件：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

文章字數、閱讀時長統計

效果圖

實現效果

打開博客根目錄，運行以下命令，安裝插件

npm install hexo-symbols-count-time --save

然後修改博客配置文件，在末尾添加以下代碼：

symbols_count_time:
  symbols: true                # 文章字數統計
  time: true                   # 文章閱讀時長
  total_symbols: true          # 站點總字數統計
  total_time: true             # 站點總閱讀時長
  exclude_codeblock: false     # 排除代碼字數統計

最後在主題配置文件裏面，找到symbols_count_time,修改成以下內容：

symbols_count_time:
  separated_meta: true     # 是否另起一行（true的話不和發表時間等同一行）
  item_text_post: true     # 首頁文章統計數量前是否顯示文字描述（本文字數、閱讀時長）
  item_text_total: true    # 頁面底部統計數量前是否顯示文字描述（站點總字數、站點閱讀時長）
  awl: 1.5                 # Average Word Length
  wpm: 100                 # Words Per Minute（每分鐘閱讀詞數）
  suffix: mins.

博客頂端添加加載條

效果圖

實現方法

打開主題配置文件，找到pace:，修改爲以下內容：

pace: true
# 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
pace_theme: pace-theme-minimal

在文章底部添加版權信息

效果圖

實現方法

打開H：/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 type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文標題:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a> | 【公衆號：不會代碼的程序猿】</p>
  <p><span>發佈時間:</span>{{ page.date.format("YYYY年MM月DD日 HH:mm:ss") }}</p>
  <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 HH:mm:ss") }}</p>
  <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></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');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '複製成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

然後在H：/blog/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: #333333; // title color
  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: #0593d3; // link color
  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;
}

然後打開H:/blog/themes/next/layout/_macro/post.swig文件，在post-body 之後， post-footer 之前添加以下代碼：

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

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

@import "my-post-copyright"

添加來必力評論系統

效果圖

實現方法

打開來必力的官網，註冊，註冊好之後打開設置頁面，填寫博客地址

　　然後在代碼管理頁面，把uid複製到主題配置文件_config.yml的livere_uid:

修改博客底部的紅色跳動愛心

效果圖

實現方法
　　打開主題配置文件，找到footer:，修改爲以下內容：

DaoVoice在線聯繫

效果圖

實現方法

先在 daovoice 註冊賬號，邀請碼是dda712fb，註冊完成後會得到一個 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:') + "//widget.daovoice.io/widget/dda712fb.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

　　最後打開主題配置文件，在末尾添加如下代碼：

# Online contact
daovoice: true
daovoice_app_id: 這裏填你的剛纔獲得的 app_id

設置博客摘要顯示

打開主題配置文件，修改爲以下內容：

　　這樣就能實現在主頁只展示部分文字，其他文字隱藏起來，通過點擊’閱讀更多’來閱讀全文。在寫每一篇文章的時候，也要在必要的地方添加<!-- more -->

---
title: 使用Github+Hexo搭建你的個人博客：搭建篇
copyright: true
date: 2019-07-21 15:25:12
categories: Hexo
tags: [GitHub,個人博客,Hexo]

---

<blockquote class="blockquote-center">海闊憑魚躍，天高任鳥飛。
</blockquote>

　　早在初中，就想着自己搭起一個屬於自己的網站，但是沒有技術又不肯學習的我，怯於嘗試，一直停滯不前。大學期間終於學習了，又因爲自己的懶惰，覺得很難，不肯去嘗試。直至今日，我想試一試，搗鼓了好一陣子，發現認真去做了，也沒有想象中的難。

<!-- more -->

文章鏈接唯一化

也許你會數次更改文章題目或者變更文章發佈時間，在默認設置下，文章鏈接都會改變，不利於搜索引擎收錄，也不利於分享。唯一永久鏈接纔是更好的選擇。

首先安裝插件

npm install hexo-abbrlink --save

然後在站點配置文件中找到permalink，修改爲如下內容：

permalink: posts/:abbrlink/  # “posts/” 可自行更換

這裏有個知識點：

百度蜘蛛抓取網頁的規則: 對於蜘蛛說網頁權重越高、信用度越高抓取越頻繁，例如網站的首頁和內頁。蜘蛛先抓取網站的首頁，因爲首頁權重更高，並且大部分的鏈接都是指向首頁。然後通過首頁抓取網站的內頁，並不是所有內頁蜘蛛都會去抓取。

搜索引擎認爲對於一般的中小型站點，3層足夠承受所有的內容了，所以蜘蛛經常抓取的內容是前三層，而超過三層的內容蜘蛛認爲那些內容並不重要，所以不經常爬取。出於這個原因所以permalink後面跟着的最好不要超過2個斜槓。

接着在站點配置文件中添加如下代碼:

# abbrlink config
abbrlink:  alg: crc32  # 算法：crc16(default) and crc32
rep: hex    # 進制：dec(default) and hex

可選擇模式：

• crc16 & hex

• crc16 & dec

• crc32 & hex

• crc32 & dec

修改頂端的線條顏色

next主題頂端的線條顏色默認是黑色的，我看着不舒服就把它改成了粉色

效果圖

實現方法

打開themes/next/source/css/_variables/base.styl,找到headband，修改爲以下內容：

// Headband
// --------------------------------------------------
$headband-height                = 2px
$headband-bg                    = #e3cae4

去除文章下方分類於的下劃線

打開themes/next/source/css/_common/scaffolding/base.styl,找到span.exturl，修改爲以下內容：

a, span.exturl {
  word-wrap();
  // Remove the gray background color from active links in IE 10.
  background-color: transparent;
  color: #999999;
  text-decoration: none;
  outline: none;
  border-bottom: 0px solid $link-decoration-color;

左側社交圖標居中

強迫症的我居然發現了左側社交圖標似乎不太居中啊，一定得把它搞居中。

效果圖

實現方法

打開themes/next/source/css/_schemes/Pisces/_sidebar.styl,找到.site-overview，修改爲以下內容：

.site-overview {
  //margin: 0 2px;
  text-align:
}

建立閱讀排行榜

新建一個閱讀排行榜界面，用於顯示本站文章的閱讀排行榜，基於lencloud進行統計

新建頁面

hexo n page top 新建頁面，生成 top 目錄，編輯其中自動生成的 index.md 文件，將其中的代碼替換如下：

<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid這裏填入你的id", "leancloud_appkey這裏填入你的key");</script>
<script type="text/javascript">
  var time=0
  var title=""
  var url=""
  var query = new AV.Query('Counter');
  query.notEqualTo('id',0);
  query.descending('time');
  query.limit(1000);
  query.find().then(function (todo) {
    for (var i=0;i<1000;i++){
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      // var content="<a href='"+"https://hoxis.github.io"+url+"'>"+title+"</a>"+"<br>"+"<font color='#fff'>"+"閱讀次數："+time+"</font>"+"<br><br>";
      var content="<p>"+"<font color='#e20404'>"+"【熱度"+time+"℃】"+"："+"<a href='"+"https://xiaoxiaoxiaoxiaolin.github.io"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

裏面的leancloud_appid、leancloud_appkey 還有頁面鏈接記得替換成你的。

編輯菜單

打開主題配置文件，添加top：

menu:
  home: / || home
  top: /top/ || signal
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user

然後還需要對中文配置hexo/blog/themes/next/languages/zh-CN.yml進行修改，添加top對應的中文：

menu:
  home: 首頁
  top: 熱榜
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益 404

github分支管理博客

使用hexo發佈博客最麻煩的地方在於，當你換了一臺電腦後又想發佈博客，又得把先前的環境重新搭建，拉取倉庫。因爲在github中的我們github.io項目是隻有編譯後的文件的，沒有源文件的，也就是說，如果我們的電腦壞了，打不開了，我們的博客就不能進行更新了，所以我們要把我們的源文件也上傳到github上。這個時候可以選擇新建一個倉庫來存放源文件，也可以把源文件 push 到 user.github.io 的其他分支。我選擇了後者。

創建分支

創建兩個分支：master 與 hexo,（這個hexo分支就是存放我們源文件的分支，我們只需要更新hexo分支上的內容據就好，master上的分支hexo編譯的時候會更新的）

初始化倉庫

然後我們再初始化倉庫，重新對我們的代碼進行版本控制

git init
git remote add origin <server>

<server>是指在線倉庫的地址。origin是本地分支，remote add操作會將本地倉庫映射到雲端

將博客源文件上傳到分支

.gitignore文件作用是聲明不被git記錄的文件，blog根目錄下的.gitignore是hexo初始化帶來的，可以先刪除或者直接編輯，對hexo不會有影響。建議.gitignore內添加以下內容：

/.deploy_git
/public
/_config.yml

.deploy_git是hexo默認的.git配置文件夾，不需要同步
　　public內文件是根據source文件夾內容自動生成，不需要備份，不然每次改動內容太多
　　即使是私有倉庫，除去在線服務商員工可以看到的風險外，還有云服務商被攻擊造成泄漏等可能，所以不建議將配置文件傳上去

依次執行

git add .
git commit -m "..."
git push origin hexo

更改標籤雲的顏色

打開/blog/themes/next/layout/page.swig，找到tagcloud，修改爲以下內容：

{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

start_color和end_color的顏色你可以自己隨意定義。

參考資料：

• 使用 Hexo 搭建 GitHub Page 博客(二)–使用 GitHub 分支保存 Hexo 環境和博文
• hexo 摸爬滾打之進階教程
• GitHub–創建新的分支(轉)
• 打造個性超讚博客 Hexo + NexT + GitHub Pages 的超深度優化
• hexo的next主題個性化教程:打造炫酷網站 | Moorez
• 4塊錢,用Github+Hexo搭建你的個人博客：美化篇

還有一些參考的資料鏈接已經找不到了，所以就不一一列出了。第一次寫，如有錯誤，歡迎指出，不勝感激。