食物语WIKI·编辑教程
阅读
2022-12-26更新
最新编辑:小说家云晓
阅读:
更新日期:2022-12-26
最新编辑:小说家云晓
本页面内容正在施工!
在页面内容完成前,请勿随意修改!对本页面内容产生疑问或有意见提出时,可以在下方评论区进行留言
编者留言:本页面施工中模板为展示用,请不要删除哦~
修改页面
如果想要编辑一个已经存在的页面,将鼠标移动到页面右上角的编辑按钮,在弹出的下拉菜单中点击源代码菜单项。
然后按下CTRL+F,使用页面搜索功能定位到你要修改的位置,进行修改。
创建页面
首先,请在页面顶部导航栏右侧的搜索框中,输入页面的标题并搜索。
若这个页面不存在,则搜索页面会显示:
在本Wiki上新建名为“不存在的页面”的页面!另请查看搜索结果。
点击不存在的页面链接,来创建这个页面。
你也可以直接在浏览器访问地址
http://wiki.biligame.com/arknights/不存在的页面
这样可以直接打开这个页面,并开始创建页面。
当某个已经存在的页面中,包含指向某个不存在的页面的链接时,
你也可以通过点击这个链接来创建页面。
基础编辑
章节
你输入的内容 | 你看到的显示 |
---|---|
== 二级标题 == 一级标题是页面名称,所以请从二级标题开始用起。 有四个以上标题的页面会自动生成一个目录。 这个自动生成的目录可以通过书写<code>__NOTOC__</code>来隐藏。 === 三级标题 === 输入更多的“等于号”(=)可以创建更多下一级标题。 ==== 四级标题 ==== 请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。 ===== 五級标题 ===== |
二级标题一级标题是页面名称,所以请从二级标题开始用起。 有四个以上标题的页面会自动生成一个目录。 这个自动生成的目录可以通过书写 三级标题输入更多的“等于号”(=)可以创建更多下一级标题。 四级标题请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。
五級标题 |
行与段落
你输入的内容 | 你看到的显示 |
---|---|
另起一行并不会导致换行, 而只是会增加一个空格。 空一个空行虽然可以换行, 但其实是开始了一个新的段落。 如果你对空一个空行产生的行间距不满, 你可以空两个空行<del>,或者空更多行</del>。 |
另起一行并不会导致换行, 而只是会增加一个空格。 空一个空行虽然可以换行, 但其实是开始了一个新的段落。
|
另一种换行方式是使用<code><br/></code>标记来换行。<br> 这样换行后的内容仍在'''同一段落'''内。 |
另一种换行方式是使用 |
* 星号(*)其实是符号列表。 ** 但不知道为什么这个WIKI的列表, *** 并不显示前面的列表前面的圆点。 **** 这很糟糕。 但更糟糕的是一些人通过符号列表来对文章换行。 * '''请务必不要这么做!''' |
但更糟糕的是一些人通过符号列表来对文章换行。
|
# 井号(#)是数字列表。 ## <del>曾经</del>每一行前面都有一个数字序号。 ##* 甚至可以将数字列表与符号列表混用。 ##*# <del>然并卵。</del> 同样,'''请勿用数字列表来换行和缩进!''' |
同样,请勿用数字列表来换行和缩进! |
: 冒号(:)最大的贡献是 :: 缩进! ::: 可以缩进到让你满意。 '''请用冒号(:)来缩进''',而不是用星号(*)或井号(#)! |
请用冒号(:)来缩进,而不是用星号(*)或井号(#)! |
如果一些行的开始是空格, 那么这些行将被'''预格式化''', 不会被换行。 通常是用来显示一段代码之类的东西。 也可以使用<pre>...</pre>。 |
如果一些行的开始是空格, 那么这些行将被预格式化, 不会被换行。 通常是用来显示一段代码之类的东西。 也可以使用<pre>...</pre>。 |
在拂晓的水平线上 ---- 刻下胜利吧! |
在拂晓的水平线上 刻下胜利吧! |
文字样式
你输入的内容 | 你看到的显示 |
---|---|
''斜体'' '''粗体''' '''''粗斜体''''' |
斜体 粗体 粗斜体 |
<b>粗体</b> <i>斜体</i> <strong>强调</strong> <s>划掉</s> <del>删除线</del> <code>代码</code> |
粗体 斜体 强调
|
不进行''wiki''解析 |
不进行''wiki''解析 |
<span style="color:red">应用CSS样式</span> |
应用CSS样式 |
链接
你输入的内容 | 你看到的显示 |
---|---|
[[食魂·测试]]是一个站内链接。 也可以修改链接的显示文字,比如[[食魂·测试|博士还不可以休息哟]]。 |
食魂·测试是一个站内链接。 也可以修改链接的显示文字,比如博士还不可以休息哟。 |
[[纳甘莫辛]]是一个指向不存在页面的链接。 |
纳甘莫辛是一个指向不存在页面的链接。 |
其他命名空间的页面的链接,比如[[特殊:上传文件]]或[[文件:食魂·测试(近卫)hd头像.jpg]] |
其他命名空间的页面的链接,比如特殊:上传文件或文件:食魂·测试(近卫)hd头像.jpg |
站外链接: * [https://www.mediawiki.org/wiki/Help:Formatting/zh] * [https://zh.wikipedia.org/wiki/Help:编辑页面 维基百科-帮助:编辑页面] |
站外链接: |
链接颜色
链接样式 | 类型 | 颜色 |
---|---|---|
蓝色链接 | 指向当前存在的页面 | #0645AD = rgb(6,69,173) |
深蓝色链接 | 指向已经访问过的存在页面 | #0B0080 = rgb(11,0,128) |
红色链接 | 指向wiki中未建立的页面 | #DD3333 = rgb(221,51,51) |
浅红色链接 | 指向未连接但访问过的页面 | #A55858 = rgb(165,88,88) |
淡蓝色链接 | 指向其它wiki 注意这个页面无论是否在目标wiki上存在,链接都显示为淡蓝色。 |
#3366BB = rgb(51,102,187) |
紫色链接 | 指向其它站点但访问过的链接 | #663366 = rgb(102,51,102) |
如何自定义链接颜色
你可以这样将链接改为不同颜色:
让内部链接对所有人都显示为不同颜色
你可以这样将链接改为不同颜色:
[[不存在的页面|<span style="color: #0645AD;">不存在的页面</span>]]<br> [[不存在的页面|<span style="color: #0B0080;">不存在的页面</span>]]<br> [[不存在的页面|<span style="color: #DD3333;">不存在的页面</span>]]<br> [[不存在的页面|<span style="color: #A55858;">不存在的页面</span>]]<br> [[不存在的页面|<span style="color: #3366BB;">不存在的页面</span>]]<br> [[不存在的页面|<span style="color: #663366;">不存在的页面</span>]]
这会显示为:
不存在的页面
不存在的页面
不存在的页面
不存在的页面
不存在的页面
不存在的页面
引用
说明:文章引用内容,对应内容外链。
用途:适用于页面部分内容引用外部内容(如一段话,引用了一篇文章),使你的文章有参考资料可查,内容更具可信度。
写法:<ref>[链接 链接页面名]</ref>
需要在页面最底部添加标题栏==外链与注释==。
插入图片
当您想在编辑过程中插入您想要的图片时,首先需要上传该图片。上传图片的按钮位于编辑工具栏的顶部。
您需要注意以下几点:
- 您需要为上传的图片命名,准确的命名将使图片便于分类和索引,请避免使用纯数字,纯符号作为图片命名,请不要把QQ和微信截图随意上传。
- 上传的图片格式一般为jpg、png、gif,图片大小应在2M及以下为宜。
- 您上传的图片应具有意义,不允许涉及血腥、暴力等敏感因素,违规的图片将会被管理员删除。
- 上传的图片可以在特殊:文件列表中找到,在该页面的搜索栏输入文件名提交即可。有的时候明明上传了文件,搜索栏却无法搜索到,您可以重进页面然后再次尝试搜索。
你输入的内容 | 你看到的显示 |
---|---|
[[文件:03 head small.png]] |
|
[[文件:03 head small.png|50px]] |
|
[[文件:03 head small.png|50px|center|link=食魂·测试]] [[文件:03 head small.png|50px|居中|link=]] |
|
[[文件:03 head small.png|frame|50px|right]] [[文件:03 head small.png|边框|50px|右]] |
|
[[文件:03 head small.png|thumb|right|食魂·测试]] [[文件:03 head small.png|缩略图|右|食魂·测试]] |
详细可以参考维基百科-帮助:图像 和MediaWiki-帮助:图像
表格编辑
{| class="wikitable" |- ! 标题文字1 ! 标题文字2 ! 标题文字3 |- | 示例1 | 示例2 | 示例3 |- | 示例4 | 示例5 | 示例6 |}
提交编辑后,表格显示为:
标题文字1 | 标题文字2 | 标题文字3 |
---|---|---|
示例1 | 示例2 | 示例3 |
示例4 | 示例5 | 示例6 |
其中{|
开头,
|}
结尾,
!
为表头,
|
为单元格,
|-
表示表格行的开始。
详细可以参考维基百科-帮助:表格
和MediaWiki-帮助:表格
|
替换成为{{!}},否则将会出现让你头大的结果。
可折叠表格
表格折叠使用方法 |
---|
说明:使内容折叠。 用途:一般用于页面过长,将部分可选择性观看的内容折叠。 写法:在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
|
单元格合并项
可通过结合使用“rowspan”和“colspan”合并单元格。但排序样式“sortable”会与“rowspan”冲突,使得单元格无法合并,同时出现排序错误。
实例一:
{| class="wikitable" |- | 标题 || 标题 || 标题 |- | rowspan="2" | 跨2行的内容 | 示例1 | 示例2 |- | 示例3 | 示例4 |}
标题 | 标题 | 标题 |
跨2行的内容 | 示例1 | 示例2 |
示例3 | 示例4 |
实例二:
{| class="wikitable" |- | 标题 || 标题 || 标题 |- | colspan="2"| 跨2列的内容 | 示例1 |- | 示例2 | 示例3 | 示例4 |}
标题 | 标题 | 标题 |
跨2列的内容 | 示例1 | |
示例2 | 示例3 | 示例4 |
实例三:
{| class="wikitable" |- | 列1 || 列2 || 列3 |- | rowspan="2" colspan="2" style="text-align: center;" | A | B |- | C |}
列1 | 列2 | 列3 |
A | B | |
C |
跨行:在单元格内容前加rowspan=n| 跨列:在单元格内容前加colspan=n| 注意单元格跨行跨列后其他行的内容问题。 {| class="wikitable" |- ! rowspan=4|跨4行的标题 !!标题 !!标题!!标题 |- | colspan=2|跨2列的内容 || 示例 |- | rowspan=2|跨2行的内容 || 示例 || 示例 |- | 示例 || 示例 |}
跨4行的标题 | 标题 | 标题 | 标题 |
---|---|---|---|
跨2列的内容 | 示例 | ||
跨2行的内容 | 示例 | 示例 | |
示例 | 示例 |
表格美化
如果你想给表格赋予颜色,可以使用表格css来修改单元格、行甚至整个表格的颜色。
如果你想让你的单元格、行使用单色,可以使用style="background-color:#背景颜色十六进制代码;color:#文字颜色十六进制代码如果你想让你的单元格出现渐变色,可以使用
style="color:#文字颜色十六进制代码;background-image:linear-gradient(0~100deg,2~8个十六进制颜色码);"如果你想让你的表格更加绚丽,可以使用
style="width:700px;height:30px;background-image: linear-gradient(90deg,颜色 0px,transparent 210px,transparent 490px,颜色 700px),repeating-linear-gradient(0deg,transparent 0px,颜色 3px,颜色 5px,transparent 8px),repeating-linear-gradient(90deg,transparent 0px,颜色 3px,颜色 5px,transparent 8px),conic-gradient(rgb(rgb颜色),rgb(rgb颜色),rgb(rgb颜色),rgb(rgb颜色),rgb(rgb颜色),rgb(rgb颜色),rgb(rgb颜色));color:文字颜色"
模板
- 打开文章源代码页面,下方会显示该页面使用的模板(如果该页面有使用模板)
- 如下所述,是一个设计好模板,将需要填充的数据,以{{{XXX}}}的字样代替
- 在其它页面使用该模板时,用{{模板名|XXX|XXX|XXX}}的方式填写数据。
WIKI编辑参考
模板速查
食物语wiki模板一览
(可读性较差,仅供速查使用,无编辑经验者建议看完以下内容)
点击下文模板标题可以查看更多使用示例哦~
模板:待补充
- 用途:鼓励补充内容。
- 使用:
代码 | 效果 |
---|---|
{{待补充}} |
模板:待补充 |
模板:施工中
- 用途:用于有大量内容需要编辑时先行添加保存,以避免其他人编辑冲突。
- 注意:点击编辑框下方显示预览可查看编辑后效果,请尽量避免多次提交内容较少的小编辑。
- 使用:
{{施工中|编者留言(可选)}}
代码 | 实际效果 |
---|---|
{{施工中|本页面施工中模板为展示用,请不要删除哦~}} |
见本页面顶部 |
模板:左侧目录
- 用途:用于攻略等文字量较大的页面,生成一个固定在左侧的目录以方便用户阅读和跳转,使用后会替换默认目录。
- 注意:只推荐在您自行编写的攻略类页面使用,请务必不要在原本的干员等wiki页面使用。
- 使用:
代码 | 实际效果 |
---|---|
{{左侧目录|开始}} 页面内容 {{左侧目录|结束}} |
见本页面 |
模板:计时
- 用途:提示活动时间、道具过期时间等
- 使用:
情况 | 代码 | 效果 |
---|---|---|
通用
{{计时|年【默认为当前年】|月【默认为当前月】|日【默认为当前日】|时【默认为0】|分【默认为0】|秒【默认为0】|显示时间=文本【默认为填写的时间】|禁用天=|禁用时=【默认为空】|禁用分=【默认为空】|禁用秒=【默认为空】|隐藏分类=【默认为空】|编号=数字【默认为1】}}
|
{{计时|2020|2|11|编号=1}} |
|
活动
{{活动计时|填写活动名字,活动等|开始时间(精准到秒)|结束时间(精准到秒)}} |
{{活动计时|「进攻、防守、战术交汇」|2021/03/09 16:00|2021/03/23 03:59}} |
|
新版计时
{{新计时|开始时间=|结束时间=|事件=|时区=【默认为UTC+8】|秒=【默认无,写了就禁用秒】}} |
{{新计时|开始时间=2022/5/1 16:00:00|结束时间=2023/5/1 15:59:59|事件=明日方舟三周年}} |
模板:新计时 |
模板:黑幕
- 用途:用于玩梗/剧透时防止用户直接看到内容使用。
- 对于黑幕,移动光标至文字上即可解除遮罩。
- 对于刮刮卡,选中文字即可擦开,若无法使文字被选中,请检查浏览器或JS是否劫持了相关操作
- 对于黑幕,移动光标至文字上即可解除遮罩。
- 注意:解开黑幕、刮刮卡的操作在移动端上体验不佳,为照顾移动端体验,请避免过多使用。
- 使用:
情况 | 代码 | 效果 |
---|---|---|
黑幕 | {{黑幕|文字}} |
文字 |
刮刮卡 | {{刮刮卡|文字}} |
文字 |
Bootstrap样式
栅格系统
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
- 意思是格栅系统是自适应的表格,一共是分12列,使用的时候用 class="row"的标签括住.xs sm md lg,是指屏幕多宽的时候使用格栅列表.如果小于该大小会自适应变成独立一列.有时候我们需要电脑看的时候是一行数列,而手机则变成一列一行.不妨参考下面的代码.
参考代码
<div class="row"> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> <div class="col-md-1 list-group-item list-group-item-warning">.col-md-1</div> </div> <div class="row"> <div class="col-md-8 list-group-item list-group-item-warning">.col-md-8</div> <div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div> </div> <div class="row"> <div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div> <div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div> <div class="col-md-4 list-group-item list-group-item-warning">.col-md-4</div> </div> <div class="row"> <div class="col-md-6 list-group-item list-group-item-warning">.col-md-6</div> <div class="col-md-6 list-group-item list-group-item-warning">.col-md-6</div> </div>
显示为:
响应式设计
超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | 当前你的屏幕 | |
---|---|---|---|---|---|
.visible-xs-* |
可见 | 隐藏 | 隐藏 | 隐藏 | 可见 |
.visible-sm-* |
隐藏 | 可见 | 隐藏 | 隐藏 | 可见 |
.visible-md-* |
隐藏 | 隐藏 | 可见 | 隐藏 | 可见 |
.visible-lg-* |
隐藏 | 隐藏 | 隐藏 | 可见 | 可见 |
.hidden-xs |
隐藏 | 可见 | 可见 | 可见 | 隐藏 |
.hidden-sm |
可见 | 隐藏 | 可见 | 可见 | 隐藏 |
.hidden-md |
可见 | 可见 | 隐藏 | 可见 | 隐藏 |
.hidden-lg |
可见 | 可见 | 可见 | 隐藏 | 隐藏 |
类组 | CSS display |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
举个粟子class="hidden-xs"
的标记会在手机访问时隐藏,
.visible-xs-block
意思是手机浏览时时显示为块元素,
同理.visible-xs-inline
则为行内元素。
预设颜色
你看到的显示 | 你输入的内容 |
---|---|
这是一行静默的文字 |
<p class="text-muted">这是一行静默的文字</p> |
这是一行主要的文字 |
<p class="text-primary">这是一行主要的文字</p> |
这是一行成功的文字 |
<p class="text-success">这是一行成功的文字</p> |
这是一行信息的文字 |
<p class="text-info">这是一行信息的文字</p> |
这是一行警告的文字 |
<p class="text-warning">这是一行警告的文字</p> |
这是一行危险的文字 |
<p class="text-danger">这是一行危险的文字</p> |
主要的背景... |
<p class="bg-primary">主要的背景...</p> |
成功的背景... |
<p class="bg-success">成功的背景...</p> |
信息的背景... |
<p class="bg-info">信息的背景...</p> |
警告的背景... |
<p class="bg-warning">警告的背景...</p> |
危险的背景... |
<p class="bg-danger">危险的背景...</p> |
关闭按钮
× Warning! Best check yo self, you're not looking too good.
<div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
预设按钮
你看到的显示 | 你输入的内容 |
---|---|
Default | <span class="btn btn-default">Default</span> |
Primary | <span class="btn btn-primary">Primary</span> |
Success | <span class="btn btn-success">Success</span> |
Info | <span class="btn btn-info">Info</span> |
Warning | <span class="btn btn-warning">Warning</span> |
Large span | <span class="btn btn-primary btn-lg">Large span</span> |
Large span | <span class="btn btn-default btn-lg">Large span</span> |
Default span | <span class="btn btn-primary">Default span</span> |
Default span | <span class="btn btn-default">Default span</span> |
Small span | <span class="btn btn-primary btn-sm">Small span</span> |
Small span | <span class="btn btn-default btn-sm">Small span</span> |
Extra small span | <span class="btn btn-primary btn-xs">Extra small span</span> |
Extra small span | <span class="btn btn-default btn-xs">Extra small span</span> |
预设标签
你看到的显示 | 你输入的内容 |
---|---|
Default | <span class="label label-default">Default</span> |
Primary | <span class="label label-primary">Primary</span> |
Success | <span class="label label-success">Success</span> |
Info | <span class="label label-info">Info</span> |
Warning | <span class="label label-warning">Warning</span> |
Danger | <span class="label label-danger">Danger</span> |
面板
Panel title
Panel title
Panel title
Panel title
Panel title
<div class="panel panel-primary"> <div class="panel-heading"> <p class="panel-title">Panel title</p> </div> <div class="panel-body">Panel content</div> </div> <div class="panel panel-success"> ... </div> <div class="panel panel-info"> ... </div> <div class="panel panel-warning"> ... </div> <div class="panel panel-danger"> ... </div>
折叠面板
参考:模板:折叠面板
XXXXXXXXXXXXX
YYYYYYYYYYY
ZZZZZZZZZZZZZZZZ
{{折叠面板|开始}} {{折叠面板|标题=不点一下下面吗|选项=1|主框=1|样式=primary|展开=是}} XXXXXXXXXXXXX {{折叠面板|内容结束}} {{折叠面板|标题=试一试点一点|选项=2|主框=1|样式=success}} YYYYYYYYYYY {{折叠面板|内容结束}} {{折叠面板|标题=再来一次|选项=3|主框=1|样式=info}} ZZZZZZZZZZZZZZZZ {{折叠面板|内容结束}} {{折叠面板|结束}}