DQXWIKI编辑教程

冰影风 于2年前修改了此页面。

导读

  • 词条名 就是页面名, wiki.joyme.com/dq10/词条名
新建词条:尽可能明确清晰,简明扼要唯一性,避免又长又臭又常见.
例如带有主观性词条推荐如下命名
同人文:xxx 章节一 / 游戏角色名: 真冷达西亚攻略 / 游戏角色名: 强战士某BOSS攻略 / 游戏角色名:家具搭配
请不要担心标题难看,可以自定义更改!

分类

[[分类:分类名称]] 定义一个词条的分类方便词条间的关联

词条间的关联

{{#set:参数=值}}用来储存词条数据 
 
在任意页面{{#show:词条名|?参数}}就会获得值, {{#show:词条名|?参数1|?参数2}} 

{{#ask:[[名::值]]}}就会显示所有 参数=值 的词条信息

{{#ask:[[分类:值]]}}就会显示所有 分类是值 的词条信息

详情参考特殊:询问

自定义标题

{{DISPLAYTITLE:自定义标题}}   可以让标题不与词条名相同

隐藏与指定显示目录

如果存在 __NOTOC__ 导航目录会隐藏,如果需要指定位置显示导航目录  则输入 __TOC__

指定怪物显示

{{#调用:怪物Y|monster_list_page_queryByName|犀男战士,贝霍伊姆史莱姆,血腥之剑}}

物价查询

<div class=" DQX_MODULE" data-m="工具" data-name="实时物价" data-code="物品ID串 必填否则无效"></div>

图库排版优化显示

默认情况下图册是有间隙的 影响美观参考下面的代码进行优化 

<div class=" DQX_MODULE" data-m="gallery">
<gallery>
排版风格1排版技巧.png|排版风格1排版技巧
排版风格1排版技巧.png|排版风格1排版技巧
</gallery>
</div>
<div class=" DQX_MODULE" data-m="gallery-plus">
<gallery>
排版风格1排版技巧.png|排版风格1排版技巧
排版风格1排版技巧.png|排版风格1排版技巧
</gallery>
</div>

  • 排版风格1排版技巧

  • 排版风格1排版技巧

普通文章编辑

新建页面

写法：[[新建页面名]]或[[链接显示名|页面名]]或者直接输入 http://wiki.joyme.com/dq10/新建页面名


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


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

修改页面

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


编辑教程1.png


文章编辑

标题写法：

==二级标题名==


===三级标题名===


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


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


插入图片方法：


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

编辑教程2.jpg


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


编辑教程3.png


插入图片代码：


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


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


写完的文章请将链接发至<a href="http://jq.qq.com/?_wv=1027&k=2CzHqPm">DQXWIKI群</a> 找管理员添加至首页或其他入口

表格编辑

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


|竖线标志单元格


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

{|class="wikitable"

|A

|B

|-

|B

|A

|}


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


A B
B A


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

引用全道具

{{item|中文}}

高级布局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>

选项卡与面板

{{#调用:布局|分组|标题1|danger|默认1|冰影风|爱兔兔|罗特}}
{{#调用:布局|分组|内容2|:展开}}
这里蕴含着神秘内容
{{#调用:布局|分组|内容结束}}
{{#调用:布局|分组|内容3}}
正在咏唱巴拉拉魔法
{{#调用:布局|分组|内容结束}}
{{#调用:布局|分组|内容4}}
受到冰影风影响变成一个依然爱美男子的基佬.
{{#调用:布局|分组|内容结束}}
{{#调用:布局|分组|内容5}}
笑...笑笑...一直在傻笑.
{{#调用:布局|分组|内容结束}}
{{#调用:布局|分组|结束}}
  • <a class="" data-target="#DQX_TABS_2" role="tab" data-toggle="tab">默认1</a>
  • <a class="" data-target="#DQX_TABS_3" role="tab" data-toggle="tab">冰影风</a>
  • <a class="" data-target="#DQX_TABS_4" role="tab" data-toggle="tab">爱兔兔</a>
  • <a class="" data-target="#DQX_TABS_5" role="tab" data-toggle="tab">罗特</a>

这里蕴含着神秘内容

正在咏唱巴拉拉魔法

受到冰影风影响变成一个依然爱美男子的基佬.

笑...笑笑...一直在傻笑.

  • 原始代码

<div class="panel panel-danger">
<ul class="panel-heading nav nav-tabs" role="tablist" style="margin-top:0px">
<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">这里蕴含着神秘内容</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>

面板

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

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

<a class="clearfix show" data-toggle="collapse" data-parent="#DQX_accordion-1" data-target="#DQX_collapse-1" style="display:block;">
不点一下下面吗
展开/折叠</a>

少年白色的明天等着你

<a class="clearfix show" data-toggle="collapse" data-parent="#DQX_accordion-1" data-target="#DQX_collapse-2" style="display:block;">
爱兔兔
展开/折叠</a>

喵~

<a class="clearfix show" data-toggle="collapse" data-parent="#DQX_accordion-1" data-target="#DQX_collapse-3" style="display:block;">
尼斯湖水怪
展开/折叠</a>

他把秘密告诉给爱兔兔 

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


推荐阅读

新手指南

avatar