你与高级格式
你好，最近过得怎么样？
本文写给那些想要摆脱基础的加粗，斜体，折叠块的人。我也会讲这些，但这篇指导的大部分都将用于文章的高级设计。
如果你在寻找更基础的格式，ghostchibi在这里写了一篇有用的文章。
本教程内的一些应用实例在我的一些SCP里，例如SCP-3872 和 SCP-027-J.
如果你对于本教程有任何问题，请给我发一条wikidot私信！
第一节：基础wikidot格式窍门
有一些wikidot基本格式本身就很刁钻，而且没有很好的解释说明。以下是我最常收到问题的两个部分：
引用块
显示引用块代码
要使用引用块，你应该在一行的开头键入“> ”。注意>后面的空格。
代码：
> 这是产生引用块的代码的一个例子。
>
> 此处有一处断行。注意引用块中新的一行里>后面的空格。
结果：
这是产生引用块的代码的一个例子。
此处有一处断行。注意引用块中新的一行里>后面的空格。
分页
显示分页代码
分页使你能够将信息组织成可浏览的方式，并节省空间。
代码：
[[tabview]]
[[tab 分页1的名称]]
这里是你的文字/文章
[[/tab]]
[[tab 分页2的名称]]
这里是你的文字/文章2
[[/tab]]
[[/tabview]]
结果：
这里是你的文字/文章
这里是你的文字/文章2
嘿，嘿Magnus，这边这个页面有些特别特别好的格式然后我想用这个格式。现在教我吧！
好，随机公民，这比你想的要简单。在主站
这个会让你找到任何你想在wiki上找到的东西，如果你不知道该做什么的话。
第二节：使用非wikidot代码
这就是事情变有趣的时候。Wikidot支持所有类型的对象，他们不只有自己的标记语言，你也可以加入自定义div。
代码：
[[div id="myDiv" style="background-color: green; text-color:white;"]]
这是一个div！
[[/div]]
结果：
这是一个div！
Div是定义一样东西来容纳另一样东西的标准Web容器。这些东西可以是文字，其他div，span，以及其他Web对象。你真的可以使用性质来随意设计他们。
这基本是由叫做CSS，或cascading style sheets，来完成的。它们会覆盖默认的wikidot格式，而这也是我的折叠块和你们熟悉的那种有些不一样的原因。
使用Div能够让你创建方框和其他不同种类的形状来配合你文章的需要。
举个例子，如果你想要某些东西看起来像短信聊天：
代码：
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
我喜欢大屁股，而且我不能说谎。
[[/div]]
[[html]]
<br/>
[[/html]]
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: #blue;padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
我另一个弟兄无法否定。
[[/div]]
[[/div]]
结果：
我喜欢大屁股，而且我不能说谎。
我另一个弟兄无法否定。
就像你看到的，你能用这个干很多事。你也能看到，我有另一个非标准wikidot代码段：HTML块。
如果你知道如何写HTML的话，你可以把它写在一个[[html]] [[/html]]块里面。HTML块可以包含所有你想要的东西，包括<script>标签里的HTML和javascript。
这让你实现了许多超棒的组件。其中一个我被问的最多的组件是关于如何实现双重折叠块的
它们做起来没有那么难。需要注意的是，每一级的星号前都比前一级多一个空格。
代码
[[div class="foldable-list-container"]]
* Lol 折叠
* 第二个
* 更多
* 甚至更多
* 测试
[[/div]]
结果：
- Lol 折叠
- 第二个
- 耕垛
- 甚至耕垛
- 测试
你也可以改变可折叠列表容器div，但编辑css模块来将元素包含在div中。要理解如何实现，请见第三和第四节。
常用于管理页面的非wikidot代码的最后一部分叫做iframes。
I frames用于将另一网站的完整内容包含在现有的页面中。下面是一个例子：
代码：
[[iframe http://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
结果：
这是一个来自我的网站的页面——一个获得随机SCP的按钮，我常在这个网站中创建一些技术性项目。它获取原网页后将网页显示在目前页面中的一个较小的div里。这就是SCP-895和SCP-027-J中一些“高级”图片的实现方式。
举个例子，SCP-027-J的图片块是由如下代码实现的：
代码：
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://home.helenbot.com/images/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J？
[[/div]]
[[/div]]
结果：
SCP-027-J?
第三节：Div及设计方式
所以你看过div了，它的一些部分写着“Style”。这些是CSS硬编码的设置，如果需要的话，你可以在单个对象的基础上定义这些设置，或者你也可以加入你自己的自定义CSS设置。
这是目前页面的CSS模块：
[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
text-color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content{
text-align: left;
}
.collapsible-block-folded, .collapsible-block-unfolded{
text-align: center;
text-color: black;
}
[[/module]]
他们具体做的是覆盖了折叠块的CSS设置，就如上面的可折叠部分一样。
CSS模块允许你对页面做任何事情，你甚至可以改变父容器的颜色。你可以改变页面本身的颜色，就像许多GoI中心页中所见，比如第三定律主页。你也可以在将CSS存储在另一个页面中后导入它，就像上面的主页一样。
需要注意的是，任何添加到“父”容器的属性都会添加到它的子容器中，除非该属性已经被子属性覆盖了。如果你将一个div中的文字居中，其内部所有div中的所有文字都会居中，除非你在“子”div中覆盖了它。
本文不是CSS教程，但基本概念如下：
Div ID
一个#符号表示一个ID。当你给予div一个ID=“myId”，这将表示CSS模块中的#myId { /*属性在此 */ }。单个ID表示页面中的单一元素。
例子：
这会让所有myId中的文字变成红色。#myId{
color: red;
}
Div 类
.符号表示一个类。类类似于ID，但该css类中的所有效果都会附加到该类的元素上。所有“myClass”类的div都会获得CSS中.myClass { /*属性在此*/}的值。
例子：
这会使每个.myClass对象拥有1像素宽的实心黑色边框。.myClass {
border: solid black 1px;
}
嵌套ID和类
你也可以“嵌套”这些结构。.myClass .myClass2 { /*属性*/}表示“所有.myClass div中的 .myClass2 div”所有不在.myClass div中的.myClass2 div都不会受到影响。
例子：
这会使所有#myId1中的.myClass对象使用helvetica字体。#myId1 .myClass {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
将同一格式应用于多个ID和/或类
你也可以使用,来将相同的格式应用于多个类或ID。#myId1, #myId2 { /*属性*/}会将所有属性应用在#myId1和#myId2上。类也是一样的，属性会同时应用在两个类上。
例子：
这会使所有.myClass元素和特定的myId1元素拥有居中文字。#myId1, .myClass {
text-align: center;
}
第四节：为欢乐与利润管理页面
最后一节是个大问题：如果你想修正一些东西，我到底怎么知道该改什么？
这不是web开发教程，所以这部分不是很完整。尽管如此，我还是会给你上一节更改元素属性的速成课。
如果你将鼠标置于某物上（字面意思，网页上的任何位置）并右键，应该有一个写着“检查元素”的选项。这会打开一个视图，看起来像个巨大的控制面板。
如果你把鼠标置于上面第二节中蓝色的“短信息”上，并检查元素，你会看到如下所示的属性：
element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}
你可以点击这些属性的右边并更改任何属性，或者点击它们的上方或下方并添加属性。弄懂它的最佳方式是实验。如果这些都不行，谷歌你想要的属性，或你想做的事的大致描述，后面加上“CSS”。
试试把“background: blue”属性改为不同的颜色。这只会影响你的网页，而不会影响其他人看到的网页。
第五节：Listpages3
好嘞，这个感觉有点像曾祖父。Listpages是wikidot提供的一个模块，用于在wiki上查询标准，并显示结果。它最简单的应用是：
代码：
[[module ListPages created_by="DrMagnus" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Created On: %%created_at%%
[[/module]]
结果：
列表暂不可用： 此 ListPages 查询尚未由只读迁移站支持。
这是一个简单的页面选择，选出5篇我，DrMagnus，写的页面，不加断行。在这个模块的“本体”中，你写入你想显示的东西。这里我显示了标题、评分、及创建时间。
Listpages会明显地让页面变慢，如果你写了很多的话。非常不推荐每页写多于一个的Listpages。
以下是部分查询标准及可选的东东。
标准
[[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- pagetype
- "normal": 非隐藏页面
- "hidden": 隐藏页面
- "*": 二者
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- category
- "." 表示目前分类(默认)
- "*" 表示所有分类
- 其它，一个由空格/逗号分割的分类列表
- 分类默认是加和的（分类或分类或分类)
- "-category" 表示除去此分类的页面（AND NOT - 与非)
- "%%category%%" 表示与目前页面相同的分类（如果在_template页面中使用)
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- Tags
- "-" 表示没有标签的页面，可见或不可见
- "=" 表示与目前页面拥有任何相同可见标签的页面
- "==" 表示与目前页面拥有一模一样可见标签的页面
- 其它，以空格/逗号分割的标签列表
- 标签默认是加和的
"-tag" 表示没有此标签（AND NOT - 与非)
- "+tag" 表示包含此标签（AND - 与)
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 父页面选择器
4 ： - "-" 表示没有父页面
- "=" 表示目前页面的兄弟（相同父页面)
- "-=" 表示与目前页面拥有不同父页面
- "." 表示目前页面的孩子（父页面是本页)
- 其它：指定完整页面名称
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 外向链路（反向连结）:
5 - 输入一个存在页面的完整名称来选择链向该页面的页面
- 以及"."表示链向目前页面的页面
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 创建日期选择器：
6 - "=" 表示与目前页面在相同日期创建
- "yyyy" 表示指定年份
- "yyyy.mm" 表示指定年份和月份
- 可选前缀">"，"<"，"="，"<="，">="，"<>"（默认为"=")
- 日期不是站点本地时间而是UTC (GMT)
7 - "last n unit"或"older than n unit"，其中n是数字（默认为1）而unit是"hours"，"day"，"week"，或"month"
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 更新日期选择器
8 ： - 日期不是站点本地时间而是UTC（GMT)
- "last n unit"或"older than n unit"，其中n是数字（默认为1）而unit是"hours"，"day"，"week"，或"month"
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 作者选择器：
9 - "=" 表示与目前页面的创建者相同
- "-=" 表示与目前页面的创建者不同
- 或者，一个用户名
[[/div]][[div style="border: black 1px solid; margin-left: 10%;
margin-right: 10%; background:lightgray;"]]
- 评分选择器：
10 - "n" 表示页面评分为n
- "=" 表示页面评分与目前页面相同
- 可选前缀">"，"<"，"="，"<="，">="，"<>"（默认为"=")
[[/div]]
页面属性
| 属性 | Displays |
|---|---|
| %%created_at%% | 页面创建时间 |
| %%created_by%% | 页面创建者 |
| %%created_by_unix%% | “Unix化的”页面创建者——用于组成URL |
| %%created_by_id%% | 页面创建者的“ID”号——用于组成URL |
| %%created_by_linked%% | 页面创建者的图标及链接 |
| %%updated_at%% | 页面更新时间（编辑，标签，添加父页面） |
| %%updated_by%% | 页面更新者 |
| %%updated_by_unix%% | “Unix化的”页面更新者——用于组成URL |
| %%updated_by_id%% | 页面更新者的“ID”号——用于组成URL |
| %%updated_by_linked%% | 页面更新者的图标及链接 |
| %%commented_at%% | 最新评论时间 |
| %%commented_by%% | 最新评论者 |
| %%commented_by_unix%% | “Unix化的”最新评论者——用于组成URL |
| %%commented_by_id%% | 最新评论者的“ID”号——用于组成URL |
| %%commented_by_linked%% | 最新评论者的图标及链接 |
| %%name%% | 不含分类的页面名称 |
| %%category%% | 页面分类，如果有的话 |
| %%fullname%% | 含分类的页面名称，如果有的话 |
| %%title%% | 页面标题 |
| %%title_linked%% | 页面链接，标题作为文字 |
| %%parent_name%% | 不含分类的父页面名称 |
| %%parent_category%% | 父页面分类如果有的话 |
| %%parent_fullname%% | 含分类的父页面名称如果有的话 |
| %%parent_title%% | 父页面标题 |
| %%parent_title_linked%% | 父页面链接标题作为文字 |
| %%link%% | 页面URL |
| %%content%% | 页面内容 |
| %%content{n}%% | 第n个页面段落 |
| %%preview%% | 页面前200个字 |
| %%preview(n)%% | 页面前n个字 |
| %%summary%% | 页面内容摘要 |
| %%first_paragraph%% | 页面第一段 |
| %%tags%% | 页面可见标签（不以下划线开头的） |
| %%tags_linked%% | 页面可见标签链接指向system:page-tags/tag/{tag} |
| %%tags_linked|link_prefix%% | 页面可见标签链接指向link_prefix{tag} |
| %%_tags%% | 页面隐藏标签（以下划线开头） |
| %%_tags_linked%% | 页面隐藏标签链接指向system:page-tags/tag/{tag} |
| %%_tags_linked|link_prefix%% | 页面隐藏标签链接指向 link_prefix{tag} |
| %%form_data{name}%% | 页面数据中的字段值（Field Value）如果有的话 |
| %%form_raw{name}%% | 对于选定的字段（Field），页面类型数据存储的内值，如果有的话 |
| %%form_label{name}%% | 数据类型定义的字段标签如果有的话 |
| %%form_hint{name}%% | 数据类型定义的字段线索如果有的话 |
| %%children%% | 子页面数量 |
| %%comments%% | 评论数 |
| %%size%% | 字符数 |
| %%rating%% | 页面评分值（数字或星级，取决于网站管理者的评分设定） |
| %%rating_votes%% | 评分数 |
| %%rating_percent%% | 五星评分的百分比 |
| %%revisions%% | 页面修订次数 |
| %%index%% | Listpages中的页面序数（由1到%%total%%） |
| %%total%% | 页面总数忽视limit（可比%%limit%%高） |
| %%limit%% | 传递给ListPages的页面数量限制（如果未传递则为空） |
| %%site_title%% | 目前网站的标题 |
| %%site_name%% | 目前网站的Wikidot Unix名称 |
| %%site_domain%% | 目前网站的激活域名 |
第五节：好东西
你知道web开发吗？炫耀一下吧
我们是泰坦
代码：
[[html]]
<div style="display:inline-block; width = 100%">
<div id="findbalance" class="titlebox" style="float:left">
Left side!
<Button type="button" class="inputfield" id="submit">换</Button><br/>
</div>
<div id="wise" style="display:none;float:right" class="titlebox" >
Strong side!
<Button type="button" class="inputfield" id="wiseSubmit">Submit</Button>
</div>
</div>
<script>
document.getElementById("submit").onclick= function(){
document.getElementById("findbalance").style.display = "none";
document.getElementById("wise").style.display="";
}
document.getElementById("wiseSubmit").onclick= function(){
document.getElementById("wise").style.display = "none";
document.getElementById("findbalance").style.display = "";
};
</script>
<style>
.titlebox{
border: black 1px solid;
padding: 10px;
width: 40%;
background: beige;
}
.inputfield {
padding: 2px;
margin: 2px;
}
</style>
[[/html]]结果：
总结
我希望这篇文章提供了哪怕一点点关于如何使用wikidot代码来做高级作品的方式。如果你有任何问题请私信我。