Hexo 部落格胡亂修改與踩坑紀錄
發表於: 2024-08-31 #Hexo

今年用 Hexo + Oranges 主題 + GitHub page 建立了第二個靜態部落格，也就是現在看到的這個，未來應該會把學習筆記放在這裡。雖然我具備的網頁知識為零，但還是手癢，花很多時間研究Oranges主題的修改方式 (然後一篇文章都沒完成)。

因為網路上有更多詳細介紹 Hexo 建站和部署到 GitHub page 的文章[1]，所以這篇文不會描述這些步驟，主要會包含我瞎改主題的紀錄，以及列出幫助很多的網路文章。另外，因為不想另外開一篇文章，所以也會把之前建立部落格時，踩過的坑也列出。

Oranges 主題修改

Open graph 與 Twitter card 設定

Open graph (OG) 是 Facebook 發布的連結分享樣式設定，只要在網頁的開頭，也就是 <head></head> 標籤加入設定 OG 屬性的程式碼，例如連結標題 (og:title)、連結描述 (og:description) 和連結配圖 (og:image)，在分享連結時，就能看到原本單純的連結文字變成像迷你摘要的小卡片。

1
2
3
<meta property="og:title" content="<%= page.title %> | <%= config.title %>" />
<meta property="og:image" content="<%= page.thumbnail %>"/>
<meta property="og:description" content="<%= page.ogdescription %>" />

Twitter 也有類似 OG 的 Twitter card，細分為 summary、summary with large image 等樣式，必須給定的屬性以及配圖尺寸限制，需要參考官方文件，比方說這個部落格採用 summary card，設定出 Twitter summary card 如下：

1
2
3
4
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%= page.title %> | <%= config.title%>" />
<meta name="twitter:description" content="<%= page.ogdescription %>" />
<meta name="twitter:image" content="page.thumbnail" />

在 Oranges 設定 OG 和 Twitter card 的方式，可以在 header.ejs 檔案的 <% if (page.ogdescription){ %> 這段插入 OG 和 Twitter card 的程式碼，之後只要在 Hexo 的 front matter (文章頂部的兩行 --- 之間的內容) 中，啟用 ogdescription (連結描述) 和 thumnail (連結配圖路徑或連結)，就完成一篇文章的 OG 設定。

如果想確認設定是否成功，可以把部落格任一文章連結貼到 Facebook 分享偵錯工具和 Twitter card validator 測試，個人經驗是 Facebook 工具對 OG 設定變化的反應較快，Twitter card validator 就要等一段時間才會偵測到。

在文章開頭新增發表日期

在找參考資料時，看到這個也是用 Oranges 主題的部落格井說，於是想照這個作者的部落格來改造，第一個就是要在文章開頭新增發表日期。

Oranges 原先是取用 Hexo 的 front matter 的 updated 變數，在文章開頭顯示更新時間，不過我是希望也顯示發表時間，可以讓讀者判斷這篇文章的資訊新舊程度。

我的作法是打開 Oranges 資料夾裡的 post.ejs 檔案，直接複製 updatedtime 這區程式碼，然後修改成 page.date，如此一來就可以同時顯示出發布日期和更新日期。

不過有時候文章可能剛發布，還不會修改，但顯示兩個一樣的時間又有點奇怪，所以我請 ChatGPT 協助加上一個判斷條件，只有page.updated 的值不等於 page.date 時，才會在文章顯示更新時間。

最後修改完的程式碼如以下所示，因為還沒有去思考怎麼為發布時間引用外部 icon，但也不想直接沿用更新時間的 icon，索性先把 icon 的位置暴力改成文字顯示。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 發表日期 -->
<span class="post-pubtime">
    <span class="mr-5">發表於:</span>
    <%- page.date.format("YYYY-MM-DD <!-- HH:mm:ss-->") %>
</span>
<!-- 更新日期 -->
<% if (page.date.format("YYYY-MM-DD") !== page.updated.format("YYYY-MM-DD")) { %>
    <span class="post-pubtime">
        <span class="mr-5">最後更新:</span>
        <%- page.updated.format("YYYY-MM-DD <!-- HH:mm:ss-->") %>
    </span>
<% } %>

首頁用年份分類

受井說部落格所啟發的第二個修改方向，便是將首頁的文章顯示以年份區分，按照作者的意思，應該是可以直接使用 archive.ejs 的程式碼，不過我把程式碼貼到 index.ejs 後，發現日期沒有縮排，所以一樣求教於 ChatGPT，選擇直接加入一段空白：

1
2
3
4
5
6
7
8
9
10
11
<div class="post-item" title="<%- item.title %>">
        <div class="time-m-d">
          <!-- 讓月份有縮排 -->
          <span style="padding-left: 26px;"></span><%- item.date.format("MM-DD") %>
        </div>
        <div class="title">
          <a href="<%- url_for(item.path) %>">
            <span><%- item.title %></span>
          </a>
        </div>
</div>

新增 giscus 留言板

忘記為什麼當初會選 Giscus 來架設留言板，可能是支援亮暗色切換很吸引我，但因為目前 Oranges 尚未支援 giscus，我又不懂怎麼讓留言板能跟著主題切換亮暗，於是完全沒發揮到這個特點，呵呵。

首先要在 Github 個人帳戶內安裝 giscus app，再設定一個公開的 GitHub repo 放置留言，並開啟 repo 的 Discussion 功能，最後在 giscus 官網輸入 repo 名稱與設定留言板，就可以得到 giscus 留言板的 javascript 程式碼[2]，接下來直接把這段程式碼貼到 Oranges 的 comment.ejs 中就完成設置。

這裡我是模仿 Oranges 支援的其他評論系統的設計，加上一個_config.oranges.yml 的 comment 是否開啟的條件，判斷是否顯示留言板，如以下程式碼：

1
2
3
4
5
6
<% if (theme.comments.enable) { %>
  <!-- 以下是giscus提供的留言板程式碼 -->
  <script src="https://giscus.app/client.js"
        <!-- giscus 提供的留言板程式碼，省略 -->
  </script>
<% } %>

Hexo 主題資料夾備份

原本我以為 hexo deploy 推送上去的檔案會包含文章的 markdwon 檔案和主題設定，但後來才知道推送上去的只有 hexo generate 執行後產生的 public 資料夾而已[3]，如果哪天需要更換設備來寫作，就無法找回原始文章的檔案。

關於部落格資料夾備份，我的作法是建立一個私有的 GitHub repo，然後把部落格資料夾備份在這個 repo 內，但這個做法會有個問題，我無法從 GitHub 上的備份用 repo 查看 Oranges 主題資料夾的內容。

關於這個問題的解法，我是按照這篇【Hexo部落格】解決push部落格原始碼時themes下的主題資料夾無法備份更新到GitHub分支來處理，文章描述與我的情況的類似：在主題資料夾內的修改沒有成功commit，代表沒有成功備份。

依照文中提供的解法，我先將 Oranges 資料夾內隱藏的.git 資料夾移出，接著用 git rm --cache themes/oranges 清除快取，然後再用 git add .、git commit -m "Remove .git folder" 和 git push -u origin master 再次將 oranges 資料夾推送到 GitHub 備份，最後再將移走的.git 資料夾移回 oranges 資料夾內。

初次在 VS code 執行 Hexo 指令的錯誤訊息

我發表部落格文章時，會在 VS Code 的終端機區域使用到 Hexo 指令，例如 hexo clean、hexo generate、hexo deploy，而我第一次執行時，看到報錯訊息：系統已停用指令碼執行。

我當時是參考當 VSCode 發生 “因為這個系統上已停用指令碼執行，所以無法載入…” 問題這篇文章的方式來處理[4]，搜尋到 Windows Powershell ISE，並用系統管理員身分執行。輸入 get-executionpolicy 會看到目前系統設定為 Restricted，因此要輸入 Set-ExecutionPolicy RemoteSigned，把權限變更為 RemoteSigned，接下來回到 VS Code，就能成功執行 Hexo 指令。

  1. 1.我當初是看這個 Day 2：挑選 Hexo 作為工程師技術部落格的系列文，學會從 Hexo 下載、新建部落格到部署上 GitHub 的過程。 第一次架部落格選的 Fluid 主題，則是看 Hexo Fluid 主題使用指南來設置。 ↩
  2. 2.可以參考 安裝 Giscus 作為 Hugo 網站的留言板，支援轉換 Gitalk/Utterances 的留言，來一步步設定 giscus。 ↩
  3. 3.讀完 Day 23：將你的 Hexo 使用 Git 指令備份到 Github 儲存庫另一個分支才知道我根本沒備份。 ↩
  4. 4.也可以閱讀這篇：VSCode 執行 npm install 失敗。 ↩
#Hexo