hexo-theme-animal的Github所有相關repositories
日期：2024-09-10
介紹 GitHub 上與 hexo-theme-animal 相關的 repositories，包括主題、示例網站和補充資料。
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上 >>
Docker
這裡是如何使用 Docker 來運行 weitsung50110/hexo-theme 的步驟。
拉取Image：
docker pull weitsung50110/hexo-theme:v1.0運行容器
將本地的D:\NODEJS目錄映射到容器中的/app目錄，並將端口 4000 映射到主機：docker run -it -d --name nodejs -v D:\NODEJS:/app -p 4000:4000 weitsung50110/hexo-theme:v1.0
運行後，你可以通過在瀏覽器中訪問 http://localhost:4000 來查看運行中的 Hexo 網站。
安裝的插件版本
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.0hexo-generator-archive@2.0.0hexo-generator-category@2.0.0hexo-generator-index@4.0.0hexo-generator-searchdb@1.4.1hexo-generator-sitemap@3.0.1”hexo-generator-tag@2.0.0hexo-renderer-ejs@2.0.0hexo-renderer-marked@6.3.0hexo-renderer-stylus@3.0.1hexo-server@3.0.0hexo-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
- npm install hexo-generator-sitemap --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，來顯示所有文章
63行左右
## Set per_page to 0 to disable pagination per_page: 088行左右
# 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 的模板中顯示正確的日期時間格式，並且希望顯示特定的時區（例如台北時間）
- 確保你已經安裝了 moment-timezone
npm install moment-timezone –save
修改 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要改
63行左右
# Pagination 設為 0 以顯示所有文章。 ## Set per_page to 0 to disable pagination per_page: 088行左右
# 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
url縮短成只有年分：permalink
在19~20行左右，
把url從:year/:month/:day/:title/縮短成年分:year/:title/，
# permalink: :year/:month/:day/:title/
permalink: :year/:title/
喜歡 好崴寶 Weibert Weiberson 的文章嗎？在這裡留下你的評論！本留言區支援 Markdown 語法。
