3.7 定義與引用
NoteCraftApp 使用文件 第 3 章・撰寫筆記

3.7 撰寫筆記

定義與引用

同一段說明(角色、術語、狀態)只寫一次,其他筆記用 include 原樣嵌入、用 :ref 在行文中引用。這頁說明三個指令的寫法、id 規則、閱讀時看到什麼,以及哪些寫法會讓 build 失敗。

本頁目錄
  1. 寫一段定義
  2. id 的規則
  3. 顯示名稱
  4. 嵌入:include
  5. 定義裡有元件時
  6. 行內引用::ref
  7. 誰引用了這段定義
  8. 會讓 build 失敗的寫法

寫系統文件時,常在好幾篇筆記重複寫同一段說明,例如「管理員負責什麼」。之後要改,就得同時改好幾處。

定義與引用讓這段內容只存在一個地方:

指令寫在哪做什麼
::::define{id="…"}來源筆記把一段內容標成可被引用的定義
::include{id="…"}其他筆記在這裡原樣顯示那段定義
:ref[文字]{id="…"}其他筆記的行文中行內引用,滑過或點擊時預覽定義

.md 與 .mdx 都能用。引用只寫 id,不寫文件路徑:來源筆記搬到別的資料夾或改檔名,引用都不會斷。

下圖的「原文」框有兩篇筆記,用上方的檔案頁籤切換,可以直接改;「筆記頁」框是 NoteCraftApp 實際渲染出來的樣子,也能切換要看哪一篇。滑過淡底色的行內引用會出現預覽卡,點「前往來源」或「被 N 篇引用」會切到對應的那篇。

原文可以直接改
筆記頁

簽核角色

嵌入自系統 Overview· hr.role-manager前往來源 ↗

主管:部門的第一線簽核者。

主管職責

職責 頻率
簽核假單 每次送審
出勤檢視 每週

流程

送出後由 在兩天內簽核,逾期通知 。特休從 扣除,詳見 帳號規格 與 五年紀錄保存年限。

定義寫在「系統 Overview」,其他筆記用 include 嵌入、用 :ref 引用。兩邊的原文都可以改,筆記頁跟著重算;在筆記頁點「前往來源」「開啟來源」或「被 N 篇引用」,會切到來源那一篇。

寫一段定義

系統/overview.mdx
::::define{id="hr.role-admin"}
**管理員**:負責帳號審核、權限設定與稽核報表。

:::note
離職時要同步撤權。
:::
::::
  • define 是容器,裡面放什麼都可以:段落、清單、表格、程式碼區塊、圖片,以及提示框、:tip、分頁、步驟等擴充語法
  • 裡面還有別的容器(例如 :::note)時,外層的冒號要比內層多,上例外層用四個
  • 只能放在筆記的最上層,不能放進提示框或分頁裡

id 的規則

  • 整個筆記資料夾內不能重複
  • 可以用中文、英文、數字、_、-,以 . 分段。習慣上第一段當分類,例如 hr.role-admin、crm.role-admin
  • 要寫成 id="…"。{#hr.role-admin} 這種簡寫遇到 . 會被當成 class,id 只剩 hr

顯示名稱

預覽卡、反向連結、指令面板會顯示定義的名稱,依序取:

  1. label 屬性:::::define{id="hr.leave-status" label="假單狀態"}
  2. 內容裡第一個粗體的文字(上例是「管理員」)
  3. id

嵌入:include

系統/請假功能.mdx
## 簽核角色

::include{id="hr.role-manager"}

嵌入的內容和來源走同一套渲染,提示框、表格、分頁都長得一樣。左側有一條細線,上方標著「嵌入自」與來源筆記的標題,右邊的「前往來源」會打開來源筆記、捲到那段定義並短暫標示。

  • 定義裡的標題會配合嵌入的位置調整層級:最高的一級變成「嵌入處前一個標題的下一級」,最多到 h4
  • 嵌入的標題會進目錄,前面多一個嵌入的圖示
  • 嵌入的內容不會被全文搜尋索引,搜尋只會找到來源那一篇

定義裡有元件時

定義裡可以放 AI 生成的元件(GeneratedFrame)或其他 JSX 元件,來源筆記照常顯示。但元件的 import 屬於來源檔,所以嵌入處與預覽卡不會渲染元件,改顯示「此處有互動元件,請至原文檢視」。

import 要寫在檔案開頭,不能寫在定義裡,否則 build 會失敗。

行內引用::ref

MDX
送出後由 :ref[主管]{id="hr.role-manager"} 在兩個工作天內簽核。
逾期時通知 :ref{id="hr.role-admin"}。

省略 [文字] 時顯示定義的名稱。行內引用的樣式是淡色底加實線底線,和一般連結(藍字)、:tip(虛線)分得開。

操作結果
滑鼠移上去稍等一下出現預覽卡,移開就關
點一下或按 Enter卡片固定,可以選字、捲動;再點一次、按 Esc 或點外面關閉
⌘/Ctrl+點擊在新分頁開來源
手機或窄視窗從底部滑出完整內容

內容太長時,卡片先顯示前段,按「看完整內容」展開。

誰引用了這段定義

改定義之前,可以先看哪些筆記會受影響:

  • 每段定義上方有「被 N 篇引用」,點開列出引用的筆記,以及是嵌入還是行內引用
  • 被引用的筆記,頁首有「被引用 N」按鈕,打開後是整篇的反向連結,可以依定義篩選
  • 筆記列表點一篇筆記,右側預覽會列出「被引用」「本篇定義」「引用的定義」
  • 指令面板(⌘K)輸入 id 的任一段或定義名稱,可以直接跳到定義所在處

在開發模式下刪除一篇筆記時,如果它的定義被別篇引用,確認對話框會列出那些筆記。刪除不會被擋下,但之後 build 會失敗,要改掉那些引用(或用 git 復原)。

會讓 build 失敗的寫法

錯誤訊息會指出檔案與行號;npm run dev 時直接顯示在瀏覽器上。

寫法怎麼改
include/:ref 的 id 找不到檢查拼字,訊息會附上相近的 id
同一個 id 定義兩次改掉其中一個
兩段定義互相 include拆掉其中一邊
嵌入超過 4 層減少定義之間的嵌套
define 放在提示框、分頁裡,或 define 裡再放 define移到最上層
include 自己這篇的定義改用 :ref
define 裡有 import/export移到檔案開頭

在 GitHub 上修改這一頁