跳至主要内容

Hexo NexT 佈景主題基本設置

換一個好看的佈景主題

我以 hexo 主題中最多人使用的 NexT (version 7.8.0)作為我佈景主題。

第一步先將 NexT 佈景主題 clone 進 theme 資料夾。

git clone https://github.com/theme-next/hexo-theme-next themes/next

接下來修改 _config.yml 檔案

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

修改完後重新 hexo generate、hexo server就可以看到next主題被套上去了


客製化自己的NexT佈景主題

因為接下來要調整的設定參數是針對NexT佈景主題而不是整個網站,我們要開啟的檔案是在 Hexo 根目錄下的 thems/next/_config.yml 這個檔案,而不是根目錄下的_config.yml

Scheme設置

調整scheme可以變換部落格主頁、邊欄等的擺放位置,可以參考官方文件的範例https://github.com/next-theme/awesome-next#live-preview,或自己動手調整看看哪整編排方式最順眼,我目前是比較喜歡Gemini的編排。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Dark Mode
darkmode: false

頁尾作者連結

正常來說頁尾部分就會顯示自己在根目錄_config.yml設定的作者名稱。若要將文字設定成一個鏈結,可以透過Html <a></a>語法嵌入指定的連結。

copyright: "<a href='<指定連結>'>作者名字</a>"

主選單配置

一開始next預設開啟的選單為首頁以及歸檔

menu:
# 分頁名稱: 路徑 || Icon 圖示
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

關於、標籤以及分類頁都需要我們額外新增頁面,因此在這裡就先不開啟。


# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

icons 控制選單是否要顯示圖示,badges 旁邊會顯示有幾篇文章的數字,有點像Line的未讀訊息數


sidebar:
# Sidebar Position.
position: left
#position: right

Scheme 是選擇 Pisces 或 Gemini 的話,就會直接看到文章列表旁邊的邊欄(如果是 Muse 跟 Mist 的話,可以看到左下角的方形內三條線的按鈕,點一下就會跑出邊欄了),預設是靠左。


avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif

url 認的網址為 next 資料夾下的 source 資料夾


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

跟menu主選單很像,提供連結社群媒體的icon與連結


back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false
  • sidebar: 設定在側邊欄的個人資訊區塊中,Social Links 下,顯示回到頂部按鈕。
  • scrollpercent: 閱讀進度百分比。
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
copy_button:
enable: false
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style: mac

文章中出現的程式碼的佈景顏色、主題以及複製特效,可以試試看哪個風格和胃口


Reference