建站/WIKI功能/功能實現

出自Wired
跳至導覽跳至搜尋

擴展插件

请前往Category:All_extensions探索mediawiki官方收录的所有拓展及功能介绍、使用指南，本文亦是摘录于此。

基層建設

※ 區別於直接提供樣式的(如插入外鏈、劇透文本)，更多作用於基層依賴存在。

模塊

啟用Scribunto以開啟模塊(Module/lua腳本)功能：

  • 配置文件添加：
    • wfLoadExtension( 'Scribunto' );
    • $wgScribuntoDefaultEngine = 'luastandalone';
  • 給lua可執行權限（加粗部分請根據實際情況修改）：
    • 先cd到lua文件路徑下：cd /网站框架根目录/extensions/Scribunto/includes/Engines/LuaStandalone/binaries/
    • 查看當前路徑下有什麼文件夾：ls
      • 有幾個lua版本及系統信息的文件夾，以linux系統為例，就cd到：cd lua5_1_5_linux_64_generic（如果你不知道是64還是32位，那就是64位的）
    • 賦予權限：chmod a+x lua
    • 出現這種情況多半是在給擴展文件設定655權限時應用到了全局，覆蓋了原有權限。
  • 會增添「模塊」的命名空間，創建/導入頁面前請確保開啟此功能，否則後續再開啟會使模塊頁不生效、報錯。

微件

  • 下載擴展：Extension:Widgets：
  • 配置文件添加：wfLoadExtension( 'Widgets' );

安全的嵌入html代碼。

  • 安全是相對於直接#嵌入html代碼而言的，微件位於微件:命名空間內，以類似於模板的形式存在，特殊命名空間可以配置用戶編輯權限，一定程度上保障了不被濫用，並且也可以和模板配合完成一些複雜操作。

微件合集：https://www.mediawikiwidgets.org/Widgets_Catalog

小工具

一種使用js腳本或css樣式的工具，更有針對性，一般是實現某個功能。

涉及的頁面：

  • 啟用的小工具：MediaWiki:Gadgets-definition（默認不存在，新建即可）
    • 啟用的格式是在此頁添加行：* 小工具名称[各种选项]|相关的页面|相关的页面(若有)
    • 除此之外用戶可以自行設定標題樣式用以區分不同功能的小工具。
  • 小工具頁面：
    • 小工具的信息頁：MediaWiki:Gadget-小工具名称
    • js腳本：MediaWiki:Gadget-小工具名称.js
    • css樣式(若有)：MediaWiki:Gadget-小工具名称.css

當至少有一個小工具後，特殊:参数设置頁面會出現「小工具」選項卡，用戶可以選擇開啟/禁用某個特點的小工具。

嵌入html代碼

⚠️警告，这意味着具有编辑权限的用户都可以随意嵌入HTML代码，对于公共项目而言具有很大的安全隐患。⚠️

配置文件添加：

  • $wgRawHtml = true;

使用：

  • 在源代碼編輯器模式下，將內容放在<html>……</html>標籤中即可。

優點：

  • 可以像正常寫html代碼一樣寫內容，以便於較為簡單的使用一些高級功能，如嵌入各種文件和資源、省去研究各種擴展的時間和精力。

缺點：

  • 非wiki常規功能越多，可移植性越低，建議不要濫用；
  • 直接插入html所引用的外部資源穩定性不確定，也不利於索引，等問題累積成「歷史遺留因素」就不好維護了；
  • 儘管啟用該功能也仍不會解析js腳本部分，所以安全隱患少了很多，但不意味着沒有，尤其是通過css實現用戶無法分辨真實性的不受控元素。
  • mediawiki的用戶組權限設置非常極端，編輯權限是作用於整個命名空間而非某個頁面或某個功能，因此對於公共站點，請勿開啟此項功能，僅在只有自己和絕對可信的人具有編輯權限時啟用。

嵌入頁面

※ 詳見：Transclusion

被標記的文本在本頁(源頁面)及被嵌入時的宿主頁的表現形式：

源頁面 宿主頁面
<noinclude>被标记的文本</noinclude> 顯示 不顯示
<includeonly>被标记的文本</includeonly> 不顯示 顯示
<onlyinclude>被标记的文本</onlyinclude> 顯示 僅顯示

前兩個標記常用於模板，讓介紹信息僅在模板頁顯示，讓模板代碼僅在被調用(嵌入)時顯示（ 二次元老婆牆#在模板頁面使用特殊標記），對於頁面內容嵌入需求更常用：

  • <onlyinclude>：既在源頁面顯示、也在調用它的宿主頁顯示，當源頁面用了此標記而其他頁面嵌入它時，就只會嵌入被該標記包裹的內容。
    • 如果源頁面使用了多個此標記，記得標記一下換行符之類的， 因為對於宿主頁眼中只存在被此標記包裹的內容，每個標記間的文本都是沒有間隔的。

示例：wiki:聖王H的秘密基地導航頁#小更新日誌

注意事項：我主要配合#選項卡嵌入頁面(選項卡有較為醒目樣式及切換多個嵌入的頁面)，如果沒有安裝該擴展可以使用內置的嵌入方式(放置於要嵌入內容的位置)：{{:页面标题}}

  • 「:」是命名空間與標題的分隔符，不填寫命名空間與冒號雙花括號是按模板解析，填寫分隔符不填命名空間是按主空間解析；
  • 源頁面使用了標題引鏈的，點擊後會跳轉至源頁面，而不會在本頁定位。

預安裝

※ 框架自帶但並未啟用的

新建標籤頁打開外鏈

  • 配置文件添加：$wgExternalLinkTarget = '_blank';

內鏈還是替換當前頁面。

  • 但是注意 mediawiki等百科站的鏈接由於跨wiki链接的作用或會按照內鏈處理；
  • 我建議一律用鼠标中间 或 ctrl+左键单击 或 右键链接选择新建标签页打开的方式訪問鏈接。

嵌入外部js文件

從哪抄來的忘了（Manual:$wgHooks）：

$wgHooks['BeforePageDisplay'][] = function( OutputPage &$out, Skin &$skin ) {
     $code = <<<START_END_MARKER

<script> script标签内容 </script>

START_END_MARKER;

     $out->addHeadItem( 'WIKI', $code );
     return true;
};

但在mediawiki社區看人家用的是：

$wgHooks['BeforePageDisplay'][] = function( OutputPage &$out, Skin &$skin ) {

    out->addInlineScript( '<script>...</script>' );

};

我就臨時嵌入51.la的分析代碼，沒其他用途，就不深入研究了。其他實現方式：Extension:HeadScript

詩歌格式

  • 配置文件添加：wfLoadExtension( 'Poem' );
  • Extension:Poem
  • 詩歌與預排格式的基本形態都會渲染wikitext標記，除了刻意的使用wikitext外，更多的是常用符號如：「#」會被識別為列表，我建議一律使用#代碼塊。

wikitext/markdown需要兩個換行符(回車)才能是一個換行，該擴展提供的「<poem>‎……</poem>」標籤可以使內容一個換行符就是換一行。

輸入：

<poem>
第一行 https://scio.icu/webring/SCIO.png

 q 第三行 [[#诗歌格式|#诗歌格式]]
</poem>

輸出（為了區別用引用框住了）：

<poem>

第一行 https://scio.icu/webring/SCIO.png

q 第三行 #詩歌格式

</poem>

它可以解析wikitext語法，自然也能插入wiki內的圖片，但不會渲染出外鏈形式的圖片資源(能解析出文件名)，默認也是無任何樣式，但可以手動添加。 輸入：

<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em;">
我叫
谷人，
是
一个
家里蹲
回车派诗人。 
</poem>

輸出：

<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em;"> 我叫 谷人， 是 一個 家裡蹲 回車派詩人。 </poem>

代碼塊

SyntaxHighlight_GeSHi

  • 配置文件添加：wfLoadExtension( 'SyntaxHighlight_GeSHi' );
  • 給解析腳本設置可執行權限：chmod a+x /网站根目录/extensions/SyntaxHighlight_GeSHi/pygments/pygmentize
    • 如果不渲染樣式（或者編輯時渲染提交了不渲染）、不顯示行號，多半就是這個腳本出現了權限問題，出現這種情況多半是在給擴展文件設定655權限時應用到了全局，覆蓋了原有權限。。
  • Extension:SyntaxHighlight

可視化編輯器引用時可以在「插入」選項卡中選擇「代碼塊」，選定語言後可以自動高亮代碼（基於pygments，自2023年4月10日發布的2.15.0版本以來支持了wikitext語法）。

# 输入：
SCIOs = 5
name = "SCIO"
print('我是%s，SCIO系列站点目前有%d个分站' %(name,SCIOs))

# 输出：
我是SCIO，SCIO系列站点目前有5个分站

如果覺得代碼框有些大，可以在MediaWiki:Common.css添加如下行調縮放：

/* 缩小代码框 开始 */
.mw-highlight pre {
	font-size: 80%;
}
/* 缩小代码框 结束 */

已知問題：

  • 可視化編輯器下右側部分有時會出現光標定位與實際定位錯位，就像右側有一堵無形的牆壓縮了其字符寬度導致錯位；
    • 復刻方式是輸入中文引號“”，渲染是按全角字符，但編輯實際定位是按照半角字符寬度處理的。
  • 可視化編輯器下複製粘貼代碼進去時偶爾會出現視角置右的情況，就像一直按着右箭頭/end鍵；
    • 一般保存/關閉再打開就沒事了。

已棄用的給代碼塊(包括pre標籤)添加複製功能：

有很明顯的弊端：

  • 是pre標籤就是預排格式，通常一行的預排格式是起注釋或強調左右，而不是寫的代碼供人複製；
  • 鼠標浮動上去才顯示複製圖標，該圖標尺寸大於一行代碼也就導致代碼框高度發生變化，挺恍眼的；
  • 複製圖標會擠占代碼框內的文本，初心是好的，但會導致長代碼框內容僅因鼠標浮動就發生排版變化，恍眼。
  • 大觸可以試試修改其樣式，這個功能的作用說多不多、說少不少，要是這三點解決了，還是值得用上的。

已棄用的Highlightjs_Integration：

  • 下載擴展：Extension:SyntaxHighlight （記得重命名文件夾為：Highlightjs_Integration）
  • 配置文件添加：wfLoadExtension( 'Highlightjs_Integration' );

SyntaxHighlight的替代品，基於highlight.js，不顯示行號，不推薦。可以作為備用或圖它的預設樣式，兩者支持的語言區別自行探索吧。

已知的問題：

圖像映射

可以設定坐標實現如鼠標點擊哪個人物就跳轉到什麼文章上（原理）。

需要在源代碼模式下編輯，輸入（具體看官方文檔吧）：

  • 第一行是圖片文件名稱(需要是WIKI內部圖像)、位置、形態(如果是略縮圖則設置尺寸)，作者與鼠標懸浮圖片上提示的信息；
  • 第二行開始是具體的信息：
    • 形狀信息：矩形(rect)、圓形(circle)、多邊形(poly)
    • 坐標信息：示例是矩形，輸入左上角的坐標（327,135），再輸入右下角的坐標（627,209）；
    • 鏈接信息：普通的wikitext標記語言，內鏈用「[[页面标题|鼠标悬浮显示的信息]]」，外鏈用：「[url 提示文本]」
<imagemap>
文件:Webrings.png|center|略缩图|600像素| by scio|测试用途。
rect 327 135 627 209 [https://scio.icu/ 主站]
rect 173 216 472 289 [[圣王H的秘密基地导航页|WIKI]]
rect 478 216 778 289 [https://oicsp.scio.eu.org/ OICSp]
rect 173 360 472 433 [https://blog.scio.icu/ 博客]
rect 478 360 778 433 [https://scio.eu.org/ 实验室]
</imagemap>

示例：

<imagemap> 文件:Webrings.png|center|略縮圖|600像素| by scio|測試用途。 rect 327 135 627 209 主站 rect 173 216 472 289 WIKI rect 478 216 778 289 OICSp rect 173 360 472 433 博客 rect 478 360 778 433 實驗室 </imagemap>

跨WIKI鏈接

  • 配置文件添加：
wfLoadExtension( 'Interwiki' );
$wgGroupPermissions['sysop']['interwiki'] = true;

特殊:跨wiki：以內鏈的形式引用其他wiki站點的內容。

  • 以萌娘百科為例，點擊「添加」，前綴填寫「moegirl」(自定義的)，url填寫「https://zh.moegirl.org.cn/$1」，其他不用填寫。
  • 如此便可按wikitext語法插入目標wiki的頁面，例如：

其他

※ 預安裝但未介紹且我未實裝的。

  • Echo（通知功能）
  • InputBox（輸入框）：挺好的，但是主要用來創建頁面，而默認的搜索框就支持創建，只是多點一下鼠標。
  • Math（數學公式輸入）
  • MultimediaViewer（圖片瀏覽器）：mediaiwiki官網就是用的這個擴展，可以去看看。
  • PdfHandler（PDF處理）：嵌入pdf文件(需要先設置允許上傳pdf格式的文件)，默認就只是以圖片形式插入pdf(可以設定插入的頁碼)，也有配合Extension:Proofread_Page進行校對工作(見官網附圖)。其他類似工具：Extension:PDFEmbed。
  • Nuke（根據規則批量刪除頁面）：一般用在多人協作的情況下，純個人用途或可信人群範圍內的用途，就無所謂了。
  • OATHAuth（2FA）
  • CategoryTree（分類樹）：我之前喜歡用的一個功能，或許還能在比較久的頁面的末尾看到它們的身影。

非預安裝

CSS

  • 下載擴展：Extension:CSS
  • 配置文件添加：wfLoadExtension( 'CSS' );

給單頁面設定style，並作用於調用此資源的頁面。一般有三類用法（源代碼編輯器中操作）：

寫在當前頁面：

{{#css:
  body {
    background: yellow;
    font-size: 20pt;
    color: red;
  }
}}

※ 示例直接給body元素賦予了樣式，則此樣式將直接應用於當前頁面；如果給class屬性設定樣式，則應用於調用了該class屬性的元素中；遵守html/css書寫規範。

寫在模板：

  • 創建一個模板頁，寫入要設定的樣式，並在要調用它的頁面插入：{{创建的模板名称}}，即可將css樣式應用於該頁面。

寫在其他頁面：

  • 通常是是#子頁面的形式，在子頁面寫css代碼，在父頁面嵌入子頁面：{{:测试/样式}}（依據：#嵌入頁面）

另一種實現方式：Extension:TemplateStyles，有個規範就是樣式頁面必須以「.css」結尾，我沒那麼大的需求，沒試過這個擴展。

選項卡

※ 請在源代碼模式下編輯，其他替代品：Extension:Header_Tabs

嵌入內容及示例：

一般寫法（適用於純文本或基本樣式）：

<tabber>
|-|第一个选项卡=
第一个选项卡内容
|-|第二个选项卡标题=
第二个选项卡内容
|-|第三个选项卡标题=
第三个选项卡内容
* 无序列表项
* 无序列表项
</tabber>

適用於嵌套選項卡或標籤來實現高級樣式（可以回車）：

{{#tag:tabber
| 第一个选项卡标题 = 第一个选项卡内容
{{!}}-{{!}} 第二个选项卡标题 = 第二个选项卡内容
{{!}}-{{!}} 第三个选项卡标题 = 第三个选项卡内容
}}

嵌入頁面（依據：#嵌入頁面）：

<tabbertransclude>
第一个页面标题|第一个选项卡标题
第二个页面标题|第二个选项卡标题
第三个页面标题|第三个选项卡标题
</tabbertransclude>

※ 這是自定義選項卡標題，可以每行直接寫頁面標題，選項卡嵌入的就會是所寫內容為標題的頁面。

已知的問題：

  • 使用此標籤/解析器會將頁面添加到「使用Tabber解析器标签的页面」或「使用TabberTransclude解析器标签的页面」分類中；
  • 被嵌入頁面的代碼框在宿主頁上高亮失效，當是一些樣式/js功能不會被嵌入。

批量上傳

  • 下載擴展：Extension:MsUpload
  • 配置文件添加：
    • wfLoadExtension( 'MsUpload' );
    • $wgMSU_useDragDrop = true;

在源代碼編輯器下的編輯欄中會出現一個支持拖動上傳的矩形區域，可以批量上傳文件、便捷的修改文件名(也是文件的頁面名)、插入圖片鏈接，所支持的格式等與正常上傳無異。

批量刪除

批量刪除多個頁面：特殊:批量删除

頁面表單

除了通過表單快速創建模板/頁面還能用於查詢，但請移步官網查閱。

我總覺得它是預安裝的擴展，但在某次升級框架版本時發現框架中並沒有附帶它。

　

——————再往下就是我自己沒有實裝的了——————

頁面橫幅

※ 相較於 #公告 它可以自定義顯示通知的命名空間或頁面。

對單個頁面設置橫幅，頁面內插入：{{PAGEBANNER:无需命名空间前缀的文件名.jpg|pgname=左上角标题|tooltip=鼠标悬浮显示信息|link=目标页面}}；

應用於全局/指定命名空間需要在配置文件內添加代碼，見官網示例。

但我對其的定義是「曲線救國」，對於橫幅圖片您可能需要費點信息，反正我是不用。

翻譯插件

  • 需手動在擴展目錄下建立GoogleTranslator文件夾，並創建官網要求的四個文件、複製粘貼官網給出的內容到對應文件內：Extension:Google_Translator
  • 配置文件添加：
require_once "$IP/extensions/GoogleTranslator/GoogleTranslator.php";
$wgGoogleTranslatorOriginal  = 'zh';          
$wgGoogleTranslatorLanguages  = 'en,de,fr,nl,ru,es,hi,ar,pt,ja';

內嵌谷歌翻譯插件。具體需要的代碼等請移步官網，需要注意的是，第二行的目標語言，沒有順序上的意義，實際的列表是按照中文的拼音排序的，可能有方法控制，但我不知道。

已知的問題：在無法穩定訪問谷歌服務的地區會嚴重拖慢網站響應速度。

訪客計數器

  • 下載擴展：Extension:HitCounters：
  • 配置文件添加：wfLoadExtension( 'HitCounters' );
  • 需要運行命令更新配置：
    • cd /var/www/html/maintenance
    • php update.php

頁面底部會顯示單頁面的訪問量，特殊:统计信息會顯示統計信息；只統計啟用拓展後的記錄，每次緩存被刷新會再計數一次。

已知的問題：到處都是的不遵守規範的爬蟲會讓數據失去最後一絲參考意義。

其他

  • Extension:WikiMarkdownz：允許使用Markdown語法。
  • HeaderSections：給(正文部分的)標題設置樣式(css)。
  • Extension:WebP、Extension:EImage：對圖像的高級處理
    • 前者是支持創建webp及avif略縮圖並使用PictureHtmlSupport輸出內容，但我不管怎麼整都弄不好，本地安裝了libwebp(webp)、imagick，可以發現有webp和avif的文件夾出現，但是沒內容，權限也重新設置了，相關討論看了也看不出所以然；
    • 後者看描述是將外部圖片像內部圖片一樣創建略縮圖、尺寸、樣式，不知是否可以融入老婆牆中，到時候如果弄海報牆，內部圖片的話，1Mbps的小水管和吃不消。
    • 單純的圖像處理，還有個用於壓縮的：Extension:VipsScaler
    • 如果只是想預覽webp格式的圖片，但是無法創建略縮圖導致無法預覽什麼的，可能是系統缺少依賴：
      • apt install gcc
      • apt-get install build-essential
      • wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.4.0.tar.gz （來自：webp）
        • tar xvzf libwebp-1.4.0.tar.gz
        • cd libwebp-1.4.0
        • ./configure
        • make
        • sudo make install
      • apt install imagemagick
      • apt install php php-common gcc
      • apt install php-imagick
      • systemctl restart apache2

　

功能實現

嵌入圖片

※ 注意，若嵌入大量圖片，尤其是網絡質量(連接性)不好的外部服務器的網站，會使頁面加載堵塞，建議配合#懶加載使用。

  • 第一種方案：#插入內部圖片，默認的上傳功能。
    • 缺點是：僅支持png、​gif、​jpg、​jpeg、​webp格式的圖像；插入的圖片修改分辨率會創建各種尺寸的略縮圖，累積下來其文件體積非常大；對已經高度壓縮/優化的圖像而言，其創建的略縮圖比原圖都大。
  • 第二種方案：#允許插入外鏈圖像。
    • 優點是：可以解析外部圖像故能用圖床；對於我這種服務器帶寬很小且圖片是avif這種目前不受支持的格式的人而言較為好用。
    • 缺點是：僅僅啟用此功能缺乏控制，所以要配合 #控制外鏈圖像分辨率，才能使其好用些，但外部圖像始終限制太多，對於單純的插入圖像的需求來說比較適用。
  • 第三種方案：#通過HTML嵌入圖片。
    • 用html代碼實現，假若是私人wiki(無被理由嵌入惡意代碼風險)那就是第二種方案的完美替代品。
  • 第四種方案：#嵌入外部WIKI的圖片
    • 優點是：嵌入其他wiki的圖像，可以像嵌入內部圖像一樣被解析和控制。比如也可以用於通過cargo表組織的內容，以實現站點在小帶寬服務器上，圖片資源在其他外部服務器中（詳見具體章節），減少資源占用。
    • 缺點是：另一個站點也需要是mediawiki站，且僅支持添加一個。
  • 第四種方案：#嵌入全景圖片。
    • 允許解析360°全景照片。

插入內部圖片

  • 可以於編輯器內或特殊:上傳文件上傳圖片，若無法渲染webp圖片/無法為其創建略縮圖，請參考：#其他_2
  • 源代碼編輯器下基礎插入方式如下（含命名空間的文件頁面名稱、寬度，建議通過可視化編輯器調整參數再於源代碼編輯器下查看寫法）：
[[file:Screenshot 20240420-230038.png|100px]]

允許插入外鏈圖像

啟用後輸入圖片的url會自動渲染成圖片，但這個完全不可控（直接就是全尺寸），如果，啟用了又不想讓圖片url被渲染成圖像，可以用以下方式：

控制外鏈圖像分辨率

※ 需要先開啟外鏈圖像功能：#允許插入外鏈圖像，參考資料

> 在CSS樣式（MediaWiki:Common.css）中添加：

/*控制外链图像分辨率  开始*/
.externalimage-holder {
    position: relative;
}
.externalimage-holder img {
    width: 100%;
    height: auto;
}
/*控制外链图像分辨率  结束*/

> 新建頁面：模板:Image-size，粘貼以下代碼：

<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>

> 源代碼編輯器調用示例：

{{Image-size|100px|http://scio.icu/image/lain1.gif}}

> 渲染染結果：

https://scio.icu/image/lain1.gif

通過HTML嵌入圖片

※ 需要先啟用 #嵌入html代碼，我主要是用來嵌入.avif圖像，但這本身就是html代碼，因此您可以根據您的需求寫，我這裡只控制了寬度和讓其#懶加載。

普通的嵌入圖像的操作對.avif文件不生效，因此需要使用<html>標籤，代碼本身很簡單：

<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/PXL_20231021_053439723.avif' /></html>

我主要作用於起居注的食日記系列，這是我的操作流程，僅供參考：

  • （自動）Syncthing同步手機相冊到PC（安卓端默認可接受變動，PC端只設定監視更改，下面兩個不勾選也是同樣效果）；
  • 於PC執行命令：cp ~/图片/android/相机/*.jpg ~/文档/0-核心文档/1-Camera/1-食物记录/ && cp ~/图片/android/相机/*.jpg ~/下载/食日记/ && rm -rf ~/图片/android/相机/*.jpg && mogrify -resize 1200x900 -format avif ~/下载/食日记/*.jpg && rm -rf ~/下载/食日记/*.jpg
    • 意思為：複製一份圖片到備份文件夾、一份到操作文件夾，並從原文件夾中刪除圖像（手機相冊也會一同被刪除）；修改分辨率、轉格，並刪除操作文件夾中的.jpg文件。
  • 通過ftp(FileZilla/FTPrush)傳輸到網站目錄下；
    • 提前設定好雙端初始文件夾、傳輸時右鍵重命名複製文件名、傳輸完順便手動刪除圖片；
  • 在WIKI的可視化編輯器內複製一個嵌入的圖片並粘貼到要插入的位置；點擊編輯html代碼，在彈出卡片窗口喚醒粘貼版(diodon)粘貼文件名。

或許要寫一個微件來精簡下插入流程，畢竟原計劃作用於到處都是嵌入的圖片的食日記，而它停更了，目前沒有集中需要嵌入圖片的文章，所以要找一個用來複製的元素得點很多下（或許可以弄一個專門的測試頁）。

嵌入外部WIKI的圖片

※ 本打算用於二次元老婆牆，但棄用了，只做參考。

維基共享資源

※ 參考：InstantCommons

配置文件添加：

$wgForeignFileRepos[] = [
	'class' => ForeignAPIRepo::class,
	'name' => 'enwikipedia',
	'apibase' => 'https://scio.eu.org/project/favorites/api.php',
	'hashLevels' => 2,
	'fetchDescription' => true,
	'descriptionCacheExpiry' => 43200,
	'apiThumbCacheExpiry' => 86400,
];

※ 默認是使用 維基共享資源 的文件，將第四行的url改為你所需要的的：域名/api.php

接下來只需要像插入內部圖片一樣，若站內無此圖片則會試圖從設定的站點尋找同名文件。但我的需求是嵌入自己需要的圖片又不想占用本機帶寬，本以為此舉可以應對，但發現它會將圖片下載到本地並創建一堆略縮圖，引用的也是本機資源，區別就是省的重新上傳一遍文件(及創建文件頁面)。

再然後我靈機一動，將原images文件重命名為images_old(或者不給寫入權限)，(重啟apache後)發現其引用的圖片變為了另一個服務器的資源，於是這個問題就這麼被解決了，但我總感覺這不太保險， 可能會在未來版本被當作bug改掉(更希望成為功能的一部分)？代價是沒寫入權限，自己也沒法上傳文件。

  • 無法驗證此舉的有效性，因為這是在折騰二次元老婆牆時的產物，後續我直接將其放到了另一個服務器下。

NFS共享文件

服務端和客戶端都安裝：apt-get -y install nfs-kernel-server nfs-common

服務端：

  • 修改配置文件：nano /etc/exports
  • 添加行：/要共享出去的目录 共享目标的IP(*是所有人) (写入权限,sync,no_subtree_check)
    • 如：/var/www/html/scio.eu.org/project/images/images 120.xx.xxx.xxx (rw,sync,no_subtree_check)
  • 重啟nfs服務：systemctl restart nfs-server

客戶端：

  • 掛載遠程目錄：mount 服务端的ip地址:服务端的目录 挂载到的本地目录（掛載前建議先將文件名重命名以備用/避免文件丟失）
    • 如：mount 65.xx.xxx.xxx:/var/www/html/scio.eu.org/project/images/images /var/www/html/favorites/images
  • 取消掛載把命令換成umount就行了。

優勢：直接在本機操作，圖片存儲外外部服務器；

缺點：向主機請求資源，主機再通過nfs向服務器請求資源，主機做轉發/代理用途，與帶寬無益，甚至延遲更高(假若目標服務器速度網絡不怎麼樣)，只是減少了空間占用。

嵌入全景圖片

通過User:TheDJ創建的擴展：

在頁面按照正常插入圖片的方式插入（建議控制下寬度）：[[文件:全景照片.jpg|800px]]

對於全景圖片，圖片左上角會出現「360°」的字樣，點擊圖片就可以使其以全景照片的方式瀏覽：

  • 由於服務器只有1Mbps，所以託管到了：favorites:示例（僅娛樂實驗，可能會不正常工作）

已知問題：與#嵌入外部WIKI的圖片不兼容，正常渲染圖像，但鼠標點擊後會報錯提示無此文件，我本地測試是可以的，一開始以為是cf牆的問題，關了cf的代理、切換到本服務器的另一個站點(favorites)都不行，不知道具體原理，沒法處理。

嵌入YouTube視頻

通過擴展實現：

在源代碼編輯模式下使用標籤<youtube>视频的完整URL</youtube>插入ytb視頻。

通過微件實現：

※ 需要的前置工作：#微件。

> 創建微件:YouTube頁面，粘貼以下代碼（均為萌娘百科抄的，你可以根據需求調整）：

<includeonly><iframe width="<!--{$width|escape:'html'|validate:int|default:'425'}-->" height="<!--{$height|escape:'html'|validate:int|default:355}-->" src="https://www.youtube.com/embed/<!--{if isset($playlist)}-->?listType=playlist&list=<!--{$playlist|escape:'urlpathinfo'}--><!--{else}--><!--{$id|escape:'urlpathinfo'}--><!--{/if}-->" frameborder="0" allowfullscreen></iframe></includeonly>

> 創建模板:YouTube頁面，粘貼以下代碼：

<includeonly>{{#if:{{{id|{{{1|}}}}}}|{{#widget:YouTube|id={{{id|{{{1|}}}}}}|width={{{width|625}}}|height={{{height|350}}}}}|{{#if:{{{playlist|}}}|{{#widget:YouTube|playlist={{{playlist|}}}|width={{{width|625}}}|height={{{height|350}}}}}|}}}}</includeonly>

共四個有效參數：id(視頻ID)、playlist(播放列表ID)(兩者不能同時存在)，以及width(寬度)、height(高度)（可以留空不填，不需要帶後綴，默認單位px）

> 源代碼編輯器調用示例：

  • 視頻的ID（URL中「watch?v=」後面的字符串）：
{{YouTube|id=3U_LjQKV4FM|width=300}}
  • 播放列表（URL中「list=」後面的字符串）：
{{YouTube|playlist=OLAK5uy_nrxtDaW31fja4eh5HZQaaxeTe5e9EK1o0|width=400}}

通過HTML代碼實現：

  • 一般視頻網站的分享功能會提供嵌入代碼。

鼠標懸浮顯示引用文本

※ 需要先啟用擴展：Cite(初始化安裝的)、#小工具

來源：Reference_Tooltips

新建並複製粘貼如下頁面：

在MediaWiki:Gadgets-definition頁面啟用小工具（插入行）：

* ReferenceTooltips[ResourceLoader|default|type=general|dependencies=mediawiki.cookie,jquery.client]|ReferenceTooltips.js|ReferenceTooltips.css

效果（如果沒反應請嘗試刷新緩存）：

隱藏內容

摺疊

源代碼編輯器下插入代碼：

<div class="toccolours mw-collapsible mw-collapsed" style="width:400px; overflow:auto;">
点击展开查看详情
<div class="mw-collapsible-content">
详</br>
情
<span style="color:red">在</span>此
</div>
</div>

渲染結果：

點擊展開查看詳情

詳

情 在此

※ 可視化編輯器下可以修改元素，如回車會轉為<br>標籤，可以進行基本的文字編輯；源代碼編輯器下只能手動搓html代碼(只支持：#嵌入html代碼)。

劇透

  • 下載擴展：Extension:Spoilers 記得重命名文件夾為：Spoilers
  • 配置文件添加：wfLoadExtension( 'Spoilers' );

官網提示的用法可以用，但我採用的是另一種用法：「<spoiler show="折叠时提示文本" hide="展开后提示文本">正文</spoiler>」示例：

※ 其實叫摺疊更加恰當。

※ 無法通過可視化編輯器直接調用，不過這類標籤我都是複製粘貼一個當模板一直套用，可以在可視化編輯器內編輯內容，也可以編輯參數（就是提示文本）；跟代碼塊一樣，一個換行符/回車就是一行；正常解析wikitext標記語言。

※ 默認提示與風格就需要自行修改擴展源代碼了，我沒那個水平就不硬上了，如果你進行了美化歡迎與我分享配置。

黑幕

※ 需要啟用#CSS，代碼來源於lobba

新版本有兼容性問題

新建並複製粘貼：模板:黑幕、模板:黑幕CSS（頁內有效果測試）

  • 實現方式：模板:黑幕只是加載了模板:黑幕CSS，參數被class="spoiler"的span標籤包含，spoiler的樣式由黑幕CSS設定。
  • 所以一般調用方式（黑幕文本）：{{黑幕|要黑幕的文本}}
  • 特殊情況（對div、span標籤使用）：在頁面添加空白參數：{{黑幕|}}或{{黑幕CSS}}（兩者效力一致，因為用前者的目的也只是它加載了後者所設定的css樣式）並以以下方式調用：
    • 適用於一行文本：内容</span>
    • 適用於一塊區域：
      内容</div>
    • ※ 作用於當前頁面所有clacss屬性為spoiler的內容，即您可以啟用#嵌入html代碼，使任意HTML調用此樣式。

如果想實現更多功能，可以嘗試偷一下萌娘百科的(引自鏡像站)：Template:黑幕、Template:文字模糊

取自「https://wired.scio.icu/index.php?title=建站/WIKI功能/功能实现&oldid=246」