介紹

Shoka：一切的起源

Shoka 是一個 Hexo 主題，名字取自書架，是一個為了閱讀筆記而生的主題，
相關介紹可以參考作者網站：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/

優萌初華Shoka作者

Shoka 作者於部落格底下的留言中的回覆表示
該項目可能不再更新，GitHub 上最後的 Commit 日期是 2021/10/03。
目前的 Shoka 主題部落格可能因為套件版本問題導致無法訪問。

首頁波浪（Waves）動畫效果

Shoka 首頁那段上下起伏、如水波般的動畫效果，使用了 CodePen 上 Goodkatz 於 2019/08/13 發布的作品 Simple CSS Waves | Mobile & Full width，是一個純 HTML + CSS + SVG 實作。

比對 Shoka 編譯後頁面的原始碼可以發現，<svg class="waves"> 容器、id="gentle-wave" 的 path 座標、.parallax 圖層結構幾乎逐字元相同，僅省略了 CodePen 原版中的漸層背景色與 logo 部分。

  • 一個 id="gentle-wave" 的 SVG path，座標為 M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z
  • 用 4 個 <use> 疊出深淺不同的波浪層，包在 .parallax 容器內
  • 搭配 move-forever 的 @keyframes，讓各波浪層以不同的 animation-delay 與 duration 緩緩位移，做出水波飄動的視覺效果

ShokaX（Hexo 版）：精神續作

https://github.com/theme-shoka-x/hexo-theme-shokaX

ShokaX 是 Shoka 的精神續作，
原先 Shoka 使用了 JavaScript + Native + Nunjucks 的技術，
而 ShokaX 則使用了 TypeScript + Vue 3 + Pug 的技術搭配，
並新增了一些功能。

Hexo 版 ShokaX 已進入生命週期尾聲。於 2025/12/26 公布了 Hexo 生命週期方案。
最後版本為 v0.5.4（2025/07/28）。

ShokaX Astro：目前的主要開發版本

https://github.com/theme-shoka-x/astro-blog-shokax

由 ShokaX 在 Astro 上的重寫版本，使用 Astro + Svelte 5 + UnoCSS 的技術搭配。

安裝

安裝文檔：https://docs.astro.kaitaku.xyz/start/guides/

環境需求

  • Bun：官方建議使用 Bun 執行本項目，不保證與 Node.js 的相容性
  • Git：用於 Clone 項目與版本控制

撰寫第一篇文章

可依官方文檔修改 src/theme.config.ts 來自定義站點名稱、導航列與側邊欄等。

文章放在 src/posts/ 資料夾下，支援 md 與 mdx 格式，
子資料夾名稱會自動成為文章分類（folder categories）。

  1. 在 src/posts 資料夾下新增一個 md 檔案，例如：first.md
  2. 在檔案中新增內容，例如：
---
title: 第一篇文章
date: 2026-07-18
tags:
  - ShokaX
---

# 第一篇文章

這是內容
  1. 開啟 bun run dev 的預覽網址，就可以看到第一篇文章了。

部署

https://docs.astro.kaitaku.xyz/start/deploy/

執行 bun run build 後產物在 dist/ 資料夾，為純靜態網站，可部署到任何靜態託管平台。

SEO 設置

ShokaX Astro 已內建 @astrojs/sitemap 與 RSS。

analytics: {
  googleAnalytics: {
    measurementId: "G-XXXXXXXXXX", // 填入你的 Analytics ID
  },
  // 也支援 Umami
  umami: {
    websiteId: "你的 Website ID",
    scriptUrl: "https://cloud.umami.is/script.js",
  },
},