介紹我用 Hexo 開發的 GitHub repositories，包括自定義的 hexo-theme-animal 主題和示例網站，並詳細列出安裝的 Node.js 版本和相關的 npm 依賴項，幫助讀者快速了解主題和插件的安裝配置。

GitHub 上的相關 repositories

在這篇文章中，我將介紹 GitHub 上我做的 repositories，它們都是關於 Hexo 主題的開發和使用。

1. hexo-theme-animal

這是我開發的一個 Hexo 主題，名為 hexo-theme-animal。這個主題提供了多種自定義選項和現代化的設計，適合用於個人博客或作品集。你可以在 這裡 查看詳細信息和使用說明。

2. hexo-theme-animal-site

這個 repository 包含了使用 hexo-theme-animal 主題的示例網站。你可以參考 這個連結 來查看完整的網站實例和部署過程。

---

希望這篇文章能夠幫助你了解這些相關的 GitHub repositories。

此文章也有發表在Medium上 >>

• 使用 Hexo 創作部落格主題模板：用 EJS 打造專屬自己部落格

安裝的插件版本

Node.js 版本，我裡面是安裝20.16.0版本

REPOSITORY	TAG	IMAGE ID	CREATED	SIZE
node	20.16.0	1a8e51cfa7a5	6 weeks ago	1.1GB

npm 依賴項，npm裡面還有安裝這些依賴

以下是 npm list --depth=0 輸出的依賴項列表：

root@73fbc4a3b07a:/app/my-blog# npm list –depth=0
hexo-site@0.0.0 /app/my-blog
+– hexo-generator-archive@2.0.0
+– hexo-generator-category@2.0.0
+– hexo-generator-index@4.0.0
+– hexo-generator-searchdb@1.4.1
+– hexo-generator-sitemap@3.0.1
+– hexo-generator-tag@2.0.0
+– hexo-renderer-ejs@2.0.0
+– hexo-renderer-marked@6.3.0
+– hexo-renderer-stylus@3.0.1
+– hexo-server@3.0.0
+– hexo-theme-landscape@1.0.0
`– hexo@7.3.0

• Hexo 及相關插件

  • hexo @7.3.0
  • hexo-generator-archive @2.0.0
  • hexo-generator-category @2.0.0
  • hexo-generator-index @4.0.0
  • hexo-generator-searchdb @1.4.1
  • hexo-generator-sitemap @3.0.1”
  • hexo-generator-tag @2.0.0
  • hexo-renderer-ejs @2.0.0
  • hexo-renderer-marked @6.3.0
  • hexo-renderer-stylus @3.0.1
  • hexo-server @3.0.0
  • hexo-theme-landscape @1.0.0

• Moment.js 及其時區支持

  • moment-timezone @0.5.45

推薦需要npm安裝的套件

- npm install hexo-generator-sitemap --save
- npm install moment-timezone --save
- npm install hexo-generator-searchdb --save
- npm install gitalk --save

root下面的_config.yml設定統整

URL

# URL
url: http://localhost:4000
url: url: https://weitsung50110.github.io/hexo-theme-animal-site/

語言

language: cn
language: en

配置來啟用 JSON 格式的搜尋資料

search:
  path: search.json
  field: post
  content: true

Pagination設置per_page為0，來顯示所有文章

1. 63行左右

    ## Set per_page to 0 to disable pagination 
    per_page: 0
   

2. 88行左右

    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 0
   

GitHub 的評論系統

gitalk:
  clientID: 'YOUR_CLIENT_ID'
  clientSecret: 'YOUR_CLIENT_SECRET'
  repo: 'weitsung50110.github.io'  # 使用你的 GitHub Pages 倉庫
  owner: 'weitsung50110'            # 你的 GitHub 用戶名
  admin: ['weitsung50110']          # 管理員列表
  id: location.pathname.slice(0, 50)
  distractionFreeMode: false

SEO - 提供 Sitemap

使用 Hexo 的內建功能生成 Sitemap，這樣搜尋引擎更容易找到你的頁面：

npm install hexo-generator-sitemap –save

註冊並提交你的網站至 Google Search Console，這樣可以跟蹤你的網站表現，並獲得搜尋引擎的回饋。

文章的時區設定

希望在 Hexo 的模板中顯示正確的日期時間格式，並且希望顯示特定的時區（例如台北時間）

1. 確保你已經安裝了 moment-timezone

npm install moment-timezone –save

2. 修改 EJS 模板的post.ejs

    <article class="post">
    <h1><%= page.title %></h1>
    <!-- <p class="post-date"><%- __('post.date') %><%= page.date %></p> -->
    <p class="post-date"><%- __('post.date') %><%= moment(page.date).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss') %></p>
   

如果你要更改成其他的時區，更改tz(‘Asia/Taipei’)就好了~

加入文章搜尋功能 Search function

需要安裝 hexo-generator-searchdb 插件，這個插件可以生成一個 .json 檔案作為搜尋資料庫

npm install hexo-generator-searchdb --save

打開你的 Hexo 根目錄下的 _config.yml，加入以下配置來啟用 JSON 格式的搜尋資料：

search:
  path: search.json
  field: post
  content: true

path: search.json 指定生成 .json 檔案。
field: post 指定只索引文章。如果你還想要索引頁面，將它改為 all。
content: true 指定是否包括文章的內容。若只需要標題和摘要，可將其設為 false。
在/source/js/search.js中有一個，路徑記得要修改~ 因為我的專案名字是在hexo-theme-animal-site，所以需要加上/hexo-theme-animal-site才能夠抓到。
hexo-theme-animal-site是我自己設定的專案名字，你需要根據你創建的專案名字來進行更改。

// 設置 JSON 文件的路徑
const searchDataUrl = '/hexo-theme-animal-site/search.json';

若沒有改的話會出現以下錯誤

GET https://weitsung50110.github.io/search.json 404 (Not Found)
(anonymous) @ search.js:9
search.js:54 搜尋資料載入錯誤: Error: 網絡錯誤，無法加載 search.json
    at search.js:12:13
(anonymous) @ search.js:54
Promise.catch
(anonymous) @ search.js:54

因為預設會從https://weitsung50110.github.io 抓取search.json，但我是在repo中架網站，所以路徑會變成https://weitsung50110.github.io/hexo-theme-animal-site/search.json。 可以自己輸入https://weitsung50110.github.io/hexo-theme-animal-site/search.json 之類的網址去看看會不會出現.json檔案!!

Pagination顯示所有文章

在root下面的_config.yml設置per_page為0:

• 當你發現archives的文章總數有少
• 當你發現index.ejs的文章總數量num有少
  就記得改_config.yml要改

1. 63行左右

    # Pagination 設為 0 以顯示所有文章。
    ## Set per_page to 0 to disable pagination 
    per_page: 0
   

2. 88行左右

    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 0
   

GitHub 的評論系統

在post.ejs中，加入下面這個語法。

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css" />
<script src="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<script>
  var gitalk = new Gitalk({
    clientID: '<%= config.gitalk.clientID %>',
    clientSecret: '<%= config.gitalk.clientSecret %>',  // 替換為最新的 client secret
    repo: '<%= config.gitalk.repo %>',
    owner: '<%= config.gitalk.owner %>',
    admin: ['weitsung50110'],
    id: location.pathname.slice(0, 50),
    distractionFreeMode: false
  });
  gitalk.render('gitalk-container');
</script>

Hexo 根目錄下的 _config.yml中加入

gitalk:
  clientID: 'YOUR_CLIENT_ID'
  clientSecret: 'YOUR_CLIENT_SECRET'
  repo: 'weitsung50110.github.io'  # 使用你的 GitHub Pages 倉庫
  owner: 'weitsung50110'            # 你的 GitHub 用戶名
  admin: ['weitsung50110']          # 管理員列表
  id: location.pathname.slice(0, 50)
  distractionFreeMode: false