免費嵌入你的網站

互動示範

下面這個區塊，就是嵌入的樣子。

預設收起側邊欄；有文件內容時直接進入編輯，空白文件則先選擇匯入或直接撰寫。可以立刻修改文字、開啟「設定」，或用區塊外的 ⛶ 放大。內容和編輯紀錄會保留，縮回後可以繼續瀏覽這一頁。

此示範與預設安裝都將草稿存在訪客自己的瀏覽器，不會自動寫入你的後台。需要跨裝置或多人儲存時，可再接網站原有的儲存流程。

安裝到自己的網站

在你的 HTML 裡加入 LumaReader。

把自己的 .md 檔放進網站專案。電腦先安裝 Node.js，在網站資料夾開啟終端機，貼上這一行：

npx --yes https://kcis.kainnne.com/copy/lumareader/embed/lumareader-embed.tgz ./index.html --markdown ./transcript.md

把 ./index.html 換成要嵌入的網頁，./transcript.md 換成自己的 Markdown 檔案路徑（路徑有空格時請加上引號）。工具會先備份原檔，再加入 LumaReader；檔案不存在時會建立新頁面。完成後，用你原本的網站伺服器開啟即可。

這是固定安裝網址。安裝一次後，網頁會載入相容的新版 LumaReader，不必因版本更新重貼程式碼；文件 ID 和瀏覽器草稿維持原樣。

--markdown 會把你的文件內容放進 HTML，訪客看到的就是這份文件；省略時才使用示範文件。這是安裝當下的副本，之後修改原本的 .md 不會自動同步。

適用於完整 HTML 頁面；不會直接修改 React、Vue 等框架元件。請透過 HTTP／HTTPS 開啟網頁，直接雙擊成 file:// 網址不適用。

HTML 程式碼

也可以直接貼到 HTML。

不使用終端機的話，把下面這段放在網頁的 <body> 裡。修改 title 和 markdown，就能換成自己的文件。

<section id="my-luma"></section>
<script type="application/json" id="my-luma-document">
{"id":"chapter-01","title":"第一章","markdown":"# 第一章\n\n你的 Markdown 內容。"}
</script>
<script type="module"
  src="https://kcis.kainnne.com/copy/lumareader/embed/install.js"
  data-luma-target="my-luma"
  data-luma-document="my-luma-document"></script>

同一頁放多個區塊時，請使用不同的元素 id 與文件 id。瀏覽器會優先還原該文件的草稿；換成另一份文件時也請換一個文件 id。如果網站有設定 CSP，需允許從 lumareader.kainnne.com 載入 script 與 iframe。

只想展示文件、不讓訪客修改？在上方載入 install.js 的 script 加上 data-luma-readonly="true"，就會以唯讀模式開啟。

依網站需求調整

同一套編輯器，只留下需要的功能。

小說文案、Markdown 文件和唯讀展示，需要的操作不同。將以下設定放在安裝工具產生的 HTML 裡，再替原本載入 install.js 的 script 加上 data-luma-options="my-luma-options"。設定屬於你的網站，訪客先前的偏好不會蓋掉這些功能選項。

<script type="application/json" id="my-luma-options">
{
  "$schema": "https://kcis.kainnne.com/copy/lumareader/embed/options.schema.json",
  "mode": "direct",
  "language": "zh-Hant",
  "features": {
    "sidebar": false,
    "modeSwitch": false,
    "rename": false,
    "share": false,
    "formatting": true,
    "settings": true,
    "language": false
  }
}
</script>
<!-- 在原本 install.js 的 script 加上此屬性，不要再安裝一份：
     data-luma-options="my-luma-options" -->

寫 Markdown 原文：改成 "mode": "source"，預設有對照預覽。想讓使用者自由切換兩種編輯方式，再設 "modeSwitch": true。只展示文件：使用 "mode": "preview", "readOnly": true；若省略唯讀，使用者仍可點「編輯」。

mode

direct 直接編輯（預設）、source 原文編輯、preview 先閱讀。

sourcePreview

原文編輯的對照預覽預設為 true，可設為 false。使用者仍可操作對照預覽按鈕。

features.sidebar、features.modeSwitch

側邊欄預設可展開（true），一開始收起；不需要文件列表時可設 false，仍可拖曳匯入。Markdown 切換鈕預設 false，需要切換兩種編輯方式時設 true。

language、features.language

例如 "language": "zh-Hant"（繁中）、"en"（英文）、"ja"（日文）。要固定網站指定的語言，就把 features.language 設為 false；預設 true 可讓訪客在設定中切換。

toolbar.formatting、toolbar.share

嵌入版的「格式」與「分享 Markdown」預設不勾選，使用者可在設定中開啟。網站若要預設勾選，可加入 "toolbar": {"formatting": true, "share": true}。每次掛載以網站設定為初始值；若 features 明確關閉該功能，設定中也不提供勾選。

features.rename、features.share

預設 true。設為 false 可關閉改名、隱藏分享。處理私人文案時可關閉分享；標題由網站決定時可關閉改名。

features.formatting、features.settings

預設 true。設為 false 可隱藏格式插入／表格工具、閱讀設定。隱藏格式工具不會禁止輸入 Markdown 格式。

expand、download

一行安裝工具的外層放大與下載按鈕，預設 true；設為 false 可隱藏。

嵌入版統一拿掉「新增 Markdown」。空白文件會提供「拖曳／匯入 Markdown」與「直接撰寫」入口；之後也可從側邊欄匯入並查看文件大綱。最多保留 3 份文件，切換時保留各份草稿；超過上限時，先移除不需要的文件再匯入。已提供內容的小說章節會直接開啟，不必再走一次入口。

檔名可點擊修改，副檔名固定。改名後 onChange／onSave 會回傳目前文件的 title（不含 .md）和文字。最外層 id 保持不變；files 保留全部文件（各有固定 id、title、markdown），activeFileId 指向正在開啟的文件。網站的文章內容只取目前開啟的 title 與 markdown，不合併、不輪流送出其他草稿。需要暫存多份草稿時，另存完整快照，再傳回 document 還原。一行安裝工具已自動處理瀏覽器草稿；下載會使用目前的檔名。一般 Web 的改名只套用此分頁中的文件，不會重新命名電腦上的原檔。

const article = await editor.getActiveDocument();
// article.title：目前文章標題
// article.markdown：目前文章內容（單一字串，不含其他草稿）
// article.activeFileId：目前文件的識別碼

// 原有 onChange / onSave 的 title、markdown 也都指向目前文章。
// files 僅用於保留草稿；不要將 files 合併成網站文章。

使用 SDK 時，將相同的 mode、readOnly、sourcePreview、features、toolbar 傳給 mountLumaReader 即可；外層按鈕由你的網站自行決定。這些是介面選項，資料權限仍由網站後台管理。

讓 agent 協助嵌入：把這頁網址與你的用途交給它，例如「小說章節，只編輯現有內容、不分享、不改名」。程式可讀取 完整設定規格 JSON 與 小說文案設定範例，直接調整同一份嵌入設定。原本的一行安裝指令仍可沿用。

文字註記

可選擇開啟重點、文字備註與圖片註記。反白後加上註記，原文改動時會跟隨位置，或標示需要確認的關聯。試用註記示範 → · 整合 API 與限制

嵌入版更新

更新現有的嵌入區塊

1.4.2-web.3 · 2026 年 9 月 30 日

• 本機圖片自動配對：偵測到缺圖後，授權並選取一次文件資料夾，即可自動顯示圖片，不必逐張比對路徑。支援中文檔名、子資料夾、處理進度與取消。圖片只供目前分頁使用；分享連結仍不包含本機圖片。
• 修正閱讀時自行微幅回捲：圖片載入及手機瀏覽器高度變化不再強制調整閱讀位置；新的捲動操作會取消先前待執行的位置還原。
• 註記浮動工具列採半透明設計，可在下方中央與右下角切換位置，並記住選擇。編輯按鈕改用置中的純文字；既有嵌入指令與資料接口維持相容。
• 新增可選的文字註記：重點、備註與素材關聯；圖片可拖入並在滑過標記時預覽，Markdown 原文不變；支援原生復原、獨立唯讀設定及完整快照儲存。
• 加快嵌入編輯器首次載入：合併啟動資源，程式碼編輯器改為需要時才載入。既有編輯功能與安裝方式維持不變。
• 儲存移至右上角，採柔和粉紅色；設定整合進左側匯入區，頂端不再顯示註記數字。格式與分享仍可在設定中開啟。
• 網站以目前開啟的文件作為文章，其餘文件僅作草稿暫存。
• 嵌入版新增空白起始畫面、最多 3 份 Markdown 匯入與草稿保留，可設定預設語言和語言切換。
• 網頁與嵌入版支援點檔名修改，副檔名固定；嵌入版沿用原文件 ID 儲存。
• 放大／縮回使用與 Kainnne × Gemini 相同的圖示；可填滿瀏覽器，再回到原本的嵌入大小。
• 嵌入編輯器可選擇直接編輯、Markdown 原文或預覽，並調整開放的功能。
• 窄版工具列收納次要操作；格式選單改成分類的半高面板，保留文件閱讀空間。

使用官方固定網址的嵌入區塊，重新整理網頁後，就會在快取更新時載入相容新版，不必重新安裝。正在編輯時請先儲存。

若原本用一行指令安裝，可執行以下更新指令，取得目前維護的載入版本：

npx --yes https://kcis.kainnne.com/copy/lumareader/embed/lumareader-embed-1.1.0.tgz ./index.html --update

把 ./index.html 換成原本的網頁路徑。這個固定更新工具會查詢目前維護的 Web 版本，可重複用於之後的更新，不需要更改指令。工具會先備份，再更新官方載入網址，保留文件內容、文件 ID、唯讀設定和瀏覽器草稿的識別方式。完成後，將 HTML 重新部署到你的網站，再重新整理頁面。

直接貼 HTML 的使用者：保留官方 install.js 網址即可接收更新，不需重貼文件。自行下載整份資源部署的版本，需自行替換新版資源。