GitHub + Hexo搭建自己部落格(二) Next主題配置

Sandop發表於2019-02-20

可以訪問我的部落格來檢視效果，上面有更詳細教程： sandop.github.io/

一、基本配置

在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。

為了描述方便，在以下說明中，將前者稱為 站點配置檔案，後者稱為 主題配置檔案。

1、站點基本設定

在站點配置檔案 即部落格根目錄下的_config.yml中


# Site
title: Sando部落格       
subtitle: 程式碼日記      
description: 寄雜誌第
keywords:
author: Sando
language: zh-Hans
timezone:

複製程式碼

2、頭像設定

2.1 設定頭像

在站點配置檔案 中新增avatar，值設定為頭像的連結地址。地址可以是網路地址，也可以是本地地址（放置在source/images/ 目錄下）

#側邊欄頭像設定
avatar: /images/user.jpg
複製程式碼

2.2 頭像旋轉動畫

開啟\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);
  }
}

複製程式碼

3、主題佈局設定

在主題配置檔案即在next主題目錄下的_config.yml檔案中將scheme設定為Pisces,可根據個人喜好設定成其他的值

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製程式碼

4、選單項設定

在主題配置檔案中的menu中設定，增添一個movies 注：千萬不要在這設定中文，後面的值那是查詢檔案的地方！如下

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  #archives: /archives
  #search: /search
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404
  movies: /movies || film
複製程式碼

這些配置都要與你主題目錄下的languages檔案中對應的yml文件裡配置相關聯。比如你在站點根目錄中的配置檔案設定language為zh-Hans，那麼就要進入到主題目錄下的languages檔案中修改zh-Hans.yml，這樣才能顯示出選單項新增的中文內容

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜尋
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益404
  movies: 電影
複製程式碼

5、選單項圖示設定

在主題配置檔案中對應的欄位是menu_icons。格式為item name：icon name，其中item name與所配置的選單名字對應，icon name是Font Awesome圖示的名字。而 enable 可用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。

menu_icons:
  enable: true
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
  movies: film
複製程式碼

新建的欄目icon，需要在Font Awesome圖示庫存在，例如新建的movies，在圖示庫中查詢選擇film圖示，在主題配置檔案的menu_icons中，更改movies: film

6、側欄位置設定

在主題配置檔案中修改主題目錄下sidebar的position值

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right
複製程式碼

7、新增標籤頁面

前面通過修改next主題下的_config.yml檔案中的menu選項，可以在主頁面的選單欄新增標籤選項，但是此時點選標籤，跳轉的頁面會顯示page not found。此時我們要新建一個頁面在git bush中輸入hexo new page tags

在新建的index.md檔案中新增type: "tags"

---
title: tags
date: 2019-02-18 17:16:00
type: "tags"
---
複製程式碼

當要為某一篇文章新增標籤，只需在blog/source/_post目錄下的具體文章的tags中新增標籤即可

8、側邊欄社交欄目

側欄社交連結的修改包含兩個部分，第一是連結，第二是連結圖示。兩者配置均在 主題配置檔案 中

（1）連結放置在 social 欄位下，一行一個連結。其鍵值格式是顯示文字: 連結地址。

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等
複製程式碼

（2）設定連結的圖示，對應的欄位是 social_icons。其鍵值格式是匹配鍵: Font Awesome 圖示名稱，匹配鍵與上一步所配置的連結的顯示文字相同（大小寫嚴格匹配），圖示名稱是 Font Awesome 圖示的名字（不必帶 fa- 字首）。 enable 選項用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。其中seoial_icons節點中後面的值是http://fontawesome.io/icons/ 中提供的圖示的名稱。之後其他連結如推特，微博等都可自行增減。

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo
複製程式碼

9、顯示當前瀏覽進度

主題配置檔案 即themes/*/_config.yml中scrollpercent更改為true,b2t改為true返回頂部及瀏覽進度顯示在左側sidebar之下，改為false顯示在右下角，根據個人喜好自行設定。

sidebar:
# Sidebar Position - 側欄位置（只對Pisces | Gemini兩種風格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 側欄顯示時機（只對Muse | Mist兩種風格有效）
  #display: post        //預設行為，在文章頁面（擁有目錄列表）時顯示
  display: always       //在所有頁面中都顯示
  #display: hide        //在所有頁面中都隱藏（可以手動展開）
  #display: remove      //完全移除

  offset: 12            //文章間距（只對Pisces | Gemini兩種風格有效）

  b2t: false            //返回頂部按鈕（只對Pisces | Gemini兩種風格有效）

  scrollpercent: true   //返回頂部按鈕的百分比
複製程式碼

二、個性化設定

1、新增萌萌噠二次元看板娘

英文介紹中文介紹

1.1、安裝外掛

npm install --save hexo-helper-live2d

1.2、配置

請向根目錄的 _config.yml 檔案或主題的 _config.yml 檔案中新增配置.


live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜歡的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

複製程式碼

模型連線配置詳細介紹

1.3、配置檔案

配置檔案有很多方法這裡主要講我使用的方法：詳情請參考如下：

英文介紹中文介紹

1.3.1 在部落格根目錄下建資料夾live2d_models；

1.3.2 再在live2d_models下建資料夾<你喜歡的模型名字>；

1.3.3 再在<你喜歡的模型名字>下建json檔案：<你喜歡的模型名字>.model.json；

1.4、安裝模型

在命令列（即Git Bash）執行以下命令即可：

npm install --save live2d-widget-model-<你喜歡的模型名字> 模型安裝

1.5、檢視結果

在命令列（即Git Bash）執行以下命令，在http://127.0.0.1:4000/檢視測試結果：

hexo clean && hexo g && hexo s

1.6、更改模型

若更改模型請從第二步更改model.use；刪除第三步原有檔案，重新建立，安裝模型，檢視結果

2、實現fork me on github

2.1、點選這裡挑選自己喜歡的樣式，並複製程式碼

2.2、然後貼上剛才複製的程式碼到themes/next/layout/_layout.swig檔案中(放在`<div class="headband"></div>`的下面)，並把href改為你的github地址

2.3、若位置不對，在 img 標籤中修改 `style="position:fixed;top:0;right:0"`

3、設定網站的圖示Favicon

在EasyIcon或者Iconfont中找一張（32*32）的ico圖示，並將圖示名稱改為favicon.ico，然後把圖示放在/themes/next/source/images裡，並且修改主題配置檔案 ：

4、首頁文章新增陰影效果

開啟\themes\next\source\css_custom\custom.styl,向裡面加入：

//文章內容新增邊框陰影
.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);
}
複製程式碼

5、網站頂部載入條

修改主題配置檔案(_config.yml)將pace: false改為pace: true就行了，你還可以換不同樣式的載入條，如下圖：

6、統計文章閱讀量

通過leanCloud統計您網站的文章閱讀量 1.註冊LeanCloud, 並建立一個你自己的應用; 2.點選圖片右上角的設定圖示進入應用介面; 3.到此，你的應用建立成功，繼續表的建立,建立表，並將表的名字命名為：Counter 4.開啟設定 -> 應用key 獲取App ID和App Key; 5.最後開啟主題配置檔案: themes/*/_config.yml;

leancloud_visitors:
  enable: true
  app_id: #你的app_id
  app_key: #你的的app_key
複製程式碼

6.完成配置並重新編譯。到此您已經成功設定了閱讀量的統計

7、文章加密訪問

開啟themes->next->layout->_partials->head.swig檔案,在以下位置插入這樣一段程式碼：

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

複製程式碼

然後在文章上寫上password: ****,如下：

8、修改連結URL

編輯 站點配置檔案下的 _config.yml 檔案，修改其中的 permalink欄位：permalink: :category/:title/

9、文章置頂

9.1 安裝外掛

npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

9.2 在需要置頂的文章中加上top即可，數值越大文章越靠前

---
title: 'GitHub + Hexo搭建自己部落格(二) Next主題配置 '
date: 2019-02-19 15:35:40
tags: [hexo,github]
categories: blog,hexo,next
top: 10
---
複製程式碼

9.3 設定置頂標誌

開啟：/themes/*/layout/_macro/post.swig，定位到<div class="post-meta">標籤下，插入如下程式碼：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置頂</font>
  <span class="post-meta-divider">|</span>
{% endif %}
複製程式碼

10、隱藏網頁底部powered By Hexo / 強力驅動

第一種方法：在主題配置檔案中，找到footer,配置如下：

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: heart

  # If not defined, will be used `author` from Hexo main config.
  copyright: Sando
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false
複製程式碼

第二種方法：開啟themes/next/layout/_partials/footer.swig,使用隱藏之間的程式碼即可，或者直接刪除。

11、實現統計功能

1.在根目錄下安裝 hexo-wordcount,執行：npm install hexo-wordcount --save 2.然後在主題配置檔案中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true
複製程式碼

12、網站底部字數統計

1.在根目錄下安裝 hexo-wordcount,執行：npm install hexo-wordcount --save 2.然後在/themes/next/layout/_partials/footer.swig檔案尾部加上：

  <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">部落格全站共{{ totalcount(site) }}字</span>
  </div>
複製程式碼

13、新增 README.md 檔案

每個專案下一般都有一個 README.md 檔案，但是使用 hexo 部署到倉庫後，專案下是沒有 README.md 檔案的。

在 Hexo 目錄下的 source 根目錄下新增一個 README.md 檔案，修改站點配置檔案 _config.yml，將 skip_render 引數的值設定為skip_render: README.md

14、修改文章底部的那個帶#號的標籤

修改模板/themes/next/layout/_macro/post.swig，搜尋 rel="tag">#，將 # 換成

15、新增RSS

1.站點根目錄下安裝外掛，npm install --save hexo-generator-feed; 2.在站點配置檔案_config.yml中，新增如下內容：

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

3.然後再主題配置檔案中配置rss;

rss: /atom.xml
複製程式碼

4.配置完之後執行：hexo clean && hexo g && hexo s; 5.重新生成一次，你會在./public 資料夾中看到 atom.xml 檔案。然後啟動伺服器檢視是否有效，之後再部署到 Github 中

16、點選出現桃心效果

1.在路徑/themes/*/source/js/src裡面新建love.js檔案並將程式碼複製進去；

! 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: 50%;-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.onclick = 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);

複製程式碼

2.在\themes\*\layout\_layout.swig檔案末尾</body>之前新增

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

3.我選擇的是社會主義核心價值觀的特效，因為我們都是社會主義接班人！！

(function() {
    
    var T_color = "";//字型顏色,你不設定就是隨機顏色,
    
    var T_size = [10,20];//文字大小區間,不建議太大
    
    var T_font_weight = "bold";//字型粗斜度-->normal,bold,900
    
    var AnimationTime = 1500;//文字消失總毫秒
    
    var Move_up_Distance = 388;//文字移動距離,正數代表上移，反之下移
    
    var a_index = 0;
    $("html").click(function(e){
        var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
        var $i = $("<span/>").text(a[a_index]);
        a_index = (a_index + 1) % a.length;
        var x = e.pageX,y = e.pageY;
        var x_color =  "#" + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);//-->隨機顏色
        //console.log(x_color);
        if(T_color.length>=4){
            x_color = T_color;
        }
        
        var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
        x_size +=  "px";
        
        $i.css({
            "z-index": 99999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "font-size":x_size,
            "color": x_color
        });
        $("html").append($i);
        $i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() {
            $i.remove();
        });
    });
})();
複製程式碼

17、修改文章內連結文字樣式

1.修改檔案 themes\*\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;
  }
}
複製程式碼

18、在文章末尾新增“本文結束”標記

1.在路徑 \themes\*\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>
複製程式碼

2.開啟\themes\*\layout\_macro\post.swig檔案，在post-body 之後， post-footer之前新增如下程式碼（post-footer之前兩個DIV）

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

複製程式碼

3.開啟主題配置檔案（_config.yml),在末尾新增：

# 文章末尾新增“本文結束”標記
passage_end_tag:
  enabled: true
複製程式碼

4.完成以上設定之後，在每篇文章之後都會新增如此效果圖

19、自定義滑鼠樣式

開啟 themes/*/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
  }
複製程式碼

20、Canvas背景

在主題配置檔案中，找到Canvas配置項，可以應用NNext自帶的Canvas特效

想要更改顏色和數量？修改檔案：/themes/next/source/lib/canvas-nest/canvas-nest.min.js,修改參考

21、修改內容區域的寬度

編輯主題的 source/css/_variables/custom.styl 檔案，新增變數：

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
複製程式碼

但是此方法不適用於 Pisces Scheme，對於 Pisces Scheme，需要同時修改 header 的寬度、.main-inner 的寬度以及 .content-wrap 的寬度。例如，使用百分比（Pisces 的佈局定義在 source/css/_schemes/Picses/_layout.styl 中）

.header{ width: 60%; }
.container .main-inner { width: 60%; }
.content-wrap { width: calc(100% - 260px); }
複製程式碼

超過一定寬度後（一行內文字太多導致換行跨度太大），閱讀體驗不好，我調整的寬度為60%，各位可以自行測試進行調整

22、打賞功能

1.準備支付寶和微信二維碼，存放在themes/*/source/images 2.在主題配置檔案（_config.yml）中進行設定

# Reward
reward_comment: 謝謝請我吃辣條！
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg
複製程式碼

3.修復圖片閃動bug，修改next/source/css/_common/components/post/post-reward.styl，註釋wechat:hover和alipay:hover

23、配置Valine評論系統

1.Valine 是一款基於Leancloud的快速、簡潔且高效的無後端評論系統； 2.獲取Leancloud的APP ID和 APP KEY, 上面第六步設定中已經介紹了獲取方法； 3.開啟主題配置檔案: themes/*/_config.yml;

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 在這裡說點什麼吧... # comment box placeholder
  avatar: identicon # 評論表頭樣式  /mm/identicon/monsterid/wavatar/retro/hide
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
複製程式碼

4.其他相關配置和郵件提醒方式可檢視Valline詳細配置官網

24、新增搜尋功能

1.在根目錄下安裝hexo-generator-searchdb外掛，npm install hexo-generator-searchdb --save; 2.站點配置檔案中新增以下欄位

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
複製程式碼

3.編輯主題配置檔案啟用本地搜尋

# Local search
local_search:
  enable: true
複製程式碼

25、不蒜子訪問統計

1.編輯 主題配置檔案 themes/*/_config.yml中的busuanzi_count的配置項即可;

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:
複製程式碼

2.找到主題呼叫不蒜子的swig檔案\themes*\layout_third-party\analytics\busuanzi-counter.swig 3.更改域名

把原有的：
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
域名改一下即可：
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
複製程式碼

26、新增404公益介面

1.在根目錄下輸入hexo new page 404; 2.開啟剛新建的頁面檔案，預設在 Hexo 資料夾根目錄下 /source/404/index.md； 3.將檔名index.md改為404.html; 4.在檔案中寫入內容，這裡使用的是騰訊公益；

---
title: 404 Not Found：該頁無法顯示
toc: false
comments: false
permalink: /404
---
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                                                                                                                                        
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首頁" homePageUrl="https://sandop.github.io"></script>
	</body>
</html>
複製程式碼

5.將返回首頁的連結更改為自己的連結。

27、網頁程式碼壓縮

網上有很多相關的博文，常規的做法是使用gulp來進行壓縮，但是沒有成功，所以更換為hexo-neat壓縮外掛進行。

1.站點根目錄下安裝外掛npm install hexo-neat --save； 2.修改站點配置檔案，在末尾新增以下程式碼；

# hexo-neat
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
  enable: true
  exclude:
# 壓縮css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 壓縮js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

複製程式碼

3.執行hexo clean && hexo g && hexo s檢視效果。

28、新增網站底部跳動的心

1.在主題配置檔案中（themes/*/_config.yml）,更改footer;

footer:
  icon: heart
複製程式碼

2.編輯標籤,在/themes/*/layout/_partials/footer.swig中，span中增加id="heart";

 <span class="with-love" id="heart">
複製程式碼

3.編輯css,在themes/*/source/css/_custom/custom.styl中更改樣式如下：

// 自定義頁尾跳動的心樣式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}
複製程式碼

搭建部落格 (Hexo + github + butterfly主題)
2024-06-09
HexoGithub
Hexo+GitHub+阿里域名搭建自己部落格
2018-08-16
HexoGithub阿里
GitHub + Hexo搭建自己部落格(一) 基本內容
2019-02-19
GithubHexo
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
Hexo+NexT（零）：最全Hexo+Next搭建部落格教程
2019-06-30
Hexo
整合github、hexo搭建部落格
2019-03-11
GithubHexo
【GitHub】GitHub+Hexo搭建個人部落格
2018-06-13
GithubHexo
Hexo+Github部落格搭建完全教程
2024-11-18
HexoGithub
Hexo + Github 搭建靜態部落格(一)
2018-11-06
HexoGithub
hexo+github搭建個人部落格
2018-11-05
HexoGithub
手摸手帶你用Hexo擼部落格(二)之配置主題
2020-12-30
Hexo
只需9步教你搭建自己的個人部落格 (Hexo+Github)
2018-04-16
HexoGithub
Hexo部落格（Snail主題）搭建回顧概覽
2022-01-29
HexoAI
使用next主題配置部落格基本資訊
2018-03-05
Hexo+Github搭建部落格總結
2018-08-11
HexoGithub
hexo結合github搭建個人部落格
2018-05-21
HexoGithub
用Github Pages+Hexo搭建部落格之(八)Hexo部落格Next主題新增統計文章閱讀量（訪問量/瀏覽量/閱讀次數）功能
2020-10-13
GithubHexo
Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析
2019-03-24
Hexo優化
用 Hexo + Next + GitHubPages 搭建漂亮的免費部落格
2018-04-03
HexoGithub
史上最快用GitHub、Hexo搭建個人部落格
2019-04-25
GithubHexo
Hexo+Github輕鬆搭建個人部落格
2020-12-23
HexoGithub
使用hexo+Anisina+github搭建個人部落格
2019-01-06
HexoGithub
基於Github Page 搭建部落格(hexo框架)
2019-02-08
GithubHexo框架
用自己的伺服器搭建HEXO部落格
2020-11-27
伺服器Hexo
GithubPages+Hexo部落格主題Yilia
2019-02-19
GithubHexo
如何使用Github+Hexo快速搭建個人部落格
2019-01-27
GithubHexo
基於 Hexo + GitHub Pages 搭建個人部落格（三）
2019-02-18
HexoGithub
hexo+github搭建靜態部落格之初體驗
2018-07-23
HexoGithub
Hexo 搭建部落格
2018-12-05
Hexo
搭建Hexo部落格相簿
2018-09-02
Hexo
將hexo主題next改成自己喜歡的樣子
2018-07-02
Hexo
【教程向】——基於hexo+github搭建私人部落格
2019-03-27
HexoGithub
使用Hexo&GitHub免費快速搭建部落格教程
2018-03-05
HexoGithub
GitHub Pages + Hexo搭建個人部落格網站-github風格-採坑記錄
2022-04-05
GithubHexo網站
Hexo部落格搭建記錄
2023-01-12
Hexo
hexo 部落格搭建筆記
2020-06-11
Hexo筆記
Hexo Next主題進階教程
2018-07-31
Hexo
Hexo NexT 主題初體驗
2018-07-25
Hexo