格式指导

格式在很大程度上能使读者对你的文章更感兴趣。格式打好,有如一宝。本篇格式指导将囊括很多东西——从基本要素到进阶式CSS代码。


文章格式

基本文章模版

[[include component:rate title=rpc-]]

项目分级标志

**现象注册码:** XXXX

**项目分级:** Alpha/Beta/Gamma (收容评级) - 黄/橘/红 (威胁等级)

**危害类型:**

**收容协议:** [描述收容程序的段落]

**描述:** [描述的段落]

**附录:** 和/或者 **发现:** [附加段落,可以不加]

[[footnoteblock]]
[[=]]
<< [[[RPC-上一个RPC]]] | RPC-此RPC | [[[RPC-下一个RPC]]] >>
[[/=]]

访谈模版

**被访者** [可以是一个人,多个人,或者一个RPC]

**采访者:** [采访者,名字可以被█代替]

**前言:** [一小段关于此采访的描述]

**<开始记录, [此处时间记录可选择不添加]>**

**采访者:** [说话]

**被访者:** [说话]

[按需求增加说话段落]

**<记录结束, [可选时间记录]>**

**结语** [小段总结,采访后发生的事情]

导航

在你的文章最后,把“上一个”,“此”,和“下一个”用数字代替。
例子: « RPC-001 | RPC-002| RPC-003 »

项目分级标志

当你在发布一篇文章的时候,你必须在你的项目里加上项目分级标志。要想知道你的项目到底属于哪类分级,请参考项目等级指导。你可以将下列的代码放到你的文章顶端,以威胁等级排序:

Alpha级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-black.png]]

Beta级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-black.png]]

Gamma级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-black.png]]

无效化

[[f<image http://www.rpc-wiki.net/local--files/component:icons/neutralized.png]]

Omega级和Theta级不可用于普通写作。在首页查看允许使用其分级的特殊竞赛。

Omega级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-black.png]]

Theta级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-black.png]]

另外,这里现有一个神秘等级:

Epsilon级

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-white.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-yellow.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-orange.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-red.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-purple.png]]
[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-black.png]]

上述代码放在评分代码以下。

要想发布一个RPC,点击“RPC-CN系列 I”的链接然后选取一个空的RPC编号即可。请确保将“rpc”这三个字母输入标签栏中。


维基语法

大多数情况下,你只有在了解了基础维基语法的情况下才能进行写作。

  • 加粗: **示例**示例
  • 斜体: //示例//示例
  • 下划线: __示例__示例
  • 删除线: --示例--示例

顺便一提,你不需要记住这些语法,这些代码都在写作框上的语法栏里。但是知道总是好的。


图片

如果你的文章里有图片的话是比较加分的。有两种图片代码可选:

[[include component:image-enlarge name= Image_URL_Location|width=…px|caption= Image_Caption.]]

这种代码在将鼠标移至图片上方时会变大。

[[include component:image-block-static name= Image_URL_Location|width=…px|caption= Image_Caption.]]

这种代码是静态图片。两种都试试看,看看哪种更适合你的文章。

如果只是想加图片(而不用图片方块格式码的话)就用这个:

[[image LINK]] > 一张图片。
[[<image LINK]] > 一张靠左的图片。
[[>image LINK]] >图片靠右。
[[=image LINK]] > 图片居中。
[[f<image LINK]] > 一张在左边悬浮的图片(文字可以环绕图片)
[[f>image LINK]] > 一张在右边悬浮的图片(文字可以环绕图片)


可折叠方块

可折叠方块可以折叠大段文字。

[[collapsible show="显示文字" hide="隐藏文字"]]
你的文字
[[/collapsible]]

另外,你还可以用hideLocation功能来改变该折叠方块在哪里显示。通常在有大段文字的时候使用。下例:

[[collapsible show="显示大段文字" hide="隐藏大段文字" hideLocation="both"]]
一大段文字
[[/collapsible]]


超链接

你可以用以下代码连接到其他页面:

[PAGE-URL 页面名]

这就会:

页面名

如果你想要链接的页面是Wikidot页面的话,你可以直接使用 /页面名(注意,此处输入的页面名必须是英文字母)

[/formatting-guide 页面名]

这就会:

页面名

最简单的同网站页面链接:

[[[formatting-guide]]]

这就会:

formatting-guide


脚注和脚注模块

用下列代码加上脚注:

示例:[[footnote]]解释[[/footnote]]

示例:1

另外,你还可以通过使用[[footnoteblock]]来改变脚注出现的地点。注意,一个页面只能有一个footnoteblock模块。


标题

用标题模块来放大文字。下列代码:

+ 最大标题
++ 第二大
+++ 第三大
++++ 第四大
+++++ 第五大
++++++ 最小标题

可以显示出不同大小的标题:

最大标题

第二大

第三大

第四大

第五大
最小标题

列表

你可以创造有序列表(数字排序)和无序列表。在列表项目前空一格可以增加一格距离。

# 有序列表第一项
# 有序列表第二项
# 多一个空格项
# 有序列表第三项

* 无序列表第一项
* 无序列表第二项
* 多一个空格项
* 无序列表第三项

会有:

  1. 有序列表第一项
  2. 有序列表第二项
    1. 多一个空格项
  3. 有序列表第三项
  • 无序列表第一项
  • 无序列表第二项
    • 多一个空格项
  • 无序列表第三项

表格

表格可以用来整理文章中的信息。

||~ 第一项 ||~ 第二项 ||~ 第三项 ||
|| 例子一 || 例子二 || 例子三 ||

会有:

第一项 第二项 第三项
例子一 例子二 例子三

你可以按需求来增加行数和列数。每加一列要在项前加一个“~”符号。


引用方块

引用方块用来写实验记录,探索记录等等。要想加一个引用方块,只需要在文字前加上“>”就好。所以:

> 第一行
>
> 第二行

会有:

第一行

第二行

如果要空行的话,空的那一行也需要加上“>”——不然你的引用方块就会被隔开了!还有,记住要在“>”后边加上空格,不然无法启动引用方块


锚点

锚点可以使你的文章导航更加容易:

(此处锚点名称必须是英文字母)

[[# maodianmingcheng]] 创造一个锚点

[#maodianmingcheng 页面名] 返回锚点

会有:

页面名


水平线

水平线用来划分段落内容:

文字
-----
更多文字

会有:

文字


更多文字


文字行列

文字可以靠左,靠右,居中和两端对齐。如下:

[[<]]
靠左文字
[[/<]]

[[=]]
居中文字
[[/=]]

[[>]]
靠右文字
[[/>]]
[[==]]
两端对齐
[[/==]]

会有:

靠左文字

居中文字

靠右文字

两端对齐

两端对齐的代码使文字之间空行整齐,所以在大段文章里有显著效果。


文字颜色

带颜色的文字代码很简单:

##blue|蓝字##

会有: 蓝字

十六进制表示法也可以:

##71e02c|绿字##

会有:绿字


Tab

Tab可以用来整理页面内容,沙盒整齐也会整齐一些。下例:

[[tabview]]
[[tab 第一项]]
示例
[[/tab]]
[[tab 第二项]]
更多示例
[[/tab]]
[[/tabview]]

会有:

示例

想加多少[[tab]]都可以。

如果建造多个[[tabview]] … [[/tabview]]会有多个tab层。下例:

[[tabview]]
[[tab 一]]
[[/tab]]
[[/tabview]]

[[tabview]]
[[tab 二]]
[[/tab]]
[[/tabview]]

会有:


空行

因为Wikidot语法的原因,空很多行基本无法实现。一般来说大家都这么空行,示例如下:

文字



更多文字

文字

更多文字

但是用了这个代码后,可以这样:

文字
@@@@
@@@@
@@@@
更多文字

文字



更多文字

这种代码也可以用来展示代码:

@@ [[div class="example"]] @@

@@ [[/div]] @@

[[div class="example"]]

[[/div]]


基本CSS

CSS用来在网页内容上增加不同属性。可以被用来使你的文章更加醒目。首先我们来讲讲CSS在Wikidot语法里的使用。


Div方块

和HTML一样,Wikidot里也可以在一段文字中使用“div”方块。你也许注意到本文的内容被一个黑色外框给框起来了——这就是一个div方块的应用。

造一个div方块很简单:

[[div]]内容 [[/div]]

但是有个问题:光光是这个代码不会有什么效果。

Class 和 ID

你可以给你的div方块分配class 或者ID:

[[div class="firstDiv"]] 内容 [[/div]]

[[div id="secondDiv"]]内容 [[/div]]

这使游览器能够分辨div方块。之后我们再来讨论class和ID对于div方块的影响。

ID造型的建造要先于class的建造。所以最好只使用一次ID,但是class可以被多次使用,并可以给不同段落相同的属性。


CSS语法

在我们继续之前,我们看看基本的CSS语法。格式和造型通过“rulesets”来建造。这包含了选择器(selector)和声明模块(declaration block)。下例:

.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}

在这里,".firstDiv"是选择器,中间的是声明模块。声明模块必须在大括号({})里,每一个声明必须用分号(;)分开。空格和代码内格式整洁不会影响你的模块,但是整洁的代码至少可以读的下去。当然如果你想,你可以在一行里全写上:

.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}

选择器

有三种选择器

  • 标签选择器(Element Selectors)
  • 类别选择器(Class Selectors)
  • ID选择器(ID Selectors)

下例:

h1 {…}
.classDiv {…}
#idDiv {…}

第一个ruleset对于所有h1(heading 1)标签适用。第二个对于所有命名为“classdiv”的类别适用。第三种对于有“idDiv”的ID内容适用。记住:类别一个点(.开头),ID一个井(#开头。)

还有其他的,被称作“万用选择器”(universal selector)的选择器,这作用于页面上所有的内容,一般来说你不会用到这个。

* {…}

属性(Properties)

还有一件事:属性。CSS里有千百种属性,但别担心——大多数都是你不会用到的。这里是一些你会常见常用的属性:

  • color: 改变颜色。
    • 值:hex code (#000000), rgb (rgb(0, 0, 0)), etc.
  • background-color: 改变背景颜色
    • 值: hex code, rgb, etc.
  • background-image: 在选取内容后加上背景图片
    • 值: url('IMAGEURL'), linear-gradient(…)
  • border: 修改项目的border值
    • 值: (size [1px, etc.]), (style [solid, dashed, dotted, etc.]), (color [hex, rgb, etc.])
  • border-radius: 修改项目的border边角角度。
    • 值: pixels, percentage, etc.
  • margin: 改变项目和外框之间的距离。(项目在里面)
    • 值: pixels, percentage, etc.
      • 不同边可以用margin-top, margin-bottom等等修改。
      • 用一个属性定义全部四面时,空格的显示是顺时针方向的;所以“1px 2px 3px 4px”会有1px的顶部,2px的右边,3px的下方,4px的左边。
  • padding: 改变border和内容之间的距离
    • 值: pixels, percentage, etc.
      • 和margins一样,空格规律也是顺势针。用padding-top, padding-bottom单独修改也行。
  • font-family: 改变字体
    • 值: 字体名
      • 你可以加好几个font,如(font-family: Arial, Tahoma, sans-serif;) 如果一个字体没法显示的话,游览器会选择下一个。
  • font-size: 改变字的大小
    • 值: [8px, etc.], [1em, etc.], smaller, larger, [percentages]
      • 'em' 和 百分比是基于该文档目前的大小。1em= 100%。
  • font-weight: 改变粗细。
    • 值: normal, bold, lighter, bolder, [100, 200, etc.]
      • 字的粗细根据字体变化。

这里只有很少的例子,w3schools是个很好的参考网站!


样式内容

好了,我们现在知道了CSS语法。我们怎么使用div呢?这里有三个方法:

  • 行内样式定义
  • 使用CSS模块
  • 引入一个样式表

现在我们先用前两个。

行内样式定义

行内样式定义是最简单的,但也是最没效率的用法。建议用这个的时候只用于定义一个特殊内容——不然使用CSS模块更方便。这里是一列之前创造的,十分有用的模式表。当使用行内格式时,用:

[[div style=" "]]内容[[/div]]

你可以在这里粘贴一个声明模块,然后模块内的内容会被赋予指该内容上。例如:

[[div style="background-color: rgb(0,0,0); color: white;"]] 内容 [[/div]]

会有:

内容

在行内格式定义的时候不需要使用选择器或者是括号,但是在每一个声明后必须加上分号。

CSS模块

一个更加方便的方法就是使用CSS模块这仅仅用于Wikidot语法;在HTML里会显示为<style>。要加上CSS模块的话,在你的文档顶部加上这个:

[[module CSS]]

[[/module]]

你也可以在这里放入rulesets,这也会将里面的样式赋予文档里的所有内容。例如:

[[module CSS]]
.exampleRuleSet {
background-color: rgb(0,0,0);
color: white;
}
[[/module]]


例子

使用CSS模块的时候会带来很多方便。

场景A

假如你要一个div模块来把文章变得像电脑终端一样的样式。那么背景得是黑色,白色等宽字体。那么转换成CSS!

[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| 内容
| 更多内容
[[/div]]

会有:

| 内容
| 更多内容

我们一步一步看:

  • "background-color: black" 让背景变黑。
  • "color: white" 让字体变白。
  • "font-family: monospace" 让字体变成等宽,看起来就像电脑终端一样。
  • "padding: 2%" 在文字和div边框之间加上了一点空间。
  • "border-radius: 5px" div边框角度加了5px。

另一个方法是:

[[module CSS]]
.terminal {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/module]]



[[div class="terminal"]]
| 文字
| 更多文字
[[/div]]

这和上述代码的效果是一样的,其他的div也能用到这一样式。在其他的div里加上"terminal
"的类别(class)就完事了

还有会更多例子!

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License