来自碧蓝航线海事局
碧蓝航线WIKI > 碧蓝航线WIKI编辑教程
指挥官大人~欢迎来到碧蓝航线WIKI,您可以通过百度搜索“碧蓝航线WIKI 碧蓝海事局”直达本WIKI!如果是第一次来访的话,按“Ctrl+D”可以收藏WIKI随时查看更新哦~如果觉得WIKI好玩的话,记得安利给更多人哟ヾ(o◕∀◕)ノ


修改页面

如果想要编辑一个已经存在的页面,将鼠标移动到页面右上角的编辑按钮,在弹出的下拉菜单中点击源代码菜单项。
然后按下CTRL+F,使用页面搜索功能定位到你要修改的位置,进行修改。


编辑教程1.jpg


创建页面

首先,请在页面顶部导航栏右侧的搜索框中,输入页面的标题并搜索。
若这个页面不存在,则搜索页面会显示:

在本Wiki上新建名为“不存在的页面”的页面!另请查看搜索结果。

点击不存在的页面链接,来创建这个页面。


你也可以直接在浏览器访问地址

/blhx/不存在的页面

这样可以直接打开这个页面,并开始创建页面。


当某个已经存在的页面中,包含指向某个不存在的页面的链接时, 你也可以通过点击这个链接来创建页面。


基础编辑

章节

你输入的内容 你看到的显示
== 二级标题 ==

一级标题是页面名称,所以请从二级标题开始用起。

有四个以上标题的页面会自动生成一个目录。

这个自动生成的目录可以通过书写<code>__NOTOC__</code>来隐藏。

=== 三级标题 ===

输入更多的“等于号”(=)可以创建更多下一级标题。

==== 四级标题 ====

请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。


===== 五級标题 =====

二级标题

一级标题是页面名称,所以请从二级标题开始用起。

有四个以上标题的页面会自动生成一个目录。

这个自动生成的目录可以通过书写__NOTOC__来隐藏。

三级标题

输入更多的“等于号”(=)可以创建更多下一级标题。

四级标题

请不要跳跃标题等级,例如二级标题之下直接就是四级标题,而没有三级标题。


五級标题


行与段落

你输入的内容 你看到的显示
另起一行并不会导致换行,
而只是会增加一个空格。

空一个空行虽然可以换行,
但其实是开始了一个新的段落。


如果你对空一个空行产生的行间距不满,
你可以空两个空行<del>,或者空更多行</del>。

另起一行并不会导致换行, 而只是会增加一个空格。

空一个空行虽然可以换行, 但其实是开始了一个新的段落。


如果你对空一个空行产生的行间距不满, 你可以空两个空行,或者空更多行

另一种换行方式是使用<code><br/></code>标记来换行。<br/>
这样换行后的内容仍在'''同一段落'''内。

另一种换行方式是使用<br/>标记来换行。
这样换行后的内容仍在同一段落内。

* 星号(*)其实是符号列表。
** 但不知道为什么这个WIKI的列表,
*** 并不显示前面的列表前面的圆点。
**** 这很糟糕。
但更糟糕的是一些人通过符号列表来对文章换行。
* '''请务必不要这么做!'''
  • 星号(*)其实是符号列表。
    • 但不知道为什么这个WIKI的列表,
      • 并不显示前面的列表前面的圆点。
        • 这很糟糕。

但更糟糕的是一些人通过符号列表来对文章换行。

  • 请务必不要这么做!
# 井号(#)是数字列表。
## <del>曾经</del>每一行前面都有一个数字序号。
##* 甚至可以将数字列表与符号列表混用。
##*# <del>然并卵。</del>
同样,'''请勿用数字列表来换行和缩进!'''
  1. 井号(#)是数字列表。
    1. 曾经每一行前面都有一个数字序号。
      • 甚至可以将数字列表与符号列表混用。
        1. 然并卵。

同样,请勿用数字列表来换行和缩进!

: 冒号(:)最大的贡献是
:: 缩进!
::: 可以缩进到让你满意。
'''请用冒号(:)来缩进''',而不是用星号(*)或井号(#)!
冒号(:)最大的贡献是
缩进!
可以缩进到让你满意。

请用冒号(:)来缩进,而不是用星号(*)或井号(#)!

 如果一些行的开始是空格,
 那么这些行将被'''预格式化''',
 不会被换行。
 通常是用来显示一段代码之类的东西。
 也可以使用<pre>...</pre>。
如果一些行的开始是空格,
那么这些行将被预格式化,
不会被换行。
通常是用来显示一段代码之类的东西。
也可以使用<pre>...</pre>。
在拂晓的水平线上
----
刻下胜利吧!

在拂晓的水平线上


刻下胜利吧!

文字样式

你输入的内容 你看到的显示
''斜体''

'''粗体'''

'''''粗斜体'''''

斜体

粗体

粗斜体

<b>粗体</b>

<i>斜体</i>

<strong>强调</strong>

<s>划掉</s>

<del>删除线</del>

<code>代码</code>

粗体

斜体

强调

划掉

删除线

代码

<nowiki>不进行''wiki''解析</nowiki>

不进行''wiki''解析

<span style="color:red">应用CSS样式</span>

应用CSS样式

链接

你输入的内容 你看到的显示
[[标枪]]是一个站内链接。

也可以修改链接的显示文字,比如[[标枪|拯救失足少女标枪]]。

标枪是一个站内链接。

也可以修改链接的显示文字,比如拯救失足少女标枪

[[纳甘莫辛]]是一个指向不存在页面的链接。

纳甘莫辛是一个指向不存在页面的链接。

其他命名空间的页面的链接,比如[[特殊:上传文件]]或[[文件:标枪头像.jpg]]

其他命名空间的页面的链接,比如特殊:上传文件标枪头像.jpg

站外链接:
* [https://www.mediawiki.org/wiki/Help:Formatting/zh]
* [https://zh.wikipedia.org/wiki/Help:编辑页面 维基百科-帮助:编辑页面]

站外链接:

引用

说明:文章引用内容,对应内容外链。


用途:适用于页面部分内容引用外部内容(如一段话,引用了一篇文章),使你的文章有参考资料可查,内容更具可信度。


写法:<ref>[链接 链接页面名]</ref>


需要在页面最底部添加标题栏==外链与注释==。

插入图片

你输入的内容 你看到的显示
[[文件:标枪头像.jpg]]

标枪头像.jpg

[[文件:标枪头像.jpg|50px]]

标枪头像.jpg

[[文件:标枪头像.jpg|50px|center|link=标枪]]
标枪头像.jpg
[[文件:标枪头像.jpg|frame|50px|right]]
标枪头像.jpg
[[文件:标枪头像.jpg|thumb|right|标枪]]
标枪

你可以点击页面顶部导航栏的左侧的齿轮图标, 在弹出来的窗格中点击上传文件在打开的页面上传文件, 或者点击文件列表来查看已有的图片。


详细可以参考维基百科-帮助:图像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(此时为默认展开,可折叠)。
在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。


使用/编辑模板

  • 打开文章源代码页面,下方会显示该页面使用的模板(如果该页面有使用模板)
使用模板.jpg


  • 如下所述,是一个设计好模板,将需要填充的数据,以{{{XXX}}}的字样代替
使用模板2.jpg


  • 在其它页面使用该模板时,用{{模板名|XXX|XXX|XXX}}的方式填写数据。
使用模板3.jpg


  • 效果如下
使用模板4.jpg


小图标模板(舰娘)

使用{{小图标|舰娘名|自定义舰娘名(可留空)}},即可实现如下效果。

描述 你输入的内容 你看到的显示
直接引用舰娘名
{{小图标|光辉}}
光辉头像.jpg 光辉
引用改造舰娘名
{{小图标|标枪改}}
标枪改头像.jpg 标枪改
未知舰娘名
{{小图标|猜猜我是谁}}
未实装的舰娘 猜猜我是谁


小图标2模板(装备)

使用{{小图标2|装备名T几|自定义装备名(可留空)}},即可实现如下效果。

描述 你输入的内容 你看到的显示
直接引用装备名
{{小图标2|双联100mm98式高射炮T3}}
双联100mm98式高射炮T3.jpg 双联100mm98式高射炮T3
自定义装备名
{{小图标2|双联100mm98式高射炮T3|秋月炮}}
双联100mm98式高射炮T3.jpg 秋月炮

舰娘图鉴模板

参考:舰娘图鉴导入数据方法


WIKI编辑参考


站外扩展

B站视频

{{B站视频|av号}}


  在“av号”处输入纯数字av号即可。默认长宽为600*421,如需更改长宽,请使用{{B站视频|av号|长|宽}}

优酷视频

<div class="mwiki_hide" style="text-align:center">
<iframe height=434 width=700 src='http://player.youku.com/embed/XMjY2MjkwNzU5Mg==' frameborder=0 'allowfullscreen'>
</iframe></div>
<div class="wiki_hide"><iframe height=300 width=100% src='http://player.youku.com/embed/XMjY2MjkwNzU5Mg==' frameborder=0 'allowfullscreen'>
</iframe></div>


    其中更改XMjY2MjkwNzU5Mg==即可(有2处),434、700为pc端的高,宽。


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>

显示为:

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6


响应式设计

超小屏幕手机 (<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>

警告框

你看到的显示 你输入的内容
<div class="alert alert-success" role="alert">这是一个成功的提示。</div>
<div class="alert alert-info" role="alert">这是一个信息的提示。</div>
<div class="alert alert-warning" role="alert">这是一个警告的提示。</div>
<div class="alert alert-danger" role="alert">这是一个危险的提示。</div>


额外信息

<div class="alert alert-success" role="alert">
<div class="h2">Well done!</div>
Aww yeah, you successfully read ...
<hr>
...
</div>

关闭按钮

× 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 content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<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>

选项卡面板

碧蓝航线wiki、海事局的大佬们
凉宫春日?总被乐乐教育
身兼数职,数据?攻略?技术?
据说和群里某位有说不清道不明的关系

原始代码

<div class="panel panel-danger">
<ul class="panel-heading nav nav-tabs" role="tablist" style="margin-top:-1px; margin-left:-1px">
  <li role="presentation" class="active"><a data-target="#home" role="tab" data-toggle="tab">默认</a></li>
  <li role="presentation"><a data-target="#profile" role="tab" data-toggle="tab">中二</a></li>
  <li role="presentation"><a data-target="#messages" role="tab" data-toggle="tab">寂寞</a></li>
  <li role="presentation"><a data-target="#settings" role="tab" data-toggle="tab">北方</a></li>
</ul>
<div class="panel-body tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">碧蓝航线wiki、海事局的大佬们</div>
  <div role="tabpanel" class="tab-pane" id="profile">凉宫春日?总被乐乐教育</div>
  <div role="tabpanel" class="tab-pane" id="messages">身兼数职,数据?攻略?技术?</div>
  <div role="tabpanel" class="tab-pane" id="settings">据说和群里某位有说不清道不明的关系</div>
</div>
</div>

选项卡面板(模块)

参考:模块:选项卡面板

【商船护送】的相关内容

【海域突进】的相关内容

【斩首行动】的相关内容

{{#invoke: 选项卡面板| 开始
| 样式=primary
| 标签样式=font-weight:bolder;
| 标签1=商船护送
| 标签2=海域突进
| 标签3=斩首行动
| 选中=1
| ID1=Shangchuan
| ID2=Haiyu
| ID3=Zhanshou
}}
{{#invoke:选项卡面板| 开始内容|1| ID=Shangchuan|选中=1}}
【商船护送】的相关内容
{{#invoke:选项卡面板| 开始内容|2| ID=Haiyu}}
【海域突进】的相关内容
{{#invoke:选项卡面板| 开始内容|3| ID=Zhanshou}}
【斩首行动】的相关内容
{{#invoke:选项卡面板|结束}}

折叠面板

参考:模板:折叠面板

少年白色的明天等着你

他把秘密告诉给爱兔兔

{{折叠面板|开始}}
{{折叠面板|标题=不点一下下面吗|选项=1|主框=1|样式=primary|展开=是}}
少年白色的明天等着你
{{折叠面板|内容结束}}
{{折叠面板|标题=爱兔兔|选项=2|主框=1|样式=success}}
喵~
{{折叠面板|内容结束}}
{{折叠面板|标题=尼斯湖水怪|选项=3|主框=1|样式=info}}
他把秘密告诉给爱兔兔
{{折叠面板|内容结束}}
{{折叠面板|结束}}