使用源代码编辑MediaWiki


  • 泼墨挥毫

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

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

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

    这文章很无聊。

    — Aunst, 阅读完全文之后的感想。

    前言

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

    为啥写这篇文章?

    • 骗赞
    • 混脸熟
    • 推广源代码编辑

    目录

    • 1F (此楼) 前言, 更新日志, 以及别的什么
    • 16F 编辑, 基础Wikitext
    • 17F 列表, 超链接
    • 18F 图像
    • 20F 表格
    • 21F 讨论页用wikitext, 控制格式化
    • 30F 模板
    • 31F 魔术字

    更新日志

    • 2020-02-14 — 重写, 编写 编辑相关 和 基础Wikitext-1;
    • 2020-02-16 — 编写一部分列表帮助 (有序/无序列表) ;
    • 2020-04-03 — 完成列表帮助 (添加描述列表) ;
    • 2020-06-16 — 完成链接帮助, 编写图像帮助的一部分;
    • 2020-11-15 — 基本完成图像帮助;
    • 2020-12-11 — 开始编写表格帮助;
    • 2020-12-12 — 继续编写表格帮助, 扩展 编辑(原 编辑相关) 部分;
    • 2020-12-19 — 继续编写表格帮助, 开始编写模板帮助;
    • 2020-12-26 — 继续编写模板帮助 (加图? ) ;
    • 2020-12-27 — 楼层迁移 (21 → 30) , 编写讨论页用wikitext;
    • 2021-01-02 — 完善21楼内容。
    • 2021-01-08 — 开始编写魔术字帮助。
    • 2021-02-11 — 更新魔术字帮助。

    待办事项

    想到啥就写啥。

    短期

    大概会做。

    • 完成表格帮助;
      • 大部分完成, 待添加示例。
    • 使用模板;
      • 大部分完成, 待检查。
    • 解析器函数和魔术字;
    • 小技巧 (可能不写, 因为我也不知道是什么小技巧awa) ;
    • 我的编写习惯 (这东西仅供参考) ;
    • 将图像帮助换成通俗的语言;
    • 检查帖子。

    中期

    不一定会做。

    • 各HTML元素介绍;
    • MediaWiki 中的 CSS;
    • 理解并编写模板;
    • 在内容中布局;
    • 用户CSS/Javascript。

    长期

    一定不会做 (确信)。

    • 参数设置;
    • 可视化编辑器。

    杂物堆

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

    某天, Aunst来到了 RIA|Zth Wiki, 映入他眼帘的是?
    RIA_Zth_Wiki-MainPage.png
    Aunst: 那么这儿就是 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.35.x。 旧的的长期支持版本是1.31.x, 所以还没过时, 但Aunst用惯了最新版。)

    Aunst: 而且只有移动前端和可视化编辑器两个扩展? 怪不得界面那样...

    Aunst: 没有Echo扩展就代表收不到Wiki上的通知...怪不得移动版页面右上角没有OOjs UI icon bell这个图标...

    Aunst: 啊...算了...体验下原版MediaWiki编辑体验罢...



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


  • 泼墨挥毫

    @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


  • 泼墨挥毫

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

    编辑

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

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

    编辑完成, 确认更改之后就可以点击 "保存更改" 按钮了, 页面加载完成后你将会看到你作出的新编辑。

    编辑的规则、惯例与格式化

    编辑维基时最重要的一条规则就是大胆。不要犹豫、动手编辑。其他人会来更正错误的, 所以要有信心, 尝试一下吧! 就编辑维基页面而言,存在各种各样的编辑规则、习惯和哲学, 但是“勇于编辑”比它们都要优先!
    一次编辑可以贡献整整一段或整页的信息, 也可以简单到只是修正细微的错别字。一般来说, 增加或编辑的文本都力求简单明了。最重要的是, 确保你所做的可以改进维基中的内容。
    如果你需要使用某种格式的话, 比如新标题或粗体字, 你可以使用维基语法或者上方编辑工具栏中的按钮。要了解某些常见的格式化用法, 参见 Help:格式

    Help:编辑页面 - MediaWiki

    如上述, 最重要的是大胆。经统计, 编辑者们往往在第一次编辑中耗费很多时间 [来源请求]。编辑者会不安, 一次次检查自己做出的更改有没有问题、破没破坏格式、有没有错字之类的, 但只要点下了 "保存更改" 按钮, 编辑者 (对, 就是你) 就是真正的编辑者了! wiki用户们不会责怪谁造成了格式错误和错字之类的问题, 因为他们发现后就会尽可能修复那些问题。编辑者编辑得更多, 编辑者就更有经验, 那些问题就会更少, 所以现在开始编辑吧!

    格式化相关可以参考本帖下面所描写的内容。

    编辑摘要

    编辑框下面有一个小文本框, 你可以在其中输入编辑的简短摘要, 不用想太长时间, 只要简单地描述你做出的编辑就行, 例如 "修复错字"、"更正格式" 和 "添加内容" 。

    当然, 你可以在里面加一些带有感情色彩的语句, 也可以宣传: "创建了自己住的地方的条目哦! 欢迎来参观qwq"

    摘要与你的编辑一起被保存,以便他人可以更好地在维基中追踪更改

    Help:编辑页面 - MediaWiki

    预览编辑和显示更改

    一个好习惯是在保存编辑之前先预览编辑, 以检查显示效果。点击 "显示预览" 按钮以预览编辑。

    可以点击 "显示更改" 按钮以查看编辑前和编辑后源代码的差异。

    小编辑

    有个 "小编辑" 复选框, 在仅对内容作出微小更改的时候可以勾选它:

    • "修正错字/标点/格式/语法错误" 是小编辑
    • "添加一点内容" 不是小编辑

    测试编辑

    当然, 编辑者有时会想测试下自己的编辑技能, 但又苦于Zth没有专门的沙盒页...

    这里提供一个/一些使用MediaWiki系统的wiki的沙盒页, 你可以在那里自由编辑, 一般不需要登录, 不过你的IP地址会被当做用户名储存在日志中。

    特殊Wikitext - 1

    换行

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

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

    第一行
    
    第二行
    

    这其实在HTML里等同于

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

    其实就是起一个新段落。

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

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

    标题

    标题是用一个或者多个等号 (=) 圈起来的文本, 必须占单独的一行, 像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|只是一个例子]]


  • 鱼乐社 泼墨挥毫

    看会了,翻译:学废了


  • 泼墨挥毫

    在此楼你将会看到...

    表格的使用方法。

    终于想起来更新了

    表格

    表格对于列出数据很有用, 但它不应用于布局。

    在MediaWiki中, 可以使用两种方法创建表格:

    1. HTML方式
    2. wikitext方式

    HTML方式

    这方法在一般条目中不经常使用...基本上就是写HTML了。

    把代码都放在 <table>...</table> 标签中:

    表格之前的内容...
    <table>
    ...
    </table>
    之后的内容...
    

    在其中放置 <tr>...</tr> (表格行元素) , 你想创建几行就放几个。

    <table>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    </table>
    

    一般的, 每列/每行需要有数据介绍, 你需要用 <th>...</th> (表头单元格元素) 来创建这些介绍, 把它们放置在 <tr>...</tr> 中。

    <table>
    <tr>
    <th>列 1</th>
    <th>列 2</th>
    <th>列 3</th>
    <th>列 4</th>
    </tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    </table>
    

    然后就是数据单元格了, 元素是 <td>...</td> 。和表头单元格一样, 它们也需要放置在 <tr>...</tr> 中。

    <table>
    <tr>
    <th>列 1</th>
    <th>列 2</th>
    <th>列 3</th>
    <th>列 4</th>
    </tr>
    <tr>
    <td>列 1 行 1</td>
    <td>列 2 行 1</td>
    <td>列 3 行 1</td>
    <td>列 4 行 1</td>
    </tr>
    <tr>
    <td>列 1 行 2</td>
    <td>列 2 行 2</td>
    <td>列 3 行 2</td>
    <td>列 4 行 2</td>
    </tr>
    <tr>
    <td>列 1 行 3</td>
    <td>列 2 行 3</td>
    <td>列 3 行 3</td>
    <td>列 4 行 3</td>
    </tr>
    </table>
    

    MW-table-1.png

    注意: 请确保每表格行的单元格 (包括表头单元格和数据单元格) 数量相等。

    表头单元格也可以和数据单元格放在同一行中:

    <table>
    <tr>
    <th>行/列</th>
    <th>列 1</th>
    <th>列 2</th>
    <th>列 3</th>
    </tr>
    <tr>
    <th>行 1</th>
    <td>列 1 行 1</td>
    <td>列 2 行 1</td>
    <td>列 3 行 1</td>
    </tr>
    <tr>
    <th>行 2</th>
    <td>列 1 行 2</td>
    <td>列 2 行 2</td>
    <td>列 3 行 2</td>
    </tr>
    <tr>
    <th>行 3</th>
    <td>列 1 行 3</td>
    <td>列 2 行 3</td>
    <td>列 3 行 3</td>
    </tr>
    </table>
    

    MW-Table-2.png

    表格也可以拥有一个标题, 需要使用 <caption>...</caption> 元素作为 <table>...</table> 元素的直接子元素:

    <table>
    <caption>测试表格</caption>
    <tr>
    <th>行/列</th>
    <th>列 1</th>
    <th>列 2</th>
    <th>列 3</th>
    </tr>
    <tr>
    <th>行 1</th>
    <td>列 1 行 1</td>
    <td>列 2 行 1</td>
    <td>列 3 行 1</td>
    </tr>
    <tr>
    <th>行 2</th>
    <td>列 1 行 2</td>
    <td>列 2 行 2</td>
    <td>列 3 行 2</td>
    </tr>
    <tr>
    <th>行 3</th>
    <td>列 1 行 3</td>
    <td>列 2 行 3</td>
    <td>列 3 行 3</td>
    </tr>
    </table>
    

    MW-Table-3.png

    给表格添加 wikitable CSS类可以简单地样式化表格:

    • 给表格带来灰色背景;
    • 表头单元格将会有更深的灰色;
    • 给每个单元格添加边框。
    <table class="wikitable">
    <caption>测试表格</caption>
    <tr>
    <th>行/列</th>
    <th>列 1</th>
    <th>列 2</th>
    <th>列 3</th>
    </tr>
    <tr>
    <th>行 1</th>
    <td>列 1 行 1</td>
    <td>列 2 行 1</td>
    <td>列 3 行 1</td>
    </tr>
    <tr>
    <th>行 2</th>
    <td>列 1 行 2</td>
    <td>列 2 行 2</td>
    <td>列 3 行 2</td>
    </tr>
    <tr>
    <th>行 3</th>
    <td>列 1 行 3</td>
    <td>列 2 行 3</td>
    <td>列 3 行 3</td>
    </tr>
    </table>
    

    MW-Table-4.png

    关于属性的描述见下。

    wikitext方式

    这是常用的方法。

    我先放个代码块在这里

    {| class="wikitable" <!-- 表格开始, 设置基础类 -->
      |+ 表格标题
      |- <!-- 表格行, 第一条表格行的标记可以省略 -->
      ! 列标题 1
      ! 列标题 2
      ! 列标题 3
      |- <!-- 新表格行 -->
      ! 行标题 1
      | 单元格 2 || 单元格 3 <!-- 和下面的单元格B, C等价 -->
      |-
      ! 行标题 A
      | 单元格 B
      | 单元格 C
    |} <!-- 表格结束 -->
    

    MW-Table-5.png

    基本标记含义
    标记 含义 备注
    {| 表格开始 必需。
    |+ 表格标题 可选。必须放置在表格开始和第一行之间。
    |- 表格行 可选。如果是第一行, 可以将其省略。
    ! 表头单元格 可选。连续表头单元格可以使用双感叹号 (!!) 以添加在同一行上; 或从新行开始, 每行都以单个标记 (!) 开头。
    | 数据单元格 可选。连续表头单元格可以使用双管道符 (||) 以添加在同一行上; 或从新行开始, 每行都以单个标记 (|) 开头。此标记还用于将HTML属性与单元格和标题内容分开。
    语法教程

    wikitext表格代码 (也称管道/pipe语法) 功能与HTML表格代码完全相同, 所以知晓HTML表格代码有助于理解pipe代码。

    • 整个表格都用大括号和竖线字符 (管道符) 包裹。使用 {| 开始一个表格, 使用 |} 结束它。每组符号都要位于单独一行:
    {|
      管道代码位于此处
    |}
    
    • 一个可选的表格标题位于行首, 使用竖线和加号 (|+) 开头, 标题内容位于其后:
    {|
      |+ 表格标题
        表格代码位于此处
    |}
    
    • 要开始一条新表格行, 在单独的一行上输入一根竖线和一条连字符 (|-) 。该行中单元格的代码从下一行开始。
    {|
      |+ 表格标题
      |-
        行中代码放置于此
      |-
        下一行代码放置于此
    |}
    
    • 要添加单个表格单元格, 在下一行以管道符开头, 在其后添加内容:

      表头单元格也是一样的做法, 不过要以感叹号 (!) 开头。

    {|
      |+ 表格标题
      |-
      | 单元格代码放置于此
      |-
      | 下一行单元格代码放置于此
      | 下个单元格代码放置于此
    |}
    
    • 单元格可以由新一行中的单个管道符、新一行中的双管道符和同一行中的双管道符 (||) 分隔。三个都输出同一结果:
      表头单元格同, 不过要把管道符换成感叹号 (!) 。表头单元格不能普通单元格放置在同一行上。
    {|
      |+ 表格标题
      |-
      | 单元格 1 || 单元格 2 || 单元格 3
      |-
      | 单元格 A
      | 单元格 B
      | 单元格 C
    |}
    
    {|
      |+ 表格标题
      |-
      ! 行/列 !! 列 A !! 列 B
      |-
      ! 行 1
      | 单元格 A1 || 单元格 B1
      |-
      ! 行 2
      | 单元格 B1
      | 单元格 B2
    |}
    
    • 给表格添加 wikitable CSS类可以简单地样式化表格:
      • 给表格带来灰色背景;
      • 表头单元格将会有更深的灰色;
      • 给每个单元格添加边框。
    {| class="wikitable"
      |+ 表格标题
      ! 列标题 1
      ! 列标题 2
      ! 列标题 3
      |-
      ! 行标题 1
      | 单元格 2 || 单元格 3
      |-
      ! 行标题 A
      | 单元格 B
      | 单元格 C
    |}
    

    MW-Table-5.png

    HTML属性

    简称为属性, 这很重要。

    特征

    HTML属性看起来像这样: 属性名="值"属性名='值'。它的组成:

    • 一个属性名, 如 class ;
    • 后接一个等号 (=) ;
    • 后接一个双引号 (") 或单引号 (') ;
    • 后接属性值;
    • 后接前面所使用的引号;
    • 如果有其他属性, 则添加一个空格

    示例:

    <span class="notice">文档可能不是最新的。</span>
    <!-- 在这个示例中, class 是属性名, notice 是值; -->
    
    <span style="font-size: smaller;" title="(小声)">能理解吗...</span>
    <!-- 在这个示例中, style 和 title 是属性名, 
      font-size: smaller 和 (小声) 是值。 -->
    
    实际使用

    HTML语法中, 属性位于开始标签内:

    <table class="wikitable">...</table>
    <!--
    <table class="wikitable">  — 开始标签, 其中:
      class="wikitable" — 属性, 其中:
        class     — 属性名
        wikitable — 值
    ...      — 内容
    </table> — 结束标签
    -->
    

    管道语法中, 属性必须位于标记所在的那行; 除了表格结束标记 |} 外的所有标记都可以添加属性。

    如果标记不储存文本内容, 那么属性位于其后:

    {| class="wikitable"
    
    |}
    

    如果标记储存文本内容且需要带有属性, 那么属性位于标签后到第一个管道符之间:

    {|
      |+ style="font-weight: normal;" | 文本内容
      |-
      ! style="text-align: center;" | 表头单元格
      |-
      | title="相关信息" | 数据单元格
    |}
    
    常用属性
    属性 描述 备注
    class 用于添加CSS类 可用于任意标记, 但常用于表格开始标记
    style 用于添加CSS样式 可用于任意标记
    scope 用于指定表头单元格关联的是行还是列 用于表头单元格
    colspan 用于扩展单元格至多行 用于表头单元格和数据单元格
    rowspan 用于扩展单元格至多列 用于表头单元格和数据单元格

    class 属性的常见值有: wikitable, sortablemw-collapsible

    • wikitable 类用于给表格添加基础样式;
    • sortable 类使表格变得可排序;
    • mw-collapsible 类使表格变得可折叠。
      • 可以再加一个 mw-collapsed 使表格默认折叠。

    这些类也可以一起使用:

    <!-- 管道语法 -->
    {| class="wikitable sortable mw-collapsible"
    ...
    |}
    
    <!-- HTML语法 -->
    <table class="wikitable sortable mw-collapsible">
    ...
    </table>
    

    style 属性的学问很多...这里就简单做个示范, 以后写到 CSS 的时候再详细讲:

    <!-- 管道语法 -->
    {| class="wikitable"
      |-
      ! 列标题
      |-
      | 普通单元格
      |-
      | style="background-color: azure;" | 这个单元格的背景颜色是天蓝色 (azure) 的。
    |}
    
    <!-- HTML语法 -->
    <table class="wikitable">
    <tr>
    <th>列标题</th>
    </tr>
    <tr>
    <td>普通单元格</td>
    </tr>
    <tr>
    <td style="background-color: azure;">这个单元格的背景颜色是天蓝色 (azure) 的。</td>
    </tr>
    </table>
    <!-- 注: 颜色翻译仅供参考。 -->
    

    MW-Table-6.png

    表头单元格和数据单元格高度相关时, 使用 scope 属性来指示表头单元格关联的是行还是列:

    • scope="col" — 与列关联;
    • scope="row" — 与行关联。
    <!-- 管道语法 -->
    {| class="wikitable"
      |-
      !
      ! scope="col" | 收入
      ! scope="col" | 支出
      ! scope="col" | 结余
      |-
      ! scope="row" | 2019年6月
      | 150.00
      | 30.00
      | 120.00
      |-
      ! scope="row" | 2019年7月
      | 160.00
      | 50.00
      | 110.00
    |}
    
    <!-- HTML语法 -->
    <table class="wikitable">
    <tr>
    <th></th>
    <th scope="col">收入</th>
    <th scope="col">支出</th>
    <th scope="col">结余</th>
    </tr>
    <tr>
    <th scope="row">2019年6月</th>
    <td>150.00</td>
    <td>30.00</td>
    <td>120.00</td>
    </tr>
    <tr>
    <th scope="row">2019年7月</th>
    <td>160.00</td>
    <td>50.00</td>
    <td>110.00</td>
    </tr>
    </table>
    

    MW-Table-7.png

    colspanrowspan 用于扩展单元格, 其属性值一定是正整数 (N*) 。

    • colspan 使单元格跨行;
    • rowspan 使单元格跨列。
    <!-- 管道语法 -->
    {| class="wikitable"
      |-
      ! 行/列
      ! 列 A
      ! 列 B
      ! 列 C
      |-
      ! 行 1
      | colspan="2" | 这个单元格跨越两行
      | 单元格 C1
      |-
      ! 行 2
      | rowspan="2" | 这个单元格跨越两列
      | colspan="2" rowspan="2" | 这个单元格跨越两行两列
      |-
      ! 行 3
    |}
    
    <!-- HTML语法 -->
    <table class="wikitable">
    <tr>
    <th>行/列</th>
    <th>列 A</th>
    <th>列 B</th>
    <th>列 C</th>
    </tr>
    <tr>
    <th>行 1</th>
    <td colspan="2">这个单元格跨越两行</td>
    <td>单元格 C1</td>
    </tr>
    <tr>
    <th>行 2</th>
    <td rowspan="2">这个单元格跨越两列</td>
    <td colspan="2" rowspan="2">这个单元格跨越两行两列</td>
    </tr>
    <tr>
    <th>行 3</th>
    </tr>
    </table>
    

    MW-Table-8.png

    示例

    嵌套

    虽然不常见, 但是表格可以嵌套:

    {| class="wikitable"
      |+ 表格标题
      ! 列标题 1
      ! 列标题 2
      ! 列标题 3
      |-
      | 单元格 1-1
      | 单元格 1-2
      | 单元格 1-3
      |-
      | colspan="3" | 
    {{{!}} class="wikitable" style="width: 100%"
        {{!}}-
        ! 另一个表格!
        {{!}}-
        | 表格2 单元格1-1
    {{!}}}
    |}
    

    MW-Table-9.png

    内部表格放置在数据单元格后。

    注意到内部表格中的管道符 (|) 标记被替换为 {{!}} , 似乎这样才能使MediaWiki正常解析标记。


 

推荐话题

最近话题

琼ICP备18003777号-1