- 本文用於介紹萌娘百科中一些特定功能的操作方法；
- 本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。
Visual Studio Code是由微軟發行的開原始碼編輯器，擁有豐富的擴展功能。搭配使用由Rowe Wilson Frederisk Holme開發的Wikitext擴展和Bhsd開發的WikiParser擴展並接入萌百的API可以方便地實現代碼著色、補全與實時預覽功能，提高頁面的編輯效率。關於萌百娘手把手教我學代碼這件事!!!∑(ﾟДﾟノ)ノ程式設計師都這麼卷啦Σ┗(＠ロ＠;)┛
本幫助將提供配置基於Visual Studio Code的萌娘百科編輯環境的建議。
為了表述方便，以下均用VS Code代指Visual Studio Code。
系統要求
- Windows 10及以上 64位/ARM
- macOS 10.15以上
- Linux
安裝VS Code
下載
訪問VS Code官方網站，官網會自動檢測正在使用的作業系統，只需要點擊左側的下載按鈕即可。（如果大陸用戶下載速度較慢，可以嘗試將下載連結中的az764295.vo.msecnd.net替換為vscode.cdn.azure.cn）
如果對系統的檢測有誤或者需要為其他作業系統安裝，可以從下載按鈕右側的下拉列表選擇，或者點擊右上角的Download查看更多支持的版本（linux可以跳過這一步）。
安裝
- Windows：運行安裝包後按需選擇安裝。
- macOS：解壓後直接運行。
Linux
可參考官方教程Running Visual Studio Code on Linux（不建議使用，官網下載在Linux下會極慢，對於大陸用戶很不友好），或使用以下方案。
Arch系
- 在
/etc/pacman.conf中加入arch4edu源（推薦使用tuna源） - 運行一遍系統更新：
sudo pacman -Syyyu - 安裝visual-studio-code-bin包：
sudo pacman -S visual-studio-code-bin
Debian系
- 更新你的源：
sudo apt update - 檢查你的deb源中有無code包若有直接安裝code：
sudo apt-get install code（一般國內源都有） - 若沒有安裝依賴：
sudo apt-get install software-properties-common apt-transport-https wget - 然後加入官方源：
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add - && sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" - 安裝
code包：sudo apt-get install code
Fedora、RHEL系列
添加軟體源文件：
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
然後更新緩存並安裝：
sudo dnf makecache sudo dnf install code
如果您用的是版本較早的系統（如RHEL/CentOS 7），請將命令中的dnf替換為yum。
LFS或Gentoo
自己編譯，都自己編譯系統了這有什麼難的。
漢化
VS Code默認語言為英語，第一次啟動時會在右下角自動提示安裝漢化包。
如果沒有相關提示，可點擊左側擴展（Extensions）圖標，或者按下Ctrl+⇧ Shift+X，搜索「Chinese」，選擇「Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code」並點擊「安裝（Install）」。安裝完成後會提示重啟，重啟後即可顯示為中文界面。
安裝與配置Wikitext擴展
創建工作區
- 創建一個新的文件夾用於保存您的Wikitext文件；
- 啟動VS Code，點擊「文件」→「打開文件夾」並打開剛創建的文件夾；
- 如果彈出是否信任此文件夾中的文件的作者?，必須要選擇「是，我信任此作者」，否則將無法使用擴展功能。
- 點擊「文件」→「將工作區另存為」將工作區保存下來；
- 下次啟動時用VS Code打開工作區文件，或者點擊「文件」→「Open Workspace from File…」即可進入工作區。
安裝擴展
- 打開左側擴展面板，搜索「Wikitext」並安裝。或者訪問Wikitext擴展的Visual Studio Marketplace，點擊「Install」。
- 打開左側擴展面板，搜索「WikiParser」並安裝。或者訪問WikiParser擴展的Visual Studio Marketplace，點擊「Install」。
- 安裝完成後在擴展面板的「已安裝」一欄下找到「Wikitext」，點擊右下角的小齒輪，先選擇「禁用」，然後選擇「啟用（工作區）」。這一步的目的是將擴展限制在工作區內，以避免編輯其他類型文件時產生潛在的衝突和性能問題；
- 在工作區內新建擴展名為「.wikitext」的文件，並輸入一段Wikitext進行測試。如果代碼能夠正常高亮，則表示擴展可用，安裝沒有問題。
配置擴展並接入萌百API
如果需要使用到擴展的預覽功能，則需要接入萌娘百科的API。
萌娘百科的API地址：https://zh.moegirl.tw/api.php
- 以下為Wikitext擴展的配置方法：
- 點擊VS Code左下角的齒輪，選擇「設置」，打開設置界面；
- 在左側的目錄中找到「擴展」→「Wikitext」或直接在搜索框中輸入
@ext:rowewilsonfrederiskholme.wikitext； - 按照下表進行設置：
| 名稱 | 值 | 解釋 |
|---|---|---|
| Api Path | /api.php | 萌娘百科API地址。 |
| Article Path | / | 萌娘百科頁面地址。 |
| Enable JavaScript | 按需開啟 | 啟用預覽時對JS的支持。目前對萌百的兼容性較差。 |
| Get CSS | 開啟 | 啟用預覽時對CSS的支持。用作頁面的樣式設計。 |
| Preview CSS Style | div{color: black;line-height:2.2em} | 設置預覽時的默認樣式表。此處設置文字顏色為黑色以防止出現白底白字，也可寫上自己的樣式。 |
| Host | zh.moegirl.tw | 主站地址。 |
| Password | [密碼] | 用戶密碼。如果不需要使用帳號功能可不填。 |
| User Name | [用戶名] | 用戶名。如果不需要使用帳號功能可不填。 |
| WikiParser: Enable | 開啟 | 啟用WikiParser擴展以提供額外的編輯輔助功能。 |
| WikiParser: Sync Article Path | 開啟 | 自動同步Wikitext擴展和WikiParser擴展的Article Path設置。 |
或者，也可以通過修改code-workspace文件[1]來實現擴展的配置：
{
"folders": [
{
"path": "[工作區路徑]"
}
],
"settings":
{
"wikitext.host": "zh.moegirl.tw",
"wikitext.enableJavascript": true,
"wikitext.userName": "[用戶名]",
"wikitext.password": "[密碼]",
"wikitext.apiPath": "/api.php",
"wikitext.articlePath": "/",
"wikitext.getCss": true,
"wikitext.previewCssStyle": "div{color: black;line-height:2.2em}",
"wikitext.wikiparser.enable": true,
"wikitext.wikiparser.syncArticlePath": true
}
}
另外，上述設置中的默認樣式表是最低限度能正常顯示的樣式。如果希望能夠支持萌百的大部分樣式（比如黑幕等），則需要包含MediaWiki:Gadget-site-styles.css這個全站樣式表。
不過，你不需要下載以上文件，而是可以選擇直接從 GitHub 導入，將"wikitext.previewCssStyle"的內容替換為此代碼即可。
@import url('https://testingcf.jsdelivr.net/gh/MoegirlPediaInterfaceAdmins/MoegirlPediaInterfaceCodes/src/gadgets/site-styles/Gadget-site-styles.css');
設置完成後，可輸入一段wikitext，然後點擊右上角的預覽按鈕，或按Ctrl+⇧ Shift+V預覽，如果配置正確，將會在右邊看到條目的顯示效果（參見頭圖）。
使用Wikitext擴展
- 在VS Code中按下F1並搜索「Wikitext」即可看到所有支持的指令。目前擴展支持的指令如下：
- Wikitext: View the page
- 查看指定標題的頁面。
- Wikitext: Login with your account
- 如果設置好了用戶名和密碼，此功能可用來登錄您的帳號。
- Wikitext: Logout, if you are already logged in
- 登出已經登錄的帳號。
- Wikitext: Pull page to edit
- 提取指定標題的源碼以供編輯。目前萌百暫時不支持此功能，如果需要編輯請手動從網頁版萌百複製源碼。
- Wikitext: Get preview
- 預覽當前正在編輯的源碼的顯示效果。快捷鍵為Ctrl+⇧ Shift+V，或可以點擊右上角的預覽按鈕。
- Wikitext: Post your edit to the website
- 將編輯器的源碼提交到指定標題的頁面中。請注意，此功能會覆蓋整個頁面的源碼，在提交前請務必確定編輯器內的源碼是完整的，否則可能會對頁面造成破壞。可以考慮將源碼手動複製提交到網頁版上。
- Wikitext: Add a web citation
- 【實驗性】將網站域名轉換成引用格式。目前該功能不可用。
- Wikitext: Restart WikiParser LSP
- 在設置發生修改後重新啟動WikiParser擴展。
其他在VS code中編輯的小技巧
- 使用Ctrl/⌘ Cmd+F查找，使用Ctrl+H替換，支持正則查找。
- 使用Ctrl/⌘ Cmd+/可以注釋選中的內容，被注釋的內容不會在頁面中顯示出來。再按一次取消注釋。
- 選中所需內容後按下鍵盤上可配對的符號鍵（如"、{、[、<等）可以將內容用對應的符號框起來，可用來將普通文本轉寫為內部連結。
- 選中多行的情況下按Tab ↹鍵可在行首統一插入一個縮進，按⇧ Shift+Tab ↹將統一刪除行首的一個縮進，可用於整理排版。
- 按住滑鼠中鍵後拖動將會進入多行編輯模式，可以用來在行首快速添加列表符以及製作ASCII藝術。
- 可以使用預置代碼來減少鍵入，參見/預置代碼
問題排查
下面列舉在使用中可能存在的問題。
頁面無法預覽
- API是否配置正確？程序是否提示需要重啟？
- code-workspace文件的優先級高於全局設置（即settings.json），是否code-workspace的錯誤參數覆蓋了全局設置的參數？
- 將代碼放在沙盒上測試一下，是否存在讓萌百報錯的代碼？
- 試試編輯其他的頁面，也許擴展不支持萌百的某些特性？
- 如果原本能夠預覽後面突然就不能預覽了，可能是API訪問過於頻繁導致出現驗證碼，只需要登錄網頁版萌百通過驗證即可繼續預覽。
Wikitext: Add a web citation 生成引用失敗
此功能基於網際網路資料庫archive.org實現，該網站暫時無法在中國大陸正常訪問，目前也暫時沒有更換該資料庫的方式。
如果確實需要引用，可以以「[url][標題]-[作者]-[網站名稱]-[發表日期]-引用於[引用日期]」為格式撰寫
WikiParser擴展未啟動
勾選WikiParser: Enable設置項後可能需要手動執行Wikitext: Restart WikiParser LSP命令來啟動WikiParser擴展。
| |||||||||||||||||||||||||||||||||||