Hexo 簡介

Hexo 是一個基於 Node.js 的靜態部落格框架，可以幫助使用者快速搭建並部署個人部落格，主要使用 Markdown 語法來編寫文章，然後透過 Hexo 提供的命令將文章生成靜態網頁，最後部署到伺服器上，且 Hexo 有以下幾個特色：

  • 使用高效的渲染引擎和緩存機制，生成靜態頁面速度快
  • 具有豐富主題、插件，可拓展性強
  • 透過指令可以輕鬆的生成和管理內容
  • 僅需要使用 Markdown 語法即可邊寫文章，對新手友好

安裝與建立

詳細安裝過程可以参考： 【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌

安裝需求

Hexo 安裝

  1. 安裝完上述軟體之後，在終端機 ( cmd 或 Git Bash ) 中輸入以下指令。
1
npm install -g hexo-cli
  1. 之後可以輸入以下指令確認是否安裝成功。
1
hexo -v

項目初始化

  1. 在目標路徑中打開終端機，輸入以下指令建立項目。
1
hexo init {項目名}
  1. 進入所建立的資料夾，安裝相關的套件。
1
2
cd {項目名} //進入資料夾
npm i

這樣就已經完成了項目的初始化了。

指令

更多指令可以参考： 指令 | Hexo

  • hexo server：啟動伺服器，啟動後可以在 http://localhost:4000/ 看到自己的網站
  • hexo new {標題} ：建立一篇新的文章(預設為post)
  • hexo clean：清除之前建立過的靜態檔案
  • hexo generate：生成靜態檔案
  • hexo deploy：部署網站

部署網站到 Github

  1. 在 Github 新增一個 Repository 名稱為 {用戶名}.github.io
  2. 在終端機中輸入以下指令，安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 修改 _config.yml 文件中的 deploy 設定
1
2
3
4
deploy:
  type: git 
  repository: git@github.com:{用戶名}/{用戶名}.github.io.git
  branch: main
  1. 在終端機中輸入指令，部署到 Github (代碼意義可以參考前面)
1
hexo clean && hexo generate && hexo deploy
  1. 部署完成後就可以在 https://{用戶名}.github.io 看到自己的網站

網頁主題

前面有提到過 Hexo 提供了相當多的主題可以使用，首先可以在 Themes | Hexo 網頁中找到自己喜歡的主題，如本網站使用的主題為 Butterfly 主題，並且閱讀該主題的文檔進行安裝，接著將以 Butterfly 主題作為示範。

Butterfly 主題安裝

  1. 在終端機中輸入指令，就可以利用 npm 安裝 Butterfly 主題到資料夾內。
1
npm i hexo-theme-butterfly

之後就可以在 {資料夾路徑}/node_modules 中找到已經下載完成的 hexo-theme-butterfly 資料夾。

  1. 修改根目錄資料夾中的 _config.yml，把 theme 改為 butterfly。
1
theme: butterfly
  1. 如果沒有 pug 以及 stylus 的渲染器需要在終端機中輸入以下指令安裝。
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 把 {資料夾路徑}/node_modules/hexo-theme-butterfly 資料夾內的 _config.yml 複製到根目錄中，並且重新命名為 _config.butterfly.yml，記得不要把原本根目錄中的檔案覆蓋掉了，這個新檔案就是這一個主題的配置檔案，可以在其中修改自己想要的設置，而設置的詳細內容可以參考官方文檔，也可以在該網站看到 Butterfly 主題的大致樣式。

主題魔改

魔改參考

主題魔改的部分主要是参考：博客魔改教程，除了魔改教學之外，在裡面也可以找到基礎的 Butterfly 主題教學。

部分魔改會修改到 Butterfly 主題的源碼，具有一定風險，修改之前請做好備份。

本網站使用到的魔改有：

教程一

  • 一圖流：網頁背景和頂部圖合為一體
  • 文章雙側欄顯示
  • 自定義字體
  • 黑夜霓虹燈2.0：標題在黑夜模式會有霓虹燈效果

教程二

  • 頁面樣式調節：頁面樣式更為美觀
  • 漸變色版權美化：美化每篇文章底部的版權區塊
  • 文章H1~H6標題小風車轉動效果

教程四

  • 博客寬屏適配：增加空間利用
  • 頭像呼吸燈：頭像在黑夜模式時周圍會有光效

教程五

  • 導航欄魔改增強版：使導航欄可以顯示文章名稱以及增加移至頂部功能

目前使用的 butterfly 主題版本為 4.13.0，部分內容在 5.0.0 以後版本可能會有衝突的情況

魔改心得

因為這些魔改教學距離現在也有了約一年的時間，隨著 Butterfly 主題的更新，有部分內容需要微調，以下將說明我在魔改過程中所做的調整。

導航欄魔改增強版

  1. 重構導航欄：修改 {資料夾路徑}\node_modules\hexo-theme-butterfly\layout\includes\header\nav.pug （因為我沒有修改導航欄的圖標，因此只需要改動以下區塊）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav#nav
  span#blog-info
    a#site-name(href=url_for('/')) #[=config.title]
    
  #menus
    !=partial('includes/header/menu_item', {}, {cache: true})
    //- 導航欄顯示標題
    center(id="name-container")
      a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
      
    #nav-right
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-lg
      #toggle-menu
        a.site-page
          i.fas.fa-bars.fa-fw
  1. 標題增強：在 custom.css 加入以下代碼，var(--theme-color) 必須改為自己的主題色。

關於如何新增以及引入 custom.css 可以参考： Hexo博客添加自定義css和js文件

在增加了代碼之後，我的 home 圖示卻一直無法正常顯示，在加入了 font-weight: 900; 之後就解決了這個問題。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 標題增強 */
#site-name::before {
  opacity: 0;
  background-color: var(--theme-color) !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  content: "\f015";
  box-shadow: 0 0 5px var(--theme-color);
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 新增 */
  text-align: center;
  color: white;
  line-height: 34px; /*如果有溢出或者垂直不居中的現象微調一下這個參數*/
  font-size: 18px; /*根據個人喜好*/
}
#site-name:hover::before {
  opacity: 1;
  scale: 1.03;
}
#site-name {
  position: relative;
  font-size: 24px; /*一定要把字體調大點，否則效果慘不忍睹！*/
}
  1. 導航欄居中

需要在 custom.css 加入以下代碼，讓導航欄居中顯示。

1
2
3
4
5
6
7
8
9
/*導航欄居中*/
#nav .menus_items {
  font-size: x-large;
  position: absolute;
  width: fit-content;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
  1. 頂欄常駐

因為 Butterfly 主題已經將此功能加入，只要在 _config.butterfly.yml 中加入此代碼就可以將頂欄常駐。

1
2
3
4
5
# 頂部欄
nav:
  logo: #image
  display_title: true
  fixed: true # fixed navigation bar
  1. 顯示標題：新建{資料夾路徑}\source\js\nav.js，加入以下代碼：

在這邊必須先引入 jquery，可以參考 Hexo Butterfly博客魔改的一點點基礎，之後也別忘了在 _config.butterfly.yml 中引入剛剛新增的 nav.js 檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
document.getElementById("name-container").setAttribute("style", "display:none");

var position = $(window).scrollTop();

$(window).scroll(function () {

  var scroll = $(window).scrollTop();

  if (scroll > position) {


    document.getElementById("name-container").setAttribute("style", "");
    document.getElementsByClassName("menus_items")[1].setAttribute("style", "display:none!important");

  } else {


    document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
    document.getElementById("name-container").setAttribute("style", "display:none");

  }

  position = scroll;

});
function scrollToTop(){
    document.getElementsByClassName("menus_items")[1].setAttribute("style","");
    document.getElementById("name-container").setAttribute("style","display:none");
    btf.scrollToDest(0, 500);
}
document.getElementById("page-name").innerText = document.title.split(" | douobb")[0];
/*這裡是去掉你的網站名稱的设置，如果你不需要去掉，你可以寫成：
document.getElementById("page-name").innerText=document.title
*/

完成以上配置之後，_config.butterfly.yml 的 inject 應該會是這個樣子，分別引入了 custom.css、jquery.min.js 以及 nav.js，注意 jquery.min.js 必須在 nav.js 之前引入。

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  bottom:
    - <script data-pjax type="text/javascript" src="/js/jquery.min.js"></script>
    - <script data-pjax type="text/javascript" src="/js/nav.js"></script>

且 {資料夾路徑}\source 資料夾內會多出以下檔案

  • css/custom.css
  • js/jquery.min.js
  • js/nav.js
  1. 最後回到 custom.css 添加以下代碼，var(--theme-color) 必須改為自己的主題色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* 導航欄顯示標題 */
#page-name::before {
  font-size: 18px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  color: white !important;
  top: 0;
  left: 0;
  content: "回到頂部";
  background-color: var(--theme-color);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  opacity: 0;
  box-shadow: 0 0 3px var(--theme-color);
  line-height: 45px; /*如果垂直位置不居中可以微调此值，也可以删了*/
}
#page-name:hover:before {
  opacity: 1;
}
#name-container {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#name-container:hover {
  scale: 1.03;
}
#page-name {
  position: relative;
  padding: 10px 30px; /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
}
#nav{
    padding: 0 20px;
}

/* 修复滾動顯示標題居中 */
center#name-container {
  position: absolute !important;
  width: fit-content !important;
  left: 42% !important;
}
@media screen and (max-width: 768px) {
  center#name-container {
    display: none;
  }
}
  1. 這樣就完成了導航欄的魔改。

右下角選單調整

  1. 在 custom.css 添加以下代碼可以將選單設為不透明，也可以調整為其他透明度。
1
2
3
#rightside.rightside-show {
  opacity: 1;
}
  1. 在 custom.css 添加以下代碼可以調整圖形以及文字大小。
1
2
3
4
5
6
#rightside > div > button,
#rightside > div > a {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

文章標題置中

在 custom.css 添加以下代碼可以將文章標題置中，也可以微調調整上下位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 文章標題置中 */
#post-info{
  width: fit-content;
  top: 55%; /* 可微調上下 */
  transform: translateY(-50%);
}
h1.post-title{
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}
#post-meta{
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

參考資料