建立 GitHub 個人部落格：Hexo 與 NexT 設定筆記

2019 年，我從 GitHub Pages、Hexo 與 NexT 開始建立自己的部落格。這篇保存當時的環境、主題設定、文章編輯與部署流程，也留下調整版面的實作筆記。

本篇重點

建立 GitHub 專案與 Hexo 本機環境
調整 NexT 導覽、版面與閱讀功能
先在本機確認，再產生與部署網站

原始實作記錄於 2019 年；以下操作畫面與程式範例保留當時版本。

這篇保存我從 GitHub Pages、Hexo 到 NexT 主題的建站流程。先把網站在本機跑起來，再逐步調整內容與版面，最後才處理部署。文章的程式碼與截圖主要來自 2019 年，主題檔案位置與設定可能因版本不同而改變。重做時先記錄 Hexo、Node.js 與 NexT 的版本，再對照需要的段落。

使用Visual Studio Code編輯時，這套件可以快速貼上當前時間：

Insert Date String，使用方法的快捷鍵:Shift+CTRL+I

選擇編輯器

選擇一款適合自己的編輯器，進行安裝。
下面列出我當時搭配使用的編輯器。先選一款能方便編輯 Markdown、YAML 與程式碼的工具即可，不必為了建立部落格全部安裝。

Visual Studio Code 官網
Visual Studio 2019 官網
Pycharm 官網
Notepad++ 官網
HackMD 線上編輯器官網

操作說明

Github repo 設定 & Hexo 搭建

個人網站與專案網站的差別在儲存庫名稱及網址路徑；下方 master、gh-pages 是原紀錄的發布分支選擇，不是只能使用這兩個分支。實際發布來源依 GitHub Pages 設定確認。

至 https://github.com/ 申請一個帳號。
登入之後，尋找一下建立儲存庫的按鈕(頁面右上角的加號)，選擇 New repository (建立儲存庫)

先決定使用個人網站或專案網站，兩者的網址與路徑設定不同：

以<個人帳號>.github.io為專案名稱，使用 master branch 建構，
這樣生成的網址會是 https://<個人帳號>.github.io。
以自訂專案名稱 <倉庫名稱> ，使用 gh-pages branch 建構，
這樣生成的網址會是 https://<個人帳號>.github.io/<倉庫名稱>。

我個人做的是想把網址簡單化，因此想保留 https://<個人帳號>.github.io 作為首頁網址，

步驟 1：新增一個 Github New repository

在個人的 Github 頁面上新增一個 New repository 。
步驟 1：新增一個 Github New repository：原文圖片 01

步驟 2 : 安裝 Node.js 套件管理工具

安裝Git，至Git官網下載，安裝即可。
我們可以從Node.js 官網下載安裝，安裝完後至終端機輸入
1
npm -v
輸出版本後，便表示安裝已完成。若終端機找不到新安裝的指令，先重新開啟終端機，確認 PATH 與版本。當時我曾透過重新開機排除問題，但不是每次安裝都必須重開機。

步驟 3 : 安裝 Hexo

先打開cmd終端機，cd 到你想要安裝目錄，我個人是選擇在隨身硬碟的F:槽裡安裝，方便之後換電腦維護編輯部落格。若要換電腦維護編輯部落格，也是要將Hexo和Git、Node.js安裝完成，也就是步驟 2和步驟 3的步驟要做完。開始安裝Hexo

npm install hexo-cli -g

hexo init <name>
// name為自定義名稱

cd <name>
// name為自定義名稱 (必須與上者name相同名稱)

npm install

hexo server

hexo server 和 hexo s 是相同意思的，
輸入hexo s後，在網址列輸入http://localhost:4000，若網頁正常顯示，表示安裝成功。

接下來有幾個常用到的指令，這些指令將來進行網站修改會常常用到。先認識下方指令的用途即可，後面會在調整與部署時使用。

hexo clean //清除舊發布設定

hexo g //建立新發布設定

hexo deploy // deploy 到伺服器

hexo server // 在本地瀏覽網站內容 (預設 http://localhost:4000)

步驟 4 : 安裝 Next 主題

本文保留當時從 Git 取得主題的方式。主題版本改變時，設定鍵與模板語法也可能不同；先確認本機可預覽，再逐項套用後面的自訂內容。

Next 連結
執行下方程式

cd <name>
// 切換到 <name>目錄 (必須與第三步驟的name相同名稱)

git clone https://github.com/theme-next/hexo-theme-next.git themes/next
// clone Next 主題專案到站點裡的themes資料夾中，並把主題專案改成名稱next。

【注意】在開始調整下方設定和配置之前，必須先了解這個步驟

接下來會修改設定與主題檔案。每次先改一個項目，檢查結果後再繼續，較容易找到設定錯誤。
修改前先保存目前可用的版本；出現錯誤時，對照終端機訊息與剛修改的檔案。

在這裡我建議大家可以開一個新的cmd終端機，cd進入到之前安裝hexo的目錄裡，
輸入 hexo s 或 hexo server 執行，在瀏覽器輸入網址http://localhost:4000，
若無法連線，先確認伺服器是否仍在執行、終端機是否有錯誤，以及網址與連接埠是否一致。
預覽期間可保持終端機開啟，需要停止服務時再按 Ctrl+C 停止服務；不是每次修改後都需要重新啟動。
這樣才能在本機隨時查看網頁更新內容，當然這個網頁也是要記得在瀏覽器按 F5 做重新載入網頁才行。
除非有特殊狀況再重新輸入 hexo s 或 hexo server 執行，這樣會比較好。

如出現錯誤訊息，解決方式

ERROR Deployer not found: git
- 解決方法
1
npm install hexo-deployer-git --save
Error: Cannot find module 'cheerio'
- 解決方法
1
npm install cheerio --save

Hexo 的 hexo d 部署登入問題與解決方式

下方保留 classic token 的操作路徑。新設定可依 GitHub 文件評估 fine-grained token、期限與指定儲存庫；Token 不應寫進文章、設定檔或公開儲存庫。

以 HTTPS 部署且尚未設定認證工具時，Git 可能提示輸入帳號與憑證。認證方式取決於 Git 遠端網址與本機設定，不是每次 hexo d 都會詢問。
GitHub 的 HTTPS Git 操作不支援以帳號密碼認證，可使用 Personal Access Token（PAT）或支援的認證工具；SSH 遠端則使用另一種設定。

登入流程

終端機會要求輸入：
1
Username for 'https://github.com':
→ 這裡請輸入 GitHub 註冊的信箱（或 GitHub 帳號名稱）。
接著會要求:
1
Password for 'https://<你的帳號>@github.com':
→ 這裡請輸入 Personal Access Token (PAT)，而不是 GitHub 的密碼。

Personal Access Token 產生方式
1. 登入 GitHub。
2. 點選右上角大頭照 → Settings (設定)。
3. 左側選單找到 Developer settings (開發者人員設定)。
4. 點選 Personal access tokens → Tokens (classic)。
5. 按下 Generate new token (產生新令牌)，依需求勾選權限（依目標儲存庫與操作給予必要權限，勿把廣泛的 repo 權限視為所有情境都需要）。
6. 產生後會得到一串字元，請將它複製保存（之後在 hexo d 輸入密碼時，就是貼上這個 Token）。

基本設定

先區分網站設定與主題設定。本文當時主要修改下方兩個檔案；不同 NexT 版本可能支援其他設定位置，請依版本文件確認。
\_config.yml
\themes\next\_config.yml

\ _config.yml

# Site
title: 永成的學習部落格 #網站/部落格名稱
subtitle: 這是永成的學習路程之紀錄。 #網站/部落格副標題
description: 這是永成的學習路程之紀錄。 #網站/部落格基本描述
keywords:
author: 黃永成 #作者
language: zh-TW #語言
timezone: Asia/Taipei #時區

設定網址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://<個人帳號>>>.github.io/              # master結構，本篇文章我選擇這個
#   https://<個人帳號>.github.io/<倉庫名稱>      # gh-pages結構
root: /                                         # 根目錄，我選擇不打，保留網址為https://<個人帳號>.github.io
#     /<名稱>/                                  # 自定義名稱，會在網址後面呈現
permalink: :year/:month/:day/:title/
permalink_defaults:

將主題改為 next，這裡若沒進行更改，就無法套用next主題。
變更程式碼：

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

部署設定中的 branch 應與實際發布來源一致。本文當時使用 master 或 gh-pages 示範，這不是個人網站與專案網站的固定規定；現在也可能使用其他分支或 GitHub Actions。
這個部分可能較為重要，若沒設定正確，將無法使用hexo d進行配置上傳。
變更程式碼：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/<個人帳號>/<倉庫名稱>.git
  branch: master
  # 選擇結構master或gh-pages

註：回到此網頁文章起始閱讀地方，了解自己是使用哪種方式來建立專案名稱。

\themes\next\ _config.yml

版權頁設定

設定文末 (或 sidebar) 版權宣告的型態，
這裡我選用預設的 by-nc-nd ( 姓名標示-非商業性-禁止改作 )。
版權頁設定：原文圖片 02

變更程式碼：

# 著作權
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-nd
  sidebar: true # 本站概要
  post: true # 文末
  language: deed.zh_TW
  # language 則是設定 cc 版權說明網頁的語言內容。

選擇版型

本文版本提供四種版型；只啟用要使用的版型，其餘以 # 註解。不同版本的設定方式請對照主題文件。（我個人使用的是 Gemini 版型）變更程式碼：

# 方案
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

導覽選單區塊設定

變更程式碼：

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

大頭照設定

url 部分可以放圖片網址，也可以放資料路徑。例如：\source\images\頭像.jpg
變更程式碼：

# 側邊欄頭像
avatar:
  # 替換默認圖片，然後在此處設置網址。
  url: https://i.imgur.com/E7MHGFe.gif #/images/avatar.gif
  # 如果為true，則頭像將顯示為圓形。
  rounded: true
  # 如果為true，則頭像將隨光標旋轉。
  rotated: true

社交連結

側邊欄的社交連結部分，顯示自己想提供給讀者的社交平台，可以利用這個部分來設定私人的社交平台連結。

|| 後面是圖示的設定，從 Font Awesome 進行選擇圖示，將網站上的圖示名稱加進去即可。

變更程式碼：

social:
  LINE: https://line.me/ti/p/XGjZN3WZhs || envelope-square
  E-Mail: mailto:a0979488285@gmail.com || envelope
  GitHub: https://github.com/pkpk26261 || github
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  Facebook: https://www.facebook.com/profile.php?id=100002320400912 || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  YouTube: https://www.youtube.com/channel/UCdCh7GL1WCTsXJ-6PkTBZZw?view_as=subscriber || youtube
  Instagram: https://www.instagram.com/da712302/?hl=zh-tw || instagram
  #Skype: skype:yourname?call|chat || skype

開啟瀏覽人次設定

本文使用的 NexT 版本包含 busuanzi_count 設定，
依該版本設定檔調整 enable 的設定改為 true 即可。

busuanzi_count:
  enable: false # 變更為true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

關閉文章下方版本顯示訊息

【由 Hexo & NexT.Gemini 強力驅動】
變更程式碼：

1 2	# Powered by Hexo & NexT powered: false # 變更為false

導覽選單圖標 & 項目標誌

# 啟用/禁用菜單圖標/項目標誌。
menu_settings:
  icons: true # 菜單圖標
  badges: true # 菜單顯示文章數目

顯示大約閱讀時間

安裝套件：

1	npm install hexo-symbols-count-time

變更程式碼：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

載入進度條

安裝依賴項：

1	git clone https://github.com/theme-next/theme-next-pace source/lib/pace

打開\themes\next\_config.yml變更程式碼為true:
theme可設定喜歡的載入樣式

# 頁面加載過程中頂部的進度條。
# 依賴：https://github.com/theme-next/theme-next-pace
# 了解更多信息：https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: loading-bar

在按鈕中顯示閱讀百分比

變更程式碼：

back2top:
  enable: true
  # 返回到頂部的側欄
  sidebar: false //自行選擇是否變更為true
  # 閱讀目錄下方顯示閱讀進度及返回
  scrollpercent: false //變更為true
  # 按鈕中顯示閱讀百分比

閱讀進度條

變更程式碼：

# 閱讀進度條
reading_progress:
  enable: true
  # 可用值: top | bottom
  position: top 
  color: "#37c6c0" # 變更16進制顏色
  height: 3px # 變更粗細

開啟網頁右上書籤功能

變更程式碼：

# 書籤支持
bookmark:
  enable: true # 變更為true
  # 自定義書籤的顏色。
  color: "#0ed145"
  # 如果為自動，請在關閉頁面或單擊書籤圖標時保存閱讀進度。
  # 如果是手動的，則只能通過單擊書籤圖標進行保存。
  save: auto

文章右上方顯示關注我的GitHub

變更程式碼：

# “在右上角的GitHub橫幅上關注我”。
github_banner:
  enable: true # 變更為true
  permalink: https://github.com/pkpk26261
  title: Follow me on GitHub

程式碼樣式變更、程式碼複製開啟

變更程式碼：

codeblock:
  # 代碼突出顯示主題
  # 顏色可用值： normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # 在代碼塊上添加複制按鈕
  copy_button:
    enable: true # 變更為true
    # 顯示文本複制結果。
    show_result: true # 變更為true
    # 樣式可用值: default | flat | mac
    style: mac

放大圖片

輸入指令

1 2	cd 到 next 安裝路徑下 git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

原圖：

放大圖片：原文圖片 03

變更程式碼：

1
2
3

# FancyBox是一種工具，它提供了一種很好的方法來添加圖像的縮放功能。
# 想要查詢更多的信息: https://fancyapps.com/fancybox
fancybox: true # 變更為true

效果：

放大圖片：原文圖片 04

其餘設定可依需要逐項調整，先保持預覽正常，再擴充功能。

語言設定

檢查\themes\next\languages目錄下有無zh-TW.yml，
這是當時版本的語系檔處理方式；重做時先確認主題是否已包含繁體中文。
若這個目錄下沒有這個檔案，請建立zh-TW.yml檔案，
內容請複製新增：**(以後若要改一些翻譯後的文字，可以在這裡更改)**

完整程式範例（95 行）

---
title:
  archive: 歸檔
  category: 分類
  tag: 標籤
  schedule: 時間表
menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜尋
  schedule: 時間表
  sitemap: 網站地圖
  commonweal: 公益 404
sidebar:
  overview: 本站概要
  toc: 文章目錄
post:
  posted: 發表於
  edited: 更新於
  created: 創建時間
  modified: 修改時間
  edit: 編輯
  in: 分類於
  more: 更多
  read_more: 閱讀全文
  untitled: 未命名
  sticky: 置頂
  views: 閱讀次數
  related_posts: 相關文章
  copy_button: 複製
  copy_success: 複製成功
  copy_failure: 複製失敗
  copyright:
    author: 作者
    link: 文章連結
    license_title: 版權聲明
    license_content: "本網誌所有文章除特別聲明外，均採用 %s 許可協議。轉載請註明出處！"
page:
  totally: 共有
  tags: 標籤
footer:
  powered: "由 %s 強力驅動"
  theme: 主題
  total_views: 總瀏覽次數
  total_visitors: 訪客總數
counter:
  tag_cloud:
    zero: 沒有標籤
    one: 目前共有 1 個標籤
    other: "目前共有 %d 個標籤"
  categories:
    zero: 沒有分類
    one: 目前共有 1 個分類
    other: "目前共有 %d 個分類"
  archive_posts:
    zero: 沒有文章。
    one: 目前共有 1 篇文章。
    other: "目前共有 %d 篇文章。"
state:
  posts: 文章
  pages: 頁面
  tags: 標籤
  categories: 分類
search:
  placeholder: 搜尋...
cheers:
  um: 嗯..
  ok: 還行
  nice: 好
  good: 很好
  great: 非常好
  excellent: 太棒了
keep_on: 繼續努力。
symbol:
  comma: "，"
  period: "。"
  colon: "："
reward:
  donate: 捐贈
  wechatpay: 微信支付
  alipay: 支付寶
  bitcoin: 比特幣
accessibility:
  nav_toggle: 切換導航欄
  prev_page: 上一頁
  next_page: 下一頁
symbols_count_time:
  count: 文章字數
  count_total: 總字數
  time: 所需閱讀時間
  time_total: 所需總閱讀時間
  time_minutes: 分鐘

Gemini 版型-色彩配置

我曾嘗試修改 Gemini 的配色，但當時部分區塊效果不如預期，最後使用預設配色搭配動態背景。下面保留嘗試過的設定；不需要自訂配色時，可跳過這一段。

我這裡文章是使用Gemini版型做維護，故以Gemini作為介紹，
若對於其他版型有興趣，可以自行研究。

背景顏色變更
在\themes\next\source\css\_variables\<你選擇的版型>.styl變更

1
2
3

// 某些最俱全局風格的設置。
// --------------------------------------------------
$body-bg-color           = #222222;

接下來，
我下面統一設定成 rgba(255, 255, 255, 0.15)，這裡的 0.15 是 alpha 值，代表約 15% 不透明度。

文章方塊 顏色變更
在\themes\next\source\css\_schemes\Gemini\index.styl變更

// 帖子和評論塊。
.post-block {
  background: rgba(255, 255, 255, 0.15);
  border-radius: $border-radius-inner;
  box-shadow: $box-shadow-inner;
  padding: $content-desktop-padding;
}

導覽選單區塊 顏色變更
在\themes\next\source\css\_schemes\Pisces\_layout.styl變更

.header-inner {
  background: rgba(255, 255, 255, 0.15);
  border-radius: $border-radius-inner;
  box-shadow: $box-shadow-inner;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: $sidebar-desktop;

  +desktop-large() {
    width: $sidebar-desktop;
  }

目錄區塊 顏色變更
在\themes\next\source\css\_schemes\Pisces\_sidebar.styl變更

.sidebar-inner {
  background: rgba(255, 255, 255, 0.15);
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  box-sizing: border-box;
  color: $text-color;
  width: $sidebar-desktop;

  if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
    opacity: 0;
  }

顏色設定分散在不同檔案。我在下方加上當時確認的中文註解；沒有標示的項目仍需對照版本與實際畫面，一次調整一個區塊。

文字顏色的設定\themes\next\source\css\_variables\base.styl變更

// 顏色
// 用於整個主題的顏色。
// --------------------------------------------------
$whitesmoke   = #a15100; // 菜單選擇顏色
$gainsboro    = #a15100; // 本站摘要方框顏色
$gray-lighter = #ddd; // 暱稱 顏色
$grey-light   = #eee; // 歸檔 虛線
$grey         = #ff7700; // 分類 (數量)
$grey-dark    = #999;
$grey-dim     = #eee;
$black-light  = #eeeeee; //文字顏色
$black-dim    = #333;
$black-deep   = #ff7700; // 文章右下角箭頭、本站摘要名稱
$red          = #333333;
$blue-bright  = #87daff;
$blue         = #0684bd;
$blue-deep    = rgba(255, 255, 255, 0.2); // 文章圈選字顏色
$orange       = #ff8c00; // 菜單目錄字體顏色

標題欄位顏色變更

從\themes\next\source\css\_schemes\<你選擇的版型>\index.styl來做新增，
更改的方式只要在最後加上這段即可。

1
2
3

.site-meta {
background: #000000; //我使用黑色為標題欄的背景色
}

設置閱讀全文按鈕顏色

修改themes\next\source\css\_custom\custom.styl文件，添加：

// 修改按键（button）樣式
.btn {
  color: #49b1f5;
  background: #fff;
  border: 2px solid #49b1f5;
}
// 按键（button）點擊時樣式
.btn:hover {
  border-color: #49b1f5;
  color: #fff;
  background: #49b1f5;
}

再來，編輯16進制顏色變更即可。

版面比例

這裡可以調整一下版面區域的比例配置。
在預設的狀況，左右背景多一點，如果想調整比例可以從這裡去調整。
如果想要改變這樣的比例，可以在 \themes\next\source\css\_variables\<所選擇的版型>.styl 最後新增加入

1
2
3

$content-desktop         = 100%
$content-desktop-large   = 100%
$content-desktop-largest = 85%

比例可依閱讀寬度與留白調整。我當時沒有套用這一段；修改後需一併查看桌面與手機，避免文字過寬或區塊擠壓。

動態背景

以下是當时主題支援的幾種背景方案。一次先啟用一種，確認畫面、閱讀對比與手機效能，再決定是否加入更多效果。

JavaScript 3D library

使用方法如下：

1 2	cd 到 next 安裝路徑下 git clone https://github.com/theme-next/theme-next-three source/lib/three

之後到 next 設定檔 \themes\next\_config.yml 中設置

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: true
  canvas_sphere: false

canvas-ribbon

使用方法如下：

1 2	cd 到 next 安裝路徑下 git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

之後到 next 設定檔 \themes\next\_config.yml 中設置

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# 想要查詢更多的信息: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # 色帶寬度
  alpha: 0.6 # 色帶的透明度
  zIndex: -1 # 功能區的顯示級別

canvas-nest

使用方法如下：

1 2	cd 到 next 安裝路徑下 git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

之後到 next 設定檔 \themes\next\_config.yml 中設置

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# 想要查詢更多的信息: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true #開啟或關閉
  onmobile: false # Display on mobile or not #是否在手機上顯示
  color: "185,185,185" # RGB values, use `,` to separate #線條顏色
  opacity: 1 # The opacity of line: 0~1 #線條透明度
  zIndex: -1 # z-index property of the background #位在哪一層
  count: 100 # The number of lines #線條數量

修改主題頁面版面為圓角

方法一

在/themes/next/source/css/_variables/custom.styl文件中，
添加以下程式碼（Gemini樣式）:

// 修改主題頁面布局為圓角
// Variables of Gemini scheme
// =================================================
@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color                    = #eee
// Borders.
// --------------------------------------------------
$box-shadow-inner                 = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow                       = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
$border-radius-inner              = initial
$border-radius                    = initial
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

方法二

在\themes\next\source\css\_variables\Gemini.styl文件中直接添加：

1
2
3

// 修改主題頁面布局為圓角
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

我個人是使用方法二修改。

添加 PDF 擴充套件

安裝套件

1	git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

在 next/_config.yml 中調整對應設定：true

pdf:
  enable: false  //變更為true
  # Default height
  height: 500px

在要加入pdf的文章，添入程式碼

外部連結：
{% pdf http://Your URL.pdf %}

本地連接： //在`\source`新建pdf資料夾
{% pdf /pdf/檔案名稱.pdf %}

建立專頁

1	hexo new page book

編寫

在生成的md檔文件中
在\themes\next\_config.yml編輯，新增書本(book)。

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  書本: /book/ || book #書本　
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

建立文章

使用外部連結:

1	{% pdf http://Your URL.pdf %}

在source\_posts\文件創建一個文章。
如test.md,同時需要再創建一個同名的test文件夾，放要上傳的PDF文章。

---
title: 測試
date: 2019-10-17 00:00:00
tags: 測試
categories: 測試
---
 
<center>**測試**</center>
 
<br>
 
{% pdf 路徑.pdf %} 
 
</br>

設置點擊頭像返回首頁

打開themes\next\layout\_macro\sidebar.swig文件，
新增

//添加代码：
+        <a href="/">
          <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
+        </a>

//这里注意找到中间代码，添加a标签就行了，中间不用修改。

開啟文章搜尋功能

終端機輸入：

1 2	cd 到安裝目錄 npm install hexo-generator-searchdb --save

打開\themes\next\_config.yml變更程式碼為true:

# 本地搜尋
# 依存關係: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # 如果為自動，則通過更改輸入觸發搜索。
  # 如果為手動，請按Enter鍵或搜索按鈕觸發搜索。
  trigger: auto
  # 顯示每篇文章的前n個結果，通過設置為-1顯示所有結果
  top_n_per_article: 1
  # 將html字符串轉義為可讀的字符串。
  unescape: true
  # 頁面加載時預加載搜索數據。
  preload: true

變更搜尋欄顏色

搜尋頁面文字背景底色
打開\themes\next\source\css\_common\components\third-party\search.styl

.search-popup {
  background: #999999;
  border-radius: 5px;
  color: $black-dim;
  display: none;
  height: 80%;
  left: 50%;
  margin-left: -350px;
  padding: 0;
  position: fixed;
  top: 10%;
  width: 700px;
  z-index: $zindex-5;

搜尋頁面其餘背景顏色

.search-pop-overlay {
  background: rgba(0, 0, 0, 0.1);
  display: none;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: $zindex-4;
}

插入Youtube影片自動播放

打開themes/next/layout/_partials/sidebar/site-overview.swig，找到if theme.social。

{%- if theme.social %}
  <div class="links-of-author motion-element">
    {%- for name, link in theme.social %}
      <span class="links-of-author-item">
      {%- set sidebarURL = link.split('||')[0] | trim %}
      {%- if theme.social_icons.enable %}
        {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' %}
      {%- else %}
        {%- set sidebarIcon = '' %}
      {%- endif %}
      {%- if theme.social_icons.enable and theme.social_icons.icons_only %}
        {%- set sidebarText = '' %}
      {%- else %}
        {%- set sidebarText = name %}
      {%- endif %}
        {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' → ' + sidebarURL}) }}
      </span>
    {%- endfor %}
  </div>



  <!--添加此行代碼-->
  <div class="video-container" style="padding-top: 5%;">
  <iframe width="214" height="120" src="https://www.youtube.com/embed/1FliVTcX8bQ?rel=0&autoplay=1&loop=1&playlist=1FliVTcX8bQ&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <!--添加此行代碼-->

點選頭像返回首頁

打開themes/next/layout/_partials/sidebar/site-overview.swig，找到site-author-image，上下分別添加<a href="/">``</a>即可。

<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  {%- if theme.avatar.url %}

	<a href="/"> <!--添加此行代碼-->
    		<img class="site-author-image" itemprop="image" alt="{{ author }}"
      	src="{{ url_for(theme.avatar.url) }}">
	</a> <!--添加此行代碼-->
  {%- endif %}
  
  <p class="site-author-name" itemprop="name">{{ author }}</p>
  <div class="site-description" itemprop="description">{{ description }}</div>
</div>

文章加密

原範例屬於前端密碼檢查，不能保護已下載到瀏覽器或公開儲存庫的原文。需要真正限制閱讀權限時，需使用相應的存取控制；不要把此範例當成機密內容保護。

打開themes\next\layout\_partials\head\head-unique.swig文件，文末插入這個程式碼：

{# 文章密碼設置 #}
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入密碼') !== '{{ page.password }}'){
                alert('密碼不正確！請訪問作者索取');
                history.back();
            }
        }
    })();
</script>

然後打開要加密的文章，文章開頭放入這個：

title: // 標題
tags: // 標籤
  - Hexo
  - NexT
categories: // 分類
  - Hexo
author: // 作者
password: 123456 // 設定文章密碼
date: 2019-10-17 00:00:00 // 發布時間
updated: 2019-10-17 00:00:00 // 更新時間

調整和上傳

本機預覽、產生靜態檔與部署是三個階段。先確認內容與路徑，再產生網站，最後核對部署目標與 Pages 的發布來源。

在每一個設定變更後，我習慣會做以下動作

1 2	hexo server // 在本機瀏覽器查看 //hexo s

先在本機上看看是否有什麼問題，持續進行微調，最後設定都沒有問題後，再進行配置上傳。

hexo clean  // 清除舊的發布設定

hexo g      // 建立新的發布設定

hexo deploy // 配置到伺服器
//hexo d

若我已經在`_config.yml輸入

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/<user_name>/<repo_name>.git
  branch: master

在執行hexo deploy或hexo d時，卻發生了ERROR Deployer not found: git的錯誤訊息。
請在終端機執行

1 2	cd 到安裝目錄 npm install hexo-deployer-git --save

編輯新增文章

撰寫文章都集中放在\source目錄下，最常用到的大概就是source\_posts裡的檔案了。
新增建立 “name”.md 檔案，副檔名為.md，也可以參考預設hello-world.md的檔案做參考。
也可以利用以下語法，新增MD檔：

1	Hexo new [文章類型] [檔名]

Hexo是使用MarkDown(MD)格式，每篇文章開頭基本上都一樣，
新文章加入以下內容：(---切記一定要加入)

---
title: // 標題
tags: // 標籤
  - Hexo
  - NexT
categories: // 分類
  - Hexo
author: // 作者
password: 123456 // 設定文章密碼
date: 2019-10-17 00:00:00 // 發布時間
updated: 2019-10-17 00:00:00 // 更新時間
---

文章類型：

post：最常碰到的一般文章。
新增的檔案會放在\source\_posts資料夾內建立[檔名].md的檔案。-
page：不會出現在首頁中。
基本上拿來撰寫about或tags之類的頁面。
這類型會在\source\下建立檔名資料夾，並在檔名資料夾下新增index.md檔案。
draft：草稿。
未完成的文章可先放在草稿區。一般生成不會包含草稿，但仍需留意 render_drafts 或生成時的草稿選項。
草稿會存放在\source\_drafts底下，檔名為檔名.md。
編輯完後，可以透過指令hexo publish draft 檔名轉成正式文章；之後仍需生成與部署，公開網站才會更新。
再來選擇一款合適自己的md編輯器，和使用一些常用md語法就能完成一篇文章了。
個人我這邊都是使用 Visual Studio Code (VS Code) 編輯器。

MD語法（Markdown）

網路上已經有很多可以參考的資料了，若有需要可以自行去查。
這裡我提供兩個連結，我覺得不錯的。
GIT教學網站(gitbooks)：markdown風格
markdown文件(中文版)：markdown文件

內容撰寫小技巧

（學會新技巧後，此部分會不定時更新）

字形樣式

文字字型與顏色：

1	<font face="標楷體" color="red">我是紅色的標楷體</font>

我是紅色的標楷體

文字大小

1	<font size="16px">文字大小</font>

文字大小：16px

文字置中

1	<center>置中</center>

置中

刪除線

刪除寫法：

~~刪除線~~

　~~刪除線~~

也可以用以下寫法：

1	<del>刪除線</del>

~~我被刪除了~~

縮排

有些人在排版上，希望一段文字首行要空兩個全形空白。

半形空白：可輸入一般空白字元。
全形空白：&emsp;

添加空白行

Markdown 的段落通常以空白行分開，不必靠大量空白字元排版。
原紀錄中的&ensp。
表示空白字元，並不會自動建立新段落。
另外，也可以使用<br />或<p />時，需注意 br 用於換行，p 應使用成對標籤建立段落；單獨寫 p 的自閉合形式不是正確的段落寫法。版面間距更適合由 CSS 控制。

圖片樣式設定

Markdown檔放入圖片語法

1	![圖案文字說明](URL)

範例：

1	![文字說明](http://img.touxiangzhan.com/upload/image/2a1882223309n4219215739t27.jpg)

原範例圖片來源已失效，無法下載；上方 Markdown 語法仍可參考。

設定首頁文章【繼續閱讀】功能

【繼續閱讀】
在部落格首頁時，會將每篇文章以全文方式顯示，但有些文章太長了，導致要拖拉很久才能找到下一篇。
在希望摘要結束的位置加入（建議讓分隔標記獨立成行），首頁的文章，就會只顯示到此行，讀者就要自行點選more才能觀看全文。
範例

1
2
3


<!-- more -->

使用表格

hexo支援表格的，表格寫法如下：
(表格前記得要空一行，這才能形成表格)


| 標題1 | 標題2 | 標題2 |
| :------ | :------: | ------: |
| 靠左靠左靠左 | 靠中靠中靠中 | 靠右靠右靠右 |
| 靠左靠左靠左 | 靠中靠中靠中 | 靠右靠右靠右 |

呈現結果：

標題1	標題2	標題2
靠左靠左靠左	靠中靠中靠中	靠右靠右靠右
靠左靠左靠左	靠中靠中靠中	靠右靠右靠右

常用的文字編輯

常見寫法：

# 標題一
## 標題二
### 標題三
#### 標題四
##### 標題五

**這是加粗**

*這是斜線*

~~這是刪除線~~

`內嵌代碼`

>引用

* 無序號列表
* 無序號列表

1. 有序號列表1
2. 有序號列表2

```代碼區塊``` (兩個 [```] 記得分段成上下，中間編輯你要放的代碼區塊)

建立內容後，先核對標題、日期、分類、圖片與連結，再預覽全文。這份筆記保留當時的設定做法，後續修改仍應以所用版本的文件為準。

參考文章

名稱 Theme NexT：Next官方部落格
作者 Allen Tzeng：使用 Github page 製作個人網站 – 以 Hexo / Next 製作部落格
作者蓝蓝223：hexo d命令报错 ERROR Deployer not found: git
作者 yashuning：hexo-下一頁主題添加搜尋功能

發布前後的確認

發布前確認首頁、文章、分類、圖片與內部連結都能在本機開啟；個人網站與專案網站需特別核對根路徑。發布後再開啟公開網址，查看實際內容與資源是否更新，避免把本機預覽成功當成公開網站已完成。

參考：Hexo 設定文件、GitHub Pages 發布來源、GitHub Token 設定。

呀哈！一起探索吧。

選擇編輯器

操作說明

Github repo 設定 & Hexo 搭建

步驟 1：新增一個 Github New repository

步驟 2 : 安裝 Node.js 套件管理工具

步驟 3 : 安裝 Hexo

步驟 4 : 安裝 Next 主題

【注意】在開始調整下方設定和配置之前，必須先了解這個步驟

如出現錯誤訊息，解決方式

Hexo 的 hexo d 部署登入問題與解決方式

基本設定

\ _config.yml

設定網址

\themes\next\ _config.yml

版權頁設定

選擇版型

導覽選單區塊設定

大頭照設定

社交連結

開啟瀏覽人次設定

關閉文章下方版本顯示訊息

導覽選單圖標 & 項目標誌

顯示大約閱讀時間

載入進度條

在按鈕中顯示閱讀百分比

閱讀進度條

開啟網頁右上書籤功能

文章右上方顯示關注我的GitHub

程式碼樣式變更、程式碼複製開啟

放大圖片

語言設定

Gemini 版型-色彩配置

標題欄位顏色變更

設置閱讀全文按鈕顏色

版面比例

動態背景

JavaScript 3D library

canvas-ribbon

canvas-nest

修改主題頁面版面為圓角

方法一

方法二

添加 PDF 擴充套件

安裝套件

建立專頁

編寫

建立文章

設置點擊頭像返回首頁

開啟文章搜尋功能

變更搜尋欄顏色

插入Youtube影片自動播放

點選頭像返回首頁

文章加密

調整和上傳

編輯新增文章

MD語法（Markdown）

內容撰寫小技巧

字形樣式

文字大小

文字置中

刪除線

縮排

添加空白行

圖片樣式設定

設定首頁文章【繼續閱讀】功能

使用表格

常用的文字編輯

參考文章

發布前後的確認

延伸閱讀

教學生使用 AI：把網頁範本寫成清楚的提問

PyQt5 實作筆記：介面設計、信號與執行緒

Python 打包筆記：用 auto-py-to-exe 產生執行檔

又收藏了一點新知！