你与高级格式

你与高级格式

你好,最近过得怎么样?1 如果你在阅读本页面,你可能是来学习使用wikidot语法做一些花哨的事的!

本文写给那些想要摆脱基础的加粗,斜体,折叠块的人。我也会讲这些,但这篇指导的大部分都将用于文章的高级设计。

如果你在寻找更基础的格式,ghostchibi这里写了一篇有用的文章。

本教程内的一些应用实例在我的一些SCP里,例如SCP-3872SCP-027-J.

如果你对于本教程有任何问题,请给我发一条wikidot私信!


第一节:基础wikidot格式窍门


有一些wikidot基本格式本身就很刁钻,而且没有很好的解释说明。以下是我最常收到问题的两个部分:

引用块


分页

嘿,嘿Magnus,这边这个页面有些特别特别好的格式然后我想用这个格式。现在教我吧!

好,随机公民,这比你想的要简单。在主站2每个页面的右下角都写着“选项”。点击它,一个小小的列表打开了。点击“页面源代码”然后它就会显示组成那个页面的Wikidot代码。每一处细节都有。

这个会让你找到任何你想在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-895SCP-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教程,但基本概念如下:


第四节:为欢乐与利润管理页面

最后一节是个大问题:如果你想修正一些东西,我到底怎么知道该改什么?

这不是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]]
结果:

这是一个简单的页面选择,选出5篇我,DrMagnus,写的页面,不加断行。在这个模块的“本体”中,你写入你想显示的东西。这里我显示了标题、评分、及创建时间。

Listpages会明显地让页面变慢,如果你写了很多的话。非常不推荐每页写多于一个的Listpages。

以下是部分查询标准及可选的东东。


第五节:好东西

你知道web开发吗?炫耀一下吧


总结

我希望这篇文章提供了哪怕一点点关于如何使用wikidot代码来做高级作品的方式。如果你有任何问题请私信我。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License