很多編寫跑團模組的朋友喜歡使用 Markdown 或者 org-mode 這種文本標記語言, 通過簡單的向文本中插入符號就可以在不打斷思路的情況下編寫出方便閱讀的格式化文本. 但是說實話跑團的過程中我們往往面臨很多複雜的信息表述情況, 相互聯繫的信息往往橫跨多個段落, 畢竟你不希望自己辛辛苦苦編寫的武器, 人物, 遭遇都是一次性用品; 而針對它們 GM 也需要諸多備忘. 或者是多個任務信息相互關聯等等.

有些朋友開始嘗試 Obsidian 或者 Foam 之類的雙向引用文本方案把自己的模組建立成為一個wiki的形式, 但是這樣的模組會給 GM 備團造成極大的困難, 說到底跑團模組還是提供對一個相對線性流程的建議, 純非線性的設計會給實際操作帶來極大困難, 而且這樣的模組設計上就不好發佈, 不好分享.

在我第一次看到 MDX 這個理念的時候的就覺得這玩意很適合用來寫模組. 這個東西的基本理念是, 你可以想 Markdown 一樣的書寫文章, 並且可以在文章中插入你自己編寫的React組件. 它可以被很多框架接受並輸出成 HTML 成為網頁. 配合上一個全棧前端框架(我用的是 Next.js, 你也可以用 Fresh 之類的)就可以有無限的可能, 而且現在的 vercel, deno deploy 之類的部署平臺幾乎是一鍵部署, 完美.

先看看效果

在你被 js 嚇跑之前我先給你看看我用它實現的那些炫酷的效果. 模組文件主要分為兩部分, 一部分為 MDX 文件構成的文章內容, 另一部分是 TOML 配置組成的詞條. 前者就像是正常的 Markdown 文本, 只是在其中插入了預先注入的React組件; 後者則是描述了所有的武器防具, 任務, 小事件之類的東西, 方便在文中被組件調用. 下面先依次介紹自定義組件:

檢定/抉擇組件這個組件就是一個可以嵌套的抽屜, 這樣做的好處是遇到比較複雜的檢定 GM 就比較好理清檢定或者行為結果對應的內容. 如果沒有嵌套情況了還有相應的提示.

警告組件像這樣的樣式可以把不同關注等級的東西高亮, 我用它們來寫那些只給 GM 說的話.

商店組件用表格的方式展示商品, 選擇商品可以查看詳細情況, 商品配置可以直接引用配置文件.

分支組件分支組件分為分支目錄和分支標記兩種, 分支目錄會掃描文章中所有同標題的分支標記, 然後列為目錄方便點擊跳轉, 分支標記點擊也可以跳轉回分支目錄, 很適合用來標註互動情況很多的章節.

任務/檢查點任務組件和檢查點組件類似分支組件, 不過分支組件設計上是先出現目錄, 向後掃描分支標記, 任務/檢查點是反過來的(先有檢查點, 再有任務). 而且任務/檢查點還能接受配置文件內容並記錄任務完成情況到冒險記錄(冒險記錄系統一會說).

隊列組件隊列組件回從配置文件讀取堆疊信息, 你可以查看目前隊列推薦的進度, 甜點, 隊列獲取的位置. 你還可以標註隊列成員, 它們會被記錄在你的冒險記錄裡. 這個組件的理念基於我之前的文章 “觸發-響應系統”完成敘述任務

原生 Markdown 組件我重新定義了一下 code (用反引號括起來的地方)的位置. 還讓給標籤提供了 id 方便被超鏈接和掃描(實現後文的進度跳轉和目錄). 重新定義了一下圖片組件.

除了組件我還給項目添加了存檔系統, 這個部分是通過 Jotai 這個狀態管理庫實現的, 你可以在主頁查看冒險記錄, 創建冒險記錄, 還可以在原有的冒險記錄上分支. 點擊首頁的冒險進度可以快速跳轉到對應的冒險章節.

當然我還添加了目錄, 目錄還會實時檢查你的閱讀進度並如上文說的記錄到你的冒險記錄. 除此之外還為小電腦屏幕和大電腦屏幕做了適配, 還有最重要的功能, 黑暗模式.

如何編寫和發佈?

這個部分建議你先通讀一遍, 確保你沒有被勸退在照著做, 雖然不難, 但是需要你有一些計算機常識和互聯網使用經驗.

使用這個模板你大約需要以下步驟:

安裝 Node.js
拉取倉庫
修改鏈接創建自己想要的頁面
開始編寫模組和配置

第一步上我已經和 Google 達成戰略合作關係, 所有你不懂的都可以搜索, 而且不花一分錢. 注意記得配置環境變量, 當你打開自己的命令行 (Windows 下推薦用 PowerShell, MacOS 下直接用你的 zsh) 輸入 npm 可以看到一大堆東西就說明你弄成功了, 可以進行下一步了.

輸入 npm 出現這樣一堆東西

第二步上如果你沒有開發經驗你可以直接打開項目倉庫的頁面, 並在 Code 下面選擇 Download ZIP 來下載整個項目代碼文件. 把他解壓到一個正常的位置, 這個正常的位置是指你用戶名稱對應的文件夾下的隨便什麼地方, 文檔, 視頻, 桌面, Whatever! 別放在磁盤根目錄, ProgramFile, root 文件夾, 啟動目錄或者之類的地方, 千萬別!

點擊這裡下載項目

進入你的項目根目錄, 在這個路徑下打開命令行

Windows要用 Shift + Ctrl + 右鍵, 然後選擇在此處打開 PowerShell 窗口打開命令行
MacOS要在系統偏好設置 -> 鍵盤 -> 快捷鍵 -> 服務，勾選新建位於文件夾位置的終端窗口

(後面的鍵盤快捷鍵可以不選), 然後到項目根目錄右鍵選擇新建位於文件夾位置的終端窗口.

然後在命令行中輸入npm i來安裝依賴, 這個過程用國內的網絡可能會比較慢, 等不及可以更換國內鏡像(搜索清華npm鏡像). 安裝只需要進行一次, 除非從刪除了項目, 完成安裝後輸入npm run dev就可以啟動開發服務器, 在裡面瀏覽器裡面使用命令行裡給的鏈接就可以快樂的查看頁面了.

到了第三步你會需要一個文本編輯器, 雖然你往往可以使用你萬能的記事本, 但是我還是推薦你使用 VSCode, 給他安裝上 MDX 擴展, 然後打開你項目的根目錄, 你就可以修改項目文件了. 如果你要修改頁面你需要進入 components 文件夾的 Page.tsx 文件.

在裡面搜索 export const pageRoutes 你就可以看到有很多 name 和 href 組成的組合, name 這邊的內容是頁面的名稱, 會顯示在頁面頂部的超鏈接區域. 而 href 是你頁面的路徑, / 代表主頁, 也就是管理你的冒險記錄的頁面, /後面加上大小寫字母數字就是你頁面的代號, 用來跳轉到你的頁面, 記得前往不要在 / 後面寫上奇怪的符號, 有些可能無所謂, 有些會導致錯誤.

記住你在 / 後面寫的對應的頁面的代號, 在項目目錄裡的pages目錄裡新建一個名為[代號].mdx(這個方括號和裡面的字就用你的代號替換)的文件, 在這裡面就可以寫你的模組了. 而在它旁邊的 public 文件夾裡有 shopGoodsVec.toml, TasksVec.toml, treasuresQueueVec.toml 三個文件夾, 分別是商店, 任務, 隊列的配置文件, 在裡面模仿格式編寫就可以配置這三個組件的詞條, 在模組中引用了.

發佈的部分因為使用的是 Next.js, 所以相對來說比較簡單, 可以搜索vercel 發佈 Next.js 項目或者搜索deno deploy來獲取相關信息.

要是機核在編輯器裡內置了就好了

說實話, 機核的技術團隊開發水平也很強, 配合最近幾年在推跑團文化, 感覺在編輯器中加入跑團模組編寫的相關功能是一個很可行的方向. 現在國內的模組一般都是用 Word, Markdown 編寫的 (或者成為像我一樣用 MDX, Typst, LaTeX 寫模組的硬核藍人, 吼吼吼), 要是有一個支持類似我這樣檢查點, 物品詞條功能, 在來點地圖編輯功能, 成為世界一番的模組分享平臺不是指日可待!

西蒙, 你聽到了嗎?