關於本站

本內容同步於本站Github Repo: https://github.com/chyuaner/blog.yuaner.tw

新部落格主站

本站寫文風格

  • 基本上都是以Markdown為主,相關定義class之類的attribute,都是用Markdown擴充語法。
  • 盡量不要使用 hexo 專有語法: {% link text url [external] [title] %}{% post_link slug [title] %} 這類的,會導致之後若要換系統搬移文章的話,會衍生需要額外自行撰寫解析器的麻煩。

Cover封面圖

1200x725 應該是最佳考量!!

  • 本theme文章列表封面原始尺寸: 240x145
  • Facebook摘文最佳尺寸: 1200x630

本站有使用的素材

背景

repo的檔案結構

原則上以原始hexo檔案結構為主,不過根據需求,有擴增一些資料夾:

  • external: 有自行修改過的npm套件,以git submodule的形式,配合package.json連結進來
  • scripts: hexo處理時需要依賴的JS檔
  • tools: 不給hexo處理,但需要額外給外部工具用js執行腳本
  • themes: 本站用的主題,因為也有自行改過,故以git submodule的形式拉進來。
  • source/assets: 自行調整的網站佈景需要用到的圖片資源都放這
  • source/js/giscus.js: 雖然名義上是處理留言系統,但因為有綁定pjax載入邏輯很難拆開,故所有需要換頁功能要做的事情都塞在這份裡面。
  • source/fontawesome: 雖然是從npm安裝,但是為了給全站讀到要用的檔案,有囮外用腳本自動複製到這邊,並設定gitignore

其他應該都是hexo原始結構與kratos-rebirth衍生的設定結構,可從官方教學對照。

有額外安裝的Plugin

  • hexo-generator-feed
    • hexo-feed (當備用)
  • hexo-hide-posts
  • hexo-include-markdown
  • @fortawesome/fontawesome-free
  • hexo-renderer-marked (更換render引擎)
  • hexo-renderer-markdown-it
    • markdown-it-anchor
    • markdown-it-attrs
    • markdown-it-bracketed-spans
    • markdown-it-container

有額外調整的部分

  • 修改post建立時的檔名規則 & 網址規則
  • 調整assets圖片資源檔架構
  • 建立Github Action workflows自動建置
    • 因為有客製化kratos-rebirth,配合修改script
    • 有使用 hexo-include-markdown ,發現無db.json時會壞掉,所以再補上腳本補上空檔案
  • 使用giscus用Github Discussions存放留言內容
  • 自建Firebase來存放views_count開啟次數統計
  • 使用 hexo-include-markdown ,將 source 資料夾外部的README.md連結進來當作about頁面使用

留言系統 giscus

有額外處理的部分

  • 因為本主題有pjax動態載入,不能直接取用giscus官方程式碼範例,有以kratos-rebirth給的 comment-disqus範例 為基礎修改使用。
  • 額外加入留言數,拉出給post header使用。

kratos-rebirth theme

有自行修改的部分

  • 繁體中文化
  • 更改404
  • footer文案

在本機安裝建置

分享這篇文章