Hexo博客主題安裝和優化（一）

當你看到這篇文章的時候，想必你已經搭建好了屬於你的Hexo博客並且已經部署到了Github上面，如果還沒有的話呢，請移步去Hexo+github搭建博客！

因為默認的Hexo主題實在太難看了，所以我們可以去Hexo主題官網主題網去選擇自己中意的主題，我用過yilia和yeele這2個主題，最后由於某些原因我換成了現在的主題matery，當然如果你對上面那2個主題感興趣的話呢，先給2個主題的大佬鏈接在這里，你們可以進去看看效果，MOxFIVE這個是yelee主題的，Yilia-plus這個是yilia-plus主題，我的博客主題應用的是matery的，晚楓博客！歡迎大家去踩踩！話不多說了，開始我們今天的教程吧。

一、Hexo博客主題安裝以及優化

主題大佬博客

閃爍之狐(作者)

過客-礪

洪衛@博客

主題特性

• 簡單漂亮，文章內容美觀易讀

• Material Design 設計

• 響應式設計，博客在桌面端、平板、手機等設備上均能很好的展現

• 首頁輪播文章及每天動態切換 Banner 圖片

• 瀑布流式的博客文章列表（文章無特色圖片時會有 24 張漂亮的圖片代替）

• 時間軸式的歸檔頁

• 詞雲的標簽頁和雷達圖的分類頁

• 豐富的關於我頁面（包括關於我、文章統計圖、我的項目、我的技能、相冊等）

• 可自定義的數據的友情鏈接頁面

• 支持文章置頂和文章打賞

• 支持 MathJax

• TOC 目錄

• 可設置復制文章內容時追加版權信息

• 可設置閱讀文章時做密碼驗證

• Gitalk、Gitment、Valine 和 Disqus 評論模塊（推薦使用 Gitalk）

• 集成了不蒜子統計、谷歌分析（Google Analytics）和文章字數統計等功能

• 支持在首頁的音樂播放和視頻播放功能

• 支持emoji表情，用markdown emoji語法書寫直接生成對應的能跳躍的表情。

• 支持 DaoVoice、Tidio 在線聊天功能

  先給你們來幾張我博客的預覽圖，看看效果.....

  

  

  

  1. 主題下載與安裝

  點擊 傳送門下載 master 分支的最新版的代碼，解壓縮后，將 hexo-theme-matery 的文件夾復制到你 Hexo 的 themes 文件夾中即可。

  由於在GitHub里面下載文件很慢的，所以我推薦以為博主寫的方法，我親測可以實現的，前提你要去注冊碼雲,這個博客后面優化的時候會用到，所以提前注冊也好。教程在此：github文件下載慢的完美解決方案

  如果嫌麻煩的話可以直接點擊下載鏈接來下載主題！

  2. 主題配置

  2.1 切換主題

  注意：首先需要明白什么是站點配置文件，什么是主題配置文件，站點配置文件就是根目錄下的配置文件，比如我的博客文件在F:\blog下，那么站點配置文件就是F:\blog\_config.yml，主題配置文件就是F:\blog\themes\matery\_config.yml。另外注意，配置文件中的標點符號不要出現中文格式的標點符號，不然運行會出錯。

  主題下載完成后，將站點配置文件中的theme值修改為你們自己下載主題的文件名，我的文件名為hexo-theme-matery-develop，那么值就修改為theme: hexo-theme-matery-develop。

  一些站點配置文件的其他地方的修改：

  • 語言選擇：如果為中文用戶，則在language:后添加值zh-CN，如果不修改，默認為英語；
  • 網址修改：url:的值為你的網址名，如http://xxxx.github.io，如果有域名，則修改為你的域名即可，至於有關域名的修改解析，后面我會說到，這里先不說了。
  • 站點配置文件有個per_page屬性，建議修改為6的倍數，這樣網站在適應設備時，有較好的顯示效果

  2.2 新建標簽 tags 頁面

  tags 頁是用來展示所有標簽的頁面，如果在你的博客 source 目錄下還沒有 tags/index.md 文件，那么你就需要新建一個，命令如下：

  hexo new page "tags"
  

  編輯你剛剛新建的頁面文件 /source/tags/index.md，至少需要以下內容：

  ---
  title: tags
  date: 2018-09-30 18:23:38
  type: "tags"
  layout: "tags"
  ---
  

  2.3 新建分類 categories 頁面

  categories 頁是用來展示所有分類的頁面，如果在你的博客 source 目錄下還沒有 categories/index.md 文件，那么你就需要新建一個，命令如下：

  hexo new page "categories"
  

  編輯你剛剛新建的頁面文件 /source/categories/index.md，至少需要以下內容：

  ---
  title: categories
  date: 2018-09-30 17:25:30
  type: "categories"
  layout: "categories"
  ---
  

  2.4 新建關於我 about 頁面

  about 頁是用來展示關於我和我的博客信息的頁面，如果在你的博客 source 目錄下還沒有 about/index.md 文件，那么你就需要新建一個，命令如下：

  hexo new page "about"
  

  編輯你剛剛新建的頁面文件 /source/about/index.md，至少需要以下內容：

  ---
  title: about
  date: 2018-09-30 17:25:30
  type: "about"
  layout: "about"
  ---
  

  2.5 新建留言板 contact 頁面 (可選)

  contact 頁是用來展示留言板信息的頁面，如果在你的博客 source 目錄下還沒有 contact/index.md 文件，那么你就需要新建一個，命令如下：

  hexo new page "contact"
  

  編輯你剛剛新建的頁面文件 /source/contact/index.md，至少需要以下內容：

  ---
  title: contact
  date: 2018-09-30 17:25:30
  type: "contact"
  layout: "contact"
  ---
  

  注：本留言板功能依賴於第三方評論系統，請激活你的評論系統才有效果。並且在主題的 _config.yml 文件中，第 19 至 21 行的“菜單”配置，取消關於留言板的注釋即可。

  2.6 新建友情鏈接 friends 頁面 (可選)

  friends 頁是用來展示友情鏈接信息的頁面，如果在你的博客 source 目錄下還沒有 friends/index.md 文件，那么你就需要新建一個，命令如下

  hexo new page "friends"
  

  編輯你剛剛新建的頁面文件 /source/friends/index.md，至少需要以下內容：

  ---
  title: friends
  date: 2018-12-12 21:25:30
  type: "friends"
  layout: "friends"
  ---
  

  同時，在你的博客 source 目錄下新建 _data 目錄，在 _data 目錄中新建 friends.json 文件，文件內容如下所示：

  [{
      "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
      "name": "碼醬",
      "introduction": "我不是大佬，只是在追尋大佬的腳步",
      "url": "http://luokangyuan.com/",
      "title": "前去學習"
  }, {
      "avatar": "http://image.luokangyuan.com/4027734.jpeg",
      "name": "閃爍之狐",
      "introduction": "編程界大佬，技術牛，人還特別好，不懂的都可以請教大佬",
      "url": "https://blinkfox.github.io/",
      "title": "前去學習"
  }, {
      "avatar": "http://image.luokangyuan.com/avatar.jpg",
      "name": "ja_rome",
      "introduction": "平凡的腳步也可以走出偉大的行程",
      "url": "https://me.csdn.net/jlh912008548",
      "title": "前去學習"
  }]
  

  2.7 菜單導航配置

  2.7.1. 配置基本菜單導航的名稱、路徑url和圖標icon.

  1. 菜單導航名稱可以是中文也可以是英文(如：Index或主頁)
  2. 圖標icon 可以在Font Awesome 中查找

  menu:
    Index:
      url: /
      icon: fas fa-home
    Tags:
      url: /tags
      icon: fas fa-tags
    Categories:
      url: /categories
      icon: fas fa-bookmark
    Archives:
      url: /archives
      icon: fas fa-archive
    About:
      url: /about
      icon: fas fa-user-circle
    Friends:
      url: /friends
      icon: fas fa-address-book
  

  當然啦，這些圖標呢一開始都是默認的，你可以不用修改，像我博客里面這樣子

  

  2.7.2. 二級菜單配置方法

  如果你需要二級菜單則可以在原基本菜單導航的基礎上如下操作

  1. 在需要添加二級菜單的一級菜單下添加children關鍵字(如:About菜單下添加children)
  2. 在children下創建二級菜單的 名稱name,路徑url和圖標icon.
  3. 注意每個二級菜單模塊前要加 -.
  4. 注意縮進格式

  menu:
    Index:
      url: /
      icon: fas fa-home
    Tags:
      url: /tags
      icon: fas fa-tags
    Categories:
      url: /categories
      icon: fas fa-bookmark
    Archives:
      url: /archives
      icon: fas fa-archive
    About:
      url: /about
      icon: fas fa-user-circle-o
    Friends:
      url: /friends
      icon: fas fa-address-book
    Medias:
      icon: fas fa-list
      children:
        - name: Musics
          url: /musics
          icon: fas fa-music
        - name: Movies
          url: /movies
          icon: fas fa-film
        - name: Books
          url: /books
          icon: fas fa-book
        - name: Galleries
          url: /galleries
          icon: fas fa-image
  

  2.8 添加emoji表情支持（可選的）

  本主題新增了對emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件來支持 emoji表情的生成，把對應的markdown emoji語法（::,例如：:smile:）轉變成會跳躍的emoji表情，安裝命令如下：

  npm install hexo-filter-github-emojis --save
  

  在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

  githubEmojis:
    enable: true
    className: github-emoji
    inject: true
    styles:
    customEmojis:
  

  執行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對應位置看到你用emoji語法寫的表情了。

  2.9 代碼高亮

  由於 Hexo 自帶的代碼高亮主題顯示不好看，所以主題中使用到了 hexo-prism-plugin 的 Hexo 插件來做代碼高亮，安裝命令如下

  npm i -S hexo-prism-plugin
  

  然后，修改 Hexo 根目錄下 _config.yml 文件中 highlight.enable 的值為 false，並新增 prism 插件相關的配置，主要配置如下：

  prism_plugin:
    mode: 'preprocess'    # realtime/preprocess
    theme: 'tomorrow'
    line_number: false    # default false
    custom_css:
  

  這里注意了！ 當你添加代碼塊時一定要在```后面加上語言的名字不然此功能會無效！看下圖：

  

  ​ yml就是語言名字。

  2.10 搜索

  本主題中還使用到了 hexo-generator-search 的 Hexo 插件來做內容搜索，安裝命令如下：

  npm install hexo-generator-search --save
  

  在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

  search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  

2.11 中文鏈接轉拼音（可選的）

如果你的文章名稱是中文的，那么 Hexo 默認生成的永久鏈接也會有中文，這樣不利於 SEO，且 gitment 評論對中文鏈接也不支持。我們可以用 hexo-permalink-pinyin Hexo 插件使在生成文章時生成中文拼音的永久鏈接。

安裝命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的鏈接。

2.12 文章字數統計插件（可選的）

如果你想要在文章中顯示文章字數、閱讀時長信息，可以安裝 hexo-wordcount插件。

安裝命令如下：

npm i --save hexo-wordcount

然后只需在本主題下的 _config.yml 文件中，激活以下配置項即可：

wordCount:
  enable: false # 將這個值設置為 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

2.13 添加 RSS 訂閱支持（可選的）

本主題中還使用到了 hexo-generator-feed 的 Hexo 插件來做 RSS，安裝命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

執行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夾中即可看到 atom.xml 文件，說明你已經安裝成功了。

2.14 添加 DaoVoice 在線聊天功能（可選的）

前往 DaoVoice 官網注冊並且獲取 app_id，並將 app_id 填入主題的 _config.yml 文件中

2.15 添加 Tidio 在線聊天功能（可選的）

前往 Tidio 官網注冊並且獲取 Public Key，並將 Public Key 填入主題的 _config.yml 文件中。

2.16 修改頁腳

頁腳信息可能需要做定制化修改，而且它不便於做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主題文件的 /layout/_partial/footer.ejs 文件中，包括站點、使用的主題、訪問量等。

2.17 修改社交鏈接

在主題的 _config.yml 文件中，默認支持 QQ、GitHub 和郵箱等的配置，你可以在主題文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交鏈接地址，增加鏈接可參考如下代碼：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="訪問我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交圖標（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交圖標的標識，供你參考：

• Facebook: fab fa-facebook
• Twitter: fab fa-twitter
• Google-plus: fab fa-google-plus
• Linkedin: fab fa-linkedin
• Tumblr: fab fa-tumblr
• Medium: fab fa-medium
• Slack: fab fa-slack
• Sina Weibo: fab fa-weibo
• Wechat: fab fa-weixin
• QQ: fab fa-qq
• Zhihu: fab fa-zhihu

注意: 本主題中使用的 Font Awesome 版本為 5.11.0。

2.18 修改打賞的二維碼圖片

在主題文件的 source/medias/reward 文件中，你可以替換成你的的微信和支付寶的打賞二維碼圖片。

2.19 配置音樂播放器（可選的）

新版主題支持接入第三方音樂，如QQ音樂，網易雲音樂，酷狗音樂等等

要支持音樂播放，在主題的 _config.yml 配置文件中激活music配置即可：

# 是否在首頁顯示音樂
music:
  enable: true
  title:             #非吸底模式有效
    enable: true
    show: 聽聽音樂
  server: netease   #require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require song id / playlist id / album id / search keyword
  fixed: false      # 開啟吸底模式
  autoplay: false   # 是否自動播放
  theme: '#42b983'
  loop: 'all'       # 音頻循環播放, 可選值: 'all', 'one', 'none'
  order: 'random'   # 音頻循環順序, 可選值: 'list', 'random'
  preload: 'auto'   # 預加載，可選值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默認音量，請注意播放器會記憶用戶設置，用戶手動設置音量后默認音量即失效
  listFolded: true  # 列表默認折疊

server可選netease（網易雲音樂），tencent（QQ音樂），kugou（酷狗音樂），xiami（蝦米音樂），

baidu（百度音樂）。

type可選song（歌曲），playlist（歌單），album（專輯），search（搜索關鍵字），artist（歌手）

id獲取示例: 瀏覽器打開網易雲音樂，點擊我喜歡的音樂歌單，地址欄有一串數字，playlist的id即為這串數字。

3. 文章 Front-matter 介紹

Front-matter 選項詳解

Front-matter 選項中的所有內容均為非必填的。但我仍然建議至少填寫 title 和 date 的值。

注意:

1. 如果 img 屬性不填寫的話，文章特色圖會根據文章標題的 hashcode 的值取余，然后選取主題中對應的特色圖片，從而達到讓所有文章都的特色圖各有特色。
2. date 的值盡量保證每篇文章是唯一的，因為本主題中 Gitalk 和 Gitment 識別 id 是通過 date 的值來作為唯一標識的。
3. 如果要對文章設置閱讀驗證密碼的功能，不僅要在 Front-matter 中設置采用了 SHA256 加密的 password 的值，還需要在主題的 _config.yml 中激活了配置。有些在線的 SHA256 加密的地址，可供你使用：開源中國在線工具、chahuo、站長工具。
4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 來給單個文章配置轉載規則

以下為文章的 Front-matter 示例。

最簡示例

---
title: typora-vue-theme主題介紹
date: 2018-09-07 09:25:00
---

最全示例

---
title: typora-vue-theme主題介紹
date: 2018-09-07 09:25:00
author: 趙奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 這是你自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作為摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

4. 自定制修改

在本主題的 _config.yml 中可以修改部分自定義信息，有以下幾個部分：

• 菜單
• 我的夢想
• 首頁的音樂播放器和視頻播放器配置
• 是否顯示推薦文章名稱和按鈕配置
• favicon 和 Logo
• 個人信息
• TOC 目錄
• 文章打賞信息
• 復制文章內容時追加版權信息
• MathJax
• 文章字數統計、閱讀時長
• 點擊頁面的’愛心’效果
• 我的項目
• 我的技能
• 我的相冊
• Gitalk、Gitment、Valine 和 disqus 評論配置
• 不蒜子統計和谷歌分析（Google Analytics）
• 默認特色圖的集合。當文章沒有設置特色圖時，本主題會根據文章標題的 hashcode 值取余，來選擇展示對應的特色圖

我認為個人博客應該都有自己的風格和特色。如果本主題中的諸多功能和主題色彩你不滿意，可以在主題中自定義修改，很多更自由的功能和細節點的修改難以在主題的 _config.yml 中完成，需要修改源代碼才來完成。以下列出了可能對你有用的地方：

4.1 修改主題顏色

在主題文件的 /source/css/matery.css 文件中，搜索 .bg-color 來修改背景顏色：

/* 整體背景顏色，包括導航、移動端的導航、頁尾、標簽頁等的背景顏色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner圖的顏色漸變效果，請將以下的css屬性注釋掉或者刪除掉即可*/
@-webkit-keyframes rainbow {
   /* 動態切換背景顏色. */
}
@keyframes rainbow {
    /* 動態切換背景顏色. */
}

4.2 修改 banner 圖和文章特色圖

你可以直接在 /source/medias/banner 文件夾中更換你喜歡的 banner 圖片，主題代碼中是每天動態切換一張，只需 7 張即可。如果你會 JavaScript 代碼，可以修改成你自己喜歡切換邏輯，如：隨機切換等，banner 切換的代碼位置在 /layout/_partial/bg-cover-content.ejs 文件的 `` 代碼中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夾中默認有 24 張特色圖片，你可以再增加或者減少，並需要在 _config.yml 做同步修改。

如果想改為每小時或者每分鍾切換banner圖的話，需要將getDay()改為getHours()或者getMinutes()即可

4.3 修改網站相關信息

首先看一個圖，如下：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7JotyEqo-1582883898873)(https://cdn.jsdelivr.net/gh/baifeng66/picgophots/images/20200115115221.png)]

緊接着放上相關的配置文件信息：

1. 網站信息的修改

#這是根目錄下的配置文件信息
title: 過客~勵む   #這是網站標題
subtitle: 勵む    #這是網站副標題subtitler
# 下面兩個description,keywords，需要填上，如果想讓搜索引擎收錄，這個做SEO優化必不可忽視的兩個屬性
description: 專注於Web,分享生活,分享知識  #網站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等]  #網站的關鍵詞
author: YangAir  #作者，文章版權所顯示的
language: zh-CN  #網站語言，不填寫，默認為英文
timezone:   #時區，可以不填寫

# 這是主題配置文件的相關信息
# 配置網站favicon和網站LOGO
# 此處我用的CDN，也可以使用本地文件
favicon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.2/source/favicon.png
logo: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.2/source/logo.png

# 網站副標題，打字效果
# 如果有符號 ‘ ，請在 ’ 前面加上 \
subtitle: 
  enable: true
  loop: true # 是否循環
  showCursor: true # 是否顯示光標
  startDelay: 300 # 開始延遲
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 刪除速度
  sub1: 志之所向，金石為開，誰能御之？
  sub2: 花開不是為了花落，而是為了開的更加燦爛。
  sub3: 沒有傘的孩子必須努力奔跑！
  sub4: 欲望以提升熱忱，毅力以磨平高山。
  sub5: 如果放棄太早，你永遠都不知道自己會錯過什么。
  sub6: 沒有礁石，就沒有美麗的浪花；沒有挫折，就沒有壯麗的人生。

注意：

網站打字效果副標題默認有兩個，即sub1和sub2，如果想寫多個，則需要修改兩處地方，首先修改配置文件，如上面所示，在sub1和sub2后面繼續添加即可，然后在去主題目錄下的layout文件夾下的_partial文件夾，修改bg-cover-content.ejs文件，大約在12行左右，如下面所示：

 <div class="description center-align">
     <% if (theme.subtitle.enable) { %>
         <span id="subtitle"></span>
         <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script>
            var typed = new Typed("#subtitle", {
                strings: ['<%= theme.subtitle.sub1 %>',
                          '<%= theme.subtitle.sub2 %>',
                          '<%= theme.subtitle.sub3 %>',
                          '<%= theme.subtitle.sub4 %>',
                          '<%= theme.subtitle.sub5 %>',
                          '<%= theme.subtitle.sub6 %>'],
                 startDelay: <%= theme.subtitle.startDelay %>,
                 typeSpeed: <%= theme.subtitle.typeSpeed %>,
                 loop: <%= theme.subtitle.loop %>,   
                 backSpeed: <%= theme.subtitle.backSpeed %>,
                 showCursor: <%= theme.subtitle.showCursor %>
              });
          </script>
      <% } else { %>
            <%= config.description %>
      <% } %>
</div>

2. 社交鏈接的修改

默認的配置信息為：

# 首頁 banner 中的第二行個人信息配置，留空即不啟用
socialLink:
  github:  https://github.com/blinkfox
  email: [e-mail]
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 1181062873
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

如果想添加簡書，CSDN，掘金，博客園等等，需要在主題配置文件添加相關配置，如下是我個人的配置：

socialLink:
  qq: 1035800145
  weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
  github: https://github.com/Yafine
  email: mailto:[e-mail]
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
  juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
  csdn: https://blog.csdn.net/victoryxa
  jianshu: https://www.jianshu.com/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true、false

其中的weixin我是用的圖片鏈接，會跳轉到一個新的標簽頁，之后還需要修改ejs文件，文件在主題目錄下的layout文件夾下的_partial文件夾，修改social-link.ejs，添加相關的配置，我個人添加的配置如下：

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="關注我的簡書: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu">簡</i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="關注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>
<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="關注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
    <a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="關注我的博客園: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">博</i>
    </a>
<% } %>
<% if (theme.socialLink.weixin) { %>
    <a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信聯系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>

到這里此次教程就完了，下一篇呢，我會把一些美化主題的方法告訴你們，還有一些優化訪問博客速度...等等之類的。

只要你有一件合理的事去做，你的生活就會顯得特別美好。