haklex 編輯器使用手冊：每個功能的寫法與效果對照

四季折羽的文章與手記都用 haklex 編輯器寫。這篇是使用手冊：每個功能都附上寫法和實際效果的對照，看完就能照著寫。

一、快速上手

1. 插入區塊：空白行輸入 / 打開選單，方向鍵選擇、Enter 插入。
2. 工具列：編輯框上方一排按鈕，最右邊的 + 是「插入」選單。
3. 改格式：選取文字會浮出小工具列，可以加粗、加連結、改成劇透。
4. 儲存：Ctrl + S 儲存；右側面板有「存草稿」和「發布」。
5. 拖曳：滑鼠移到區塊左邊出現 ⋮⋮ 把手，拖著可以調整順序，點一下可以刪除、複製、轉換。

二、文字與行內格式（對照表）

左欄是要輸入的寫法，右欄是畫面上的效果。

三、基礎區塊

標題

寫法　行首輸入 ## （二級）、### （三級）、#### （四級）；二、三級標題會出現在目錄

效果 ↓

這是一個四級標題

引用

寫法　行首輸入 >

效果 ↓

把想法，寫成可以被讀完的東西。

提示框（五種顏色）

寫法　行首輸入 > [!NOTE]、> [!TIP]、> [!IMPORTANT]、> [!WARNING]、> [!CAUTION]

效果 ↓

橫幅

寫法　單獨一行 ::: tip，內容寫在中間，最後一行 :::；類型有 note、tip、warning、danger

效果 ↓

分隔線

寫法　行首輸入 ---

效果 ↓

清單與待辦

寫法　- 無序、1. 有序、[ ] 待辦；Tab 縮排成子項

效果 ↓

• 春天寫遊記
• 夏天寫手記

1. 打開後臺
2. 輸入 / 插入區塊
3. Ctrl + S 儲存

• 讀完這篇手冊
• 寫下第一篇文章

表格

寫法　/table；拖邊框調欄寬，行列旁的把手可以增刪

效果 ↓

摺疊

寫法　/details，第一行是標題，內容點開才看得到

效果 ↓

格線（並排）

寫法　/grid，把內容分成幾欄

效果 ↓

四、圖片與媒體

圖片

寫法　/image，拖入或選檔，「Insert image」才會上傳；也可以直接把圖片拖進正文

效果 ↓

相簿

寫法　/gallery，一次放多張，排成格狀

效果 ↓

影片

寫法　/video，Source 貼網址或點 Upload 上傳 MP4／WebM／MOV，Poster 填封面

效果 ↓

附件

寫法　/file 會打開選檔視窗；把非圖片的檔案拖進正文也會變成附件

效果 ↓

手繪白板

寫法　/whiteboard，點「Edit whiteboard」用 Excalidraw 畫，關掉自動儲存

效果 ↓

五、進階區塊

程式碼區塊

寫法　行首輸入 ```ts 再按 Enter；右上角可以換語言

效果 ↓

const seasons = ['春', '夏', '秋', '冬']seasons.forEach(s => console.log(`${s}天也要寫東西`))

多檔案程式碼片段

寫法　/code snippet，一次放好幾個檔案分頁

效果 ↓

export const hello = (name: string) => `你好，${name}`

import { hello } from './hello'console.log(hello('四季折羽'))

數學公式

寫法　/math，寫 TeX，即時預覽

效果 ↓

Mermaid 圖

寫法　/mermaid，左邊寫程式碼、右邊即時預覽

效果 ↓

圖表

寫法　/chart，選長條／折線／面積／圓餅，在表格填資料

效果 ↓

投票

寫法　/poll，填問題和選項；每位訪客一票，可以改選

效果 ↓

對話

寫法　/chat，一句一句加，指定是誰說的

效果 ↓

巢狀文件

寫法　/nested，在彈窗裡寫，裡面能用全部區塊

效果 ↓

步驟

寫法　/steps，每一步有標題和內容

效果 ↓

連結卡片

寫法　/link card 貼網址；或在普通連結的小選單點「轉成卡片」

效果 ↓

嵌入

寫法　/embed，貼 YouTube、Bilibili、推文等網址

效果 ↓

六、動態元件

動態元件是可以互動的小程式，只能用本站 /dynamic-widgets/ 裡的元件。插入方式：/dynamic，Module URL 填元件網址，Props 填 JSON 設定。

單選小測驗

寫法　網址 https://www.ixoxi.cn/dynamic-widgets/quiz.mjs，props {"question":"…","options":[…],"answer":0}

效果 ↓

日語單詞卡

寫法　網址 https://www.ixoxi.cn/dynamic-widgets/flashcard.mjs，props {"cards":[{"word":"…","reading":"…","meaning":"…"}]}

效果 ↓

倒數計時

寫法　網址 https://www.ixoxi.cn/dynamic-widgets/countdown.mjs，props {"title":"…","date":"2026-12-06T09:00:00+08:00"}

效果 ↓

七、上傳規則

HTML、SVG、腳本類檔案一律不收。手機的 HEIC 照片請先轉成 JPEG。後臺更新後如果編輯器看起來是舊的，按 Ctrl + Shift + R 重新整理一次。