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

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

image

閃爍之狐(作者)

過客-礪

洪衛(wèi)@博客

主題特性

• 簡(jiǎn)單漂亮，文章內(nèi)容美觀易讀

• Material Design 設(shè)計(jì)

• 響應(yīng)式設(shè)計(jì)轴猎，博客在桌面端嵌莉、平板、手機(jī)等設(shè)備上均能很好的展現(xiàn)

• 首頁輪播文章及每天動(dòng)態(tài)切換 Banner 圖片

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

• 時(shí)間軸式的歸檔頁

• 詞云的標(biāo)簽頁和雷達(dá)圖的分類頁

• 豐富的關(guān)于我頁面（包括關(guān)于我捻脖、文章統(tǒng)計(jì)圖锐峭、我的項(xiàng)目、我的技能可婶、相冊(cè)等）

• 可自定義的數(shù)據(jù)的友情鏈接頁面

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

• 支持 MathJax

• TOC 目錄

• 可設(shè)置復(fù)制文章內(nèi)容時(shí)追加版權(quán)信息

• 可設(shè)置閱讀文章時(shí)做密碼驗(yàn)證

• Gitalk只祠、Gitment、Valine 和 Disqus 評(píng)論模塊（推薦使用 Gitalk）

• 集成了不蒜子統(tǒng)計(jì)扰肌、谷歌分析（Google Analytics）和文章字?jǐn)?shù)統(tǒng)計(jì)等功能

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

• 支持emoji表情，用markdown emoji語法書寫直接生成對(duì)應(yīng)的能跳躍的表情熊杨。

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

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

  image
  image
  image

  1. 主題下載與安裝

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

  由于在GitHub里面下載文件很慢的川陆，所以我推薦以為博主寫的方法剂习，我親測(cè)可以實(shí)現(xiàn)的，前提你要去注冊(cè)碼云,這個(gè)博客后面優(yōu)化的時(shí)候會(huì)用到较沪，所以提前注冊(cè)也好鳞绕。教程在此：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)符號(hào)不要出現(xiàn)中文格式的標(biāo)點(diǎn)符號(hào)鹦蠕，不然運(yùn)行會(huì)出錯(cuò)冒签。

主題下載完成后，將站點(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)域名的修改解析，后面我會(huì)說到酥宴，這里先不說了啦吧。
• 站點(diǎn)配置文件有個(gè)per_page屬性，建議修改為6的倍數(shù)拙寡，這樣網(wǎng)站在適應(yīng)設(shè)備時(shí)授滓，有較好的顯示效果

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

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

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 文件淮摔，那么你就需要新建一個(gè)，命令如下：

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 文件，那么你就需要新建一個(gè)造垛，命令如下：

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 文件筋搏，那么你就需要新建一個(gè)仆百，命令如下：

hexo new page "contact"

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

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

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

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

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

hexo new page "friends"

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

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

同時(shí)，在你的博客 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ù)牛澈灼，人還特別好，不懂的都可以請(qǐng)教大佬",
    "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.

1. 菜單導(dǎo)航名稱可以是中文也可以是英文(如：Index或主頁)
2. 圖標(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. 二級(jí)菜單配置方法

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

1. 在需要添加二級(jí)菜單的一級(jí)菜單下添加children關(guān)鍵字(如:About菜單下添加children)
2. 在children下創(chuàng)建二級(jí)菜單的 名稱name,路徑url和圖標(biāo)icon.
3. 注意每個(gè)二級(jí)菜單模塊前要加 -.
4. 注意縮進(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表情支持（可選的）

本主題新增了對(duì)emoji表情的支持荣回，使用到了 hexo-filter-github-emojis 的 Hexo 插件來支持 emoji表情的生成，把對(duì)應(yīng)的markdown emoji語法（::,例如：:smile:）轉(zhuǎn)變成會(huì)跳躍的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 重新生成博客文件，然后就可以在文章中對(duì)應(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)你添加代碼塊時(shí)一定要在```后面加上語言的名字不然此功能會(huì)無效！看下圖：

? 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)生成的永久鏈接也會(huì)有中文肮街，這樣不利于 SEO，且 gitment 評(píng)論對(duì)中文鏈接也不支持判导。我們可以用 hexo-permalink-pinyin Hexo 插件使在生成文章時(shí)生成中文拼音的永久鏈接嫉父。

安裝命令如下：

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ì)插件（可選的）

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

安裝命令如下：

npm i --save hexo-wordcount

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

wordCount:
  enable: false # 將這個(gè)值設(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)注冊(cè)并且獲取 app_id框舔，并將 app_id 填入主題的 _config.yml 文件中

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

前往 Tidio 官網(wǎng)注冊(cè)并且獲取 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)識(shí)朱躺，供你參考：

• 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   # 是否自動(dòng)播放
  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)音量谁尸，請(qǐng)注意播放器會(huì)記憶用戶設(shè)置舅踪，用戶手動(dòng)設(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 的值裳扯。

注意:

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

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

最簡(jiǎn)示例

---
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)容扔仓，如果這個(gè)屬性有值，文章卡片摘要就顯示這段文字咖耘，否則程序會(huì)自動(dòng)截取文章的部分內(nèi)容作為摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

4. 自定制修改

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

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

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

4.1 修改主題顏色

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

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

4.2 修改 banner 圖和文章特色圖

你可以直接在 /source/medias/banner 文件夾中更換你喜歡的 banner 圖片钓辆，主題代碼中是每天動(dòng)態(tài)切換一張，只需 7 張即可肴焊。如果你會(huì) 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 做同步修改茂浮。

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

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

首先看一個(gè)圖，如下：

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

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

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

#這是根目錄下的配置文件信息
title: 過客~勵(lì)む   #這是網(wǎng)站標(biāo)題
subtitle: 勵(lì)む    #這是網(wǎng)站副標(biāo)題subtitler
# 下面兩個(gè)description,keywords席揽，需要填上顽馋，如果想讓搜索引擎收錄，這個(gè)做SEO優(yōu)化必不可忽視的兩個(gè)屬性
description: 專注于Web,分享生活,分享知識(shí)  #網(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:   #時(shí)區(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)題，打字效果
# 如果有符號(hào) ‘ 聂宾，請(qǐng)?jiān)?’ 前面加上 \
subtitle: 
  enable: true
  loop: true # 是否循環(huán)
  showCursor: true # 是否顯示光標(biāo)
  startDelay: 300 # 開始延遲
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 刪除速度
  sub1: 志之所向果善，金石為開，誰能御之系谐？
  sub2: 花開不是為了花落巾陕，而是為了開的更加燦爛讨跟。
  sub3: 沒有傘的孩子必須努力奔跑！
  sub4: 欲望以提升熱忱鄙煤，毅力以磨平高山晾匠。
  sub5: 如果放棄太早，你永遠(yuǎn)都不知道自己會(huì)錯(cuò)過什么梯刚。
  sub6: 沒有礁石凉馆，就沒有美麗的浪花；沒有挫折亡资，就沒有壯麗的人生澜共。

注意：

網(wǎng)站打字效果副標(biāo)題默認(rèn)有兩個(gè)，即sub1和sub2沟于，如果想寫多個(gè)咳胃，則需要修改兩處地方，首先修改配置文件旷太，如上面所示展懈，在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>

2. 社交鏈接的修改

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

# 首頁 banner 中的第二行個(gè)人信息配置睡毒，留空即不啟用
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

如果想添加簡(jiǎn)書，CSDN演顾，掘金供搀，博客園等等，需要在主題配置文件添加相關(guān)配置钠至，如下是我個(gè)人的配置：

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://www.reibang.com/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true葛虐、false

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

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="關(guān)注我的簡(jiǎn)書: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu">簡(jiǎn)</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>
<% } %>

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

只要你有一件合理的事去做休溶，你的生活就會(huì)顯得特別美好代赁。