格式指导

格式对引起读者对文章的兴趣可以起到重要作用。良好的格式是一项重要指标,本指导涵盖从最基础最重要的知识到CSS入门的所有内容。


文章格式

这是阈限空间文章使用的基本格式。不强制要求使用,但建议新作者由此入门。作者可以任意更改格式使其更符合该阈限空间。阈折点亦可使用该格式,只需将“阈限空间概述”改为“阈折点概述”即可。

[[include component:rate]]
----
||~ **生存难度** || //0/5// || 描述该阈限空间是否宜居。在此长期生存的难度如何? ||
||~ **危害等级** || //0/5// || 描述该阈限空间中存在的危害,包括环境危害与实体。其危险程度如何?出现频率如何? ||
||~ **混沌程度** || //0/5// || 描述该阈限空间的稳定程度。它有多混沌?改变程度如何? ||
||~ **巴塞特-弗雷泽指数** || //0/5// || 简要总结该阈限空间总体难度。进入该阈限空间的旅行者可能遭遇何种经历? ||
----
[[=]]
+ 阈限空间概述
[[/=]]
----
给出该阈限空间的简介,先介绍粗略特征,再深入介绍细节与特点。
----
[[=]]
+ 入口与出口
[[/=]]
----
如有,解释进入与离开该阈限空间的方式。

额外内容

不少文章包含额外部分。你也可以随意使用,甚至可以自行创作。一般而言,额外部分应出现于阈限空间概述之后。

不要求使用以下任意一项,且好文章经常不含任何额外部分。仅在你认为合适时使用以下内容。仅为增加文章长度而使用额外部分会使产生枯燥无味的阅读体验。

以下是文章中出现过的额外部分:

  • “生存指南”部分详细介绍在该阈限空间生存的重要信息,如收集食水或避开/防御危险实体的方式。
  • “生态系统”部分介绍该阈限空间的动植物。
  • “人口”部分描述该阈限空间的原生生物。这包括人类或智力与人类类似的实体。
  • “殖民地与前哨”部分描述有人居住的地区,通常是由探索者建立的。也称“社区”部分。
  • “实体”部分介绍该阈限空间原生的物种。
  • “历史”部分介绍该阈限空间过去的事件与历史信息。

另外,有时用“通道”代替“入口与出口”。


其它阈限空间格式

  • 暂无

[基础]

维基语法

大多情况下,只要会用最基本的维基语法就够了。

  • 加粗: **样例**样例
  • 斜体: //样例//样例
  • 下划线: __样例__样例
  • 划去: --样例--样例

顺便一提,你不用记住这些,因为Wikidot工具栏里有,但知道这些的话挺有用的。


图片

加入图片是一种完善文章的好方法。

[[include component:image-block name=图片地址|caption=文字描述]]

效果是一个鼠标悬停时会放大的图片快。按需替换加粗文本。

还有一些调整图片的方式。

[[include component:image-block name=图片地址|caption=文字描述|width=###]]

这样可以设置图片大小。默认值是300像素。"width=450px"就是450像素。"width=50%"占页面大小的一半。

[[include component:image-block name=图片地址|caption=文字描述|align=对齐方式]]

这样可以设置对齐方式。图片默认靠右。用"align=left"能让图片左对齐。"align=center"能让图片居中。

[[include component:image-block name=图片地址|caption=文字描述|enlarge=false]]

这样鼠标悬停时图片就不会放大。


正常图片(无图片块格式)代码如下:

[[image 链接]] ⟶ 正常图片
[[<image 链接]] ⟶ 靠左的正常图片
[[>image 链接]] ⟶ 靠右的正常图片
[[=image 链接]] ⟶ 居中的正常图片
[[f<image 链接]] ⟶ 图片靠左(文字环绕)
[[f>image 链接]] ⟶ 图片靠右(文字环绕)

图片进阶用法详见此页


折叠条

折叠条能隐藏大段文字。

[[collapsible show="显示内容" hide="隐藏内容"]]
文本
[[/collapsible]]

另外,可以使用hideLocation设置折叠的位置,尤其适用于大段文字。例如:

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


超链接

用以下代码超链接到其它页面:

[页面链接 文字描述]

效果是

文字描述

如果超链接的页面在同一个维基网站上,可以直接使用/页面名称。例如:

[/formatting-guide 文字描述]

效果是:

文字描述

链接到同一网站的页面的最简便方法如下:

[[[formatting-guide]]]

效果是:

formatting-guide


脚注与脚注框

使用以下代码添加脚注:

一些文本。[[footnote]]一些脚注。[[/footnote]]

一些文本。2

另外,用[[footnoteblock]]可以改变脚注在页面上的显示位置。每页只能有一个脚注框。


标题

用标题格式强调内容,代码如下:

+ 1级标题
++ 2级标题
+++ 3级标题
++++ 4级标题
+++++ 5级标题
++++++ 最小的标题

效果是大小不同的标题:

1级标题

2级标题

3级标题

4级标题

5级标题
最小的标题

逻辑列表

可以建立有序(标数字的)逻辑列表或无序列表。再一项前加空格能增加层数。

# 有序项1
# 有序项2
# 分项1
# 有序项3
* 无序项1
* 无序项2
* 分项1
* 无序项3

效果是:

  1. 有序项1
  2. 有序项2
    1. 分项1
  3. 有序项3
  • 无序项1
  • 无序项2
    • 分项1
  • 无序项3

表格

表格可以用来组织文章中的信息:

||~ 标题1 ||~ 标题2 ||~ 标题3 ||
|| 内容1 || 内容2 || 内容3 ||

效果是:

标题1 标题2 标题3
内容1 内容2 内容3

行列数无上限,记得在标题栏加波浪线(~)。


引用块

引用块适用于测试记录、探索日志等。只需在每行前加上"> "即可。

> 第1行
>
> 第2行

效果是:

第1行
第2行

空行也需加"> ",否则引用块会分成两个。另外,">"后必须加空格,否则代码无效。


锚可以轻松页内导航:

[[# 锚的名称]] 创造锚。
[#锚的名称 文字] 回到锚。

效果是:

文字


分割线

分割线用来分割页面内容:

文本
-----
文本

效果是:

文本


文本


文本对齐

文本可以左对齐、右对齐、居中或两端对齐:

[[<]]
左对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/<]]

[[=]]
居中文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/=]]

[[>]]
右对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/>]]

[[==]]
两端对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/==]]

效果是:

左对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

居中文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

右对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

两端对齐文本
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

两端对齐每行宽度相同,因此仅在长段落可见。


文本颜色

文本颜色很容易设置。

##blue|蓝色文本##

效果是: 蓝色文本

色码也行:

##71e02c|绿色文本##

Makes: 绿色文本


分页

分页可以用来整理页面,防止沙盒过于混乱。代码如下:

[[tabview]]
[[tab 分页1]]
文本。
[[/tab]]
[[tab 分页2]]
更多文本。
[[/tab]]
[[/tabview]]

效果是:

文本。

[[tab]]数量不限。

用多个[[tabview]] … [[/tabview]]元素可建立多个分页框。

[[tabview]]
[[tab 1]]
[[/tab]]
[[/tabview]]
[[tabview]]
[[tab 2]]
[[/tab]]
[[/tabview]]

效果是:


空行

由于Wikidot格式,通常不存在空行,但可以用去解析符号解决。代码中直接空行的效果是:

文本



更多文本

文本

更多文本

但使用去解析符号就能正常显示了:

文本
@@@@
@@@@
@@@@
更多文本

文本



更多文本

也可以用来显示未解析代码,例如:

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

@@ [[/div]] @@

[[div class="example"]]

[[/div]]


CSS基础

CSS是一种用来设置网站上特定元素样式的语言,可以大大提高文章美观度。先介绍一下CSS在维基语法中的基础。


Div元素

在HTML中,div元素用来标记页面的特定部分。

Wikidot语法虽与HTML有些区别,但仍能用以下代码创建div元素:

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

当然,只有这些没用。

等级和ID

通过以下方式给div增加等级或ID:

[[div class="firstDiv"]] 内容。 [[/div]]
[[div id="secondDiv"]] 内容。 [[/div]]

这样能使网页识别这些div,后续可以使用这些等级/ID来设置样式。

ID样式优先于等级样式。对特定元素ID只能用一次,而等级可以重复使用,将同一样式应用到多个元素。


CSS语法

我们先来看一下基本的CSS语法。样式设置通过规则集(ruleset)完成,其由选择器(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;}

选择器

主要分为三类:

  • 元素选择器
  • 等级选择器
  • ID选择器

以下是一些例子:

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

第一个规则集适用于页面上所有h1(heading 1)元素。第二个适用于所有等级为"classDiv"的元素。第三个适用于所有ID为"idDiv"的元素。注意:等级选择器开头是.,ID选择器开头是#。

还有一种,叫通用选择器,可以选择该页面上的所有元素,但一般用不到。

* {…}

属性

还有一个要知道的:属性。CSS中有数百个属性,但别急——并不是都用得到。以下是最常用的属性:

  • color: 改变选中元素的文字颜色。
    • 值:色码(#000000),rgb (rgb(0, 0, 0))等
  • background-color: 改变元素背景颜色。
    • 值:色码,rgb等。
  • background-image: 添加背景图片。
    • 值:url,线性梯度linear-gradient(…)
  • border: 改变元素边界。
    • 值:大小(size [1px, etc.]),样式(style [solid, dashed, dotted, etc.]),颜色(color [hex, rgb, etc.])
  • border-radius: 在边界上添加圆角。
    • 值:像素,百分比等。
  • margin: 改变该元素与其容器(其外的元素)间的空间大小。
    • 值:像素,百分比等。
      • 可以使用margin-top和margin-bottom等单独设置每条边。
      • 在一条属性中设定4条边时,数值依次顺时针旋转。例如"1px 2px 3px 4px"对应顶部1px空白,右侧2px,底部3px,左侧4px。
  • padding: 改变元素边界与内容间空间大小。
    • 值:像素,百分比等。
      • 与空白类似,数值依次顺时针旋转。可以使用padding-top和padding-bottom等单独设置每条边。
  • font-family: 改变元素字体。
    • 值:字体名称。
      • 可以加多种字体(font-family: Arial, Tahoma, sans-serif;)。如一种字体因某些原因不可用,浏览器会使用下一种。
  • font-size: 改变文字大小。
    • 值:[8px, etc.],[1em, etc.],更小,更大,[百分比]
      • 'em'和百分比根据目前字体大小计算。1em = 100%。
  • font-weight: 改变文字重量(粗细)。
    • 值:常规(normal),粗体(bold),更细(lighter),更粗(bolder),[100, 200, 等]
      • 根据字体不同,一些数值可能不可用。

记住这只是一小部分属性——如果想学更多可以参考w3schools


样式元素

好,现在我们已经学会了CSS语法,那么怎么设置div样式呢?有三种方法:

  • 内联样式
  • 使用CSS模组
  • 使用样式表

这里只讲前两种。

内联样式

内联样式是最简单但效率最低的方式。除非只要设置一个特定元素的样式,不要使用这种方法——否则用CSS模组效率高很多。加样式属性即可:

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

可以将声明块粘贴到样式属性中,该声明块将应用于该div。例如:

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

效果是:

内容。

请注意,使用内联样式时不需要选择器或大括号,尽管仍必须在每个声明块的末尾加上分号。

CSS模组

设置元素样式的更便捷的方法是使用CSS模组,类似HTML中的<style>。在代码中加入以下内容:

[[module CSS]]
[[/module]]

将CSS规则集放在此模块中,其将应用于整篇文章。例如:

[[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"]]
| TEXT
| MORE TEXT
[[/div]]

效果是:

| TEXT
| MORE TEXT

我们来分析一下:

  • "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"]]
| TEXT
| MORE TEXT
[[/div]]

这样效果一样,且容易重复使用。将div等级设为"terminal"即可。

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