来自compass战斗天赋解析系统WIKI

首页 > 编辑指引



普通文章编辑

新建页面

写法:[[新建页面名]]或[[链接显示名|页面名]]或者直接输入 /compass/新建页面名


说明:在任意页面输入双括号,并在中间填写新建的页面名称 即可生成页面链接,点击即可进入编辑。直接在地址后输入想要新建的页面名也可以自动生成页面并直接跳入编辑页面


比如[[新手攻略]] 显示效果为新手攻略[[点击查看更多|新手攻略]] 显示效果为点击查看更多 实际还是链接到新手攻略页面


修改页面

对于一个已经存在的页面想要编辑页面的内容,请点击编辑源代码按钮,然后在当前页面利用ctrl+f功能定位到你要修改的内容,进行修改即可。



文章编辑

标题写法:


==二级标题名==


===三级标题名===


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


正文请顶格写 开头不要有空格 详细编辑教程请点此进入


插入图片方法:


将图片拖动到编辑框蓝色区域



然后点击插入图片就会生成一个默认宽度为400的图片


插入图片代码:


[[文件(或者File):文件名.文件格式|文件大小|文件位置|link=文件想要跳转的页面]]


示范:[[文件:首页.jpg|500px|center|link=首页]] 这样机会生成一个跳转到首页的宽度为500px的居中图片。详细图片编辑教程请点此进入


表格编辑

表格的代码以{|class="wikitable"开头 |}结尾


|竖线标志单元格


|-竖线横线标志一行的开始和结束

{|class="wikitable"

|A

|B

|-

|B

|A

|}


以上代码的效果就是一个标准的WIKI表格。效果如下


A B
B A


详细表格编辑教程请点此进入


排版

  • WIKI的攻略内容排版通常会有超长段的文字,导致展示出来的一整段观看很累,这时,可以在句号后换行。


  • 文章空行编辑时空两格。


  • 一整段内容结束编辑时空三格。



  • 一段内容内,相同的内链添加一个即可。


  • 需要跳转到对应页面的对应内容时可以,例:[[初音未来]],实际效果:初音未来

编辑常用技巧

内容引用

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


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


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


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


内容增加底色

  • 说明:使内容增加底色,凸显出来
  • 用途:部分重要内容,需要在原有底色上凸现出来,如更新专题中的部分更新内容较为重要,即可用底色凸显。
  • 写法:用表格将内容框起,在表格style=后加 background-color:#F2F2F2 (颜色根据情况自行选择,注意不要太过鲜艳)。
  • 你可以点击源代码查看具体写法

表格折叠

表格折叠使用方法
  • 说明:使内容折叠。
  • 用途:一般用于页面过长,将部分可选择性观看的内容折叠。
  • 写法:在表格class=后加 mw-collapsible(此时为默认展开,可折叠)。
    • 在表格class=后再追加 mw-collapsed(此时为默认折叠,可展开)。
    • 表格第一行为默认展示的内容,第二行开始到表格结尾可以折叠。


添加B站、优酷视频

B站视频

<div class="mwiki_hide" style="text-align:center"> <div class="bilibili" data-av="av8963246" data-w="720" data-h="'''520'''">正在加载</div> </div> <div class="wiki_hide"> <div class="bilibili" data-av="av8963246" data-w="100%" data-h="200">正在加载</div> </div>


  其中更改av号即可(有2处)。720、520为pc端的宽,高。


优酷视频

<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端的高,宽。


  • 最后点击保存页面,数据已添加完毕,感谢您WIKI分享的数据内容~



高级布局BOOTSTARP

栅格系统

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度None (自动)750px970px1170px
类前缀.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>

<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


文字修饰

文字颜色

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

大家都是欧洲人...

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

响应式工具

超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见
.visible-sm-*可见
.visible-md-*可见
.visible-lg-*可见
.hidden-xs可见可见可见
.hidden-sm可见可见可见
.hidden-md可见可见可见
.hidden-lg可见可见可见
类组CSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
  • 举个粟子 class="hidden-xs" 的标记会在手机访问时隐藏.visible-xs-block 意思是手机浏览时时显示为块元素,同理visible-xs-inline则为内联


预定义样式

按钮

Default Primary Success Info Warning
<span class="btn btn-default">Default</span>
<span class="btn btn-primary">Primary</span>
<span class="btn btn-success">Success</span>
<span class="btn btn-info">Info</span>
<span class="btn btn-warning">Warning</span>

Large spanLarge span
<span class="btn btn-primary btn-lg">Large span</span>
<span class="btn btn-default btn-lg">Large span</span>

Default spanDefault span
<span class="btn btn-primary">Default span</span>
<span class="btn btn-default">Default span</span>

Small spanSmall span
<span class="btn btn-primary btn-sm">Small span</span>
<span class="btn btn-default btn-sm">Small span</span>

Extra small spanExtra small span
<span class="btn btn-primary btn-xs">Extra small span</span>
<span class="btn btn-default btn-xs">Extra small span</span>


标签

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<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>


选项卡accordion

更新信息请参考 : 折叠面板


少年白色的明天等着你

他把秘密告诉给爱兔兔

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