Howard的程式筆記

Hexo Theme ep.1 (Next 主題)

分類於

Next主題

優點和特色

  • 美觀的外觀和現代化設計
  • 響應式設計，適應不同尺寸的設備和屏幕
  • 高度可定製性，提供豐富的配置選項和自定義功能
  • 支持多種插件和功能，如內容搜索、社交媒體分享和站點統計
  • 靜態網站生成，快速載入速度，提供更好的用戶體驗和SEO效果

安裝與套用

使用cd指令切換路徑至blog目錄

1
2
3
cd C:\Users\<使用者名稱>\Desktop\blog

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

下載完後，打開 /blog/_config.yml 修改 theme 欄位為 next

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Next 主題設置

風格選項

接下來請使用 ctrl + f 快捷鍵搜尋，更加便利。

在 /blog/themes/next/_config.yml 檔案中，尋找 Scheme Settings 的設定項。這個設定項控制著主題的配色方案。

1
2
3
4
5
6
7
8
9
10
11
12
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse		#使用黑白色調，看起來乾淨利落
#scheme: Mist		#是Muse的變體，以整潔的單列視圖為特點
scheme: Pisces		#使用雙列版面，給人一種清新的感覺，有點像你鄰居的女兒		//官方說明翻成中文==
#scheme: Gemini		#看起來與Pisces相似，但具有明顯的列區塊和陰影，使其在視覺上更具敏感性

# Dark Mode
darkmode: true		#啟用暗黑模式

尋找 Menu Settings 的設定項，這是用於配置導航菜單的地方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# 使用方法：`Key: /link/ || icon`
# Key 是菜單項目的名稱。如果有該項目的翻譯可用，則會載入翻譯後的文字，否則將使用 Key 名稱。Key 是區分大小寫的。
# || 分隔符號之前的值是目標鏈接，|| 分隔符號之後的值是 Font Awesome 圖示的名稱。
# 如果在子目錄中運行網站（例如：yoursite.com/blog），則從鏈接值中刪除開頭的斜線（/archives -> archives）。
# 外部連結應以 http:// 或 https:// 開頭。
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

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

將開頭 # 註記符號拿掉即可，home和archives是預設開啟的
我個人是只開啟about、categories

設定後請使用cd指令切換路徑至blog目錄

1
cd C:\Users\<使用者名稱>\Desktop\blog

輸入 hexo post n page about 和 hexo post n page categories

1
2
hexo post n page about
hexo post n page categories

就會在 /blog/Source 裡看到about和categories兩個資料夾
打開資料夾下的 index.md

1
2
3
4
5
---
title: 關於我		<!-- 更改頁面title -->
date: yyyy-mm-dd hh:mm:ss
type: about		<!-- 新增type: -->
---

這樣就成功囉!!!