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

因?yàn)槟J(rèn)的Hexo主題實(shí)在太難看了，所以我們可以去Hexo主題官網(wǎng)主題網(wǎng)去選擇自己中意的主題，我用過yilia和yeele這2個主題，最后由于某些原因我換成了現(xiàn)在的主題matery，當(dāng)然如果你對上面那2個主題感興趣的話呢，先給2個主題的大佬鏈接在這里，你們可以進(jìn)去看看效果，MOxFIVE這個是yelee主題的，Yilia-plus這個是yilia-plus主題，我的博客主題應(yīng)用的是matery的，晚?xiàng)鞑┛?/a>！歡迎大家去踩踩！話不多說了，開始我們今天的教程吧。

一、Hexo博客主題安裝以及優(yōu)化

主題大佬博客

閃爍之狐(作者)

過客-礪

洪衛(wèi)@博客

主題特性

簡單漂亮，文章內(nèi)容美觀易讀
Material Design 設(shè)計
響應(yīng)式設(shè)計，博客在桌面端、平板、手機(jī)等設(shè)備上均能很好的展現(xiàn)
首頁輪播文章及每天動態(tài)切換 Banner 圖片
瀑布流式的博客文章列表（文章無特色圖片時會有 24 張漂亮的圖片代替）
時間軸式的歸檔頁
詞云的標(biāo)簽頁和雷達(dá)圖的分類頁
豐富的關(guān)于我頁面（包括關(guān)于我、文章統(tǒng)計圖、我的項(xiàng)目、我的技能、相冊等）
可自定義的數(shù)據(jù)的友情鏈接頁面
支持文章置頂和文章打賞
支持 MathJax
TOC 目錄
可設(shè)置復(fù)制文章內(nèi)容時追加版權(quán)信息
可設(shè)置閱讀文章時做密碼驗(yàn)證
Gitalk、Gitment、Valine 和 Disqus 評論模塊（推薦使用 Gitalk）
集成了不蒜子統(tǒng)計、谷歌分析（Google Analytics）和文章字?jǐn)?shù)統(tǒng)計等功能
支持在首頁的音樂播放和視頻播放功能
支持emoji表情，用markdown emoji語法書寫直接生成對應(yīng)的能跳躍的表情。
支持 DaoVoice、Tidio 在線聊天功能

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

image

image

image

1. 主題下載與安裝

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

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

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

2. 主題配置

2.1 切換主題

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

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

一些站點(diǎn)配置文件的其他地方的修改：

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

2.2 新建標(biāo)簽 tags 頁面

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

hexo new page "tags"

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

---
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，至少需要以下內(nèi)容：

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

2.4 新建關(guān)于我 about 頁面

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

hexo new page "about"

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

---
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，至少需要以下內(nèi)容：

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

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

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

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

hexo new page "friends"

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

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

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

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

2.7 菜單導(dǎo)航配置

2.7.1. 配置基本菜單導(dǎo)航的名稱、路徑url和圖標(biāo)icon.

菜單導(dǎo)航名稱可以是中文也可以是英文(如：Index或主頁)
圖標(biāo)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

當(dāng)然啦，這些圖標(biāo)呢一開始都是默認(rèn)的，你可以不用修改，像我博客里面這樣子

image

2.7.2. 二級菜單配置方法

如果你需要二級菜單則可以在原基本菜單導(dǎo)航的基礎(chǔ)上如下操作

在需要添加二級菜單的一級菜單下添加children關(guān)鍵字(如:About菜單下添加children)
在children下創(chuàng)建二級菜單的名稱name,路徑url和圖標(biāo)icon.
注意每個二級菜單模塊前要加 -.
注意縮進(jìn)格式

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表情的生成，把對應(yīng)的markdown emoji語法（::,例如：:smile:）轉(zhuǎn)變成會跳躍的emoji表情，安裝命令如下：

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

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

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

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

2.9 代碼高亮

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

npm i -S hexo-prism-plugin

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

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

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

? yml就是語言名字。

2.10 搜索

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

npm install hexo-generator-search --save

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

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

2.11 中文鏈接轉(zhuǎn)拼音（可選的）

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

安裝命令如下：

npm i hexo-permalink-pinyin --save

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

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

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

2.12 文章字?jǐn)?shù)統(tǒng)計插件（可選的）

如果你想要在文章中顯示文章字?jǐn)?shù)、閱讀時長信息，可以安裝 hexo-wordcount插件。

安裝命令如下：

npm i --save hexo-wordcount

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

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

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

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

npm install hexo-generator-feed --save

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

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

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

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

前往 DaoVoice 官網(wǎng)注冊并且獲取 app_id，并將 app_id 填入主題的 _config.yml 文件中

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

前往 Tidio 官網(wǎng)注冊并且獲取 Public Key，并將 Public Key 填入主題的 _config.yml 文件中。

2.16 修改頁腳

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

2.17 修改社交鏈接

在主題的 _config.yml 文件中，默認(rèn)支持 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>
<% } %>

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

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音樂，網(wǎng)易云音樂，酷狗音樂等等

要支持音樂播放，在主題的 _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'       # 音頻循環(huán)播放, 可選值: 'all', 'one', 'none'
  order: 'random'   # 音頻循環(huán)順序, 可選值: 'list', 'random'
  preload: 'auto'   # 預(yù)加載，可選值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默認(rèn)音量，請注意播放器會記憶用戶設(shè)置，用戶手動設(shè)置音量后默認(rèn)音量即失效
  listFolded: true  # 列表默認(rèn)折疊

server可選netease（網(wǎng)易云音樂），tencent（QQ音樂），kugou（酷狗音樂），xiami（蝦米音樂），

baidu（百度音樂）。

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

id獲取示例: 瀏覽器打開網(wǎng)易云音樂，點(diǎn)擊我喜歡的音樂歌單，地址欄有一串?dāng)?shù)字，playlist的id即為這串?dāng)?shù)字。

3. 文章 Front-matter 介紹

Front-matter 選項(xiàng)詳解

Front-matter 選項(xiàng)中的所有內(nèi)容均為非必填的。但我仍然建議至少填寫 title 和 date 的值。

注意:

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

以下為文章的 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: 這是你自定義的文章摘要內(nèi)容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內(nèi)容作為摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

4. 自定制修改

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

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

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

4.1 修改主題顏色

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

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

4.2 修改 banner 圖和文章特色圖

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

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

在 /source/medias/featureimages 文件夾中默認(rèn)有 24 張?zhí)厣珗D片，你可以再增加或者減少，并需要在 _config.yml 做同步修改。

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

4.3 修改網(wǎng)站相關(guān)信息

首先看一個圖，如下：

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

緊接著放上相關(guān)的配置文件信息：

網(wǎng)站信息的修改

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

# 這是主題配置文件的相關(guān)信息
# 配置網(wǎng)站favicon和網(wǎng)站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

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

注意：

網(wǎng)站打字效果副標(biāo)題默認(rèn)有兩個，即sub1和sub2，如果想寫多個，則需要修改兩處地方，首先修改配置文件，如上面所示，在sub1和sub2后面繼續(xù)添加即可，然后在去主題目錄下的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>

社交鏈接的修改

默認(rèn)的配置信息為：

# 首頁 banner 中的第二行個人信息配置，留空即不啟用
socialLink:
  github:  https://github.com/blinkfox
  email: 1181062873@qq.com
  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，掘金，博客園等等，需要在主題配置文件添加相關(guān)配置，如下是我個人的配置：

socialLink:
  qq: 1035800145
  weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
  github: https://github.com/Yafine
  email: mailto:1035800145@qq.com
  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: http://m.itdecent.cn/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true、false

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

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="關(guān)注我的簡書: <%= 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="關(guān)注我的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="關(guān)注我的掘金: <%= 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="關(guān)注我的博客園: <%= 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="微信聯(lián)系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Hexo博客主題安裝和優(yōu)化（一）

Hexo博客主題安裝和優(yōu)化（一）

一、Hexo博客主題安裝以及優(yōu)化

主題大佬博客

主題特性

1. 主題下載與安裝

2. 主題配置

2.1 切換主題

2.2 新建標(biāo)簽 tags 頁面

2.3 新建分類 categories 頁面

2.4 新建關(guān)于我 about 頁面

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

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

2.7 菜單導(dǎo)航配置

2.7.1. 配置基本菜單導(dǎo)航的名稱、路徑url和圖標(biāo)icon.

2.7.2. 二級菜單配置方法

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

2.9 代碼高亮

2.10 搜索

2.11 中文鏈接轉(zhuǎn)拼音（可選的）

2.12 文章字?jǐn)?shù)統(tǒng)計插件（可選的）

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

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

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

2.16 修改頁腳

2.17 修改社交鏈接

2.18 修改打賞的二維碼圖片

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

3. 文章 Front-matter 介紹

Front-matter 選項(xiàng)詳解

最簡示例

最全示例

4. 自定制修改

4.1 修改主題顏色

4.2 修改 banner 圖和文章特色圖

4.3 修改網(wǎng)站相關(guān)信息

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Hexo博客主題安裝和優(yōu)化（一）

一、Hexo博客主題安裝以及優(yōu)化

主題大佬博客

主題特性

1. 主題下載與安裝

2. 主題配置

2.1 切換主題

2.2 新建標(biāo)簽 tags 頁面

2.3 新建分類 categories 頁面

2.4 新建關(guān)于我 about 頁面

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

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

2.7 菜單導(dǎo)航配置

2.7.1. 配置基本菜單導(dǎo)航的名稱、路徑url和圖標(biāo)icon.

2.7.2. 二級菜單配置方法

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

2.9 代碼高亮

2.10 搜索

2.11 中文鏈接轉(zhuǎn)拼音（可選的）

2.12 文章字?jǐn)?shù)統(tǒng)計插件（可選的）

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

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

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

2.16 修改頁腳

2.17 修改社交鏈接

2.18 修改打賞的二維碼圖片

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

3. 文章 Front-matter 介紹

Front-matter 選項(xiàng)詳解

最簡示例

最全示例

4. 自定制修改

4.1 修改主題顏色

4.2 修改 banner 圖和文章特色圖

4.3 修改網(wǎng)站相關(guān)信息

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av