GitHub + Hexo搭建本身博客(二) Next主題配置

時間 2019-11-07

標籤 github hexo 搭建本身博客主題配置欄目 Git 简体版

原文原文鏈接

能夠訪問個人博客來查看效果，上面有更詳細教程： sandop.github.io/javascript

1、基本配置

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。其中，一份位於站點根目錄下，主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置由主題做者提供，主要用於配置主題相關的選項。css

爲了描述方便，在如下說明中，將前者稱爲 站點配置文件，後者稱爲 主題配置文件。html

一、站點基本設置

在站點配置文件 即博客根目錄下的_config.yml中java

# Site
title: Sando博客       
subtitle: 代碼日記      
description: 寄雜誌第
keywords:
author: Sando
language: zh-Hans
timezone:

複製代碼

二、頭像設置

2.1 設置頭像

在站點配置文件 中新增avatar，值設置爲頭像的連接地址。地址能夠是網絡地址，也能夠是本地地址（放置在source/images/ 目錄下）jquery

#側邊欄頭像設置
avatar: /images/user.jpg
複製代碼

2.2 頭像旋轉動畫

打開\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在裏面添加以下代碼：git

.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);
  }
}

複製代碼

三、主題佈局設置

在主題配置文件即在next主題目錄下的_config.yml文件中將scheme設定爲Pisces,可根據我的喜愛設置成其餘的值github

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製代碼

四、菜單項設置

在主題配置文件中的menu中設置，增添一個movies 注：千萬不要在這設置中文，後面的值那是查找文件的地方！以下web

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，這樣才能顯示出菜單項新增的中文內容npm

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

五、菜單項圖標設置

在主題配置文件中對應的字段是menu_icons。格式爲item name：icon name，其中item name與所配置的菜單名字對應，icon name是Font Awesome圖標的名字。而 enable 可用於控制是否顯示圖標，你能夠設置成 false 來去掉圖標。json

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

六、側欄位置設置

在主題配置文件中修改主題目錄下sidebar的position值

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

七、添加標籤頁面

前面經過修改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中添加標籤便可

八、側邊欄社交欄目

側欄社交連接的修改包含兩個部分，第一是連接，第二是連接圖標。二者配置均在 主題配置文件 中

（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
複製代碼

九、顯示當前瀏覽進度

主題配置文件 即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   //返回頂部按鈕的百分比
複製代碼

2、個性化設置

一、添加萌萌噠二次元看板娘

英文介紹中文介紹

1.一、安裝插件

npm install --save hexo-helper-live2d

1.二、配置

請向根目錄的 _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.三、配置文件

配置文件有不少方法這裏主要講我使用的方法：詳情請參考以下：

英文介紹中文介紹

1.3.1 在博客根目錄下建文件夾live2d_models；

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

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

1.四、安裝模型

在命令行（即Git Bash）運行如下命令便可：

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

1.五、查看結果

在命令行（即Git Bash）運行如下命令，在http://127.0.0.1:4000/查看測試結果：

hexo clean && hexo g && hexo s

1.六、更改模型

若更改模型請從第二步更改model.use；刪除第三步原有文件，從新建立，安裝模型，查看結果

二、實現fork me on github

2.一、點擊這裏挑選本身喜歡的樣式，並複製代碼

2.二、而後粘貼剛纔複製的代碼到themes/next/layout/_layout.swig文件中(放在`<div class="headband"></div>`的下面)，並把href改成你的github地址

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

三、設置網站的圖標Favicon

在EasyIcon或者Iconfont中找一張（32*32）的ico圖標，並將圖標名稱改成favicon.ico，而後把圖標放在/themes/next/source/images裏，而且修改主題配置文件 ：

四、首頁文章添加陰影效果

打開\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);
}
複製代碼

五、網站頂部加載條

修改主題配置文件(_config.yml)將pace: false改成pace: true就好了，你還能夠換不一樣樣式的加載條，以下圖：

六、統計文章閱讀量

經過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.完成配置並從新編譯。到此您已經成功設置了閱讀量的統計

七、文章加密訪問

打開themes->next->layout->_partials->head.swig文件,在如下位置插入這樣一段代碼：

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

複製代碼

而後在文章上寫上password: ****,以下：

八、修改連接URL

編輯 站點配置文件下的 _config.yml 文件，修改其中的 permalink字段：permalink: :category/:title/

九、文章置頂

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 %}
複製代碼

十、隱藏網頁底部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,使用隱藏之間的代碼便可，或者直接刪除。

十一、實現統計功能

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
複製代碼

十二、網站底部字數統計

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>
複製代碼

1三、添加 README.md 文件

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

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

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

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

1五、添加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 中

1六、點擊出現桃心效果

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();
        });
    });
})();
複製代碼

1七、修改文章內連接文本樣式

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;
  }
}
複製代碼

1八、在文章末尾添加「本文結束」標記

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.完成以上設置以後，在每篇文章以後都會添加如此效果圖

1九、自定義鼠標樣式

打開 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,修改參考

2一、修改內容區域的寬度

編輯主題的 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%，各位能夠自行測試進行調整

2二、打賞功能

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

2三、配置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詳細配置官網

2四、添加搜索功能

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
複製代碼

2五、不蒜子訪問統計

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>
複製代碼

2六、添加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.將返回首頁的連接更改成本身的連接。

2七、網頁代碼壓縮

網上有不少相關的博文，常規的作法是使用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查看效果。

2八、添加網站底部跳動的心

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);
}
複製代碼