PenguLoader · xoxozjw · Jul 17, 2026
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -17,6 +17,46 @@ export default defineConfig({
   lastUpdated: true,
   cleanUrls: true,
 
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en'
+    },
+    'zh-TW': {
+      label: '繁體中文',
+      lang: 'zh-TW',
+      link: '/zh-TW/',
+      title: "Pengu Loader" + (isBeta ? ' Beta' : ''),
+      description: '釋放 League of Legends Client 的自訂能力。',
+      themeConfig: {
+        nav: navZhTW(),
+
+        editLink: {
+          pattern: 'https://github.com/PenguLoader/docs/blob/main/docs/:path',
+          text: '在 GitHub 上編輯此頁'
+        },
+
+        sidebar: {
+          '/zh-TW/guide/': sidebarZhTW(),
+          '/zh-TW/runtime-api/': sidebarZhTW(),
+        },
+
+        docFooter: {
+          prev: '上一頁',
+          next: '下一頁'
+        },
+
+        outline: {
+          label: '本頁內容'
+        },
+
+        lastUpdated: {
+          text: '最後更新'
+        }
+      }
+    }
+  },
+
   srcDir: './docs',
   vite: {
     publicDir: join(__dirname, '../public')
@@ -92,6 +132,26 @@ function nav() {
   ]
 }
 
+function navZhTW() {
+  return [
+    {
+      text: '指南',
+      link: '/zh-TW/guide/javascript-plugin',
+      activeMatch: '/zh-TW/guide/'
+    },
+    {
+      text: 'Runtime API',
+      link: '/runtime-api/',
+      activeMatch: '/runtime-api/'
+    },
+    {
+      text: `v${pkg.version}` + (isBeta ? '-beta' : ''),
+      link: isBeta ? 'https://github.com/PenguLoader/PenguLoader/actions'
+        : `https://github.com/PenguLoader/PenguLoader/releases/`
+    }
+  ]
+}
+
 function sidebar() {
   return [
     {
@@ -139,3 +199,35 @@ function sidebar() {
     }
   ]
 }
+
+function sidebarZhTW() {
+  return [
+    {
+      text: '外掛',
+      collapsed: false,
+      items: [
+        { text: 'JavaScript 外掛', link: '/zh-TW/guide/javascript-plugin' },
+        { text: 'Module System', link: '/guide/module-system' },
+        { text: 'CSS Theme', link: '/guide/css-theme' },
+        { text: 'Asset Handling', link: '/guide/asset-handling' },
+        { text: 'LCU Request', link: '/guide/lcu-request' },
+        { text: 'Npm Compatibility', link: '/guide/npm-compatibility' },
+      ]
+    },
+    {
+      text: 'Runtime API',
+      collapsed: false,
+      items: [
+        { text: 'Overview', link: '/runtime-api/' },
+        { text: '[Pengu]', link: '/runtime-api/pengu' },
+        { text: '[CommandBar]', link: '/runtime-api/command-bar' },
+        { text: '[DataStore]', link: '/runtime-api/data-store' },
+        { text: '[Effect]', link: '/runtime-api/effect' },
+        { text: '[PluginFS]', link: '/runtime-api/plugin-fs' },
+        { text: '[Toast]', link: '/runtime-api/toast' },
+        { text: '[rcp] context.rcp', link: '/runtime-api/rcp' },
+        { text: 'context.socket', link: '/runtime-api/socket' },
+      ]
+    }
+  ]
+}
diff --git a/docs/zh-TW/guide/javascript-plugin.md b/docs/zh-TW/guide/javascript-plugin.md
@@ -0,0 +1,82 @@
+# JavaScript 外掛
+
+開發外掛需要具備基本的 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 知識；如果你想製作主題，也會需要了解 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)。如果你已經熟悉網頁程式設計，這會相當容易上手。
+
+## 建立外掛
+
+假設你的新外掛名稱是 `your-plugin`。
+
+首先，你需要在 Pengu Loader 根目錄內的 **plugins** 資料夾中，建立一個名為 `your-plugin` 的新資料夾。
+
+```
+root/
+  |__plugins/
+    |__@default/        <- 預設外掛
+      |...
+    |__your-plugin/     <- 你的新外掛
+      |__index.js       <- 外掛進入點
+```
+
+接著，在你的外掛資料夾中建立一個名為 `index.js` 的新檔案。這個 index 是外掛的進入點，會在 League Client 準備就緒後執行。現在你可以用任何編輯器打開它，開始撰寫程式。
+
+::: tip
+
+建議使用現代 JavaScript 編輯器來開發外掛，例如 [Visual Studio Code](https://code.visualstudio.com/)，因為它支援 IntelliSense、linter 與程式碼自動完成。
+
+:::
+
+接下來，只要把這一行加入 index 並儲存。
+
+```js
+console.log('Hello, League Client!')
+```
+
+::: info
+
+所有程式碼與文字檔都應該以 UTF-8 編碼儲存，且不要使用 BOM。否則，你的外掛可能無法如預期運作。
+
+:::
+
+然後啟動 League Client。當 Client 準備就緒後，試著按下 `Ctrl Shift I` 開啟 **Chrome DevTools**。前往 DevTools 的 **Console** 分頁並捲動到最上方，你會看到輸出訊息。
+
+```
+Hello, League Client!
+```
+
+## 外掛進入點
+
+<Badge type="tip" text="since v1.1.0" />
+
+外掛的進入點是在外掛 index 中匯出的函式，loader 會自動呼叫它。`init` 進入點應該會在 League Client 初始化自己的 scripts 之前被呼叫。
+
+```js
+export function init(context) {
+  // your code here
+}
+```
+
+- 請參考 [`context.rcp`](/runtime-api/rcp) 了解如何從這個 `context` 使用 RiotClientPlugin hooks。
+- 請參考 [`context.socket`](/runtime-api/socket) 了解如何使用內建的 socket 觀察功能。
+
+自 v1.1.0 起，你不再需要把載入 script 放在 `window` 的 `load` 事件中。改成放在 `load` 進入點即可；即使 window 已經載入完成，它仍然會被呼叫。
+
+```js
+export function load() {
+  // your code here
+}
+```
+
+## 外掛範本
+
+為了讓你更容易開始，我們已經提供了基礎外掛，請參考：
+https://github.com/PenguLoader/PenguLoader/tree/v1.0.5/plugins
+
+## 下一步
+
+恭喜！你已經完成初學者教學。接著可以閱讀後續頁面，讓你的外掛擁有更多能力。
+
+- [Module System](/guide/module-system) - 進一步了解模組系統
+- [CSS Theme](/guide/css-theme) - 使用 CSS 建立你的主題
+- [Asset Handling](/guide/asset-handling) - 將自訂內容加入外掛
+- [LCU Request](/guide/lcu-request) - 協助你使用 LCU 的指南
+- [Runtime API](/runtime-api/) - 可在外掛中使用的實用內建 API
diff --git a/docs/zh-TW/index.md b/docs/zh-TW/index.md
@@ -0,0 +1,41 @@
+---
+layout: home
+
+title: Pengu Loader
+titleTemplate: Pengu Loader
+
+hero:
+  name: Pengu Loader
+  tagline: 釋放 League of Legends Client 的自訂能力
+  image:
+    src: /Pengu_Featherknight_144.jpg
+    alt: Pengu Loader
+  actions:
+    - theme: brand
+      text: 開始使用
+      link: /zh-TW/guide/javascript-plugin
+    - theme: alt
+      text: 加入 Discord
+      link: https://chat.pengu.lol
+    - theme: alt
+      text: 在 GitHub 上查看
+      link: https://github.com/PenguLoader/PenguLoader
+
+features:
+  - icon:
+      src: /features/javascript.png
+    title: JavaScript 驅動
+    details: 使用 JavaScript 打造更聰明的 Client。你可以把熟悉的前端技術用在 League Client 裡。
+  - icon:
+      src: /features/theme.png
+    title: 個人化外觀與體驗
+    details: 依照你的偏好自訂 Client 介面，讓它變得更有個人風格。
+  - icon:
+      src: /features/league-of-legends.png
+    title: 深入 League Client
+    details: 專為在 Client 內順暢運作而設計，協助你不受限制地存取 LCU。
+  - icon:
+      src: /features/chrome-dev.png
+    title: Chrome DevTools
+    details: 就像在瀏覽器中一樣，檢查與編輯 Client 裡的任何內容。
+---