個人化Hexo以及使用Hexo theme NexT

發表於 更新於 分類於

介紹解說Hexo config.yml 設定檔

Hexo config.yml的位置

config.yml

網站

1
2
3
4
5
6
7
title: #網頁標題
subtitle: #副網頁標題
description: #網站描述
keywords:
author: #作者
language: #語系(台灣設定為:zh-tw)
timezone: # 時區

網址

1
2
3
4
5
6
#URL
#Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: 網頁網址
root: #根目錄
permalink: :year/:month/:day/:title/
permalink_defaults:

Hexo 時間格式

1
2
3
4
date_format: YYYY-MM-DD  #日期格式
time_format: HH:mm:ss
updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'  #時間格式

Hexo 主題設定

1
2
3
4
#Extensions  
Plugins: https://hexo.io/plugins/  
Themes: https://hexo.io/themes/  
theme: next #此處是使用next主題

更多介紹官方文件

安裝設定Hexo Theme

主題下載來源

Hexo無論是官方或第三都有許多Theme可以選擇，可以挑一款自己喜歡的(以下將以next示範)
官方主題:https://hexo.io/themes/
NexT主題:https://github.com/theme-next/hexo-theme-next

主題檔案放置位置

請把資料檔放在/themes/資料夾目錄下
themes位置
放置完後請參考上面敘述的Hexo 主題設定進行設定

NexT Theme 設定

NexT主題

NexT 設定是在 thems/next/_config.yml

跟上述的_config.yml是不同檔案編輯時請注意檔案路徑

next提供了四種不同主題修改方法如下

下面敘述大多是取消註解或更換網址的操作就不一一重複說明

找到Scheme Settings

1
2
3
4
5
6
7
8
Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

Dark Mode
 darkmode: false

選擇一個自己喜歡的取消註解即可

darkmode: false設為ture開啟暗黑模式

主選單設置

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home #首頁
  #about: /about/ || fa fa-user #關於我
  tags: /tags/ || fa fa-tags #標籤
  categories: /categories/ || fa fa-th #分類
  archives: /archives/ || fa fa-archive #歸檔
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

個人大頭照

1
2
3
avatar:
  #Replace the default image and set the url here.
  url: /images/A.jpg

url 換成自己想用的圖片路徑即可

社群鏈結

1
2
3
4
5
6
7
8
9
10
11
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

把要用的取消註解換成自己的網址即可

回到頂部按鈕

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false
  • 將 sidebar 設定為 true：設定在側邊欄的個人資訊區塊中，Social Links 下，顯示回到頂部按鈕。
  • 將 scrollpercent 設定為 true：回到頂部按鈕旁加上閱讀進度百分比。

閱讀進度條

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px
  • enable：設定是否開啟進度條，開啟則設定 true
  • position：設定進度條在頂部還是底部顯示
  • color：進度條背景顏色
  • height：進度條高度

友站連結

1
2
3
4
5
6
7
8
# Blog rolls
links_settings:
  icon: fa fa-link
  title: 友站連結
  # Available values: block | inline
  layout: block
links:
  羊羽手札: https://www.tinytsunami.info/

hexo套件

安裝Sitemap讓網頁產生 Sitemap.xml

  1. 安裝指令
    npm install hexo-generator-sitemap --save
  2. 設定Config

  • hexo 原生版(根目錄的_config.yml)

    1
    2
    sitemap:
        path: sitemap.xml

  • hexo next 版(themes/next/_config.yml)

    1
    2
    menu:  
    sitemap: /sitemap.xml || sitemap

  1. 重新編譯部屬

  2. 檢查看看有沒有順利產生 Sitemap.xml
    https://<網頁網址>/sitemap.xml

  3. 如果提交到google search console發生無法讀取 Sitemap

    1. 請在source目錄底下新增.nojekyll空的文件(可以使用txt新增並修改副檔名達成)， 並在根目錄底下最一開始的hexo的_config.yml的檔案裡新增.nojekyll

      1
      2
      3
      4
      5
      6
      # Include / Exclude file(s)
      ## include:/exclude: options only apply to the 'source/' folder
      include:
          - .nojekyll
      exclude:
      ignore:

    2. 在deploy最底下新增ignore_hidden: false

      1
      2
      3
      deploy:
        message: Site updated:{{ now('YYYY-MM-DD HH:mm:ss') }}
        ignore_hidden: false

安裝hexo 搜尋功能(localsearch)

  1. 安裝指令
    npm install hexo-generator-searchdb --save
  2. Next主題config.yml設置
    1
    2
    3
    # Local search
    local_search:
      enable: true

更多NexT套件請參考https://github.com/next-theme/awesome-next#live-preview

參考資料網站:
1. https://guiblogs.com/hexo30-6/
2. https://israynotarray.com/hexo/20190411/932826160/
3. https://malagege.github.io/blog/2018/08/05/hexo_search/