發音條
在聊天回覆中新增一個小型的單列單字按鈕條。每個按鈕點擊後會使用瀏覽器的語音合成功能朗讀該單字,無需開啟、下載或離開對話。將發音條與內文詞彙註釋搭配使用。
工作流程
-
挑選 2-4 個值得教學的單字:難度高於學習者當前程度、容易混淆、或是回覆的核心詞彙。避免重複標註已解釋過的單字。
-
在正常句子內標註每個單字,切勿使用獨立清單。使用 KaTeX 搭配彩色粗體文字、美式 IPA 音標、詞性以及使用者語言的簡短釋義。從一個小型可及性色板(
#2563eb、#7c3aed、#059669、#b45309、#db2777、#0e7490)中為每個單字隨機選取一種顏色;保持每個單字一種固定顏色,並在同一則回覆中避免重複顏色。此客戶端僅渲染$$...$$,因此請撰寫:保持緊湊($$\textcolor{#7c3aed}{\textbf{compact}}$$ /kəmˈpækt/,adj. 緊湊的) -
產生發音條:
python scripts/make_compact_strip.py --out <絕對路徑>.html word1 word2 ...保持檔案持久且易於客戶端讀取。偏好使用執行緒的視覺化目錄,並搭配 ASCII 檔案名稱,例如
~/.codex/visualizations/<日期>/<執行緒-id>/pron-<縮寫>.html。 -
腳本會輸出路徑和一個視覺化參考。將該參考原樣放在最終回覆的結尾,獨立成行。
渲染規則
參考內容以私用字元包裹:開頭 U+E200、分隔符 U+E202、結尾 U+E201。請從腳本輸出中複製。如果重新輸入,請務必使用完全相同的碼點。錯誤的結尾字元(例如 U+E041)會導致整個參考被靜默轉換為純文字,因此不會顯示發音條。
限制
- 僅輸出 HTML 片段。不要添加
<!doctype>、<html>、<head>或<body>;將 CSS 和 JavaScript 限制在產生的根 ID 範圍內。 - 保持發音條有 2-4 個按鈕,且僅有一行,只有在空間不足時才換行。
- 不要連結到外部字典或 TTS 頁面,也不要嵌入大型音訊播放器。按鈕必須就地播放。
- 使用主機主題變數(
--foreground、--border、--primary、--accent、--ring、--primary-foreground),而不是硬編碼色板。 - 如果客戶端完全無法渲染內嵌視覺化,則降級使用句子內部的緊湊喇叭圖示連結:
[🔊](https://dict.youdao.com/dictvoice?audio=<單字>&type=2)。
檔案
scripts/make_compact_strip.py— 驗證 2-4 個單字、寫入片段,並輸出視覺化參考。assets/strip-template.html— 帶有__ROOT_ID__和__WORDS_JSON__佔位符的片段模板。
需要 Python 3.8 或更新版本;無需第三方套件。