专业级Wikidot语法

Wikidot是非常强大的Wiki系统，挑战极限，就能实现各样各种奇妙的效果。此页就是这样的专业级Wikidot技术的汇总。此页正由技术人员在管理，如果你想在这里追加更多功能的话，请与工作人员联系。

スタッフ一覧

---

html模块拓展

"Expand the HTML Block" Presents by:C-take

前提 html模块

这里的功能全部都是基于html模块的拓展，html模块可以让你在wikidot页面中使用html语法。

在html模块中，你可以使用javascript语言编写出一些有趣的特效。

了解更多⇒HTML模块

基本功能

　大家！有过这样的困扰吗？¹

+ 显示

这样做就能解决了！分别是“scp-WikidotCss.css”与“scpHTMLblockCtrl”。先实践一下吧。

+ 示例

哎？难道需要在html模块里面添加复杂的代码吗？没有那样的事，非常地简单易用。

使用方法：
在html模块中添加如下代码。

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<script type="text/javascript">
isHTMLblockHide = true;
</script>

这里添加正文

<div id="scpHTMLblockResizeSwitch"></div>

只需要这样，在html模块的开头和结尾添加上述的代码。
　如果要添加折叠的话（※在已经添加了上面的代码的前提下）

<collapsible show = "+ 折叠1" hide="- 关闭">
这里添加折叠内文
</collapsible>

与wikidot语法大同小异。例如hideLocation="bottom"

<collapsible show = "+ 折叠2" hide="- 关闭" hideLocation="bottom">
这里添加折叠内文
</collapsible>

这也和wikidot语法一样。
　如果想用引用方块的话

<blockquote>
这里添加引用内容
</blockquote>

在引用内容的上下添加“<blockquote>”与“</blockquote>”。

　现在，你可以更自由地使用html模块了。更能够实现这样的效果：

+ 第1层折叠

把这个脚本用在html模块里吧！

注意：未将html模块放入折叠时，按如下所示编写：

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>

<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>

这里添加正文

<div id="scpHTMLblockResizeSwitch"></div>

放入折叠的区别在于是否有如下的语法：

<script type="text/javascript">
isHTMLblockHide = true;
</script>

使用了上面的语法而不将html模块放在折叠中是可以的。但是添加了这句后，系统将会持续不断地监测“包含此html模块的折叠是否打开”。
这个监测只要打开一次折叠后就会停止，但如果不把html模块放在折叠中的话，监测就永远不会结束。也就是说，多余的程序一直在运行着。
　同样的，在折叠中没有html模块的情况下添加这句语法也没有问题，只是徒劳无益而已。

高级设置：从这里开始需要html与css的相关知识。这里介绍的是“scpHTMLblockCtrl”，在html模块中的下述语句：

<collapsible show = "+ 打开" hide="- 关闭">
折叠内容
</collapsible>

将其还原为如下的html代码：

<div class="ParentCollasible">

<div id="scpCollasibleLink+n+0">

<span class="fake-link" onclick="scpRunCollasible('scpCollasibleLink + n',0)">+ 打开</span>

</div>
<div id="scpCollasibleLink + n + 1">

<span class="fake-link" onclick="scpRunCollasible('scpCollasibleLink + n',1)">- 关闭</span>
<div>

折叠内文

</div>

</div>

</div>

以上的

id= "scpCollasibleLink+n+0"

中的n，实际上是该collapsible在同一个html中的次序的表示。需要注意，该数值以0开始。
　具体示例如下：

第1个collapsible: scpCollasibleLink00
第2个collapsible: scpCollasibleLink10

同时

onclick="scpRunCollasible('scpCollasibleLink + n',0)"

一处根据collapsible的位置会以如下的方式变化：

第1个collapsible: scpRunCollasible('scpCollasibleLink0',0)
第2个collapsible: scpRunCollasible('scpCollasibleLink1',0)

如果使用了本章中的“scpHTMLblockCtrl”脚本，“ParentCollasible”类以及“scpCollasibleLink + 任意数字”形式的id不能在其他地方使用。
　此外，控制折叠开关的“fake-link”类属于span标签的元素，例如

<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);

.specialCollapsible .fake-link{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#EEE;
padding:2px;
margin:auto;
width:200px;
}

.specialCollapsible .fake-link:hover{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#AAA;
padding:2px;
margin:auto;
width:200px;
}
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<div class="specialCollapsible">
<collapsible show = "+ 折叠1" hide="- 关闭">
<blockquote>
这里添加折叠内文
</blockquote>
</collapsible>
</div>
<div id="scpHTMLblockResizeSwitch"></div>

这样便可以改变折叠开关按钮的样式。

　最后，列出“scpHTMLblockCtrl”所用到的全局变量和全局函数的一览表。如果在使用了此脚本的基础上编写javascript的话，请注意下列的名称不可用。

scpHTMLblockUrl_array
scpHTMLblockIframe_hash
scpForResizeRandomNumber
scpHTMLblockResize_div_id
scpHTMLblockResize_iframe_id
scpHTMLblockResize_url
scpMonitoringTimeSpan
scpHTMLblockResizeSwitch
HTMLblockOldHeight
isHTMLblockHide
scpParentCollasibleClassName
scpCreateCollapsible
scpResizeHTMLblock
ctrlHideHTMLblockSize
scpRunCollasible
correctIframeSize

我希望这个脚本能为大家拓宽表达的方式。

随时调整HTML模块的大小

※前提是遵循上一章所述的语法规则
各位！想做出这样的特效吗？

---

回收自马里亚纳海沟的文档
原著：
Dr Gears

SCP基金会，2010年2月

---

像这样，在HTML模块中运行javascript脚本，不断地更换HTML模块中的文本内容。这个时候，你有没有遇到过这样的困扰？

在HTML模块中显示较长的文本，之后替换为较短的文本时，HTML模块的高度仍然保持着拉伸。

我想尝试过这种事情的人都能有所体会。不过请看，上面的HTML模块不就可以根据文章的长度来改变大小吗？没错，这里的HTML模块使用了可以随时调整尺寸的脚本。

在大家的javascript脚本中运行“correntIframeSize()”函数，就可以对HTML模块的尺寸进行调整。

在用Javascript对HTML内容进行替换的时候，在函数的末尾

correctIframeSize();

插入这样的代码。

+ 附录：简单的翻页方法

可以这样替换HTML模块的内文：

var str = "hogehoge";
var str2 = "fugafuga";
var str3 = "piyopiyo";
document.getElementById("foo").innerHTML = str + str2 + str3;

用下面的方法可以更简单地把HTML组合起来，还可以运用复杂的HTML代码：

<style>
    .hide{
        display:none;
    }
</style>
<div id="show">
    这里添加正文
</div>
<div id="page2" class="hide">
    这里添加翻页后的内容
</div>
<button onclick="changePage()">
    按此处翻页
</button>
 
<script type="text/javascript">
    function changePage(){
        var show = document.getElementById("show");
        var hide = document.getElementById("page2");
        show.innerHTML = hide.innerHTML;
        correctIframeSize();//运用本章调整尺寸的方法。
    }
</script>

也就是说，把翻页后的内容保存到隐藏（display:none;）的元素中。翻页时，将隐藏元素的内容复制给显示的元素。这样，增添翻页内容时不需要增加str等变量，避免了因为忘记添加变量而使得一部分段落不显示的情况发生；翻页正文内容也可以像普通的html那样写，方便编辑。本章的示例就运用了这种方法。

---

不使用动画格式制作动画

一个著名的例子

自制的示例

SCP-895是一个在SCP图片框中添加动画的著名的例子。这里分享一个制作相似效果的方法。

如果详细阐述的话，估计需要很长的篇幅，所以本章只介绍关键的要点。默认读者了解html、js和css的相关知识。如果有任何问题，不妨问一问熟悉这些内容的其他网站成员。如果你有任何的建议，望告知！

基本思路

不使用视频或Gif动画

当然，上传视频和Gif动画也没问题。然而，视频文件很难直接插入网页。
而且，这两者的尺寸都会比较大，需要一段时间来加载，也不能添加像是监控摄像头一样的时间戳。因此，视频和Gif动画一类的文件在SCP文档中显得不够灵活。

html+css+js之组合拳！

SCP-845、以及我自制的示例，均不是视频，而是用JavaScript生成的特效。轻便、仿真时间戳、外观富于变化

方法

编写仿真视频html+css+js时的注意事项

下面向大家逐一介绍一些要点。

固定高度

很少有视频会改变高度的吧？所以请固定你编写的文件的高度！

这些仿真视频的文件会通过iFrame来加载。据我所知，浏览器能很好地计算水平长度，而垂直高度的计算往往会出错。（例如，纵向文本的CSS会很麻烦）

因此，最安全的办法是一开始就固定高度并从用户端指定。

使用相对路径

如果所有的文件均上传到同一页的附件中，则可以使用相对路径。像这样→“./”。

去除html中的空白

在图片框里留有空白会显得不美观，需要去除html中所有的空白。具体而言，在css文件中添加如下内容：

body {
  padding:0px;
  margin: 0px;
}

兼容智能手机和电脑

现在很多人会用智能手机浏览SCP基金会网站。因此，使用Flash并不合适，尽可能地使用HTML 5的Canvas元素代替Flash的ShockWave。

插入的模版

例如长宽为(300px,300px)，这样插入文章中：

[[div class="scp-image-block" style="width:300px;"]]
[[iframe 仿真视频文件的URL地址 style="width:300px; height:300px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
标题
[[/div]]
[[/div]]

素材收集

注意素材的许可协议

你所发布的仿真视频动画，应当遵守CC-BY-SA 3.0许可协议，所使用的图片等素材应当符合CC-BY-SA 3.0协议。

因此，在css和js文件中所使用的代码，不能使用“非商业用途”的素材，或者“禁止演绎”的素材。

图像等素材采用CC-BY-SA 3.0授权方式，而代码有无数的许可形式，其中MIT是相对宽松的软件授权条款。如果你被授予MIT许可证，在上传的文件中需要包含MIT的版权声明和许可声明，在讨论区也需要声明采用了MIT许可证。

CodePen

CodePen上的作品均免费公开发布，采用MIT许可证。
https://blog.codepen.io/legal/licensing/

本章中的示例参考了CodePen上Lucas Bebber所编写的base64 glitch anim + CSS CRT effect。

非常推荐CodePen这个网站。

---

附录

本章中示例的源代码
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.html
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.css
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.js

---

CSS Filter入门

请注视着鼻子。然后，画面切换！虽然现在图片是黑白的，是不是仍然能够看到颜色呢？

这里简单地介绍如何使用CSS滤镜功能将图片黑白化。

使用SCP-993的插图作为示例，原始图片是这样的。

[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png size="small" style="-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);max-width:200px;"]]

添加了style之后便能变成黑白的。

style后的部分就是滤镜效果。-moz-开头的那行现在已经几乎不需要了…

-webkit-filter:grayscale(100%);
-moz-filter: grayscale(100%);
filter:grayscale(100%);

[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png size="small" style="filter:hue-rotate(125deg);max-width:200px;"]]

也可以是这样的：

应用了hue-rotate(125deg)这个滤镜。

-webkit-filter:hue-rotate(125deg);
-moz-filter:hue-rotate(125deg);
filter:hue-rotate(125deg);

这些滤镜也可以组合使用。

先应用褐色滤镜再应用hue-rotate(125deg)滤镜。应用多个滤镜的情况下，滤镜之间用空格隔开。

-webkit-filter:sepia(100%) hue-rotate(125deg);
-moz-filter:sepia(100%) hue-rotate(125deg);
filter:sepia(100%) hue-rotate(125deg);

嘿！如果是图片的话，一开始就做成黑白的不就好了？！
回复：除了图片以外，CSS还可以应用于任何元素。例如，可以使侧边菜单栏变成黑白色，或者使整个屏幕变成褐色。

---

等宽字体

如果使用了日语Wiki语法拓展样式，就无法使用{{teletype (monospaced) text}}语法。除非使用另外一种字体，否则无法表现出传真打印的效果。例如，黑白黑白黑白黑白黑白灰中使用了Wikidot基础语法，翻译版本的字体显示效果如下：

昨天，

我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。

今天，

又有三個人進去，手握廉價的拖把與彼此的性命。

昨天，

我看見自己欽佩的一個人被擊斃，因為他給遭受無妄蹂躪的女孩留下玫瑰贈予。

今天，

她遺忘昨日詳細，三道走廊都難以消隔叫聲淒厲。

昨天，

我看見一隊士兵在與死去同袍的屍體相互激鬥。

今天，

我們測試另外一份樣品，盡是孩童。

当然，方块字本来就是等宽的，但传真终端的效果未能展现。而用了位图字体后的显示效果如下：

昨天，

我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。

今天，

又有三個人進去，手握廉價的拖把與彼此的性命。

昨天，

我看見自己欽佩的一個人被擊斃，因為他給遭受無妄蹂躪的女孩留下玫瑰贈予。

今天，

她遺忘昨日詳細，三道走廊都難以消隔叫聲淒厲。

昨天，

我看見一隊士兵在與死去同袍的屍體相互激鬥。

今天，

我們測試另外一份樣品，盡是孩童。

一下子就有了终端的感觉。有时，使用这个位图字体可以改善译文的观感。

在开头添加如下语法：

[[include :scp-jp-sandbox2:inc:ayu18]]

之后这样使用：

[[div class="monoayu"]]
> 昨天，
> 
> 我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。
[[/div]]

字体是由自制字体工坊将After X-TT Project: Ayu 18点 Gothic转换为ttf字体，添加许可证后经过woff编码成为网络字体。原始的ttf可以从前一个链接中获取，属于公共领域。

---

单页迭代

"Hyper page changer" Presents by:physicslike

概述

以SCP-2998和SCP-1111-JP为代表的作品，通过特定的方式将数个不同页面的内容和评分统一显示在一个页面上。这就是利用ListPage模块和子页面组合起来实现的“迭代”效果。想要创建类似的页面，则必须建立多个子页面，同时必须严格控制好上传的顺序。此外，在沙盒站上创建子页面、测试迭代效果也很不方便。这里介绍一种基本原理相同，但是仅用单个页面就能实现迭代的方法。点击下面的链接前往下一迭代。

>阅读下一迭代

---

其他

模拟验证

嘿！我可不知道密码啊！

好吧，好吧，不管怎样先按一下认证试试吧。

---

帐号

750b50e4d047608014b153d9fee973c9_1743051346

密码

cd05dcc03728c0094ac33a383750869f_1743051346

认证

职员密码验证通过，正在根据您的安保权限调取信息。

---

哈！密码随便一下就试出来了！

本来也就没有什么密码。

---

[[include :scpsandboxcn:inc:fakeprot |name=Site:8192 Director Y.Gineri]]

[[div class="collapsiblealt"]]
[[collapsible show="认证" hide="注销"]]

我想这只不过是通常的折叠模块而已吧！

[[/collapsible]]
[[/div]]

你可以在『name=』的后面自定义你的账号。

---

更换网页标题

大家请看网页的左上角，是不是写着“SCP基金会日本分部”？
“咦？什么时候网站的名字变了？”
看起来好像是这样，但实际上只是“SCP基金会”里普通的一页。使用下面的语法来更换网页标题。

SCP基金会和沙盒III的文章：

[[include :scp-jp-sandbox2:inc:changepagetitle |
TITLE=SCP基金会日本分部|
COLOR=#EEE]]

沙盒II的文章：²

[[include inc:changepagetitle |
TITLE=SCP-JP沙盒II|
COLOR=#EEE]]

设置项如下：

项目	设置内容
TITLE	更换后的网页标题
COLOR	文字的颜色

颜色用RGB编号指定，如果你对RGB编号不熟悉，使用下面的工具调配出一种颜色。

左键拖动红色、绿色和蓝色渐变色带上的滚动条，“预览”和下面的“RGB编号”会随之变化。调配出理想的颜色后，复制以“#”开头的一串字母，粘贴到语法的“COLOR”项中，就可以改变标题的颜色。

在人事页之类的地方试试吧。

技术笔记：供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。

+ 显示技术笔记

这里的CSS模块替换了标准Wikidot页面上的下列元素。

凡例：

元素	CSS中元素的标记
功能	元素在wikidot页面中的作用
变更	代码中追加或修改的内容

变更：

元素	#header h1 a
功能	"SCP基金会"和"SCP-JP沙盒II"标题、 以及指向网站首页的链接
变更	color:transparent; text-shadow: none; display:block; position:relative; width:580px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;

此外，这个模块还在Wikidot页面上添加了以下的伪元素。
模块所添加的伪元素：

元素id	伪元素	伪元素的功能
#header h1 a	after	更换后的标题

---

在页面标题上方添加一个副标题

注意：这个语法必须和上文的“更换网页标题”一起使用。要保持网页标题不变、只是在上面添加副标题的话，请先拷贝上面“更换网页标题”的语法之后，再用这个语法。

说明：页面左上角“SCP基金会日本分部”之上写着“SCP Foundation JP-branch”，是基金会的版式变了吗？并非如此，只不过是用了下面的语法另外添加的。

SCP基金会和沙盒III的文章：

[[include :scp-jp-sandbox2:inc:topsubtitle |
TITLE=SCP Foundation JP-branch |
COLOR=#EEE]]

沙盒II的文章：

[[include inc:topsubtitle |
TITLE=SCP Foundation JP-branch |
COLOR=#EEE]]

设置项如下：

项目	设置内容
TITLE	所添加的副标题
COLOR	文字的颜色

颜色用RGB编号指定，如果你对RGB编号不熟悉，使用“更换网页标题”中的工具。

技术笔记：供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。

+ 显示技术笔记

这里的CSS模块在标准Wikidot页面上添加了下列伪元素。
模块所添加的伪元素：

元素id	伪元素	伪元素的功能
#header h1 a	before	添加的副标题

---

更换Logo

请看左上角的Logo。哎？不是平常的Logo。这是SCP国际翻译站日本分部的Logo。
使用下面的语法来更换Logo。

SCP基金会和沙盒III的文章：

[[include :scp-jp-sandbox2:inc:changelogo |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

沙盒II的文章：

[[include inc:changelogo |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

在“IMAGE”后填写你的Logo的URL地址。

下面提供了一个没有任何标记的基金会Logo外圈，用这个来做大家的原创标志怎么样？

请使用支持透明通道的图像处理软件来编辑。

注意：用来更换的Logo图像必须是正方形的，否则就会被横向或者纵向拉伸变形。

---

转啊转

你发现这个页面的Logo在转动吗？！

SCP基金会和沙盒III的文章：

[[include :scp-jp-sandbox2:inc:guruguru]]

沙盒II的文章：

[[include inc:guruguru]]

你甚至可以用下面的语法来让你的原创Logo转起来！（※请注意不要使用上面的更换Logo的语法）

SCP基金会和沙盒III的文章：

[[include :scp-jp-sandbox2:inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

沙盒II的文章：

[[include inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

在“IMAGE”后填写你的Logo的URL地址。

注意：在让原创Logo旋转的时候请务必：

[[include :scp-jp-sandbox2:inc:guruguru]]
[[include :scp-jp-sandbox2:inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]

在[[include inc:guruguru]]之下添加用于更换旋转Logo的语法，才能显示出你自己的Logo。

技术笔记：供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。

+ 显示技术笔记

这里的CSS模块在标准Wikidot页面上添加了下列伪元素。
模块所添加的伪元素：

元素id	伪元素	伪元素的功能
#header	before	旋转的Logo

---

更换副标题

网页的副标题变了！这是SCP的异常性质³吗！？
不，这也是利用include实现的特效。

[[include :scp-jp-sandbox2:inc:headsubtitle | title=控制，收容，七节]]

---

神代文字

ｺﾚﾊﾎﾂﾀﾏｴﾃﾞｽ
ｱﾅﾀﾊﾖｸﾜｶﾗﾅｲﾓｼﾞﾂﾃ
ｽﾃｷﾀﾞﾄｵﾓｲﾏｾﾇｶ
ﾐｼﾗﾇﾓｼﾞﾆﾖﾙｴｷｿﾞﾁｯｸﾀｲｹﾇ

在开头添加：

[[include :scp-jp-sandbox2:inc:hotsu]]

之后这样：

[[div class="hotsu"]]
> ｺﾚﾊﾎﾂﾀﾏｴﾃﾞｽ _
> ｱﾅﾀﾊﾖｸﾜｶﾗﾅｲﾓｼﾞﾂﾃ _
> ｽﾃｷﾀﾞﾄｵﾓｲﾏｾﾇｶ _
> ﾐｼﾗﾇﾓｼﾞﾆﾖﾙｴｷｿﾞﾁｯｸﾀｲｹﾇ _
[[/div]]

字体引用自神代国文字。虽然许可免费使用，但严禁修改作者。因此，我将字体转化为WOFF格式并添加了许可证。初始的TTF格式可以从前面的链接中获得。

---

改变Tabview布局

简介：Tabview常用于在一个沙盒页中存放多个草稿，就像这样：

标签1

草稿1

标签2

草稿2

但是，有时你想不想用不一样的折叠标签？现在我们有一种不同寻常的Tabview布局！就像这样：

标签1

草稿1

标签2

这是一个存放长内容的例子，下面的黑色方块代表着一个很长的句子。

下面是使用方法。首先，在开头添加：

[[include :scp-jp-sandbox2:inc:addspecialcss]]

之后，将通常的[[tabview]]模块嵌入到一个[[div]]模块中。

[[div class="CustomTabRJ"]]
[[tabview]]
[[tab 标签1]]
折叠里的内容1
[[/tab]]
[[tab 标签2]]
折叠里的内容2
[[/tab]]
[[/tabview]]
[[/div]]

此外，还有另外一种不同颜色的版本。

标签1

折叠里的内容1

标签2

折叠里的内容2

标签3

折叠里的内容3

语法如下（在开头添加了[[include :scp-jp-sandbox2:inc:addspecialcss]]之后使用）：

[[div class="CustomTabRJC"]]
[[tabview]]
[[tab 标签1]]
折叠里的内容1
[[/tab]]
[[tab 标签2]]
折叠里的内容2
[[/tab]]
[[tab 标签3]]
折叠里的内容3
[[/tab]]
[[/tabview]]
[[/div]]

像这样，添加了[[include :scp-jp-sandbox2:inc:addspecialcss]]之后，将通常的[[tabview]]模块嵌入到一个[[div]]模块中。

注意：如果你用IE或者Edge查看这个页面，不同标签下的高度是固定的。超出高度的内容则会被隐藏。

这是人为设计限制的，至于为什么会这样，那就是更为专业的话题了。

另外，如果标签标题太长，看起来就会很丑。因此在用这种布局的Tabview时，请尽量缩短每个标签的标题。

---

讨论区帖子

• Forum
• 日语Wiki语法拓展样式
• 讨论区帖子

开始由: QuestionMan
日期: 2 Apr 2017 12:08
文章数: 3
RSS: 新文章

我想写一篇关于讨论区的meta文章！

全部展开 全部收合 更多选项

讨论区帖子

QuestionMan 2 Apr 2017 12:08

我想写一篇关于讨论区的meta文章，该怎么做？

讨论区帖子

QuestionMan 2 Apr 2017 12:15

我不想用HTML模块。

Re: 讨论区帖子

AnswerMan 2 Apr 2017 13:00

不妨试一试[[include :scp-jp-sandbox2:inc:addspecialcss]]吧！

新文章

也许正在阅读这篇文章的读者中，有一些人想让讨论区出现在文章中，想做一些不寻常的事情。这里的语法可以让你轻松打造出讨论区的格式。

注意：在这个语法中，下述语句会频繁出现：

[[include :scp-jp-sandbox2:inc:hoge]]

Code:1

语句的“hoge”处会被替换成会各种不同的内容（这里所有的include语法，“include :scp-jp-sandbox2:inc:”这部分都是相同的）⁴。
事实上，本章基于如何在SCP基金会网站上套用伪讨论区格式，如果你想在沙盒⁵里创建一个伪讨论区：

[[include inc:hoge]]

Code:2

删除“inc”前的“:scp-jp-sandbox2”部分。

2017年6月26日补充：在沙盒里直接使用Code:1并没有任何问题，这样在SCP基金会网站上正式发布时，可以将伪讨论区格式直接从沙盒页拷贝过来。

插入CSS：在开头添加下面的语句，这样才能显示出伪讨论区格式：

[[include :scp-jp-sandbox2:inc:addspecialcss]]

Code:3

译者补充：在这句的下面，另外添加一句：

[[include :scpsandboxcn:inc:addspecialcss-cn]]

否则部分内容会翻译不完全。

用户头像：使用下面的图片来作为讨论发起人和回复者的用户头像，当然你也可以用自己原创的图片。

示例	图片URL
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount0.png
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount1.png
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount2.png
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount4.png
	http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png

关于日期：wikidot讨论区以英式日期格式显示时间，如下所示：

日　月　年　时间

例如“2017年4月2日12时8分”以这样的方式表示：

2 Apr 2017 12:08

所用的符号和顺序与日常所见的不同。至于月份，以三个字母的缩写表示，如下：

1月	2月	3月	4月	5月	6月
Jan	Feb	Mar	Apr	May	Jun
7月	8月	9月	10月	11月	12月
Jul	Aug	Sep	Oct	Nov	Dec

请依照以上规则填写日期。

标题：在讨论区帖子的顶端，是帖子的标题和帖子的类别。例如：

讨论区帖子

• Forum
• 日语Wiki语法拓展样式
• 讨论区帖子

语法如下：

[[div class="DummyForumTitle"]]
讨论区帖子
* Forum
* SCP主区 / 一般讨论区
* 讨论区帖子
[[/div]]

Code:4

[[div class="DummyForumTitle"]]～[[/div]]之间的“无序列表”（即“* list”）会变成帖子的类别。

摘要：摘要放在帖子标题下方，简要概述帖子的用途。

开始由: QuestionMan
日期: 2 Apr 2017 12:08
文章数: 3
RSS: 新文章

我想写一篇关于讨论区的meta文章！

全部展开 全部收合 更多选项

语法如下：

[[include :scpsandboxcn:inc:pseudosummary |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=26 Jan 2017 12:08|
POST=3|
SUMMARY = block]]
我想写一篇关于讨论区的meta文章！
[[include :scpsandboxcn:inc:pseudosummary-end]]

Code:5

这里URL等各种设置项，其功能说明如下：

项目	设置内容
URL	用户头像图片的URL地址
NAME	讨论发起人用户名
DATE	帖子创建日期
POST	文章总数
SUMMARY	※详见下文

Explain:1

有关SUMMARY的设置，举例说明：

开始由: QuestionMan
日期: 2 Apr 2017 12:08
文章数: 3
RSS: 新文章

全部展开 全部收合 更多选项

如果帖子没有摘要，同时也要将“摘要:”隐藏，将SUMMARY设置成none。

[[include :scpsandboxcn:inc:pseudosummary |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
POST=3|
SUMMARY=none]]
[[include :scpsandboxcn:inc:pseudosummary-end]]

Code:6

如果要显示“摘要:”一词，请设置为block。

显示摘要	隐藏摘要
SUMMARY=block	SUMMARY=none

帖子内容：这是最复杂的部分，我们一起来看。讨论区帖子的格式如下所示：

讨论区帖子

QuestionMan 2 Apr 2017 12:08

我想写类似讨论区的格式，该怎么做呢？

语法如下：

[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=讨论区帖子]]
我想写类似讨论区的格式，该怎么做呢？
[[/div]]
[[/div]]

Code:7

请注意语法的末尾有两个[[/div]]，对于了解html语法的人来说应该比较容易掌握。语法中的设置项如下：

项目	设置内容
URL	用户头像图片的URL地址
NAME	用户名
DATE	发帖时间
TITLE	帖子的标题

Explain:2

在最后的两个[[/div]]之间插入一个同样的Code:7语法，就可以表现出对单个帖文的回复的效果。

讨论区帖子

QuestionMan 2 Apr 2017 12:08

我想写类似讨论区的格式，该怎么做呢？

Re:讨论区帖子

AnswerMan 2 Apr 2017 12:18

包在我身上

[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=讨论区帖子]]
我想写类似讨论区的格式，该怎么做呢？
[[/div]]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png|
NAME=AnswerMan |
DATE=2 Apr 2017 12:18|
TITLE=讨论区帖子]]
包在我身上
[[/div]]
[[/div]]
[[/div]]

Code:8

可以多次回复帖子，也可以对单个帖文回复多次。最后的[[/div]]的数量可能会比较棘手，所以建议你在帖文的上下插入注释。

[!-- 讨论1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png|
NAME=QuestionMan |
DATE=2 Apr 2017 12:08|
TITLE=讨论区帖子]]
我想写类似讨论区的格式，该怎么做呢？
[[/div]]
[!-- 回复1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.png|
NAME=AnswerMan |
DATE=2 Apr 2017 12:18|
TITLE=讨论区帖子]]
包在我身上
[[/div]]
[[/div]]
[!-- 回复1 End --]
[[/div]]
[!-- 讨论1 End --]

Code:9

我觉得这种表现回复的语法相当复杂，一定要注意[[/div]]的数量。

新文章：在帖子的底端，有一个“新文章”按钮。

新文章

语法如下：

[[div class="DummyNew-post"]]
[[span class="fake-link"]]新文章[[/span]]
[[/div]]

Code:10

以上就是伪讨论区格式的语法，如果能帮上你的忙我不胜荣幸。

---

星空与UFO

参考资料：
Parallax Star background in CSS By Saransh Sinha
UFO speeder By Louis Coyle
Introduced by Nanimono Daemon does not match any existing user name

你还记得2017年愚人节的版式吗？版头上面有星空和UFO对不对？可以通过以下语法让这些显示在你的作品和沙盒里。
星空：

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-stars_3.css);
[[/module]]

Code:1

UFO：

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-1010CSS6.css);
[[/module]]

Code:2

此外，如果你想在文章中出现星空和UFO，只需要在开头添加：

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);
[[/module]]

Code:3

之后这样：

[[div class="nightskyScreen" style="width:90%;height:200px;margin:auto;"]]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[[div class="ufo"]]
[[/div]]
[[/div]]

Code:4

单独的夜空（渐变色背景）如下所示。如果你想在背景上添加文字，建议将文字颜色设置为白色，例如添加style="color:#FFF;"，否则难以看清文字的内容。

[[div class="nightskyScreen" style="color:#FFF;"]]
style="color:#FFF;"这句代码将文字变成了白色。
[[/div]]

Code:5

style="color:#FFF;"这句代码将文字变成了白色。

此外，style="width:90%;height:200px;"一类的语法可以调整夜空背景的尺寸。

在夜空背景上添加星星的语法如下：

[[div class="nightskyScreen" style="width:90%;height:100px;margin:auto;"]]
[!-- 添加以下3个元素 --]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[!-- 添加以上3个元素 --]
[[/div]]

Code:6

添加UFO的语法如下。因为UFO的轨迹的缘故，夜空背景的height必须至少为150像素。

[[div class="nightskyScreen" style="width:90%;height:150px;margin:auto;"]]
[!-- UFO的代码 --]
[[div class="ufo"]]
[[/div]]
[!-- UFO的代码结束 --]
[[/div]]

Code:7

现在，你的页面是不是有一种宇宙Cosmo的感觉

技术笔记：供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。

+ 显示技术笔记

这里的CSS模块（Code:1及Code:2）替换了标准Wikidot页面上的下列元素。

凡例：

元素	CSS中元素的标记
功能	元素在wikidot页面中的作用
变更	代码中追加或修改的内容

code1所作的变更：

元素	#page-content
功能	网页正文
变更	position:relative;z-index:3;

元素	#side-bar .side-block
功能	侧边栏菜单
变更	position:relative;z-index:3;

元素	#footer
功能	帮助或服务条款
变更	position:relative;z-index:3;

元素	a.avatar-hover, a.avatar-hover:hover
功能	将鼠标悬停在帐户上时显示的放大头像相关元素1 （帐户头像后面的灰色背景）
变更	z-index:4;

元素	a.avatar-hover div
功能	将鼠标悬停在帐户上时显示的放大头像相关元素2
变更	position: relative;z-index:4;

元素	a.avatar-hover div div
功能	将鼠标悬停在帐户上时显示的放大头像相关元素3
变更	position:absolute;z-index:4;

code2所作的变更：

元素	#skrollr-body
功能	除了折叠模块以外的所有div元素
变更	overflow:hidden;width:100%;position:relative;

为了实现动画效果，在以下id的元素中添加了伪元素。

code1所添加的伪元素：

元素id	伪元素	伪元素的功能
#container-wrap-wrap	before	星空背景1-1
	after	星空背景1-2
#container-wrap	before	星空背景2-1
	after	星空背景2-2
#container	before	星空背景3-1
	after	星空背景3-2

code2所添加的伪元素：

元素id	伪元素	伪元素的功能
#skrollr-body	after	UFO本体

如果您自己的CSS版式可以成功单独应用，但是不能与本模块同时使用，请检查上述的项目。

---

Colmod - 多重折叠

"Collapsible Modification - multiple collapsible blocks" Introduced by:Boyu12

colmod就是colmod啊…

• • _
  + 打开- 关闭

  就像这样…

  • • _
    + 打开- 关闭

    不管多少次…

    • • _
      + 打开- 关闭

      都可以折叠起来。

      [[include component:coltop show=+ 打开|hide=- 关闭]]
      就像这样…
      [[include component:coltop show=+ 打开|hide=- 关闭]]
      不管多少次…
      [[include component:coltop show=+ 打开|hide=- 关闭]]
      都可以折叠起来。
      [[include component:colend]]
      [[include component:colend]]
      [[include component:colend]]

      ---

      colend 中设置 nohide=false 之后再设置 hide …

      • • _
        + 打开▽ 关闭

        再现折叠模块中 hideLocation="both" 的效果。⁶
        此外，还可以在 coltop 和 colend 中显示不同的链接文本。

        [[include component:coltop show=+ 打开|hide=▽ 关闭]]
        再现折叠模块中 hideLocation="both" 的效果。
        此外，还可以在 coltop 和 colend 显示不同的链接文本。
        [[include component:colend hide=△ 关闭|nohide=false]]

        
        
        △ 关闭

      ---

      coltop 中删除 hide 之后设置 nohide=true ，
      colend 中设置 nohide=false …

      • • _
        + 打开

        再现折叠模块中 hideLocation="bottom" 的效果。⁷

        [[include component:coltop show=+ 打开|nohide=true]]
        再现折叠模块中 hideLocation="bottom" 的效果。
        [[include component:colend hide=- 关闭|nohide=false]]

        
        
        - 关闭

      ---

      coltop 中设置 folded=false …

      • • _
        + 打开- 关闭

        再现折叠模块中 folded="no" 的效果。⁸

        [[include component:coltop folded=false|show=+ 打开|hide=- 关闭]]
        再现折叠模块中 folded="no" 的效果。
        [[include component:colend]]

      ---

      colmod 嵌入 [[div class="collapsiblealt"]]与[[/div]] 之间，
      或者在 coltop 中设置 ifprot=true …

      • • _
        认证注销

        再现模拟认证中的折叠模块的效果。

        [[div class="collapsiblealt"]]
        [[include component:coltop show=认证|hide=注销]]
        再现[#toc23 模拟认证]中的折叠模块的效果。
        [[include component:colend]]
        [[/div]]

        或者

        [[include component:coltop ifprot=true|show=认证|hide=注销]]
        再现[#toc23 模拟认证]中的折叠模块的效果。
        [[include component:colend]]

      ---

      欲了解更多信息，请参阅：
      Append Syntax: Colmod - 多重折叠

Footnotes

1. 技术细节我就不详细阐述了，现在GoogleChrome已经解决了本章所涉及的问题。因此，这项技术已过期仅供参考。

2. 译注：指日本分部的沙盒，下同。

3. 译注：指SCP-755-JP

4. 译注：部分内容需要修改为翻译后的版本，详见后文。

5. 译注：指日本分部的沙盒。

6. 译注：即关闭链接显示在折叠内容的上下两侧。

7. 译注：即关闭链接显示在折叠内容的下侧。

8. 译注：即折叠初始打开。