Hexo-Matery主題美化

大家可以來我Hexo博客主頁看看具體效果，歡迎留言評論 傳送門

下載安裝Matery主題

首先在hexo官網主題里面搜索Matery主題點擊進入作者大大的github，然后下載 master 分支的最新穩定版的代碼，解壓縮后將 hexo-theme-matery 的檔案夾重命名為matery，復制到Hexo 的 themes 檔案夾中

可以在themes 檔案夾下使用Git clone命令來下載：

git clone https://github.com/blinkfox/hexo-theme-matery.git

切換主題

下載完后，將站點組態檔中的 theme 值修改為你下載主題的檔案名

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery

一些其他在站點目錄配置：

language: zh-CN網站的語言設定

url: https://www.guixinchn.cn 網站的網站（域名）

per_page: 12建議修改為 6 的倍數，主題排版比較好

新建頁面

1、標簽頁

hexo new page "tags"

編輯新建的/source/tags/index.md檔案

---
title: tags
date: 2020-02-23 19:37:07
type: "tags"
layout: "tags"
---

2、分類頁

hexo new page "categories"

編輯新建的/source/categories/index.md檔案

---
title: categories
date: 2020-02-23 19:37:07
type: "categories"
layout: "categories"
---

3、關于頁面

hexo new page "about"

編輯新建的/source/about/index.md檔案

---
title: about
date: 2020-02-23 19:37:07
type: "about"
layout: "about"
---

4、留言板

hexo new page "contact"

編輯新建的/source/contact/index.md檔案

---
title: contact
date: 2020-02-23 19:37:07
type: "contact"
layout: "contact"
---

5、友情鏈接

hexo new page "friends"

編輯新建的/source/friends/index.md檔案

---
title: friends
date: 2020-02-23 19:37:07
type: "friends"
layout: "friends"
---

然后在博客 source 目錄下新建 _data 目錄，在 _data 目錄中新建 friends.json 檔案，檔案內容如下所示：

[
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/csdn.png",
	    "name": "Blog",
	    "introduction": "CSDN社區",
	    "url": "https://blog.csdn.net/guixinchn",
	    "title": "CSDN"
	}, 
	{
        "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/bokeyuan.png",
        "name": "Blog",
        "introduction": "博客園",
        "url": "https://www.cnblogs.com/guixinchn/",
        "title": "博客園"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/github.png",
	    "name": "github",
	    "introduction": "github",
	    "url": "https://github.com/guixinchn",
	    "title": "github"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/touxiang.jpg",
	    "name": "Blog",
	    "introduction": "咕咕星",
	    "url": "https://ythan.top",
	    "title": "咕咕星"
	}
]

6、添加 404 頁面

首先再站點根目錄下的 source 檔案夾下新建 404.md 檔案，里面內容如下：

---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面了"
---

緊接著再新建主題檔案夾的 layout 目錄下新建 404.ejs 檔案，添加內容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 90.2vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切換 banner 圖.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

7、添加自定義頁面

首先在站點目錄下的 source 檔案夾下新建 aboutme 檔案，檔案名可自定義，然后撰寫一個 index.html 放入 aboutme 檔案夾下，然后在主題組態檔下的導航配置資訊添加下面的配置：

About:
    url: /
    icon: fas fa-address-card
    children:
      - name: 關于我
        url: /about
        icon: fas fa-user-circle
      - name: Another    #這是新添加的，在原有配置基礎上添加
        url: /aboutme
        icon: fa fa-user-secret

然后在站點組態檔下，找到 skip_render，在后面添加屬性，如下：

# 其意思為在對檔案進行渲染時跳過aboutme檔案下的所有檔案
skip_render: 
    - aboutme/** 
    - aaa/**
    - bbb/**

配置選單導航

配置基本選單導航的名稱、路徑 url 和圖示 icon.

圖示 icon 可以在 Font Awesome 中查找

# main menu navigation url and icon
# 配置選單導航的名稱、路徑和圖示icon.
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
  Contact:
    url: /contact
    icon: fas fa-comments
  Friends:
    url: /friends
    icon: fas fa-address-book

添加 emoji 表情支持

需要安裝插件 hexo-filter-github-emojis

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

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

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

代碼高亮

原本的代碼顯示行號和內容分開了，不美觀

代碼美化需要安裝hexo-prism-plugin 插件

npm i -S hexo-prism-plugin

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

highlight:			#代碼塊的設定
  enable: false			#開啟代碼塊高亮
  line_number: true		#如果未指定語言，則啟用自動檢測
  auto_detect: false		#顯示行數
  tab_replace: ''		#用n個空格替換tabs；如果值為空，則不會替換tabs
  wrap: ture
  hljs: false


# 關閉原有的代碼高亮，使用自己的
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

注意：

hexo花括號顯示失敗的話，需要將hexo版本降級，改成hexo4.2.0版本就好了

卸載hexo5.0
npm uninstall hexo --save

安裝4.2.0版本

npm install [email protected] --save

主題的搜索功能

需要安裝hexo-generator-search插件

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

文章字數統計插件

需要安裝 hexo-wordcount 插件

npm i --save hexo-wordcount

主題下的 _config.yml 檔案中，激活以下配置項即可：

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

添加 RSS 訂閱支持

需要安裝hexo-generator-feed插件

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

在 public 檔案夾中即可看到 atom.xml 檔案，則已經安裝成功

修改頁腳

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

修改社交鏈接

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

<% if (theme.socialLink.github) { %>
    <a href=https://www.cnblogs.com/guixinchn/p/"" class="tooltipped" target="_blank" data-tooltip="訪問我的GitHub" data-position="top" data-delay="50">
        
    

修改打賞的二維碼圖片

在主題檔案的 source/medias/reward 檔案中修改

配置音樂播放器

支持接入第三方音樂，如 QQ 音樂，網易云音樂，酷狗音樂等等

主題的 _config.yml 組態檔中激活 music 配置即可：

# Whether to display the musics.
# 是否在首頁顯示音樂.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 咕咕星的歌單
  autoHide: true    # hide automaticaly
  server: netease   #require	music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 2888085740     #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  # 串列默認折疊
  hideLrc: true     # 隱藏歌詞

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

baidu（百度音樂），

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

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

文章 Front-matter 介紹

注意:

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

自定制修改

修改主題顏色

在主題檔案的 /source/css/matery.css 檔案中修改

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

修改 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() 即可，

修改網站相關資訊

#這是根目錄下的組態檔資訊
# Site
title: 咕咕星Blog		#網站標題
subtitle: 世界很暗，但是你來了 #網站副標題
description: 本網站是個人興趣愛好，總結分享經驗，記錄生活點滴的平臺，希望在以后的學習旅途中，走出自己的風景，	#網站描述description 主要用于5E0，告訴搜索引擎一個關于您站點的簡單描述
keywords: [HTML, CSS, JavaScript, JQuery, java, linux等]		#網站的關鍵詞，使用半角逗號“，”分隔多個關鍵詞
author: 咕咕星			#您的名字
language: zh-CN			#網站使用的語言，建議修改為zh-CN
timezone:			#網站時區，Hexo默認使用您電腦的時區，


# 這是主題組態檔的相關資訊
# 配置網站favicon和網站LOGO
# 此處我用的CDN，也可以使用本地檔案
favicon: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png
logo: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/logo.png


# 網站副標題，打字效果
# 如果有符號 ‘ ，請在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否回圈
  showCursor: true # 是否顯示游標
  startDelay: 300 # 開始延遲
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 洗掉速度
  sub1: 如果放棄太早，你永遠都不知道自己會錯過什么，
  sub2: 沒有傘的孩子必須努力奔跑！
  sub3: 花開不是為了花落，而是為了開的更加燦爛，
  sub4: 沒有礁石，就沒有美麗的浪花；沒有挫折，就沒有壯麗的人生，

注意：

網站打字效果副標題默認有兩個，即 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://www.cnblogs.com/guixinchn/p/"https://cdn.jsdelivr.net/npm/[email protected]"></script>
                <script>
                    var typed = new Typed("#subtitle", {
                        strings: ['<%= theme.subtitle.sub1 %>',
				 				  '<%= theme.subtitle.sub2 %>',
								  '<%= theme.subtitle.sub3 %>',
				 				  '<%= theme.subtitle.sub4 %>'],
                        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>

社交鏈接的修改

在主題的組態檔中修改：

# 首頁 banner 中的第二行個人資訊配置，留空即不啟用
socialLink:
  qq: 673888718
  weixin: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/wechat.jpg
  github: #https://github.com/guixinchn
  email: [email protected]
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  csdn: https://blog.csdn.net/guixinchn
  cnblogs: https://www.cnblogs.com/guixinchn
  rss: true # true、false

期中的 weixin 我是用的圖片鏈接，會跳轉到一個新的標簽頁，之后還需要修改 ejs 檔案，檔案在主題目錄下的 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>
<% } %>

<% if (theme.socialLink.email) { %>
    <a href="mailto:<%= theme.socialLink.email %>" class="tooltipped" target="_blank" data-tooltip="郵件聯系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>
<% } %>

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

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

<% if (theme.socialLink.qq) { %>
    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=<%= theme.socialLink.qq %>" class="tooltipped" target="_blank" data-tooltip="QQ聯系我: <%= theme.socialLink.qq %>" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>
<% } %>

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

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

<% if (theme.socialLink.rss) { %>
    <a href="<%- url_for('/atom.xml') %>" class="tooltipped" target="_blank" data-tooltip="RSS 訂閱" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>
<% } %>



<% if (theme.socialLink.jianshu) { %>
    <a href=https://www.cnblogs.com/guixinchn/p/"" class="tooltipped" target="_blank" data-tooltip="關注我的簡書: " data-position="top" data-delay="50">
        簡
    



    
        C
    


    
        掘
    



    
        博
    


    
        
    

其他一些個性DIY

動態標題

實作方法，引入 js 檔案，在主題檔案下的 /source/js/ 下新建 FunnyTitle.js，增加以下代碼：

 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '我相信你還會回來的！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '哈哈，我就知道！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

然后在添加到 themes/matery/layout/layout.ejs 引入

<script src=https://www.cnblogs.com/guixinchn/p/"<%- url_for('/js/FunnyTitle.js') %>"></script>

關于我頁面添加個人簡歷

打開 theme/matery/layout/about.ejs 檔案，大約在 13 行，有一個 `` 標簽，找出其對應結尾的標簽，大約在 61 行左右，然后在新增如下代碼：

<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('個人簡歷') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

可以在about頁面自定義內容

未完待續

標籤：其他

上一篇：【Azure DevOps系列】什么是Azure DevOps

下一篇：【Azure DevOps系列】開始第一個Azure DevOps應用