本WIKI由旅行者酒馆于2020年03月14日申请开通,编辑权限开放,建议收藏,后续更新计划见WIKI建设反馈区

旅行者酒馆祝大家新年快乐!! 感谢大家2020年对我们的支持,新的一年旅行者酒馆会再接再厉,继续为大家提供更新原神相关内容!
BWIKI反馈留言板  ·  WIKI编辑教程  ·  BWIKI收藏到桌面的方法说明

原神WIKI编辑教程

来自原神WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
IJN_Hibiki
挽流云
迦洛翎
丛云酱
congeal_plume
趁鱼香
本页面内容正在施工!
在页面内容完成前,请勿随意修改!对本页面内容产生疑问或有意见提出时,可以在下方评论区进行留言

编者留言:本页面施工中模板为展示用,请不要删除哦~


如果是第一次来,按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话,请推荐给朋友哦~(◕ω<)☆
按右上角“WIKI功能→编辑”即可修改页面内容,新建相应的图鉴页请点击 创建图鉴.png

不知道怎么编辑wiki?WIKI基础教程功能教学

在WIKI上发布攻略/文章

  • 首先在首页找到,攻略创建入口,如图,在左下角处

进入攻略创建页面.png

  • 然后,进入快捷创建攻略入口,输入想要创建的攻略标题

输入想要创建的攻略标题.png


  • 进入写攻略的页面,正常内容内容即可

在空白处更新内容.png


修改页面

在对本WIKI进行修改创作前请确认你已经注册并登录账户
  • 目前,原神wiki绝大部分界面对所有登录用户开放编辑权限,但是修改后会由管理员审核(速度很快),如有大量或深度编辑需求,可进首页群联系相关人员。


  • 将鼠标移动到页面右上角的编辑按钮,或点击wiki功能-编辑即可编辑。

可以通过按下CTRL+F,使用页面搜索功能定位到你要修改的位置,方便修改。

补充缺失的图片

QQ截图20200909160726.jpg

  • 点击红框处的60px,进图传图页面如下图:

QQ截图20200909160907.jpg

  • 选择你需要传输的图片,然后把图名片命名成,页面的图片名,例如:冒险家怀表。并且注意图片格式是否为和目标文件相符(如PNG格式),点击上传文件即可。
  • 如果有大量同类文件需要补充的情况,如:所有角色的待机动作2缺失,可以在找到文件名规律后,在本地完成命名,再进入任意wiki编辑界面,把所需的所有图片拖拽到文字提示处,点击上传即可。(由于缓存机制,成功补充的图片可能无法立即显示,可以在上方导航条 导航-常用链接-文件列表查看是否上传成功。)

QQ截图20200909161524.jpg

上传新图

  • 在你编辑、创建的页面中,找到

QQ截图20200909161524.jpg


  • 把你所需的图片拖拽到文字提示处,选择插入为图片,就可以看到WIKI自动调用的图片代码了。文件命名请尽量规范易懂。

企业微信截图_20200909161601.png


补充缺失的角色/武器/食物/圣遗物/…

  • 点击上方导航条 导航-常用链接-创建新页面,找到对应的类别,填写名称,点击创建页面
  • 在新页面填写相关信息,保存。注意不要删除任何页面内本来存在的内容,除非您明确知道对应内容的实际显示。举例:创建一个名为“测试机器人”的新角色。
Wiki基础教程配图01.png
  • 如果不清楚填写的格式,可以参考现有角色的编辑界面。或点击下方本预览使用的模板:-模板:XX查看。
Wiki基础教程配图02.png


删除(误改)了一个东西怎么办?

  • 如果还未保存,直接关闭页面不保存即可。
  • 如果已经保存,请点击页面右上角的或者wiki功能-查看历史,然后撤销本次编辑皆可。


基础编辑

章节

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

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

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

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

=== 三级标题 ===

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

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

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


===== 五級标题 =====
Wiki基础教程配图03.png


行与段落

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

在拂晓的水平线上


刻下胜利吧!

文字样式

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

'''粗体'''

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

斜体

粗体

粗斜体

注:每嵌套一个<big>标签,字体就增大一号,直至最大7 号文本,但更建议使用<span style="font-size:50px">内容</span>直接设定字体大小的方法。

<b>粗体</b>

<i>斜体</i>

<strong>强调</strong>

<big>大号字体</big>

<s>划掉</s>

<del>删除线</del>

<u>下划线</u>

<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:编辑页面 维基百科-帮助:编辑页面]

站外链接:

有时,wiki对于一些多重复合符号的识别可能会出问题,比如[https://bbs.mihoyo.com/ys/article/4039822 [[点击此处]]],这时,可以使用HTML语言代替。
如<a url=https://bbs.mihoyo.com/ys/article/4039822>[[点击此处]]</a>

有时,wiki对于一些多重复合符号的识别可能会出问题,比如[[点击此处]],这时,可以使用HTML语言代替。 如[[点击此处]]

引用

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


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


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


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

插入图片

当您想在编辑过程中插入您想要的图片时,首先需要上传该图片。上传图片的按钮位于编辑工具栏的顶部。
您需要注意以下几点:

  1. 您需要为上传的图片命名,准确的命名将使图片便于分类和索引,请避免使用纯数字,纯符号作为图片命名,请不要把QQ和微信截图随意上传。
  2. 上传的图片格式一般为jpg、png、gif,图片大小应在2M及以下为宜。
  3. 您上传的图片应具有意义,不允许涉及血腥、暴力等敏感因素,违规的图片将会被管理员删除。
  4. 上传的图片可以在特殊:文件列表中找到,在该页面的搜索栏输入文件名提交即可。有的时候明明上传了文件,搜索栏却无法搜索到,您可以重进页面然后再次尝试搜索。
你输入的内容 你看到的显示
[[文件:派蒙.png]]

派蒙.png

[[文件:派蒙.png|50px]]

派蒙.png

[[文件:派蒙.png|50px|center|link=派蒙]]
[[文件:派蒙.png|50px|居中|link=派蒙]]
派蒙.png
[[文件:派蒙.png|frame|50px|right]]
[[文件:派蒙.png|边框|50px|右]]
派蒙.png
[[文件:派蒙.png|thumb|right|派蒙]]
[[文件:派蒙.png|缩略图|右|派蒙]]
派蒙


详细可以参考维基百科-帮助:图像MediaWiki-帮助:图像

表格编辑

可视化工具【推荐】

https://www.tablesgenerator.com/mediawiki_tables

基本用法

{| class="wikitable"
|-
! 标题文字1
! 标题文字2
! 标题文字3
|-
| 示例1
| 示例2
| 示例3
|-
| 示例4 
| 示例5
| 示例6
|}

提交编辑后,表格显示为:

标题文字1 标题文字2 标题文字3
示例1 示例2 示例3
示例4 示例5 示例6

其中{|开头, |}结尾, !为表头, |为单元格, |-表示表格行的开始。


详细可以参考维基百科-帮助:表格MediaWiki-帮助:表格


可折叠表格

{|class="wikitable mw-collapsible mw-collapsed" style="width:100%"
|-
!'''表格折叠使用方法'''
|-
|
'''说明:'''使内容折叠。

'''用途:'''一般用于页面过长,将部分可选择性观看的内容折叠。

'''写法:'''在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
<br>
在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
<br>
表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。
|}
表格折叠使用方法

说明:使内容折叠。

用途:一般用于页面过长,将部分可选择性观看的内容折叠。

写法:在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。


单元格跨行/跨列

请使用预览功能确保实际效果符合预期。
跨行:在单元格内容前加rowspan=n|
跨列:在单元格内容前加colspan=n|
注意单元格跨行跨列后其他行的内容问题。
{| class="wikitable"
|-
! rowspan=4|跨4行的标题 !!标题 !!标题!!标题
|-
| colspan=2|跨2列的内容 || 示例
|-
| rowspan=2|跨2行的内容 || 示例 || 示例
|-
| 示例 || 示例
|}
跨4行的标题 标题 标题 标题
跨2列的内容 示例
跨2行的内容 示例 示例
示例 示例

单元格指定宽度

在单元格内容前加width=宽度|
可使用多种尺寸单位,包括em、px、%等
改变某一单元格的宽度,同列单元格也会相应改变。
{| class="wikitable"
|-
! 标题文字 !! 标题文字
|-
| style="width:200px"|宽度设为200px || 示例
|-
| 示例 || 示例
|}

Wiki教程 表格.png




模板

  • 打开文章源代码页面,下方会显示该页面使用的模板(如果该页面有使用模板)
  • 如下所述,是一个设计好模板,将需要填充的数据,以{{{XXX}}}的字样代替
  • 在其它页面使用该模板时,用{{模板名|XXX|XXX|XXX}}的方式填写数据。


WIKI编辑参考


模板速查

原神wiki模板一览(可读性较差,仅供速查使用,无编辑经验者建议看完以下内容)
点击下文模板标题可以查看更多使用示例哦~

模板:待补充

  • 用途:鼓励补充内容。


  • 使用:
代码 效果
{{待补充}}
本页面内容存在缺失!
欢迎您参与到WIKI页面的编辑中来,补充内容时请以 游戏内容 为准进行编辑,引用外部内容时请  注明来源链接
编辑时 需要帮助 或对编辑的内容 产生讨论需求 时,可以在下方评论区留言

模板:施工中

  • 用途:用于有大量内容需要编辑时先行添加保存,以避免其他人编辑冲突。


  • 注意:点击编辑框下方显示预览可查看编辑后效果,请尽量避免多次提交内容较少的小编辑。


  • 使用:
{{施工中|编者留言(可选)}}
代码 实际效果
{{施工中|本页面施工中模板为展示用,请不要删除哦~}}
见本页面顶部


模板:左侧目录

  • 用途:用于攻略等文字量较大的页面,生成一个固定在左侧的目录以方便用户阅读和跳转,使用后会替换默认目录。


  • 注意:只推荐在您自行编写的攻略类页面使用,请务必不要在原本的角色/武器等wiki页面使用。


  • 使用:
代码 实际效果
{{左侧目录|开始}}
页面内容
{{左侧目录|结束}}
见本页面


模板:提示

  • 用途:添加警告、备忘提示等内容。


  • 使用:
{{提示|颜色|内容|第一句话|宽度=提示板宽度}}

颜色:常用的有绿色、蓝色、黄色、红色,默认为红色。(其中,成功=绿色,消息=蓝色=提示,注意=黄色=警告,错误=红色=危险。)
内容:填写想要在信息框内展示的文本内容。
第一句话:自带加粗换行变色(同左侧线条颜色)。
提示板宽度:不填则空,默认为800px。


代码 效果
{{提示|红色|不要忘记打周常!|宽度=100%}}
不要忘记打周常!


模板:折叠


  • 用途:折叠活动剧情/CG合集等内容量大且不适合剧透的内容,防止剧透。


  • 使用:

简易版:
需要在使用界面加上{{JS|fold}}(JS需要大写)

{{折叠
|标题(必填/默认“我是标题”)
|内容(必填/默认“我是内容”)
|颜色(可选/可选颜色:“红、黄、蓝、绿、
RGB颜色[eg:#4a80c0]”/默认:蓝)
|边框(可选/默认10px,控制上下间距)
|折叠(可选/是、否/默认否)
}}
代码 效果
{{折叠
|标题=我是折叠模板
|内容=我是折叠模板内容
}}

我是折叠模板

我是折叠模板内容


复杂版(当折叠内容嵌套有表格等时):

{{折叠面板|开始|主框=1}}
{{折叠面板|标题=测试标题1|选项=1|主框=1|样式=info|展开=是}}
测试内容
{{折叠面板|内容结束}}
{{折叠面板|结束}}

主框: 数字或者英文,可选,如果存在多个不同的折叠组时必选.注意!标题与开始的主框参数必须一致.
选项:数字或者英文,可选,一个组里面大于一个选项是必选.且选项值不能相同
样式:固定参数,可选,可选范围:primary,success,info,warning,danger. 默认:primary
展开:值任意,可选.是否直接展开
badge:任意值,可选.标题样式与右侧的折叠样式一致.
代码 效果
{{折叠面板|标题=防剧透|折叠=是|样式=info}}
{| class="wikitable"
|-
| 绸缎包裹的礼物盒,是女孩子喜欢的款式。 || 佳节将至,代凝光大人遥祝您身体健康,诸事顺心!
|-
| 沉木制作的礼盒,上面的图案有些熟悉。 || 阁下近来如何?若是遇到了新奇的书籍,记得帮在下留意祝诸事顺遂,佳节快乐,有缘相会。
|-
| 磨损严重的硬皮纸袋,有海风的气味。 || 趁着节日吃好喝好啊,有机会一起出海!
|-
| 细锦包着的包裹,里面放着礼物和信纸。 || 多亏了您,总算保住了我这块招牌。 下次您来请您听新书~祝您平安喜乐!
|}
{{折叠面板|内容结束}}
防剧透展开/折叠
绸缎包裹的礼物盒,是女孩子喜欢的款式。 佳节将至,代凝光大人遥祝您身体健康,诸事顺心!
沉木制作的礼盒,上面的图案有些熟悉。 阁下近来如何?若是遇到了新奇的书籍,记得帮在下留意祝诸事顺遂,佳节快乐,有缘相会。
磨损严重的硬皮纸袋,有海风的气味。 趁着节日吃好喝好啊,有机会一起出海!
细锦包着的包裹,里面放着礼物和信纸。 多亏了您,总算保住了我这块招牌。 下次您来请您听新书~祝您平安喜乐!


模板:颜色

  • 用途:更方便地改变文字颜色,比如角色技能介绍处不同元素会使用对应的不同颜色。


  • 使用:
情况 代码 效果
通用:
{{颜色|红|内容}}
{{颜色|蓝|内容}}
{{颜色|黄|内容}}
{{颜色|绿|内容}}
{{颜色|描述|内容}}
{{颜色|描述1|内容}}
{{颜色|栗梅|内容}}
{{颜色|弁柄色|内容}}

内容 内容 内容 内容 内容 内容 内容 内容

角色官方故事/活动提示重点时常用:
{{颜色|描述|内容}}
内容
元素:
{{颜色|火|内容}}
{{颜色|水|内容}}
{{颜色|冰|内容}}
{{颜色|雷|内容}}
{{颜色|风|内容}}
{{颜色|草|内容}}
{{颜色|岩|内容}}

内容 内容 内容 内容 内容 内容 内容

元素1:
{{颜色|火1|内容}}
{{颜色|水1|内容}}
{{颜色|冰1|内容}}
{{颜色|雷1|内容}}
{{颜色|风1|内容}}
{{颜色|草1|内容}}
{{颜色|岩1|内容}}

内容 内容 内容 内容 内容 内容 内容


模板:背景

  • 用途:方便地创作带有圆角色块背景的文字,主要用以模仿官方公告形式,增加美观度等。


  • 使用:
情况 代码 效果
颜色:
红{{背景|红|文字}}示例。
橙{{背景|橙|文字}}示例。
黄{{背景|黄|文字}}示例。
绿{{背景|绿|文字}}示例。
蓝{{背景|蓝|文字}}示例。
白{{背景|白|文字}}示例。
黑{{背景|黑|文字}}示例。
栗梅{{背景|栗梅|文字}}示例。
弁柄{{背景|弁柄|文字}}示例。

文字示例。 橙文字示例。 黄文字示例。 绿文字示例。 蓝文字示例。 白文字示例。 黑文字示例。 栗梅文字示例。 弁柄文字示例。

角色官方故事/活动提示重点时常用:
描述{{背景|描述|文字}}示例。
描述1{{背景|描述1|文字}}示例。

描述文字示例。 描述1文字示例。

元素:
{{背景|火|内容}}
{{背景|水|内容}}
{{背景|冰|内容}}
{{背景|雷|内容}}
{{背景|风|内容}}
{{背景|草|内容}}
{{背景|岩|内容}}

内容 内容 内容 内容 内容 内容 内容

元素1:
{{背景|火1|内容}}
{{背景|水1|内容}}
{{背景|冰1|内容}}
{{背景|雷1|内容}}
{{背景|风1|内容}}
{{背景|草1|内容}}
{{背景|岩1|内容}}

内容 内容 内容 内容 内容 内容 内容


模板:黑幕


  • 用途:用于玩梗/剧透时防止用户直接看到内容使用。
对于黑幕,移动光标至文字上即可解除遮罩。
对于刮刮卡,选中文字即可擦开,若无法使文字被选中,请检查浏览器或JS是否劫持了相关操作


  • 注意:解开黑幕、刮刮卡的操作在移动端上体验不佳,为照顾移动端体验,请避免过多使用。


  • 使用:
情况 代码 效果
黑幕
{{黑幕|文字}}
文字
刮刮卡
{{刮刮卡|文字}}
文字

模板:图标

  • 用途:让信息更直观和便于跳转,如活动「福至五彩」中列出可拍摄的对象时,使用图标模板更美观,也可以更方便地跳转到相应怪物的页面。


  • 使用:
情况 代码 效果
通用(材料、武器、角色等),需要有对应的XX.png否则无法正常显示。
{{图标|<名称>|<数量(可选)>}}
如:{{图标|原石|160}}
图  原石 × 160 
野生生物
{{图标|生物|冰晶蝶}}
图  冰晶蝶
命之座
{{图标|命之座|外酥里嫩}}
图  外酥里嫩


模板:计时


  • 用途:提示活动时间、道具过期时间等


  • 使用:
情况 代码 效果
通用
{{计时
|年【默认为当前年】
|月【默认为当前月】
|日【默认为当前日】
|时【默认为0】
|分【默认为0】
|秒【默认为0】
|显示时间=文本【默认为填写的时间】
|禁用天=
|禁用时=【默认为空】
|禁用分=【默认为空】
|禁用秒=【默认为空】
|隐藏分类=【默认为空】
|编号=数字【默认为1】
}} 
  1. 必须存在编号=1【如果一个页面只使用一次,则无需编号,默认为1】。
  2. 可以跳号,但是整个页面的编号必须由小到大排列。
{{计时|2020|9|28|编号=1}}
活动
{{活动计时|填写活动名字,活动等|开始时间(精准到秒)|结束时间(精准到秒)}}
{{活动计时|「地脉移涌」|2021/02/26 04:00|2021/03/05 03:59}}


模板:人物对话

  • 用途:创作出带人物头像、能跳转角色页面的精致对话内容。



  • 使用:
    {{人物对话|左/右|人物名| 文字内容| 备注 | 头像= [[文件:X.png |link=Y]]}}
  1. 显示方向
  2. 人物的名字(不填头像参数且存在对应图片,浏览者点击头像会跳转到名字对应页面)
  3. 聊天框的内容
  4. 备注文字
  5. 头像(可省略) 人物头像的图片(省略时将根据角色名字自动设置,如不存在对应图片则默认为未知角色.png)
代码 效果
{{人物对话|左|香菱| 11111111111111111| 刚刚}}
{{人物对话|右|刻晴| 222222222222222222222| 刚刚}}
{{人物对话|左|丘丘人| 3333333333333333333333| 刚刚}}
{{人物对话|右|??| 。。。|| 头像= [[文件:天空之傲.png |link=]] }}
{{人物对话|左|| 11111111111111111| 刚刚}} 
{{人物对话|右|维多利亚| 11111111111111111| }}
香菱.png
香菱
刚刚
11111111111111111
刻晴.png
刻晴
刚刚
222222222222222222222
丘丘人.png
丘丘人
刚刚
3333333333333333333333
天空之傲.png
??
。。。
未知角色.png
刚刚
11111111111111111
未知角色.png
维多利亚
11111111111111111

模板:剧情选项

  • 用途:使玩家点击不同选项能进入并显示不同分支的内容。


  • 注意:与#模板:人物对话的区别是对多分支对话的支持。可以参考同类页面的选择。



  • 使用:
同一条剧情有多句话用<br>换行,见“示例代码-剧情2”所示
用途 语法 示例代码 示例结果
剧情对话选项
{{剧情选项
|选项1(必填)
|剧情1(必填)
|选项2(必填)
|剧情2(必填)
|选项3(可选)
|剧情3(可选)
|选项4(可选)
|剧情4(可选)
}}
{{剧情选项
|选项1=旅行者:是应急食品。
|剧情1=派蒙:完全不对!怎么还不如吉祥物啊!
|选项2=旅行者:是朋友。
|剧情2=派蒙:嗯,虽然是认识才两个月的旅伴…<br>
派蒙:但已经是最好的朋友了!
}}
旅行者:是应急食品。
旅行者:是朋友。

派蒙:完全不对!怎么还不如吉祥物啊!
派蒙:嗯,虽然是认识才两个月的旅伴…
派蒙:但已经是最好的朋友了!

模板:图片放大

  • 用途:放大图片。玩家鼠标移到图片上会显示一个放大镜,点击图片可以查看大图。


  • 使用:
使用会导致导航栏不再悬浮;无法放大超过原图大小
用途 语法 示例代码 示例结果
要放大的图片
{{图片放大
|图片名称(png格式)
|默认大小(可选/默认200px)
|放大后大小(可选/默认400px)
|小图位置(可选左、中、右/默认中)
}}
{{图片放大|茶羽鹰详图|200px|800px|右}}
茶羽鹰详图.png
茶羽鹰详图.png

模板:文案引号

  • 用途:输入“「」”。输入法不方便使用“「」”的时候可以用用。


  • 使用:
代码 效果
{{文案引号|内容}}
「内容」


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>