一般写法(适用于纯文本或基本样式):
<tabber>
|-|第一个选项卡=
第一个选项卡内容
|-|第二个选项卡标题=
第二个选项卡内容
|-|第三个选项卡标题=
第三个选项卡内容
* 无序列表项
* 无序列表项
</tabber>
请前往Category:All_extensions探索mediawiki官方收录的所有拓展及功能介绍、使用指南,本文亦是摘录于此。
※ 区别于直接提供样式的(如插入外链、剧透文本),更多作用于基层依赖存在。
启用Scribunto以开启模块(Module/lua脚本)功能:
wfLoadExtension( 'Scribunto' );
$wgScribuntoDefaultEngine = 'luastandalone';
cd /网站框架根目录/extensions/Scribunto/includes/Engines/LuaStandalone/binaries/
ls
cd lua5_1_5_linux_64_generic
(如果你不知道是64还是32位,那就是64位的)chmod a+x lua
wfLoadExtension( 'Widgets' );
安全的嵌入html代码。
微件:
命名空间内,以类似于模板的形式存在,特殊命名空间可以配置用户编辑权限,一定程度上保障了不被滥用,并且也可以和模板配合完成一些复杂操作。微件合集:https://www.mediawikiwidgets.org/Widgets_Catalog
wfLoadExtension( 'Gadgets' );
一种使用js脚本或css样式的工具,更有针对性,一般是实现某个功能。
涉及的页面:
MediaWiki:Gadgets-definition
(默认不存在,新建即可)
* 小工具名称[各种选项]|相关的页面|相关的页面(若有)
MediaWiki:Gadget-小工具名称
MediaWiki:Gadget-小工具名称.js
MediaWiki:Gadget-小工具名称.css
当至少有一个小工具后,特殊:参数设置
页面会出现“小工具”选项卡,用户可以选择开启/禁用某个特点的小工具。
⚠️警告,这意味着具有编辑权限的用户都可以随意嵌入HTML代码,对于公共项目而言具有很大的安全隐患。⚠️
配置文件添加:
$wgRawHtml = true;
使用:
<html>……</html>
标签中即可。优点:
缺点:
※ 详见:Transclusion
被标记的文本在本页(源页面)及被嵌入时的宿主页的表现形式:
源页面 | 宿主页面 | |
---|---|---|
<noinclude>被标记的文本</noinclude>
|
显示 | 不显示 |
<includeonly>被标记的文本</includeonly>
|
不显示 | 显示 |
<onlyinclude>被标记的文本</onlyinclude>
|
显示 | 仅显示 |
前两个标记常用于模板,让介绍信息仅在模板页显示,让模板代码仅在被调用(嵌入)时显示( 二次元老婆墙#在模板页面使用特殊标记),对于页面内容嵌入需求更常用:
<onlyinclude>
:既在源页面显示、也在调用它的宿主页显示,当源页面用了此标记而其他页面嵌入它时,就只会嵌入被该标记包裹的内容。
注意事项:我主要配合#选项卡嵌入页面(选项卡有较为醒目样式及切换多个嵌入的页面),如果没有安装该扩展可以使用内置的嵌入方式(放置于要嵌入内容的位置):{{:页面标题}}
※ 框架自带但并未启用的
$wgExternalLinkTarget = '_blank';
內链还是替换当前页面。
跨wiki链接
的作用或会按照内链处理;鼠标中间
或 ctrl+左键单击
或 右键链接选择新建标签页打开
的方式访问链接。从哪抄来的忘了(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' );
#
”会被识别为列表,我建议一律使用#代码块。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
可视化编辑器引用时可以在“插入”选项卡中选择“代码块”,选定语言后可以自动高亮代码(基于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%;
}
/* 缩小代码框 结束 */
已知问题:
“”
,渲染是按全角字符,但编辑实际定位是按照半角字符宽度处理的。已弃用的给代码块(包括pre标签)添加复制功能:
wfLoadExtension( 'PreToClip' );
有很明显的弊端:
已弃用的Highlightjs_Integration
:
下载扩展:Extension:SyntaxHighlight (记得重命名文件夹为:Highlightjs_Integration
)配置文件添加:wfLoadExtension( 'Highlightjs_Integration' );
SyntaxHighlight的替代品,基于highlight.js,不显示行号,不推荐。可以作为备用或图它的预设样式,两者支持的语言区别自行探索吧。
已知的问题:
默认与SyntaxHighlight都用“syntaxhighlight
”或“source
”标签;默认风格是黑底,对于mediawiki的默认白色页面来说太刺眼了。
highlightjs的风格演示界面:https://highlightjs.org/demo,虽然我没发现适合的风格。参考官网:Extension:Highlightjs_Integration#Configuration 修改配置即可。
wfLoadExtension( 'ImageMap' );
可以设定坐标实现如鼠标点击哪个人物就跳转到什么文章上(原理)。
需要在源代码模式下编辑,输入(具体看官方文档吧):
[[页面标题|鼠标悬浮显示的信息]]
”,外链用:“[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>
wfLoadExtension( 'Interwiki' );
$wgGroupPermissions['sysop']['interwiki'] = true;
特殊:跨wiki
:以内链的形式引用其他wiki站点的内容。
moegirl
”(自定义的),url填写“https://zh.moegirl.org.cn/$1
”,其他不用填写。[[moegirl:桐间纱路]]
的渲染结果为:moegirl:桐间纱路[[moegirl:桐间纱路|纱路酱]]
的渲染结果为:纱路酱※ 预安装但未介绍且我未实装的。
wfLoadExtension( 'CSS' );
给单页面设定style,并作用于调用此资源的页面。一般有三类用法(源代码编辑器中操作):
写在当前页面:
{{#css:
body {
background: yellow;
font-size: 20pt;
color: red;
}
}}
※ 示例直接给body元素赋予了样式,则此样式将直接应用于当前页面;如果给class属性设定样式,则应用于调用了该class属性的元素中;遵守html/css书写规范。
写在模板:
{{创建的模板名称}}
,即可将css样式应用于该页面。写在其他页面:
另一种实现方式:Extension:TemplateStyles,有个规范就是样式页面必须以“.css”结尾,我没那么大的需求,没试过这个扩展。
※ 请在源代码模式下编辑,其他替代品:Extension:Header_Tabs
wfLoadExtension( 'TabberNeue' );
嵌入内容及示例:
一般写法(适用于纯文本或基本样式):
<tabber>
|-|第一个选项卡=
第一个选项卡内容
|-|第二个选项卡标题=
第二个选项卡内容
|-|第三个选项卡标题=
第三个选项卡内容
* 无序列表项
* 无序列表项
</tabber>
适用于嵌套选项卡或标签来实现高级样式(可以回车):
{{#tag:tabber
| 第一个选项卡标题 = 第一个选项卡内容
{{!}}-{{!}} 第二个选项卡标题 = 第二个选项卡内容
{{!}}-{{!}} 第三个选项卡标题 = 第三个选项卡内容
}}
嵌入页面(依据:#嵌入页面):
<tabbertransclude>
第一个页面标题|第一个选项卡标题
第二个页面标题|第二个选项卡标题
第三个页面标题|第三个选项卡标题
</tabbertransclude>
※ 这是自定义选项卡标题,可以每行直接写页面标题,选项卡嵌入的就会是所写内容为标题的页面。
已知的问题:
使用Tabber解析器标签的页面
”或“使用TabberTransclude解析器标签的页面
”分类中;
wfLoadExtension( 'MsUpload' );
$wgMSU_useDragDrop = true;
在源代码编辑器下的编辑栏中会出现一个支持拖动上传的矩形区域,可以批量上传文件、便捷的修改文件名(也是文件的页面名)、插入图片链接,所支持的格式等与正常上传无异。
wfLoadExtension( 'DeleteBatch' );
批量删除多个页面:特殊:批量删除
Extension:Page_Forms
wfLoadExtension( 'PageForms' );
除了通过表单快速创建模板/页面还能用于查询,但请移步官网查阅。
我总觉得它是预安装的扩展,但在某次升级框架版本时发现框架中并没有附带它。
——————再往下就是我自己没有实装的了——————
※ 相较于 #公告 它可以自定义显示通知的命名空间或页面。
wfLoadExtension( 'MsUpload' );
对单个页面设置横幅,页面内插入:{{PAGEBANNER:无需命名空间前缀的文件名.jpg|pgname=左上角标题|tooltip=鼠标悬浮显示信息|link=目标页面}}
;
应用于全局/指定命名空间需要在配置文件内添加代码,见官网示例。
但我对其的定义是“曲线救国”,对于横幅图片您可能需要费点信息,反正我是不用。
GoogleTranslator
文件夹,并创建官网要求的四个文件、复制粘贴官网给出的内容到对应文件内:Extension:Google_Translatorrequire_once "$IP/extensions/GoogleTranslator/GoogleTranslator.php";
$wgGoogleTranslatorOriginal = 'zh';
$wgGoogleTranslatorLanguages = 'en,de,fr,nl,ru,es,hi,ar,pt,ja';
内嵌谷歌翻译插件。具体需要的代码等请移步官网,需要注意的是,第二行的目标语言,没有顺序上的意义,实际的列表是按照中文的拼音排序的,可能有方法控制,但我不知道。
已知的问题:在无法稳定访问谷歌服务的地区会严重拖慢网站响应速度。
wfLoadExtension( 'HitCounters' );
cd /var/www/html/maintenance
php update.php
页面底部会显示单页面的访问量,特殊:统计信息
会显示统计信息;只统计启用拓展后的记录,每次缓存被刷新会再计数一次。
已知的问题:到处都是的不遵守规范的爬虫会让数据失去最后一丝参考意义。
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
※ 注意,若嵌入大量图片,尤其是网络质量(连接性)不好的外部服务器的网站,会使页面加载堵塞,建议配合#懒加载使用。
[[file:Screenshot 20240420-230038.png|100px]]
$wgAllowExternalImages = true;
启用后输入图片的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}}
> 渲染染结果:
※ 需要先启用 #嵌入html代码,我主要是用来嵌入.avif图像,但这本身就是html代码,因此您可以根据您的需求写,我这里只控制了宽度和让其#懒加载。
普通的嵌入图像的操作对.avif
文件不生效,因此需要使用<html>
标签,代码本身很简单:
<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/PXL_20231021_053439723.avif' /></html>
我主要作用于起居注的食日记系列,这是我的操作流程,仅供参考:
cp ~/图片/android/相机/*.jpg ~/文档/0-核心文档/1-Camera/1-食物记录/ && cp ~/图片/android/相机/*.jpg ~/下载/食日记/ && rm -rf ~/图片/android/相机/*.jpg && mogrify -resize 1200x900 -format avif ~/下载/食日记/*.jpg && rm -rf ~/下载/食日记/*.jpg
或许要写一个微件来精简下插入流程,毕竟原计划作用于到处都是嵌入的图片的食日记,而它停更了,目前没有集中需要嵌入图片的文章,所以要找一个用来复制的元素得点很多下(或许可以弄一个专门的测试页)。
※ 本打算用于二次元老婆墙,但弃用了,只做参考。
维基共享资源
※ 参考: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)
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°”的字样,点击图片就可以使其以全景照片的方式浏览:
已知问题:与#嵌入外部WIKI的图片不兼容,正常渲染图像,但鼠标点击后会报错提示无此文件,我本地测试是可以的,一开始以为是cf墙的问题,关了cf的代理、切换到本服务器的另一个站点(favorites)都不行,不知道具体原理,没法处理。
通过扩展实现:
wfLoadExtension( '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)
> 源代码编辑器调用示例:
watch?v=
”后面的字符串):{{YouTube|id=3U_LjQKV4FM|width=300}}
list=
”后面的字符串):{{YouTube|playlist=OLAK5uy_nrxtDaW31fja4eh5HZQaaxeTe5e9EK1o0|width=400}}
通过HTML代码实现:
※ 需要先启用扩展:Cite(初始化安装的)、#小工具
新建并复制粘贴如下页面:
MediaWiki:Gadget-ReferenceTooltips.js
MediaWiki:Gadget-ReferenceTooltips.css
MediaWiki:Gadget-ReferenceTooltips
在MediaWiki:Gadgets-definition页面启用小工具(插入行):
* ReferenceTooltips[ResourceLoader|default|type=general|dependencies=mediawiki.cookie,jquery.client]|ReferenceTooltips.js|ReferenceTooltips.css
效果(如果没反应请尝试刷新缓存):
collapsible
),详见:Manual:Collapsible_elements源代码编辑器下插入代码:
<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代码)。
Spoilers
wfLoadExtension( 'Spoilers' );
官网提示的用法可以用,但我采用的是另一种用法:“<spoiler show="折叠时提示文本" hide="展开后提示文本">正文</spoiler>
”示例:
你好。 我是SCIO。 https://scio.icu/image/scio.png
https://scio.icu/image/touxiang.gif※ 其实叫折叠更加恰当。
※ 无法通过可视化编辑器直接调用,不过这类标签我都是复制粘贴一个当模板一直套用,可以在可视化编辑器内编辑内容,也可以编辑参数(就是提示文本);跟代码块一样,一个换行符/回车就是一行;正常解析wikitext标记语言。
※ 默认提示与风格就需要自行修改扩展源代码了,我没那个水平就不硬上了,如果你进行了美化欢迎与我分享配置。
新版本有兼容性问题
新建并复制粘贴:
模板:黑幕
、模板:黑幕CSS(页内有效果测试)
模板:黑幕
只是加载了模板:黑幕CSS
,参数被class="spoiler"
的span标签包含,spoiler的样式由黑幕CSS设定。{{黑幕|要黑幕的文本}}
{{黑幕|}}
或{{黑幕CSS}}
(两者效力一致,因为用前者的目的也只是它加载了后者所设定的css样式)并以以下方式调用:内容</span>
内容</div>
如果想实现更多功能,可以尝试偷一下萌娘百科的(引自镜像站):Template:黑幕、Template:文字模糊