你与高级格式
你好,最近过得怎么样? 如果你在阅读本页面,你可能是来学习使用wikidot语法做一些花哨的事的!
本文写给那些想要摆脱基础的加粗,斜体,折叠块的人。我也会讲这些,但这篇指导的大部分都将用于文章的高级设计。
如果你在寻找更基础的格式,ghostchibi在这里写了一篇有用的文章。
本教程内的一些应用实例在我的一些SCP里,例如SCP-3872 和 SCP-027-J.
如果你对于本教程有任何问题,请给我发一条wikidot私信!
第一节:基础wikidot格式窍门
有一些wikidot基本格式本身就很刁钻,而且没有很好的解释说明。以下是我最常收到问题的两个部分:
引用块
要使用引用块,你应该在一行的开头键入“> ”。注意>后面的空格。
代码:
> 这是产生引用块的代码的一个例子。
>
> 此处有一处断行。注意引用块中新的一行里>后面的空格。
结果:
这是产生引用块的代码的一个例子。
此处有一处断行。注意引用块中新的一行里>后面的空格。
分页
分页使你能够将信息组织成可浏览的方式,并节省空间。
代码:
[[tabview]]
[[tab 分页1的名称]]
这里是你的文字/文章
[[/tab]]
[[tab 分页2的名称]]
这里是你的文字/文章2
[[/tab]]
[[/tabview]]
结果:
嘿,嘿Magnus,这边这个页面有些特别特别好的格式然后我想用这个格式。现在教我吧!
好,随机公民,这比你想的要简单。在主站每个页面的右下角都写着“选项”。点击它,一个小小的列表打开了。点击“页面源代码”然后它就会显示组成那个页面的Wikidot代码。每一处细节都有。
这个会让你找到任何你想在wiki上找到的东西,如果你不知道该做什么的话。
第二节:使用非wikidot代码
这就是事情变有趣的时候。Wikidot支持所有类型的对象,他们不只有自己的标记语言,你也可以加入自定义div。
代码:
[[div id="myDiv" style="background-color: green; text-color:white;"]]
这是一个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]]
结果:
你也可以改变可折叠列表容器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]]
结果:
第三节: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教程,但基本概念如下:
一个#符号表示一个ID。当你给予div一个ID=“myId”,这将表示CSS模块中的#myId { /*属性在此 */ }。单个ID表示页面中的单一元素。
例子:
这会让所有myId中的文字变成红色。
#myId{
color: red;
}
.符号表示一个类。类类似于ID,但该css类中的所有效果都会附加到该类的元素上。所有“myClass”类的div都会获得CSS中.myClass { /*属性在此*/}的值。
例子:
这会使每个.myClass对象拥有1像素宽的实心黑色边框。
.myClass {
border: solid black 1px;
}
你也可以“嵌套”这些结构。.myClass .myClass2 { /*属性*/}表示“所有.myClass div中的 .myClass2 div”所有不在.myClass div中的.myClass2 div都不会受到影响。
例子:
这会使所有#myId1中的.myClass对象使用helvetica字体。
#myId1 .myClass {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
你也可以使用,来将相同的格式应用于多个类或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”属性改为不同的颜色。这只会影响你的网页,而不会影响其他人看到的网页。
第五节:Listpages
好嘞,这个感觉有点像曾祖父。Listpages是wikidot提供的一个模块,用于在wiki上查询标准,并显示结果。它最简单的应用是:
代码:
[[module ListPages created_by="DrMagnus" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Created On: %%created_at%%
[[/module]]
结果:
这是一个简单的页面选择,选出5篇我,DrMagnus,写的页面,不加断行。在这个模块的“本体”中,你写入你想显示的东西。这里我显示了标题、评分、及创建时间。
Listpages会明显地让页面变慢,如果你写了很多的话。非常不推荐每页写多于一个的Listpages。
以下是部分查询标准及可选的东东。
- pagetype
- "normal": 非隐藏页面
- "hidden": 隐藏页面
- "*": 二者
- category
- "." 表示目前分类(默认)
- "*" 表示所有分类
- 其它,一个由空格/逗号分割的分类列表
- 分类默认是加和的(分类或分类或分类)
- "-category" 表示除去此分类的页面(AND NOT - 与非)
- "%%category%%" 表示与目前页面相同的分类(如果在_template页面中使用)
- Tags
- "-" 表示没有标签的页面,可见或不可见
- "=" 表示与目前页面拥有任何相同可见标签的页面
- "==" 表示与目前页面拥有一模一样可见标签的页面
- 其它,以空格/逗号分割的标签列表
- 标签默认是加和的
- "-tag" 表示没有此标签(AND NOT - 与非)
- "+tag" 表示包含此标签(AND - 与)
- 父页面选择器:
- "-" 表示没有父页面
- "=" 表示目前页面的兄弟(相同父页面)
- "-=" 表示与目前页面拥有不同父页面
- "." 表示目前页面的孩子(父页面是本页)
- 其它:指定完整页面名称
- 外向链路(反向连结):
- 输入一个存在页面的完整名称来选择链向该页面的页面
- 以及"."表示链向目前页面的页面
- 创建日期选择器:
- "=" 表示与目前页面在相同日期创建
- "yyyy" 表示指定年份
- "yyyy.mm" 表示指定年份和月份
- 可选前缀">","<","=","<=",">=","<>"(默认为"=")
- 日期不是站点本地时间而是UTC (GMT)
- "last n unit"或"older than n unit",其中n是数字(默认为1)而unit是"hours","day","week",或"month"
- 更新日期选择器:
- 日期不是站点本地时间而是UTC(GMT)
- "last n unit"或"older than n unit",其中n是数字(默认为1)而unit是"hours","day","week",或"month"
- 作者选择器:
- "=" 表示与目前页面的创建者相同
- "-=" 表示与目前页面的创建者不同
- 或者,一个用户名
- 评分选择器:
- "n" 表示页面评分为n
- "=" 表示页面评分与目前页面相同
- 可选前缀">","<","=","<=",">=","<>"(默认为"=")
属性 |
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">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代码来做高级作品的方式。