使用源代码编辑MediaWiki


  • 泼墨挥毫 鱼苗

    CC0 1.0
    本作品文字部分采用 CC0 1.0 通用 (CC0 1.0) 进行许可,
    图像部分遵守其原来的版权协定。

    你可以在这里了解到如何使用源代码编辑MediaWiki。

    或许还会了解一些HTML也说不定

    这文章很无聊。
    — Aunst, 阅读完全文之后的感想。

    前言

    有人可能会问: "可视化编辑器它不香吗? ", 不, 并不是不支持可视化编辑器, 而是在没有可视化编辑器的情况下提供纯粹的帮助。而且可视化编辑器的代码看着让我这个强迫症很难受 (小声)

    为啥写这篇文章?

    • 水经验
    • 骗赞
    • 推广源代码编辑

    目录

    1F (此楼) 前言, 更新日志, 以及别的什么
    16F 基础Wikitext
    17F 列表, 超链接
    18F 图片

    更新日志

    2020/06/16 - 更新链接以及图像的一部分。


    Aunst首次来到 RIA|Zth Wiki 发生的事

    某天, Aunst来到了 RIA|Zth Wiki, 映入他眼帘的是?
    RIA_Zth_Wiki-MainPage.png
    Aunst (简称A/Au) : 那么这儿就是 RIA|Zeroth Wiki 了?
    Aunst: 用户似乎很多啊。

    他注册了一个账号
    Aunst: 唔唔, 我写点啥呢?
    Aunst: 写自己住的地方吧。

    于是就在搜索栏里输入聚落名 "抹岚", 搜索
    RIA_Zth_Wiki-TopNav-Search-Matlantic.png
    RIA_Zth_Wiki-Search_result-Matliantic-1.png

    点击了 "抹岚" 红链, 进入到了那个页面
    RIA_Zth_Wiki-Create_page-Matlantic.png

    Aunst: 嗯? 怎么感觉不太对劲?

    SfMS_Wiki-Editing_a_page.png
    (Aunst看惯的编辑界面)

    Aunst访问了Wiki上的 特殊:版本 页面
    RIA_Zth_Wiki-Special-Version-1.png
    噔噔咚 (绝望)
    Aunst: 什么啊这Wiki? 版本会不会有点低啊? (目前稳定版本为1.34.0。 仍受支持的版本是1.33.2。 仍受支持的长期支持版本是1.31.6。)
    Aunst: 而且只有移动前端和可视化编辑器两个扩展? 怪不得界面那样...
    Aunst: 没有Echo扩展就代表收不到Wiki上的通知...怪不得移动版页面右上角没有OOjs UI icon bell这个图标...



  • 是源代码编辑战士,我爱了


  • 泼墨挥毫

    @Aunst 源代码好评
    CC好评


  • 泼墨挥毫

    论坛最近好多这种教程啊,边聊天(✔)边学习(✘),这样的论坛我爱了


  • 泼墨挥毫

    @czs233 1.0差评
    跟我一起3.0阿


  • 泼墨挥毫 鱼苗

    @czs233 4.0不好吗
    虽说CC0协定只有1.0


  • 泼墨挥毫

    @Aunst 非本地化大法好



  • 我 看 晕 了



  • (可视化编辑他不香吗XD
    不过源代码编辑确实nb!
    #问一嘴淡红底+红字怎么做的


  • 泼墨挥毫 鱼苗

    @Arthals 是红色等宽字体 (code标签) 吗, 是这样:

    ` 内容 `  
    

    得到
    内容



  • @Aunst soga!


  • 鱼乐社 轨交社 百游社 泼墨挥毫

    ¿?¿?¿?¿?¿?看蒙了


  • 泼墨挥毫 鱼苗

    @GHZCreeper丶抹岚社帕酱
    这样啊....
    我找时间重写一下, 优化下结构


  • 鱼乐社 轨交社 百游社 泼墨挥毫

    233
    话说用户页之前表格怎么整的


  • 泼墨挥毫 鱼苗

    @GHZCreeper丶抹岚社帕酱 Wiki里吗, 那是HTML+CSS


  • 泼墨挥毫 鱼苗

    那么我打算重写, 新开 (几) 层楼吧

    基础

    关于使用源代码编辑, 你只需要点击页面右上方的编辑源代码; 如果是移动版的话, 只需要点击段落右上方的编辑图标。

    编辑相关

    直接在文本框内输入内容就可以开始编辑了。

    换行

    开始用MediaWiki时我也被换行困扰过, 后来发现其实很简单。

    你只需要在编辑文本框里换两次行, 如:

    第一行
    
    第二行
    

    这其实在HTML里等同于

    <p>第一行</p>
    <p>第二行</p>
    

    其实就是起一个新段落。

    如果在不想起新段落的情况下另起一行的话, 你可以在第一行的行末/第二行的行初添加HTML标签 <br /> (换行标签) , 但这种做法很不常用。

    • <br /> 也有 <br><br/> 的写法
      • <br> 是原写法, 无关闭; <br/> 是XML写法, 正确关闭, <br /> 是XML+HTML兼容写法, 也是正确关闭的。
      • 但是我极力推荐使用第二种或者第三种写法, 那才是将标签正确关闭的写法, 同时较好理解。

    特殊Wikitext - 1

    标题

    标题是用一个或者多个等号 (=) 圈起来的文本, 必须占单独的一行, 像Markdown一样, 有6个级别的标题, 例如

    = 1级标题 =
    == 2级标题 ==
    === 3级标题 ===
    ==== 4级标题 ====
    ===== 5级标题 =====
    ====== 6级标题 ======
    

    注意: 1级标题不应该在条目内使用, 它是用在页面的标题 (页面最上方) 的。

    一般来说, 使用2级, 3级和4级标题就足够了。

    顺带一提, 与其等价的HTML标签是 <h1>...</h1><h6>...<h6>

    文本格式

    粗体
    粗体是用三个半角单引号 ( ' ) 圈起来的文本, 像这样:

    '''Cherrytown''' 是一个城...
    

    得到: Cherrytown 是一个城...

    与之等价的HTML标签是 <b>...</b> , 不要和 <strong>...</strong> 搞混了。

    斜体
    斜体是用两个半角单引号 ( ' ) 圈起来的文本, 像这样:

    所谓的 "超级秘密设置" (英语: ''Super Secret Settings'') 其实是...
    

    得到: 所谓的 "超级秘密设置" (英语: Super Secret Settings) 其实是...

    与之等价的HTML标签是 <i>...</i> , 不要和 <em>...</em> 搞混了。

    粗斜体
    粗斜体其实是把粗体标记和斜体标记放在一起, 也就是5个单引号, 使用例如下:

    我, Aunst, 顶帖, '''''更新'''''。
    <!-- 事实上是顶了也不一定会更新 -->
    

    得到: 我, Aunst, 顶帖, 更新

    似乎没有与之等价的HTML标签, 但是你可以这样做: <b><i>...</i></b>
    实际上MediaWiki似乎的确是这样做的

    上标下标
    上下标只能用HTML标签来定义, 使用 <sup>...</sup> 定义上标, <sub>...</sub> 定义下标, 如:

    x<sup>2</sup>=4, x<sub>1</sub>=2, x<sub>2</sub>=-2
    

    得到
    MediaWiki-HTML-tag-sub_sup-1.png
    Markdown居然没有上下标, 诉讼

    等我更新


  • 泼墨挥毫 鱼苗

    在这层楼你将会看到...
    列表 (有序, 无序, 描述) 和链接

    列表

    有序列表

    有序列表是使用数字序号 (1. 2. 3. 4. ...) 排序的列表

    有序列表是通过在行首添加井号 ( # ) 来实现的, 比如

    # 打开Minecraft 1.13.2
    # 进入 RIA Zeroth 服务器
    # 看看抹岚的变化
    # 退出 RIA Zeroth 服务器
    # 关闭Minecraft 1.13.2
    <!-- Aunst 的真实写照 -->
    

    得到:

    1. 打开Minecraft 1.13.2
    2. 进入 RIA Zeroth 服务器
    3. 看看抹岚的变化
    4. 退出 RIA Zeroth 服务器
    5. 关闭Minecraft 1.13.2

    注意: 在井号后面的空格是可选的, 我那样写是因为我觉得那样看起来舒服。

    当然你也可以设置多层列表, 只需要多打几个井号, 像下面那样:

    # 打开Minecraft 1.13.2
    # 进入 RIA Zeroth 服务器
    # 看看抹岚的变化
    ## 有时候可能会挖挖矿
    ## 或者修下地狱铁路
    # 退出 RIA Zeroth 服务器
    # 关闭Minecraft 1.13.2
    <!-- Aunst 的真实写照 -->
    

    这将会得到:

    1. 打开Minecraft 1.13.2
    2. 进入 RIA Zeroth 服务器
    3. 看看抹岚的变化
      1. 有时候可能会挖挖矿
      2. 或者修下地狱铁路
    4. 退出 RIA Zeroth 服务器
    5. 关闭Minecraft 1.13.2

    注意: 在一个列表里面的列表项应该紧邻另一个列表项, 如下图的对比:

    # Item 1
    
    # Item 2
    
    # Item 3
    

    错误示范

    # Item 1
    # Item 2
    # Item 3
    

    正确示范

    当然, 多个列表紧挨在一起也需要正确分组, 比如

    # List 1 item 1
    # List 1 item 2
    # List 1 item 3
    # List 2 item 1
    # List 2 item 2
    

    错误示范

    如果这样搞的话, 就吹出现类似于

    1. List 1 item 1
    2. List 1 item 2
    3. List 1 item 3
    4. List 2 item 1
    5. List 2 item 2

    这样的地狱绘图

    # List 1 item 1
    # List 1 item 2
    # List 1 item 3
    
    # List 2 item 1
    # List 2 item 2
    

    正确示范

    1. List 1 item 1
    2. List 1 item 2
    3. List 1 item 3
    1. List 2 item 1
    2. List 2 item 2

    非常简介, 一目了然。

    HTML表示

    1. Item 1
    2. Item 2
    3. Item 3
      1. Item 3-1
      2. Item 3-2
    4. Item 4

    与其等价的HTML标签是:

    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <ol>
        <li>Item 3-1</li>
        <li>Item 3-2</li>
        ...
      </ol>
      <li>Item 4</li>
      ...
    </ol>
    

    注意, <ol>...</ol> 是有序列表标签, <li>...</li> 是列表项标签。

    无序列表

    无序列表是每行前使用圆点标记的列表。

    无序列表的代码和有序列表差不多, 把行首的井号 ( # ) 换成星号 ( * ) 就可以了, 如下例:

    * SCP-1000 - 大脚怪
    * SCP-2000 - 机械降神
    * SCP-3000 - 阿难陀舍沙
    * <span style="color: rgb(79,143,95);">禁忌之地</span>
    * SCP-5000 - 为什么?
    
    * SCP-CN-1000 - 2300
    
    * SCP-1000-JP - 特别回收任务
    * SCP-2000-JP - 信使
    
    <!-- SCP基金会 各个 "千" 竞赛的优胜作品 -->
    
    • SCP-CN-1000 - 2300

    当然也有玩梗

    对, 类似于有序列表, 无序列表也可以嵌套, 如:

    * 东直门
    ** 换乘2号线
    * 三元桥
    ** 换乘10号线
    * T3航站楼
    * T2航站楼
    

    得到:

    • 东直门
      • 换乘2号线
    • 三元桥
      • 换乘10号线
    • T3航站楼
    • T2航站楼

    由于无序列表项不好辨识是哪个列表里的, 所以正确分组也就更加重要

    你不能这样写

    * List 1 item 1
    
    * List 1 item 2
    
    * List 1 item 3
    
    • List 1 item 1

    • List 1 item 2

    • List 1 item 3

    神啊, 救救这个编辑者吧

    正确示范:

    * List 1 item 1
    * List 1 item 2
    * List 1 item 3
    
    • List 1 item 1
    • List 1 item 2
    • List 1 item 3

    HTML表示

    • Item 1
    • Item 2
    • Item 3
      • Item 3-1
      • Item 3-2
    • Item 4

    与其等价的HTML标签是:

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <ul>
        <li>Item 3-1</li>
        <li>Item 3-2</li>
        ...
      </ul>
      <li>Item 4</li>
      ...
    </ul>
    

    其实和上面的有序列表差不多, 只要把 <ol>...</ol> 换成 <ul>...</ul> 就行

    描述列表

    描述列表...是用于...干啥的来着? 反正就是可以生成一个项目/名字, 然后后面会跟着项目/名字的描述。

    • 通过在项目那行的行首添加 ; 来定义项目;
      • 项目会以粗体显示
    • 项目下面一行, 在行首添加 : 来定义描述。
      • 描述会向右边缩进40px;

    非典型描述列表

    咖啡
            黑色的、热的的饮品
    牛奶
            白色的、冷的的饮品

    源代码:

    ; 咖啡
    : 黑色的、热的饮品
    ; 牛奶
    : 白色的、冷的饮品
    

    一个描述列表中可以添加多个项目 , 一个项目可以跟多个描述, 如:
    咖啡
            黑色的、热的的饮品
            含咖啡因
    牛奶
            白色的、冷的饮品
            可能有人喝不了

    源代码:

    ; 咖啡
    : 黑色的、热的饮品
    : 含咖啡因
    ; 牛奶
    : 白色的、冷的饮品
    : 可能有人喝不了
    

    HTML表示

    <dl>
      <dt>咖啡</dt>
      <dd>黑色的、热的的饮品</dd>
      <dd>含咖啡因</dd>
      <dt>牛奶</dt>
      <dd>白色的、冷的饮品</dd>
      <dd>可能有人喝不了</dd>
    </ul>
    

    链接

    总所周知, 超链接是超文本的重要组成部分...

    算了不编了, 直接进入正题

    MediaWiki的链接有内链和外链之分, 它们的标记方法不同, 但都是基于[ ] (中括号/方括号)。

    内链

    内链是链接到wiki内页面的链接, 标记方法很简单: [[页面名称]], 这会产生一个链接至 页面名称 的超链接。

    例如: [[主岛]] 会产生一个链接至 主岛 的超链接。

    如何链接到一个在其他名字空间内的页面呢? 你只需要在页面名称前面加上 名字空间前缀 + : (半角冒号) 就行了。

    例如, 你想链接到 {{Documentation}} 模板, 此页面位于模板名字空间, 你需要这样写: [[Template:Documentation]]

    当然, 名字空间前缀可以是中文, 也就意味着这样写也可以: [[模板:Documentation]]

    某些时候你需要链接到文件页面而不是显示图像, 如果要这样做, 请在名字空间前缀前面加一个半角冒号, 如:

    [[:File:RUA!.png]]将会直接链接到 RUA!.png 而不显示该图像。

    也可以用同样的方法链接至分类 (Category:) 页。

    链接到章节

    链接到章节也很简单, 你需要使用 [[页面名称#章节标题]], 章节标题就是用 = (等号) 标记的那些。

    比如说 [[主岛#历史]] 会链接至页面 主岛历史 章节。

    如果需要链接到的章节在同一页面内, 那么你只需要使用 [[#章节标题]]

    比如 [[#历史]] 会链接至同一页面内的 历史 章节

    有时候你会遇到有多个重名章节的页面, 要链接到这些不同的章节, 你需要在后面添加一个数字, 例如:

    [[#Example section 3]] 将会链接至页面内第3个标题为 "Example section" 的章节。

    重命名链接

    你可以自行设定链接显示文本, 在内链里是 [[页面名称|显示文本]]

    比如: [[User:Huoao_buao|灯泡]] 会链接至 Huoao_buao 的用户页 , 但链接显示文本是 灯泡

    外链

    外链, 顾名思义, 就是链接至wiki外页面的链接。

    外链有2 (3?) 种标记方法:

    1. 直接把链接放上去, 比如 https://www.bilibili.com
      这样会原原本本显示链接。
    2. 把链接用一对中括号 ([ ]) 圈起来, 比如 [https://www.bilibili.com]
      这样会显示 [1]...
      其实应该会自动排列, 不过我没试过。
    3. 把链接用一对中括号 ([ ]) 圈起来, 并在后面加上显示文本, 比如 [https://www.bilibili.com B站]
      这样会显示 B站

    外链默认会在链接后带一个外链图标:
    外链图标
    如果不需要这个图标, 可以把链接放在 <span class="plainlinks">...</span> 里面, 实际操作如下:

    <span class="plainlinks">[https://www.bilibili.com B站]</span>

    跨wiki链接

    没有Interwiki扩展, 算了吧

    HTML表示

    然而MediaWiki默认并不能使用 <a>...</a> 元素。

    如这个链接: B站 , HTML表示是
    <a href="https://www.bilibili.com">B站</a>


  • 泼墨挥毫 鱼苗

    在此楼您将会看到...

    图像的标记方法

    大鸽子来更新了

    图像

    终于到重头戏了...

    只能使用被上传到wiki里的图像。

    Zth Wiki里可以上传的文件类型为pnggifjpgjpegwebp

    没有svg, 哭了。

    下面的 Example.png 可以替换为任何图像。

    语法

    一个图像标签的结构是这样的: [[File:Example.png|可选属性|描述]]

    对, 最简单的图像标记是 [[File:Example.png]]

    可选属性

    可选属性之间以 | (管道符、竖线) 分隔, 如 [[File:Filename.format|属性1|属性2|...|最后的属性|图像描述]]

    格式
    • 一般的情况下是第一个值。如果有多个值, 只有第一个会被使用
    • 可以是 border , frameless , frame , thumb (等价于 thumbnail )。
    • 控制呈现的图像应如何格式化并在页面的其余部分嵌入。

    MW-Image_formats.png
    ImageInTable_1-min.png
    可以观察到图像过大时, framelessthumb 会将图像缩小。

    调整大小

    一般来说大小属性位于格式属性之后, 即: [[File:Example.png|格式属性|大小|其他属性|描述]]

    图像尺寸不应过大, 太大的尺寸会使图像小屏幕设备上溢出。

    位图不能显示得比它的原尺寸还大, 若设置了比它原尺寸还大的尺寸, 显示时会以其原尺寸显示。

    图像总是会保持它原有的长宽比例。

    属性值:

    • <宽度>px
      • <宽度>代表图像的最大宽度, 将会根据此值以等比例缩放图像, 不限制图像高度。
      • Example.png尺寸为 1920 × 1080 px, 将此值设置为 240px , 则图像最终大小是 240 × 135 px。
    • x<高度>px
      • <宽度>代表图像的最大高度, 将会根据此值以等比例缩放图像, 不限制图像宽度 (需验证) 。
      • 还是上面的Example.png, 将此值设置为 x108px , 则图像最终大小是 192 × 108 px。
    • <宽度>x<高度>px
      • 似乎是按<宽度>和<高度>中最小的一个值等比例缩放图像...?
    • upright
      • 根据用户的喜好调整图像尺寸为适合合理的尺寸 (适合高度大于宽度的图像) 。选项|upright=1.0|会以用户的默认图像宽度显示图片; |upright=2.0|会以用户默认图像宽度的2倍显示图片。
      • 如果没有填入任何值或等号 (如 |upright|) , 默认视作 |upright=0.75| (但 |upright=| 的效果相当于 |upright=1.0|) 。
      • 如果同时存在 |upright||upright=number| , 则第一个 |upright| 会被忽略。
    水平对齐

    在文本内控制图片的水平对齐 (及行内/块状或浮动样式) (没有默认值) 。

    • left — 左对齐
    • center — 居中对齐
    • right — 右对齐
    • none — 无

    当使用framethumb[nail] 格式时, 默认是向右水平对齐的。
    MW-Image-align-h.png

    垂直对齐

    在文本内控制非浮动行内图片的图片前后, 以及同一块内的垂直对齐 (默认的垂直对齐值为middle) 。

    • baseline — 文本基线
    • sub — 下标
    • super — 上标
    • top — 顶部
    • text-top — 文本顶部
    • middle — 居中
    • bottom — 底部
    • text-bottom — 文本底部

    一般来说没必要改...默认的middle能满足大部分需求, 详细解释请前往MediaWiki官网的Help:Images

    链接

    图像会默认链接到它的文件页面 (你可以尝试在wiki里点击一张图像) , 如[[File:Example.png]]会链接到File:Example.png。

    值:

    • link=[目标页面]
      • [目标页面] 为外链 (以http://, https://等开头, 如[[File:Example.png|link=https://www.baidu.com|描述]]) 时图像会链接到外部网页 (如 https://www.baidu.com ) ;
      • [目标页面] 为wiki内的一个页面 (如[[File:Example.png|link=首页|描述]]) 图像会链接到wiki内的页面 (如首页);
      • 目标页面无值 ([[File:Example.png|link=|描述]]) 时图像不会链接到其他页面。

    如果在link和等号之间有一个空格字符, 那么link语句将被视为描述。

    替代文本

    定义了若引用的图像无法下载和嵌入时的替代文本 (映射到HTML元素 <img />中的 alt="..." 属性) , 或者是所支持的媒体必须使用使用替代描述文本 (如: 使用盲文阅读器或用户浏览器中设置的辅助功能选项) 。

    例子: [[File:Example.png|alt=替代文本|描述]]

    如果图片是纯装饰性的, 将 alt 设置为空 (|alt=|) 。

    alt 没有被指定但提供了描述, 替代文本将从描述自动创建而不进行格式化, 除了使用framethumb[nail]模式的图像, 因为在这两个模式中描述已经可以被屏幕阅读器读取。

    其他属性
    • class=[CSS类] — (映射到HTML <img /> 元素中的 class="..." 属性) , 在ZthWiki应该里没啥用
    • lang=[语言代码], 默认为en (英语) , 可能是用来在不同语言环境下切换图片用的。但ZthWiki是完全的zh-CNwiki, 所以也没啥用

    快速复制使用

    如果你想立即使用的话, 这里有最常使用的标记方法:

    [[File:Example.png|thumbnail|图像描述]] , 使用时将 Example.png 替换为你想使用的图像。

    如果太宽了, 可以在 thumbnail|后面添加 宽度px| , 将宽度替换为数字, 不建议使用300px以上的值, 因为那样会使移动端浏览出现问题, 例如:

    [[File:Example.png|thumbnail|250px|只是一个例子]]


  • 鱼乐社 泼墨挥毫

    看会了,翻译:学废了


 

推荐话题

最近话题

琼ICP备18003777号-1