专业级Wikidot语法

[[include :scp-jp:component:jstyles]]
[[toc]]

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

[[[meet-the-staff-jp|スタッフ一覧]]]

------

+ html模块拓展

[[>]]
**"//Expand the HTML Block//" Presents by:**[[*user C-take]]
[[/>]]
++ 前提 html模块
这里的功能全部都是基于html模块的拓展，html模块可以让你在wikidot页面中使用html语法。

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

[[span style="font-size:120%;"]]了解更多⇒[http://scp-wiki-cn.wikidot.com/wiki-syntax#toc25 HTML模块][[/span]]

++ 基本功能
[[module css]]
div.blackboard{
font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
margin-left:auto;
margin-right:auto;
padding:5px;
background-color:#000000;
color:#FFF;
width:100%;
font-size:15px;
overflow-x:scroll;
word-berak:none;
white-space: nowrap;
}

div.nest{
margin-left:auto;
margin-right:auto;
padding:5px;
width:95%;
border-left:1px dashed #DDD;
}

.nest p{
padding:0;
margin:0;
}

.Pcomment
{
color:#00cc33;
}
[[/module]]
　大家！有过这样的困扰吗？[[footnote]]技术细节我就不详细阐述了，现在GoogleChrome已经解决了本章所涉及的问题。因此，这项技术已过期仅供参考。 [[/footnote]]
[[collapsible show="+ 显示" hide="- 隐藏"]]
[[html]]
折叠后的html模块下端会被奇怪地延长。<br />
另外，CSS的样式也不一样。怎么办呢。
[[/html]]
[[/collapsible]]
这样做就能解决了！分别是“scp-WikidotCss.css”与“scpHTMLblockCtrl”。先实践一下吧。
[[collapsible show="+ 示例" hide="- 隐藏"]]
[[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>
套用了与SCP文档相同的CSS样式，观感会更加协调。
<collapsible show = "+ 折叠1" hide="- 关闭">
<blockquote>
可以在折叠中再次折叠！<br />
引用也一样如此！
</blockquote>
</collapsible>
等等，我想试试这样。
<collapsible show = "+ 折叠2" hide="- 关闭" hideLocation="bottom">
<blockquote>
hideLocation=&quot;bottom&quot;也一样可以！
</blockquote>
</collapsible>
<div id="scpHTMLblockResizeSwitch"></div>
[[/html]]
[[/collapsible]]
哎？难道需要在html模块里面添加复杂的代码吗？没有那样的事，非常地简单易用。

**使用方法：**
在html模块中添加如下代码。
[[div class="blackboard"]]
<[[span style="color:#FB5"]]style[[/span]] type="text/css">
@import url([[span style="color:#AAF"]]@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css@@[[/span]]);
<[[span style="color:#FB5"]]/style[[/span]]>
<[[span style="color:#FB5"]]script[[/span]] type=[[span style="color:#AAF"]]"text/javascript"[[/span]] src=[[span style="color:#AAF"]]"@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js@@"[[/span]]><[[span style="color:#FB5"]]/script[[/span]]>
<[[span style="color:#FB5"]]script[[/span]] type=[[span style="color:#AAF"]]"text/javascript"[[/span]]>
isHTMLblockHide = [[span style="color:#FB5"]]true[[/span]];
<[[span style="color:#FB5"]]/script[[/span]]>

[[span style="color:#FBB"]]这里添加正文[[/span]]

<[[span style="color:#FB5"]]div[[/span]] id="scpHTMLblockResizeSwitch"><[[span style="color:#FB5"]]/div[[/span]]>
[[/div]]
只需要这样，在html模块的开头和结尾添加上述的代码。
　如果要添加折叠的话（**※在已经添加了上面的代码的前提下**）
[[div class="blackboard"]]
<[[span style="color:#FB5"]]collapsible[[/span]] show = [[span style="color:#AAF"]]"+ 折叠1"[[/span]] hide=[[span style="color:#AAF"]]"- 关闭"[[/span]]>
[[span style="color:#FBB"]]这里添加折叠内文[[/span]]
<[[span style="color:#FB5"]]/collapsible[[/span]]>
[[/div]]
与wikidot语法大同小异。例如hideLocation="bottom"
[[div class="blackboard"]]
<[[span style="color:#FB5"]]collapsible[[/span]] show = [[span style="color:#AAF"]]"+ 折叠2"[[/span]] hide=[[span style="color:#AAF"]]"- 关闭"[[/span]] hideLocation=[[span style="color:#AAF"]]"bottom"[[/span]]>
[[span style="color:#FBB"]]这里添加折叠内文[[/span]]
<[[span style="color:#FB5"]]/collapsible[[/span]]>
[[/div]]
这也和wikidot语法一样。
　如果想用引用方块的话
[[div class="blackboard"]]
<[[span style="color:#FB5"]]blockquote[[/span]]>
[[span style="color:#FBB"]]这里添加引用内容[[/span]]
<[[span style="color:#FB5"]]/blockquote[[/span]]>
[[/div]]
在引用内容的上下添加“<blockquote>”与“</blockquote>”。

　现在，你可以更自由地使用html模块了。更能够实现这样的效果：
[[collapsible show="+ 第1层折叠" hide="- 隐藏"]]
[[html]]
<style type="text/css" id="internal-style">
 /* modules */
@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>
实现折叠中的折叠！
<collapsible show = "+ 第2层折叠" hide="- 关闭">
<blockquote>
咦？折叠套折叠再折叠
<collapsible show = "+ 第3层折叠" hide="- 关闭">
<blockquote>
哎？还可以折叠吗？
<collapsible show = "+ 第4层折叠" hide="- 关闭">
<blockquote>
没有更多了！
</blockquote>
</collapsible>
</blockquote>
</collapsible>
</blockquote>
</collapsible>
<div id="scpHTMLblockResizeSwitch"></div>
[[/html]]
[[/collapsible]]
把这个脚本用在html模块里吧！

**注意：**未将html模块放入折叠时，按如下所示编写：
[[div class="blackboard"]]
<[[span style="color:#FB5"]]style[[/span]] type="text/css">
@import url([[span style="color:#AAF"]]@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css@@[[/span]]);
<[[span style="color:#FB5"]]/style[[/span]]>

<[[span style="color:#FB5"]]script[[/span]] type=[[span style="color:#AAF"]]"text/javascript"[[/span]] src=[[span style="color:#AAF"]]"@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js@@"[[/span]]><[[span style="color:#FB5"]]/script[[/span]]>

[[span style="color:#FBB"]]这里添加正文[[/span]]

<[[span style="color:#FB5"]]div[[/span]] id="scpHTMLblockResizeSwitch"><[[span style="color:#FB5"]]/div[[/span]]>
[[/div]]
放入折叠的区别在于是否有如下的语法：
> <script type="text/javascript">
> isHTMLblockHide = true;
> </script>
使用了上面的语法而不将html模块放在折叠中是可以的。但是添加了这句后，系统将会持续不断地监测“包含此html模块的折叠是否打开”。
这个监测只要打开一次折叠后就会停止，但如果不把html模块放在折叠中的话，监测就永远不会结束。也就是说，多余的程序一直在运行着。
　同样的，在折叠中没有html模块的情况下添加这句语法也没有问题，只是徒劳无益而已。

**高级设置：**从这里开始需要html与css的相关知识。这里介绍的是“scpHTMLblockCtrl”，在html模块中的下述语句：
> <collapsible show = "+ 打开" hide="- 关闭">
> 折叠内容
> </collapsible>
将其还原为如下的html代码：
[[div class="blackboard"]]
<[[span style="color:#FB5"]]div[[/span]] class="[[span style="color:#AAF"]]ParentCollasible[[/span]]">
[[div class="nest"]]
<[[span style="color:#FB5"]]div[[/span]] id="[[span style="color:#AAF"]]scpCollasibleLink[[/span]]+[[span style="color:#FF0;"]]n[[/span]]+[[span style="color:#AAF"]]0[[/span]]">
[[div class="nest"]]
<[[span style="color:#FB5"]]span[[/span]] class=[[span style="color:#AAF"]]"fake-link"[[/span]] onclick="scpRunCollasible('[[span style="color:#AAF"]]scpCollasibleLink[[/span]] + [[span style="color:#FF0;"]]n[[/span]]',0)">+ 打开<[[span style="color:#FB5"]]/span[[/span]]>
[[/div]]
<[[span style="color:#FB5"]]/div[[/span]]>
<[[span style="color:#FB5"]]div[[/span]] id="[[span style="color:#AAF"]]scpCollasibleLink[[/span]] + [[span style="color:#FF0;"]]n[[/span]] + [[span style="color:#AAF"]]1[[/span]]">
[[div class="nest"]]
<[[span style="color:#FB5"]]span[[/span]] class=[[span style="color:#AAF"]]"fake-link"[[/span]] onclick="scpRunCollasible('[[span style="color:#AAF"]]scpCollasibleLink[[/span]] + [[span style="color:#FF0;"]]n[[/span]]',1)">- 关闭<[[span style="color:#FB5"]]/span[[/span]]>
<[[span style="color:#FB5"]]div[[/span]]>
[[div class="nest"]]
折叠内文
[[/div]]
<[[span style="color:#FB5"]]/div[[/span]]>
[[/div]]
<[[span style="color:#FB5"]]/div[[/span]]>
[[/div]]
<[[span style="color:#FB5"]]/div[[/span]]>
[[/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标签的元素，例如
[[div class="blackboard"]]
<[[span style="color:#FB5"]]style[[/span]] type="text/css">
@import url([[span style="color:#AAF"]]@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css@@[[/span]]);

.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;
}
<[[span style="color:#FB5"]]/style[[/span]]>
<[[span style="color:#FB5"]]script[[/span]] type=[[span style="color:#AAF"]]"text/javascript"[[/span]] src=[[span style="color:#AAF"]]"@@http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js@@"[[/span]]><[[span style="color:#FB5"]]/script[[/span]]>
<[[span style="color:#FB5"]]div[[/span]] class="specialCollapsible">
<[[span style="color:#FB5"]]collapsible[[/span]] show = [[span style="color:#AAF"]]"+ 折叠1"[[/span]] hide=[[span style="color:#AAF"]]"- 关闭"[[/span]]>
<[[span style="color:#FB5"]]blockquote[[/span]]>
[[span style="color:#FBB"]]这里添加折叠内文[[/span]]
<[[span style="color:#FB5"]]/blockquote[[/span]]>
<[[span style="color:#FB5"]]/collapsible[[/span]]>
<[[span style="color:#FB5"]]/div[[/span]]>
<[[span style="color:#FB5"]]div[[/span]] id="scpHTMLblockResizeSwitch"><[[span style="color:#FB5"]]/div[[/span]]>
[[/div]]

[[html]]
<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>

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

　最后，列出“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模块的大小
**※前提是遵循上一章所述的语法规则**
各位！想做出这样的特效吗？

------

[[span style="font-size:150%;font-weight:bold;"]]回收自马里亚纳海沟的文档[[/span]]
**原著：** 
[[[dr-gears-s-personnel-file|Dr Gears]]]
[[>]]
[[span style="font-size:70%"]]SCP基金会，2010年2月[[/span]]
[[/>]]
[[html]]
<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);

button{
cursor:pointer;
}
.hide{
display:none;
}
.nextButton{
position:absolute;
top:3px;
right:5px;
}
.prevButton{
position:absolute;
top:3px;
left:5px;
}
.pageNumber{
position:absolute;
top:0px;
left:0px;
width:100%;
text-align:center;
padding:5px;
}
</style>
<script type="text/javascript" src="http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<div id="page-conten">
</div>
<div id="page1" class="hide">
<p>我得把这写下来，因为我有时很健忘，而且我认为今天听到的东西很重要。不是对我——现在还活在这个地球上的人已经没有时间改变什么了——而是对将来在某处能真正为此做点什么的人，至少对他有一点帮助，或其他什么的。一旦我完成了，我要把它封在管子里，裹上蜡，然后扔进峡谷里。也许有一天有人能读到它，并试着追根溯源。如果他们被允许的话。</p>
<p>我很想从事情的开头来写，但说真的，我不清楚这个世界是从何时开始终结的。可能从很久之前，也可能一下就完了。温暖的空气，凉爽的海水，太多的汽油与太多的人，一切都是这么阴森冷酷，世界也许从几世纪前就开始崩溃了，直到一些事情暴露在公众视野中。我和其他人印象最深的大概是<ruby><rb>迪士尼魔力号</rb><rp>〔</rp><rt>Disney Magic</rt><rp>〕</rp></ruby>的沉没。我认为自从那时起，大部分人都开始觉得事情比眼见到的更糟了。</p>
<p>迪士尼魔力号是一艘大游轮，任务是在岛间巡游运货。一天，所有的新闻都开始报道它在进港时突然沉没了。奇怪的是在很长一段时间里，都没有关于此事的录像。只有一些它完好时的静止照片，完全没有关于它沉没过程的照片。然后，出现了一卷录像带，媒体开始播放它。我不得不认为他们事先没好好把它看一遍。</p>
</div>
<div id="page2" class="hide">
<p>游轮正在平稳又快速的航行着，周围漂浮着一些小船，就像每个蜜月恋人的梦中场景，突然，它停下了。我是说停下，就像它撞进了一座山一样的急停。你可以看到甲板上的人群东歪西倒，一堆破烂滚落船舷，真是一团糟。就这么过了几秒，船后突然出现一团泡沫。人们都猜那是马达再试着点火…然后，一条手臂出现了。</p>
<p>我不确定那是否真的是手臂，但它的确是一种肢体，并且至少有100英尺（30.48 米）长。它够到船舷，然后…把船撕开了，就像拉开外套拉锁一样，你可以看到里面的人在尖叫逃跑…糟透了。然后你看到有东西浮出来了，一个巨大的，多刺的东西在拉扯船的裂口，塞进嘴里…然后它的背上爆炸了，镜头抬起，几架喷气机划过天际…然后就结束了。</p>
<p>记得当时我就坐在那，震惊地看着电视，几乎没注意到后来总统宣布了紧急事态。大概两三天后——或是一个礼拜，我记不太清——媒体已完全被政府控制。后来网络被封锁，你所能听到读到看到的都是“保持冷静，一切都在控制之下”。最奇怪的事是，生活并没怎没改变。账单依旧会来，工作上学依旧得去，一切照旧。只是有了更多惊恐的面容，有了更多荒诞的对话。</p>
<p>很快我们被告知整个镇子都要被疏散，因为瘟疫，骚乱，恐怖袭击，或是别的噩梦。住在南部的哥哥说他的镇子因野火而要被疏散了。他提到火势蔓延得很古怪…就像在狩猎汽油和树木。过了一会，他发誓说他看一个20英尺（6.1米）高的人形火焰在行走并吞噬了一切。就在他说话时电话断线了。从此之后我再也没和他通过话。</p>
</div>
<div id="page3" class="hide">
<p>事情变糟了，一点一点得。人们开始持续搬迁，彼此之间不再有有效的联系手段，所以很难说事情到底有多糟。同时，离奇的传言仍在传播。都是些疯话，真的，像是在北部出现僵尸，东部的疯狂杀戮，在一个靠海的地方陆地突然活了开始吃人，一个邪教宣扬<ruby><rb>基督再临</rb><rp>〔</rp><rt>the second coming</rt><rp>〕</rp></ruby>将要到来并杀人祭神…我开始远离人群，只是为了获得思想的宁静。现在回想起来，这也许救了我的命。</p>
<p>最后，一天，我起床后发现窗户上有血。是在外面，而且我能听到外面正在发生一些疯狂的事情…尖叫，金属碰撞，枪击，还有一股烧电线味。我躲了起来。我并不耻于承认它，我让同伴们烂在外面，而我在屋里躲了几乎一整个礼拜，声音停止了我也没出去。第十五天，电力与燃气供应中断，接着是自来水。当我最终供给短缺时，我试探着出门了，发现整个西边的世界都消失了。</p>
<p>至今，我仍不确定它是否真的消失了，但在西边离我屋子30英尺（9.14米）处，那有一条深不见底的裂谷。我看不到裂谷的另一侧，既不想去看也没法看到，那边的世界对我来说就是消失了。我所住的街区就像个战场，到处是血与废物，房子裂开…但是没有尸体，直到现在我仍觉奇怪。我搜集了一些食物与用品，然后回家了。</p>
</div>
<div id="page4" class="hide">
<p>我靠着搜集补给过了一段时间了。我不确定有多久，真的。也许有好几年，也许就几个月，这很难说。有时太阳差不多好几天定在一处不动…还有时候云雾翻滚，你连自己的脚都看不到。而且，周围有什么东西在蠢动。我一听到声音就逃跑了，但我认为它们是人型的，而且看起来像金属。另外，有时有些小东西在瓦砾中爬行，我试着躲开它们。有一次，一只外形像鼠妇但有猫那么大的东西爬了过来，看着我，然后用完美的英语向我大叫“停下！”。我跑回屋躲了好几天。</p>
<p>偶尔天上还漂浮着巨大的飞艇状的东西。它们的下侧长着细小的虫足，整体看起来像蛆虫，但全身都长着眼睛。它们降落时会吃掉周围的一切，但大部分时间都呆在天上。时间就这样过去，直到我碰到一个受伤的家伙。他全身都是伤口，看穿着像是在电视上看到的<ruby><rb>特警</rb><rp>〔</rp><rt>S.W.A.T.</rt><rp>〕</rp></ruby>，但他的战斗服已被撕得粉碎了。我把他拖回家，然后聊起了天。</p>
<p>他说在猎杀那飞艇，但被攻击了。他不说被什么攻击，但看起来他已经快不行了。我喂了他一些罐头豆子和水，他看起来稍微好些了。他问我我是谁，没受伤么之类的话。当我说他是我从看见西边的世界消失以来见到的第一个人时，他很震惊。他告诉我它没消失，而是被移走了，但不告诉我意味什么。我帮他治伤，并一直问他是谁，但他始终不说。最后，他说去他妈的，他的命令可能再也没用了，然后告诉了我。</p>
<p>他说他为一个像是监狱与研究所的组合的什么基金会工作。他说他是一个特工，在寻找异常物品并使它们免于伤人。我说他这工作干得真差劲，他大笑了一阵。他说出了一点事，同时一些东西的看守程度松懈了，致使基金会对某地失去控制。他说这已经导致了“<ruby><rb>GH-0‘死亡温室’状况</rb><rp>〔</rp><rt>GH-0 'Dead Greenhouse' scenario</rt><rp>〕</rp></ruby>”。</p>
<p>我问他这是什么意思，他在回答前盯了我一会。他说，这意味着地球上的人类已经全灭，但地球本身还完好，并能承载生命。我问他人类全灭后怎么办，他奇怪地笑了。我问他是否还有别的人活着，他说是的，但被小心的分散保存着。之后，我坐在那消化这段谈话，而那个男人开始整理他的装备。当他开始穿靴子时，我问他接下来会发生什么。</p>
<p>他说他们得重启这个世界。说他们拥有能重造几乎一切的技术，可以用它很简单的制造人类。说他们将清除和收容异物，重建城市，并让人口重新入住。这可能会花很长很长的时间，但最终他们会使这个世界重归正轨。说他们甚至可以再造记忆与物质。我就震惊地坐在那，一动不动地看着他，看着他就像没什么大事发生一样慢慢穿戴好衣装。我说他是个混蛋，人类绝不会忘记这一切。他停下了，看着我，笑着说：“为什么不会？我们以前就这么干过。”</p>
<p>我不知道这个人是否疯了，但我认为他是清醒的。他离开前，他说我的房子将被沁入水下。拜托，别让他们抹除我。别让他们藏匿我们。请再多找找，我知道一定有更多的人试着留下些什么。别让这个世界白白死去。记住我们。</p>
</div>
<div style="height:2em;position:relative;">
<div id="pageNum" class="pageNumber"></div>
<button id="prev" onclick="showPage(-1)" class="prevButton">上一页</button>
<button id="next" onclick="showPage(1)" class="nextButton">下一页</button>
</div>
<div id="scpHTMLblockResizeSwitch"></div>
<script type="text/javascript">
var currentPage = 1;
var show;
var next;
var prev;
var pageNum;
window.onload = function(){
show = document.getElementById("page-conten");
next = document.getElementById("next");
prev = document.getElementById("prev");
pageNum = document.getElementById("pageNum");
showPage(0);
}

function showPage(n){
prev.style.display = "block";
next.style.display = "block";
currentPage += n;
if(currentPage < 2){
currentPage = 1;
prev.style.display = "none";

}
if(currentPage > 3){
currentPage = 4;
next.style.display = "none";
}
show.innerHTML = document.getElementById("page" + currentPage).innerHTML;
pageNum.innerHTML = currentPage + " / 4";
correctIframeSize();
}


</script>
[[/html]]

------

像这样，在HTML模块中运行javascript脚本，不断地更换HTML模块中的文本内容。这个时候，你有没有遇到过这样的困扰？
> 在HTML模块中显示较长的文本，之后替换为较短的文本时，HTML模块的高度仍然保持着拉伸。
我想尝试过这种事情的人都能有所体会。不过请看，上面的HTML模块不就可以根据文章的长度来改变大小吗？没错，这里的HTML模块使用了可以随时调整尺寸的脚本。

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

在用Javascript对HTML内容进行替换的时候，在函数的末尾
> correctIframeSize();
插入这样的代码。

[[collapsible show="+ 附录：简单的翻页方法" hide="- 关闭"]]
可以这样替换HTML模块的内文：
[[code type="javascript"]]
var str = "hogehoge";
var str2 = "fugafuga";
var str3 = "piyopiyo";
document.getElementById("foo").innerHTML = str + str2 + str3;
[[/code]]
用下面的方法可以更简单地把HTML组合起来，还可以运用复杂的HTML代码：
[[code type="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>
[[/code]]
也就是说，把翻页后的内容保存到隐藏（display:none;）的元素中。翻页时，将隐藏元素的内容复制给显示的元素。这样，增添翻页内容时不需要增加str等变量，避免了因为忘记添加变量而使得一部分段落不显示的情况发生；翻页正文内容也可以像普通的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>
<style>
.nest {
margin-left:01em;
  padding:0;
}
.string{
color:#1c1e75;
}
.autotext{
color:#28339e;
}
.tagName{
color:#4984d8;
}
.codeDisplay{
padding:1em;
width:100%;
word-berak:none;
overflow-x:scroll;
backgroud-color:#ccd8ff;
border:dashed #EEE 1px;

}
.htmlElement{
color:#169391;
}
.attributeColor{
color:#539d65;
}
</style>
<collapsible show="+ 显示示例的源代码" hide="- 关闭">
<div class="code">
&lt;<span class="tagName">style</span> <span class="attributeColor">type</span>&#61;<span class="string">&quot;text/css&quot;</span>&gt;<div class="nest">
@import url(<span class="string">http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css</span>);<br />
<br />
button{<div class="nest">
cursor:pointer;
</div>}<br />
.hide{<div class="nest">
display:none;
</div>}<br />
.nextButton{<div class="nest">
position:absolute;<br />
top:3px;<br />
right:5px;
</div>}<br />
.prevButton{<div class="nest">
position:absolute;<br />
top:3px;<br />
left:5px;
</div>}<br />
.pageNumber{<div class="nest">
position:absolute;<br />
top:0px;<br />
left:0px;<br />
width:100%;<br />
text-align:center;<br />
padding:5px;
</div>}<br />
</div>&lt;/<span class="tagName">style</span>&gt;<br />
&lt;<span class="tagName">script</span> <span class="attributeColor">type</span>&#61;<span class="string">&quot;text/javascript&quot;</span> <span class="attributeColor">src</span>&#61;<span class="string">&quot;http://scp-jp.wdfiles.com/local--files/japanese-syntax/scpHTMLblockCtrl_ver1_ex.js&quot;</span>&gt;&lt;/<span class="tagName">script</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;page-conten&quot;</span>&gt;<br />
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;page1&quot;</span> <span class="attributeColor">class</span>&#61;<span class="string">&quot;hide&quot;</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我得把这写下来，因为我有时很健忘，而且我认为今天听到的东西很重要。不是对我——现在还活在这个地球上的人已经没有时间改变什么了——而是对将来在某处能真正为此做点什么的人，至少对他有一点帮助，或其他什么的。一旦我完成了，我要把它封在管子里，裹上蜡，然后扔进峡谷里。也许有一天有人能读到它，并试着追根溯源。如果他们被允许的话。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我很想从事情的开头来写，但说真的，我不清楚这个世界是从何时开始终结的。可能从很久之前，也可能一下就完了。温暖的空气，凉爽的海水，太多的汽油与太多的人，一切都是这么阴森冷酷，世界也许从几世纪前就开始崩溃了，直到一些事情暴露在公众视野中。我和其他人印象最深的大概是&lt;<span class="tagName">ruby</span>&gt;&lt;<span class="tagName">rb</span>&gt;迪士尼魔力号&lt;/<span class="tagName">rb</span>&gt;&lt;<span class="tagName">rp</span>&gt;〔&lt;/<span class="tagName">rp</span>&gt;&lt;<span class="tagName">rt</span>&gt;Disney Magic&lt;/<span class="tagName">rt</span>&gt;&lt;<span class="tagName">rp</span> &gt;〕&lt;/<span class="tagName">rp</span>&gt;&lt;/<span class="tagName">ruby</span>&gt;的沉没。我认为自从那时起，大部分人都开始觉得事情比眼见到的更糟了。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;迪士尼魔力号是一艘大游轮，任务是在岛间巡游运货。一天，所有的新闻都开始报道它在进港时突然沉没了。奇怪的是在很长一段时间里，都没有关于此事的录像。只有一些它完好时的静止照片，完全没有关于它沉没过程的照片。然后，出现了一卷录像带，媒体开始播放它。我不得不认为他们事先没好好把它看一遍。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;page2&quot;</span> <span class="attributeColor">class</span>&#61;<span class="string">&quot;hide&quot;</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;游轮正在平稳又快速的航行着，周围漂浮着一些小船，就像每个蜜月恋人的梦中场景，突然，它停下了。我是说停下，就像它撞进了一座山一样的急停。你可以看到甲板上的人群东歪西倒，一堆破烂滚落船舷，真是一团糟。就这么过了几秒，船后突然出现一团泡沫。人们都猜那是马达再试着点火…然后，一条手臂出现了。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我不确定那是否真的是手臂，但它的确是一种肢体，并且至少有100英尺（30.48 米）长。它够到船舷，然后…把船撕开了，就像拉开外套拉锁一样，你可以看到里面的人在尖叫逃跑…糟透了。然后你看到有东西浮出来了，一个巨大的，多刺的东西在拉扯船的裂口，塞进嘴里…然后它的背上爆炸了，镜头抬起，几架喷气机划过天际…然后就结束了。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;记得当时我就坐在那，震惊地看着电视，几乎没注意到后来总统宣布了紧急事态。大概两三天后——或是一个礼拜，我记不太清——媒体已完全被政府控制。后来网络被封锁，你所能听到读到看到的都是“保持冷静，一切都在控制之下”。最奇怪的事是，生活并没怎没改变。账单依旧会来，工作上学依旧得去，一切照旧。只是有了更多惊恐的面容，有了更多荒诞的对话。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;很快我们被告知整个镇子都要被疏散，因为瘟疫，骚乱，恐怖袭击，或是别的噩梦。住在南部的哥哥说他的镇子因野火而要被疏散了。他提到火势蔓延得很古怪…就像在狩猎汽油和树木。过了一会，他发誓说他看一个20英尺（6.1米）高的人形火焰在行走并吞噬了一切。就在他说话时电话断线了。从此之后我再也没和他通过话。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;div id&#61;<span class="string">&quot;page3&quot;</span> class&#61;<span class="string">&quot;hide&quot;</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;事情变糟了，一点一点得。人们开始持续搬迁，彼此之间不再有有效的联系手段，所以很难说事情到底有多糟。同时，离奇的传言仍在传播。都是些疯话，真的，像是在北部出现僵尸，东部的疯狂杀戮，在一个靠海的地方陆地突然活了开始吃人，一个邪教宣扬&lt;<span class="tagName">ruby</span>&gt;&lt;<span class="tagName">rb</span>&gt;基督再临&lt;/<span class="tagName">rb</span>&gt;&lt;<span class="tagName">rp</span>&gt;〔&lt;/<span class="tagName">rp</span>&gt;&lt;<span class="tagName">rt</span>&gt;the second coming&lt;/<span class="tagName">rt</span>&gt;&lt;<span class="tagName">rp</span> &gt;〕&lt;/<span class="tagName">rp</span>&gt;&lt;/<span class="tagName">ruby</span>&gt;将要到来并杀人祭神…我开始远离人群，只是为了获得思想的宁静。现在回想起来，这也许救了我的命。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;最后，一天，我起床后发现窗户上有血。是在外面，而且我能听到外面正在发生一些疯狂的事情…尖叫，金属碰撞，枪击，还有一股烧电线味。我躲了起来。我并不耻于承认它，我让同伴们烂在外面，而我在屋里躲了几乎一整个礼拜，声音停止了我也没出去。第十五天，电力与燃气供应中断，接着是自来水。当我最终供给短缺时，我试探着出门了，发现整个西边的世界都消失了。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;至今，我仍不确定它是否真的消失了，但在西边离我屋子30英尺（9.14米）处，那有一条深不见底的裂谷。我看不到裂谷的另一侧，既不想去看也没法看到，那边的世界对我来说就是消失了。我所住的街区就像个战场，到处是血与废物，房子裂开…但是没有尸体，直到现在我仍觉奇怪。我搜集了一些食物与用品，然后回家了。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;page4&quot;</span> <span class="attributeColor">class</span>&#61;<span class="string">&quot;hide&quot;</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我靠着搜集补给过了一段时间了。我不确定有多久，真的。也许有好几年，也许就几个月，这很难说。有时太阳差不多好几天定在一处不动…还有时候云雾翻滚，你连自己的脚都看不到。而且，周围有什么东西在蠢动。我一听到声音就逃跑了，但我认为它们是人型的，而且看起来像金属。另外，有时有些小东西在瓦砾中爬行，我试着躲开它们。有一次，一只外形像鼠妇但有猫那么大的东西爬了过来，看着我，然后用完美的英语向我大叫“停下！”。我跑回屋躲了好几天。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;偶尔天上还漂浮着巨大的飞艇状的东西。它们的下侧长着细小的虫足，整体看起来像蛆虫，但全身都长着眼睛。它们降落时会吃掉周围的一切，但大部分时间都呆在天上。时间就这样过去，直到我碰到一个受伤的家伙。他全身都是伤口，看穿着像是在电视上看到的&lt;<span class="tagName">ruby</span>&gt;&lt;<span class="tagName">rb</span>&gt;特警&lt;/<span class="tagName">rb</span>&gt;&lt;<span class="tagName">rp</span>&gt;〔&lt;/<span class="tagName">rp</span>&gt;&lt;<span class="tagName">rt</span>&gt;S.W.A.T.&lt;/<span class="tagName">rt</span>&gt;&lt;<span class="tagName">rp</span> &gt;〕&lt;/<span class="tagName">rp</span>&gt;&lt;/<span class="tagName">ruby</span>&gt;，但他的战斗服已被撕得粉碎了。我把他拖回家，然后聊起了天。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;他说在猎杀那飞艇，但被攻击了。他不说被什么攻击，但看起来他已经快不行了。我喂了他一些罐头豆子和水，他看起来稍微好些了。他问我我是谁，没受伤么之类的话。当我说他是我从看见西边的世界消失以来见到的第一个人时，他很震惊。他告诉我它没消失，而是被移走了，但不告诉我意味什么。我帮他治伤，并一直问他是谁，但他始终不说。最后，他说去他妈的，他的命令可能再也没用了，然后告诉了我。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;他说他为一个像是监狱与研究所的组合的什么基金会工作。他说他是一个特工，在寻找异常物品并使它们免于伤人。我说他这工作干得真差劲，他大笑了一阵。他说出了一点事，同时一些东西的看守程度松懈了，致使基金会对某地失去控制。他说这已经导致了“&lt;<span class="tagName">ruby</span>&gt;&lt;<span class="tagName">rb</span>&gt;GH-0‘死亡温室’状况&lt;/<span class="tagName">rb</span>&gt;&lt;<span class="tagName">rp</span>&gt;〔&lt;/<span class="tagName">rp</span>&gt;&lt;<span class="tagName">rt</span>&gt;GH-0 'Dead Greenhouse' scenario&lt;/<span class="tagName">rt</span>&gt;&lt;<span class="tagName">rp</span> &gt;〕&lt;/<span class="tagName">rp</span>&gt;&lt;/<span class="tagName">ruby</span>&gt;”。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我问他这是什么意思，他在回答前盯了我一会。他说，这意味着地球上的人类已经全灭，但地球本身还完好，并能承载生命。我问他人类全灭后怎么办，他奇怪地笑了。我问他是否还有别的人活着，他说是的，但被小心的分散保存着。之后，我坐在那消化这段谈话，而那个男人开始整理他的装备。当他开始穿靴子时，我问他接下来会发生什么。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;他说他们得重启这个世界。说他们拥有能重造几乎一切的技术，可以用它很简单的制造人类。说他们将清除和收容异物，重建城市，并让人口重新入住。这可能会花很长很长的时间，但最终他们会使这个世界重归正轨。说他们甚至可以再造记忆与物质。我就震惊地坐在那，一动不动地看着他，看着他就像没什么大事发生一样慢慢穿戴好衣装。我说他是个混蛋，人类绝不会忘记这一切。他停下了，看着我，笑着说：“为什么不会？我们以前就这么干过。”&lt;/<span class="tagName">p</span>&gt;<br />
&lt;<span class="tagName">p</span>&gt;我不知道这个人是否疯了，但我认为他是清醒的。他离开前，他说我的房子将被沁入水下。拜托，别让他们抹除我。别让他们藏匿我们。请再多找找，我知道一定有更多的人试着留下些什么。别让这个世界白白死去。记住我们。&lt;/<span class="tagName">p</span>&gt;<br />
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">style</span>&#61;<span class="string">&quot;height:2em;position:relative;&quot;</span>&gt;<div class="nest">
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;pageNum&quot;</span> class&#61;<span class="string">&quot;pageNumber&quot;</span>&gt;&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">button</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;prev&quot;</span> <span class="attributeColor">onclick</span>&#61;<span class="string">&quot;showPage(-1)&quot;</span> <span class="attributeColor">class</span>&#61;<span class="string">&quot;prevButton&quot;</span>&gt;上一页&lt;/<span class="tagName">button</span>&gt;<br />
&lt;<span class="tagName">button</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;next&quot;</span> <span class="attributeColor">onclick</span>&#61;<span class="string">&quot;showPage(1)&quot;</span> <span class="attributeColor">class</span>&#61;<span class="string">&quot;nextButton&quot;</span>&gt;下一页&lt;/<span class="tagName">button</span>&gt;</div>
&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">div</span> <span class="attributeColor">id</span>&#61;<span class="string">&quot;scpHTMLblockResizeSwitch&quot;</span>&gt;&lt;/<span class="tagName">div</span>&gt;<br />
&lt;<span class="tagName">script</span> <span class="attributeColor">type</span>&#61;<span class="string">&quot;text/javascript&quot;</span>&gt;<div class="nest">
<span class="autotext">var</span> currentPage &#61; <span style="color:#a50000;">1</span>;<br />
<span class="autotext">var</span> show;<br />
<span class="autotext">var</span> next;<br />
<span class="autotext">var</span> prev;<br />
<span class="autotext">var</span> pageNum;<br />
<span class="htmlElement">window</span>.onload &#61; function(){<div class="nest">
show &#61; document.getElementById(<span class="string">&quot;page-conten&quot;</span>);<br />
next &#61; <span class="htmlElement">document</span>.getElementById(<span class="string">&quot;next&quot;</span>);<br />
prev &#61; <span class="htmlElement">document</span>.getElementById(<span class="string">&quot;prev&quot;</span>);<br />
pageNum &#61; <span class="htmlElement">document</span>.getElementById(<span class="string">&quot;pageNum&quot;</span>);<br />
showPage(0);
</div>}
<br />
<span class="autotext">function</span> showPage(n){<div class="nest">
prev.style.display &#61; <span class="string">&quot;block&quot;</span>;<br />
next.style.display &#61; <span class="string">&quot;block&quot;</span>;<br />
currentPage +&#61; n;<br />
<span class="autotext">if</span>(currentPage &lt; <span style="color:#a50000;">2</span>){<div class="nest">
currentPage &#61; <span style="color:#a50000;">1</span>;<br />
prev.style.display &#61; <span class="string">&quot;none&quot;</span>;
</div>}<br />
<span class="autotext">if</span>(currentPage &gt; <span style="color:#a50000;">3</span>){<div class="nest">
currentPage &#61; <span style="color:#a50000;">4</span>;<br />
next.style.display &#61; <span class="string">&quot;none&quot;</span>;
</div>}<br />
show.innerHTML &#61; <span class="htmlElement">document</span>.getElementById(<span class="string">&quot;page&quot;</span> + currentPage).innerHTML;<br />
pageNum.innerHTML &#61; currentPage + <span class="string">&quot; / 4&quot;</string>;<br />
correctIframeSize();
</div>}
</div>&lt;/<span class="tagName">script</span>&gt;
</div>
</collapsible>
<div id="scpHTMLblockResizeSwitch"></div>
[[/html]]
[[/collapsible]]

------
+ 不使用动画格式制作动画

[[div class="scp-image-block" style="width:300px;"]]
[[iframe http://scpsandbox-jp.wdfiles.com/local--files/dr-devan/SCP-895.html style="width:300px; height:220px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
一个著名的例子
[[/div]]
[[/div]]

[[div class="scp-image-block" style="width:300px;"]]
[[iframe http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.html style="width:300px; height:300px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
自制的示例
[[/div]]
[[/div]]

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

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

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

+++ html+css+js之组合拳！
SCP-845、以及我自制的示例，均不是视频，而是用JavaScript生成的特效。**轻便**、仿真时间戳、**外观富于变化**

++ 方法
+++ 编写仿真视频html+css+js时的注意事项
下面向大家逐一介绍一些要点。
++++ 固定高度
很少有视频会改变高度的吧？所以请固定你编写的文件的高度！

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

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

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

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

[[code type="CSS"]]
body {
  padding:0px;
  margin: 0px;
}
[[/code]]

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

+++ 插入的模版
例如长宽为(300px,300px)，这样插入文章中：
[[code]]
[[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]]
[[/code]]

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

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

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

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

本章中的示例参考了CodePen上Lucas Bebber所编写的[https://codepen.io/lbebber/pen/pJjxZx 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入门

[[module css]]
@keyframes hue-rotate {
  0% {
    -webkit-filter: invert(100%) grayscale(0%);
    -moz-filter: invert(100%) grayscale(0%);
    -ms-filter: invert(100%) grayscale(0%);
    filter: invert(100%) grayscale(0%);
  }
 75%{
    -webkit-filter: invert(100%) grayscale(0%);
    -moz-filter: invert(100%) grayscale(0%);
    -ms-filter: invert(100%) grayscale(0%);
    filter: invert(100%) grayscale(0%);
}
  76% {
    -webkit-filter: invert(0%) grayscale(100%);
    -moz-filter: invert(0%) grayscale(100%);
    -ms-filter: invert(0%) grayscale(100%);
    filter: invert(0%) grayscale(100%);
  }
100%{
    -webkit-filter: invert(0%) grayscale(100%);
    -moz-filter: invert(0%) grayscale(100%);
    -ms-filter: invert(0%) grayscale(100%);
    filter: invert(0%) grayscale(100%);
  }
}

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: invert(100%) grayscale(0%);
    -moz-filter: invert(100%) grayscale(0%);
    -ms-filter: invert(100%) grayscale(0%);
    filter: invert(100%) grayscale(0%);
  }
 75%{
    -webkit-filter: invert(100%) grayscale(0%);
    -moz-filter: invert(100%) grayscale(0%);
    -ms-filter: invert(100%) grayscale(0%);
    filter: invert(100%) grayscale(0%);
}
  76% {
    -webkit-filter: invert(0%) grayscale(100%);
    -moz-filter: invert(0%) grayscale(100%);
    -ms-filter: invert(0%) grayscale(100%);
    filter: invert(0%) grayscale(100%);
  }
100%{
    -webkit-filter: invert(0%) grayscale(100%);
    -moz-filter: invert(0%) grayscale(100%);
    -ms-filter: invert(0%) grayscale(100%);
    filter: invert(0%) grayscale(100%);
  }
}


[[/module]]

[[=]]
请注视着鼻子。然后，画面切换！虽然现在图片是黑白的，是不是仍然能够看到颜色呢？
[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png style="-webkit-animation: hue-rotate 15s linear infinite;animation: hue-rotate 15s linear infinite;"]]
[[/=]]

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

[[<]]
[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png style="max-width:200px;"]]
[[/<]]
使用[[[SCP-993]]]的插图作为示例，原始图片是这样的。
[[code]]
[[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;"]]
[[/code]]

添加了style之后便能变成黑白的。
[[<]]
[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png size="small" style="-webkit-filter:grayscale(100%);filter:grayscale(100%);max-width:200px;"]]
[[/<]]
style后的部分就是滤镜效果。##bbb|-moz-开头的那行现在已经几乎不需要了…##
[[code]]
-webkit-filter:grayscale(100%);
-moz-filter: grayscale(100%);
filter:grayscale(100%);
[[/code]]


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

也可以是这样的：
[[<]]
[[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)这个滤镜。
[[code]]
-webkit-filter:hue-rotate(125deg);
-moz-filter:hue-rotate(125deg);
filter:hue-rotate(125deg);
[[/code]]

这些滤镜也可以组合使用。
[[<]]
[[image http://scp-wiki.wdfiles.com/local--files/scp-993/993.png size="small" style="-webkit-filter:sepia(100%) hue-rotate(125deg);filter:sepia(100%) hue-rotate(125deg);max-width:200px;"]]
[[/<]]
先应用褐色滤镜再应用hue-rotate(125deg)滤镜。应用多个滤镜的情况下，滤镜之间用空格隔开。
[[code]]
-webkit-filter:sepia(100%) hue-rotate(125deg);
-moz-filter:sepia(100%) hue-rotate(125deg);
filter:sepia(100%) hue-rotate(125deg);
[[/code]]

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

------

++ 等宽字体
如果使用了[http://ja.scp-wiki.net/japanese-syntax 日语Wiki语法拓展样式]，就无法使用@@{{teletype (monospaced) text}}@@语法。除非使用另外一种字体，否则无法表现出传真打印的效果。例如，[http://www.scp-wiki.net/black-white-black-white-black-white-black-white-black-white 黑白黑白黑白黑白黑白灰]中使用了Wikidot基础语法，翻译版本的字体显示效果如下：

[[div style="font-family: 'Andale Mono', 'Courier New', Courier, monospace;font-size: 98%;"]]
> 昨天，
> 
> 我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。
> 
> 今天，
> 
> 又有三個人進去，手握廉價的拖把與彼此的性命。
> 
> 昨天，
> 
> 我看見自己欽佩的一個人被擊斃，因為他給遭受無妄蹂躪的女孩留下玫瑰贈予。
> 
> 今天，
> 
> 她遺忘昨日詳細，三道走廊都難以消隔叫聲淒厲。
> 
> 昨天，
> 
> 我看見一隊士兵在與死去同袍的屍體相互激鬥。
> 
> 今天，
> 
> 我們測試另外一份樣品，盡是孩童。
[[/div]]

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

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

[[div class="monoayu"]]
> 昨天，
> 
> 我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。
> 
> 今天，
> 
> 又有三個人進去，手握廉價的拖把與彼此的性命。
> 
> 昨天，
> 
> 我看見自己欽佩的一個人被擊斃，因為他給遭受無妄蹂躪的女孩留下玫瑰贈予。
> 
> 今天，
> 
> 她遺忘昨日詳細，三道走廊都難以消隔叫聲淒厲。
> 
> 昨天，
> 
> 我看見一隊士兵在與死去同袍的屍體相互激鬥。
> 
> 今天，
> 
> 我們測試另外一份樣品，盡是孩童。
[[/div]]

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

在开头添加如下语法：
> @@[[include :scp-jp-sandbox2:inc:ayu18]]@@
之后这样使用：
[[code]]
[[div class="monoayu"]]
> 昨天，
> 
> 我看見三個人死在一個滿是鮮血、糞便與燈光的房間里，因為有人打了個噴嚏。
[[/div]]
[[/code]]

字体是由[http://jikasei.me/font/jf-dotfont/ 自制字体工坊]将[http://x-tt.osdn.jp/ayu.html After X-TT Project: Ayu 18点 Gothic]转换为ttf字体，添加许可证后经过woff编码成为网络字体。原始的ttf可以从前一个链接中获取，属于公共领域。
------
+ 单页迭代
[[>]]
**"//Hyper page changer//" Presents by:**[[*user physicslike]]
[[/>]]
[[module ListPages offset="@URL|0" range="."]]
%%content{2}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page2"]]
%%content{3}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page3"]]
%%content{4}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page4"]]
%%content{5}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page5"]]
++ 应用篇2
在这之前，我对语法的结构作了说明，以便于你进行编辑。但是只要你理解了原理，也可以不用将页面分成数个部分。
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="pageN"]]@@
> **第N迭代的文本**
> @@[[/module]]@@
像这样，直接在模块中添加正文内容。在这种情况下，html模块和CSS模块可以调用ListPages的相关数值。
+++ CSS模块调用数值示例
[[%%content{0}%%module css]]
#page-title {
font-size: %%limit%%% !important;
}
[[%%content{0}%%/module]]
通常情况下把CSS模块直接添加在ListPages模块中会出现语法错误。但是如果将元素%%@@content{0}@@%%插入语法标记，加载时%%@@content{0}@@%%会消失，这时CSS模块便可以正常工作。还可以在语法中插入%%@@title@@%%、%%@@rating@@%%等等，尤其是%%@@limit@@%%，可以通过URL传递数字，从而任意地更改页面的布局。以下是改变页面标题大小CSS的示例：
> @@[[%%@@content{0}@@%%module css]]@@
> #page-title {
> font-size: %%@@limit@@%%% !important;
> }
> @@[[%%@@content{0}@@%%/module]]@@
> 
> ↑这样的代码会根据limit的值在页面内生成如下的style标签。
> 
> <style>
> #page-title {
> font-size: %%limit%%% !important;
> }
> </style>
[[%%content{0}%%html]]
<script type="text/javascript">
function start1(){
    var form = document.forms.mainForm;
    var s = "http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page5_limit/" + form.fontsize.value;
    parent.location.href = s;
}
</script>
<form name='mainForm'>
<p>这是一个html模块。在下面输入数字后按下按钮，它会生成一个链接并跳转。</p>
将页面标题字体大小变为：<input type="number" name="fontsize" value="1" />%<input type="button" value="应用" onclick="start1()">
</form>
[[/html]]
+++ html模块调用数值示例
> @@[[%%@@content{0}@@%%html]]@@
> html代码
> @@[[/html]]@@
插入html模块的方法如上所示。然而，直接添加%%con%%content{0}%%tent%%一类的元素并不能解析，需要传递到Javascript中再进行编辑。举例说明，%%@@updated_at@%%可以获取上次页面更新时的Unix时间戳。将其与本地时间比较，可以显示出最后编辑的时间。用同样的方法也可以获取评分和讨论数等等。
[[%%content{0}%%html]]
<script type="text/javascript">
var updated_at;
window.onload = function(){
updated_at = "%%updated_at%%";
updated_at = updated_at.replace( /%%date\|/g , "" ) ;
updated_at = updated_at.replace( /%%/g , "" ) ;
updated_at = new Date(updated_at * 1000);
}
timerID = setInterval('clock()',500);
function clock() {
document.getElementById("view_clock").innerHTML = getNow();
}
function getNow() {
var now = new Date();
if(now.getTime() - updated_at.getTime()>0){
now =  new Date(now.getTime() - updated_at.getTime() );
}else{
now =  new Date(0);
}
var zero = new Date(0);
var s = "最后编辑于: ";
var year = now.getUTCFullYear()  - zero.getUTCFullYear();
if(year>0){
s += year + "年 ";
}
var mon = now.getUTCMonth()  - zero.getUTCMonth();
if(mon>0){
s += mon + "月 ";
}
var day = now.getUTCDate()  - zero.getUTCDate();
if(day>0){
s += day + "日 ";
}
var hour = now.getUTCHours() - zero.getUTCHours();
if(hour>0){
s += hour + "时 ";
}
var min = now.getUTCMinutes()  - zero.getUTCMinutes();
if(min>0){
s += min + "分 ";
}
var sec = now.getUTCSeconds()  - zero.getUTCSeconds();
if(sec>0){
s += sec + "秒 ";
}
s += "前";
return s;
}
</script>
<span id="view_clock"></span>
[[/html]]

[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page4_limit/1#toc21 返回上一迭代]<
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page6"]]
%%content{6}%%
[[/module]]
[!--
====
++ 概述
以[[[SCP-2998]]]和[[[SCP-1111-JP]]]为代表的作品，通过特定的方式将数个不同页面的内容和评分统一显示在一个页面上。这就是利用ListPage模块和子页面组合起来实现的“迭代”效果。想要创建类似的页面，则必须建立多个子页面，同时必须严格控制好上传的顺序。此外，在沙盒站上创建子页面、测试迭代效果也很不方便。这里介绍一种基本原理相同，但是仅用单个页面就能实现迭代的方法。点击下面的链接前往下一迭代。

@@>@@[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page2_limit/1#toc21 阅读下一迭代]
====
++ 使用方法
如你所见，单页迭代可以像这样切换页面。假设我们一共有四个迭代，基础语法如下所示：

> **所有迭代之上相同的部分**
> @@[[module ListPages offset="@URL|0" range="."]]@@
> @@%%content{2}%%@@
> @@[[/module]]@@
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page2"]]@@
> @@%%content{3}%%@@
> @@[[/module]]@@
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page3"]]@@
> @@%%content{4}%%@@
> @@[[/module]]@@
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page4"]]@@
> @@%%content{5}%%@@
> @@[[/module]]@@
> **在此添加模块以增加更多迭代**
> @@[!--@@
> @@====@@
> **第1迭代的文本**
> @@[http://@@**scp-wiki-cn.wikidot.com/pagename**/offset/1/page2_limit/1 **第2迭代的链接**]
> @@====@@
> **第2迭代的文本**
> @@[http://@@**scp-wiki-cn.wikidot.com/pagename**/offset/1/page3_limit/1 **第3迭代的链接**]
> @@====@@
> **第3迭代的文本**
> @@[http://@@**scp-wiki-cn.wikidot.com/pagename**/offset/1/page4_limit/1 **第4迭代的链接**]
> @@====@@
> **第4迭代的文本**
> @@[http://@@**scp-wiki-cn.wikidot.com/pagename** **第1迭代的链接**]
> @@====@@
> **在此添加文本和====以增加更多迭代**
> @@--]@@
> **所有迭代之下相同的部分**
想要使用单页迭代来切换页面内容，先将以上的代码拷贝到你的页面里，在沙盒站也同样可以适用。之后再进行下一步的编辑，基本上只编辑粗体部分。
* **所有迭代之上相同的部分**会显示在所有迭代的开头，例如评分模块。
* **第1迭代的文本~第4迭代的文本**为相应迭代的正文。这部分一如通常的wikidot一样编辑（也可以使用CSS模块或html模块）。但是，不能使用ListPages生成页面列表的模块（这和使用了子页面迭代时的情况相同）。另外，请注意一定不能使用注释（@@[!-- 注释 --]@@）。
* **所有迭代之下相同的部分**会显示在所有迭代的结尾。
* 将每个链接的“scp-wiki-cn.wikidot.com/pagename”修改为你的页面的地址。也别忘记修改链接的文本。
* 要增加迭代，将如下所示的3行ListPages模块添加到相同格式的代码之后。更多额外的迭代则需要将urlAttrPrefix="page5"中的数字5和%%content{6}%%中的数字6依次递增。
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page5"]]@@
> @@%%content{6}%%@@
> @@[[/module]]@@
* 为了增加迭代内容，需要在末尾的**====**之后添加如下所示的文本和**====**。添加链接时注意格式。
> 新迭代的正文
> @@====@@
* 要减少迭代数量，请将模块、正文内容和====一并删除。
以上就是单页迭代的制作方法，现在看看你的页面能否正常工作。
下一页将解释系统的工作原理，对于不熟悉语法的人来说可能会比较困难。

[http://scp-wiki-cn.wikidot.com/esoteric-syntax#toc21 返回上一迭代]< >[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page3_limit/1#toc21 阅读下一迭代]
====
++ 工作原理
该系统的核心在于使用====对内容进行划分。在wikidot语法中，====上下会被视作不同的部分进行处理。这在通常的页面显示上没有什么实际意义，但是与ListPages模块组合使用就能发挥出巨大的作用。

ListPages模块实质上，是一种能够根据标签或作者等预定条件创建页面列表的模块。一般会使用%％title%%和%%created_by%%之类的元素来显示页面标题、作者、评分等。其中的%%content{n}%%元素用于显示页面的第n部分，也就是利用====划分出的不同片段。另外，通常在ListPages里会出错的CSS模块，使用%%content{n}%%调用后也能正常运行。基于以上所述，接下来将会解释单页迭代语法的原理。
> @@[!--@@
> @@====@@
> ～正文～
> @@====@@
> @@--]@@
在语法的这一部分中，所有迭代的正文被划分为不同的片段并被标记为注释。在这种情况下读取页面，无论其中有任何语法或者模块都会被隐藏，并不会影响页面的内容。
> @@[[module ListPages offset="@URL|0" range="."]]@@
> @@%%content{2}%%@@
> @@[[/module]]@@
这部分是ListPages模块，用来显示第1迭代的内容。这里的“offset”表示跳过页面列表的前n个项目，“@URL”表示根据访问的URL地址来改变设定的值。“@URL|0”则表示默认值为0（即默认不跳过任何项目），如果在URL地址后加上“/offset/1”，则会跳过第一个项目。range="."表示列表的目标设置为当前页面。利用%%content{2}%%读取页面的第2部分（即第1迭代的正文），在默认的情况下显示，在跳过第1项的情况下即可隐藏。
> @@[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page2"]]@@
> @@%%content{3}%%@@
> @@[[/module]]@@
而对于第2及以后的迭代，“limit”表示列表最多列出的项目数，默认设置为0时即隐藏，设置为1时即显示。如果有多个ListPages模块，为“urlAttrPrefix”设置字符串即可避免冲突，例如设置urlAttrPrefix="page2"，在URL地址后添加/page2_limit/1，则只会把limit="1"传递给单个特定的模块。URL选项可以设置多个，在所有模块均为默认设置的情况下仅显示第1页，而在/offset/1/page2_limit/1的情况下，将第1页隐藏的同时显示第2页。这样便可以实现页面切换的效果。

以上就是系统的工作原理。下一页将会介绍一些实际应用上的示例。

[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page2_limit/1#toc21 返回上一迭代]< >[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page4_limit/1#toc21 阅读下一迭代]
====
++ 应用篇1
+++ CSS模块
如前文所述，可以在迭代正文处添加CSS模块。这样，不同的迭代就可以应用不同的CSS版式。
[[module css]]
@import url(http://scp-wiki-cn.wikidot.com/esoteric-syntax/code/11);
[[/module]]
[[code type="css"]]
#page-title:after {
content: "　我在标题上加了一些东西";
}
[[/code]]
+++ html模块
也可以添加html模块来打造动态页面，例如需要输入密码才能跳转的链接。以下是一个用于计时的javascript脚本。
[[html]]
<script type="text/javascript">
timerID = setInterval('clock()',500);
function clock() {
    document.getElementById("view_clock").innerHTML = getNow();
}
function set2fig(num) {
    var ret;
    if( num < 10 ) { ret = "0" + num; }
    else { ret = num; }
    return ret;
}
function getNow() {
    var now = new Date();
    var year = now.getFullYear();
    var mon = now.getMonth()+1;
    var day = now.getDate();
    var hour = set2fig( now.getHours() );
    var min = set2fig( now.getMinutes() );
    var sec = set2fig( now.getSeconds() );
    var s = year + "/" + mon + "/" + day + " " + hour + ":" + min + ":" + sec;
    return s;
}
</script>
<span id="view_clock">████/██/██ ██:██:██</span>
[[/html]]
+++ 迭代的随机页面
像是[[[SCP-1173]]]那样，通过设置order="random"来随机显示迭代，这种方法只能在带有子页面的迭代中使用。如果你想在单页迭代上也实现随机显示的效果，可以在第1迭代上添加一个html模块，用javascript脚本跳转到一个随机的链接。示例如下：
[[code type="html"]]
<script type="text/javascript">
window.onload = function(){
var rand = Math.floor( Math.random() * 5 ) ;
switch (rand){
  case 0:
    parent.location.href = "http://scp-wiki-cn.wikidot.com/esoteric-syntax#toc21";
    break;
  case 1:
    parent.location.href = "http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page2_limit/1#toc21";
    break;
  case 2:
    parent.location.href = "http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page3_limit/1#toc21";
    break;
  case 3:
    parent.location.href = "http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page4_limit/1#toc21";
    break;
  case 4:
    parent.location.href = "http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page5_limit/1#toc21";
    break;
}
}
</script>
[[/code]]
在这种方法中，当浏览器读取到这个html时，会出现一个页面重新跳转的效果。可以使用如下的CSS来隐藏所有的元素，以改善阅读体验。
> @@[[module css]]@@
> *{
> display: none;
> }
> @@[[/module]]@@
点击[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page6_limit/1#toc21 这个链接]来查看实际效果。

[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page3_limit/1#toc21 返回上一迭代]< >[http://scp-wiki-cn.wikidot.com/esoteric-syntax/offset/1/page5_limit/1#toc21 阅读下一迭代]
====
[[module css]]
*{
display: none;
}
[[/module]]
[[iframe http://scp-wiki-cn.wikidot.com/esoteric-syntax/code/12]]
====
--]
----
+ 其他

++ 模拟验证
[[>]]
**嘿！**我可不知道{{//密码//}}啊！

__好吧，好吧，不管怎样先按一下认证试试吧。__
[[/>]]

------

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

[[div class="collapsiblealt"]]
[[collapsible show="认证" hide="注销"]]
//职员密码验证通过，正在根据您的安保权限调取信息。//
[[>]]

------

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

__本来也就没有什么密码。__

------

[[/>]]
> @@[[include :scpsandboxcn:inc:fakeprot |name=Site:8192 Director Y.Gineri]]@@
> 
> @@[[div class="collapsiblealt"]]@@
> @@[[collapsible show="认证" hide="注销"]]@@
> 
> 我想这只不过是通常的折叠模块而已吧！
> 
> @@[[/collapsible]]@@
> @@[[/div]]@@


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

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

------

++ 更换网页标题
[[include :scp-jp-sandbox2:inc:changepagetitle |
TITLE=SCP基金会日本分部|
COLOR=#EEE]]
大家请看网页的左上角，是不是写着“SCP基金会日本分部”？
“咦？什么时候网站的名字变了？”
看起来好像是这样，但实际上只是“SCP基金会”里普通的一页。使用下面的语法来更换网页标题。

**SCP基金会和沙盒III的文章：**
> @@[[include :scp-jp-sandbox2:inc:changepagetitle |@@
> @@TITLE=SCP基金会日本分部|@@
> @@COLOR=#EEE]]@@

**沙盒II的文章：**[[footnote]]**译注：**指[*http://scp-jp-sandbox2.wikidot.com/ 日本分部的沙盒]，下同。[[/footnote]]
> @@[[include inc:changepagetitle |@@
> @@TITLE=SCP-JP沙盒II|@@
> @@COLOR=#EEE]]@@

设置项如下：
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:9em;"]]项目[[/hcell]]
[[hcell]]设置内容[[/hcell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]TITLE[[/cell]]
[[cell]]更换后的网页标题[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]COLOR[[/cell]]
[[cell]]文字的颜色[[/cell]]
[[/row]]
[[/table]]
颜色用RGB编号指定，如果你对RGB编号不熟悉，使用下面的工具调配出一种颜色。
[[html]]
<style>
                    @import url(http://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css);
                    @import url(http://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/shiny/css/style.css);
                    @import url(http://scp-jp.wdfiles.com/local--theme/scp-sigma-9-off-canvas/style.css);
#redG{
  background: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(255, 0, 0, 1));
  background-size: cover;
  position:relative;
height:20px;
}
#greenG{
  background: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 255, 0, 1));
  background-size: cover;
  position:relative;
height:20px;
}
#blueG{
  background: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 255, 1));
  background-size: cover;
  position:relative;
height:20px;
}

#colorValueDisplay{
padding:5px;
 
}


#colorControlBar{
user-select: none;
-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
}

#colorValueDisplay input{
letter-spacing:0.2em; 
cursor:text;
}

#ColorEditorParent{
width:70%;
border:outset #BBB 2px;
background-color:#CCC;
margin:auto;
box-shadow: 5px 5px 2px 2px rgba(0,0,0,0.6);
}
</style>
<div id="ColorEditorParent">
<div style="background-color:#00F;color:#FFF;font-size:120%;text-align:center;">
颜色编辑器
</div>
<div style="padding:10px;">
<div style="float:left;width:45%;height:250px;text-align:center;font-weight:bold;">
预览
<div id="colorSample" style="border:inset #EEE 2px;height:200px;background-color:#FFF;">
</div>
</div>
<div style="float:left;width:48%" id="colorValueDisplay">
<div id="colorControlBar">
<div style="height:20px;" id="redG">
<div id="redBar" style="width:4%;height:20px;position:absolute;top:0px;left:98%;background-color:#EEE;border:solid #AAA 1px;cursor:pointer;"></div>
</div>
<table>
<tr><td valign="middle" style="width:2em;">红:</td><td id="redValue" valign="middle" style="width:4em;" align="right">255</td></tr></table>
<br />
<div style="height:20px;" id="greenG">
<div id="greenBar" style="width:4%;height:20px;position:absolute;top:0px;left:98%;background-color:#EEE;border:solid #AAA 1px;cursor:pointer;"></div>
</div>
<table><tr><td valign="middle" style="width:2em;">绿:</td><td id="greenValue" valign="middle" style="width:4em;" align="right">255</td></tr></table>
<br />
<div style="height:20px;" id="blueG">
<div id="blueBar" style="width:4%;height:20px;position:absolute;top:0px;left:98%;background-color:#EEE;border:solid #AAA 1px;cursor:pointer;"></div>
</div>
<table><tr><td valign="middle" style="width:2em;">蓝:</td><td id="blueValue" valign="middle" style="width:4em;" align="right">255</td></tr></table>
</div>
RGB编号:<input id="colorNumber" size="8" maxlength="7" value="#ffffff" readonly></input>
</div>
<div style="clear:both;"></div>
</div>
</div>

<div style="height:20px;width:100%;">
</div>
<script type="text/javascript">
var editor;
var display;
var setting;
var setStart = {
red:false,
green:false,
blue:false
}
var colorValueList = {
red:255,
green:255,
blue:255
}
var isMouseDown = false;
document.addEventListener( 'DOMContentLoaded',function(event){
editor = document.getElementById("colorEditor");
display = document.getElementById("colorSample");
setting = document.getElementById("colorNumber");
var rgbName = ["red","green","blue"];
var check = isUseSmartPhone();
if(check){
isMouseDown = true;
}else{
if(document.addEventListener){
document.addEventListener("mouseup",function(){isMouseDown = false;});
}else if(document.attachEvent){
document.attachEvent("onmouseup",function(){isMouseDown = false;});
}
document.getElementById("ColorEditorParent").setAttribute("onmouseout",'changeMode(false)');
document.getElementById("colorControlBar").setAttribute("onmouseout",'(function(event){event.stopPropagation()})(event)');
document.getElementById("colorControlBar").setAttribute("onmousedown",'(function(event){event.preventDefault()})(event)');
}
var target;
for(var i = 0;i < rgbName.length;i++){
target = document.getElementById(rgbName[i] + "G");
if(check){
switch(i){
case 0:
target.addEventListener("touchmove",function(event)
{setColorForSmartPhone("red",event)},false);
target.addEventListener("touchstart",function(event){setColorForSmartPhone("red",event)},false);
break;
case 1:
target.addEventListener("touchmove",function(event)
{setColorForSmartPhone("green",event)},false);
target.addEventListener("touchstart",function(event){setColorForSmartPhone("geen",event)},false);
break;
case 2:
target.addEventListener("touchmove",function(event)
{setColorForSmartPhone("blue",event)},false);
target.addEventListener("touchstart",function(event){setColorForSmartPhone("blue",event)},false);
break;
}
}else{
target.setAttribute("onmousemove",'setColor("' + rgbName[i]+ '",event);');
target.setAttribute("onmousedown",'(function(event){changeMode(true);setColor("' + rgbName[i]+ '",event);})(event)');


}
}

function isUseSmartPhone(){
    return (((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0));
}
});

function changeMode(bool){
isMouseDown = bool;
}


function setColorForSmartPhone(color,event){
event.preventDefault();
var touch = event.touches[0].pageX;
applicateColor(color,touch);
}

function setColor(color,event){
event.preventDefault();
if(!isMouseDown)return false;
var mouseX = event.pageX;
applicateColor(color,mouseX);
}

function applicateColor(color,xPos){
var target = document.getElementById(color + "G");
var elmW =  target.clientWidth;
var mouseX = xPos -target.getBoundingClientRect().left;
var percent = Math.floor((mouseX / elmW) *100);
if(percent > 100)percent = 100;
if(percent < 0)percent = 0;
document.getElementById(color+"Bar").style.left = (percent-2) + "%";
colorValueList[color] = Math.floor(255*(percent/100));
document.getElementById(color+"Value").innerHTML = colorValueList[color];
oldColorEdit();

}

function oldColorEdit(elm){
var color = "#";
color += createTwoDigit(colorValueList.red);
color += createTwoDigit(colorValueList.green);
color += createTwoDigit(colorValueList.blue);
display.style.backgroundColor = color;
setting.value = color;

function createTwoDigit(colorNum){
var text = colorNum.toString(16);
if(text.length < 2)text = "0" + text;
return text;
}
}
</script>
[[/html]]
左键拖动红色、绿色和蓝色渐变色带上的滚动条，“预览”和下面的“RGB编号”会随之变化。调配出理想的颜色后，复制以“#”开头的一串字母，粘贴到语法的“COLOR”项中，就可以改变标题的颜色。

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

**技术笔记：**供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。
[[collapsible show="+ 显示技术笔记" hide="- 隐藏技术笔记" hideLocation="bottom"]]
这里的CSS模块替换了标准Wikidot页面上的下列元素。

**凡例：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]CSS中元素的标记[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]元素在wikidot页面中的作用[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
代码中追加或修改的内容
[[/cell]]
[[/row]]
[[/table]]
**变更：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]#header h1 a[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]"SCP基金会"和"SCP-JP沙盒II"标题、
以及指向网站首页的链接[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
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; 
[[/cell]]
[[/row]]
[[/table]]

此外，这个模块还在Wikidot页面上添加了以下的伪元素。
**模块所添加的伪元素：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell]]元素id[[/hcell]]
[[hcell style="width:8em;"]]伪元素[[/hcell]]
[[hcell style="width:20em;"]]伪元素的功能[[/hcell]]
[[/row]]
[[row]]
[[cell]]
#header h1 a
[[/cell]]
[[cell]]
after
[[/cell]]
[[cell]]
更换后的标题
[[/cell]]
[[/row]]
[[/table]]
[[/collapsible]]
[[div style="height:3em;"]]
[[/div]]

------

++ 在页面标题上方添加一个副标题
[[include :scp-jp-sandbox2:inc:topsubtitle |
TITLE=SCP Foundation JP-branch |
COLOR=#FEE]]

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

**说明：**页面左上角“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]]@@

设置项如下：
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:9em;"]]项目[[/hcell]]
[[hcell]]设置内容[[/hcell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]TITLE[[/cell]]
[[cell]]所添加的副标题[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]COLOR[[/cell]]
[[cell]]文字的颜色[[/cell]]
[[/row]]
[[/table]]
颜色用RGB编号指定，如果你对RGB编号不熟悉，使用“更换网页标题”中的工具。

**技术笔记：**供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。
[[collapsible show="+ 显示技术笔记" hide="- 隐藏技术笔记" hideLocation="bottom"]]
这里的CSS模块在标准Wikidot页面上添加了下列伪元素。
**模块所添加的伪元素：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell]]元素id[[/hcell]]
[[hcell style="width:8em;"]]伪元素[[/hcell]]
[[hcell style="width:20em;"]]伪元素的功能[[/hcell]]
[[/row]]
[[row]]
[[cell]]
#header h1 a
[[/cell]]
[[cell]]
before
[[/cell]]
[[cell]]
添加的副标题
[[/cell]]
[[/row]]
[[/table]]
[[/collapsible]]

------

++ 更换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外圈，用这个来做大家的原创标志怎么样？
[[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/logoModel.png]]
请使用支持透明通道的图像处理软件来编辑。

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

------

++ 转啊转
[[include :scp-jp-sandbox2:inc:guruguru]]
你发现这个页面的Logo在转动吗？！

**SCP基金会和沙盒III的文章：**
> @@[[include :scp-jp-sandbox2:inc:guruguru]]@@

**沙盒II的文章：**
> @@[[include inc:guruguru]]@@
[[include :scp-jp-sandbox2:inc:changeguruguru |
IMAGE = http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Achangeguruguru/medium2.png]]
你甚至可以用下面的语法来让你的原创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版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。
[[collapsible show="+ 显示技术笔记" hide="- 隐藏技术笔记" hideLocation="bottom"]]
这里的CSS模块在标准Wikidot页面上添加了下列伪元素。
**模块所添加的伪元素：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell]]元素id[[/hcell]]
[[hcell style="width:8em;"]]伪元素[[/hcell]]
[[hcell style="width:20em;"]]伪元素的功能[[/hcell]]
[[/row]]
[[row]]
[[cell]]
#header
[[/cell]]
[[cell]]
before
[[/cell]]
[[cell]]
旋转的Logo
[[/cell]]
[[/row]]
[[/table]]
[[/collapsible]]

------

++ 更换副标题

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

网页的副标题变了！这是SCP的异常性质[[footnote]]**译注：**指[https://scp-wiki-cn.wikidot.com/scp-755-jp SCP-755-JP][[/footnote]]吗！？
不，这也是利用include实现的特效。

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

------

++ 神代文字

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

在开头添加：
> @@[[include :scp-jp-sandbox2:inc:hotsu]]@@
之后这样：
[[code]]
[[div class="hotsu"]]
> ｺﾚﾊﾎﾂﾀﾏｴﾃﾞｽ _
> ｱﾅﾀﾊﾖｸﾜｶﾗﾅｲﾓｼﾞﾂﾃ _
> ｽﾃｷﾀﾞﾄｵﾓｲﾏｾﾇｶ _
> ﾐｼﾗﾇﾓｼﾞﾆﾖﾙｴｷｿﾞﾁｯｸﾀｲｹﾇ _
[[/div]]
[[/code]]


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

++ 改变Tabview布局
**简介：**Tabview常用于在一个沙盒页中存放多个草稿，就像这样：
[[tabview]]
[[tab 标签1]]
草稿1
[[/tab]]
[[tab 标签2]]
草稿2
[[/tab]]
[[/tabview]]

但是，有时你想不想用不一样的折叠标签？现在我们有一种不同寻常的Tabview布局！就像这样：
[[div class="CustomTabRJ"]]
[[tabview]]
[[tab 标签1]]
草稿1
[[/tab]]
[[tab 标签2]]
这是一个存放长内容的例子，下面的黑色方块代表着一个很长的句子。
[[div style="width:90%;height:200px;background-color:#000;"]]
@@@@
[[/div]]
[[/tab]]
[[/tabview]]
[[/div]]
@@@@
下面是使用方法。首先，在开头添加：
> @@[[include :scp-jp-sandbox2:inc:addspecialcss]]@@
之后，将通常的@@[[tabview]]@@模块嵌入到一个@@[[div]]@@模块中。
> @@[[div class="CustomTabRJ"]]@@
> @@[[tabview]]@@
> @@[[tab 标签1]]@@
> 折叠里的内容1
> @@[[/tab]]@@
> @@[[tab 标签2]]@@
> 折叠里的内容2
> @@[[/tab]]@@
> @@[[/tabview]]@@
> @@[[/div]]@@
@@@@
此外，还有另外一种不同颜色的版本。
[[div class="CustomTabRJC"]]
[[tabview]]
[[tab 标签1]]
折叠里的内容1
[[/tab]]
[[tab 标签2]]
折叠里的内容2
[[/tab]]
[[tab 标签3]]
折叠里的内容3
[[/tab]]
[[/tabview]]
[[/div]]
语法如下（在开头添加了@@[[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时，请尽量缩短每个标签的标题。

------

[[include :scp-jp-sandbox2:inc:addspecialcss]]
[[include :scpsandboxcn:inc:addspecialcss-cn]]
[[div class="DummyForumTitle"]]
++ 讨论区帖子
* Forum
* 日语Wiki语法拓展样式
* 讨论区帖子
[[/div]]
[[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=block]]
我想写一篇关于讨论区的meta文章！
[[include :scpsandboxcn:inc:pseudosummary-end]]
[[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=讨论区帖子]]
我想写一篇关于讨论区的meta文章，该怎么做？
[[/div]]
[[/div]]
[[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:15|
TITLE=讨论区帖子]]
我不想用HTML模块。
[[/div]]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount4.png|
NAME=AnswerMan |
DATE=2 Apr 2017 13:00|
TITLE=Re: 讨论区帖子]]
不妨试一试@@[[include :scp-jp-sandbox2:inc:addspecialcss]]@@吧！
[[/div]]
[[/div]]
[[/div]]
[[div class="DummyNew-post"]]
[[span class="fake-link"]]新文章[[/span]]
[[/div]]
也许正在阅读这篇文章的读者中，有一些人想让讨论区出现在文章中，想做一些不寻常的事情。这里的语法可以让你轻松打造出讨论区的格式。

**注意：**在这个语法中，下述语句会频繁出现：
> @@[[include :scp-jp-sandbox2:inc:hoge]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:1
[[/div]]
语句的“hoge”处会被替换成会各种不同的内容（这里所有的include语法，“include :scp-jp-sandbox2:inc:”这部分都是相同的）[[footnote]]**译注：**部分内容需要修改为翻译后的版本，详见后文。[[/footnote]]。
事实上，本章基于如何在SCP基金会网站上套用伪讨论区格式，如果你想在沙盒[[footnote]]**译注：**指[*http://scp-jp-sandbox2.wikidot.com/ 日本分部的沙盒]。[[/footnote]]里创建一个伪讨论区：
> @@[[include inc:hoge]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:2
[[/div]]
删除“inc”前的“:scp-jp-sandbox2”部分。

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

**插入CSS：**在开头添加下面的语句，这样才能显示出伪讨论区格式：
> @@[[include :scp-jp-sandbox2:inc:addspecialcss]]@@

[[div style="text-align:center;font-weight:bold;"]]
Code:3
[[/div]]

**##00f|译者补充：##**在这句的下面，另外添加一句：
> @@[[include :scpsandboxcn:inc:addspecialcss-cn]]@@
否则部分内容会翻译不完全。

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

||~ 示例 ||~ 图片URL ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount0.png ]] || http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount0.png ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount1.png ]] || http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount1.png ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount2.png ]] || http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount2.png ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png ]] || http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount3.png ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount4.png ]] || http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount4.png ||
|| [[image http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/dummyaccount5.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 ||
请依照以上规则填写日期。

**标题：**在讨论区帖子的顶端，是帖子的标题和帖子的类别。例如：
[[div class="DummyForumTitle"]]
讨论区帖子
* Forum
* 日语Wiki语法拓展样式
* 讨论区帖子
[[/div]]
语法如下：
> @@[[div class="DummyForumTitle"]]@@
> 讨论区帖子
> @@* Forum@@
> @@* SCP主区 / 一般讨论区@@
> @@* 讨论区帖子@@
> @@[[/div]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:4
[[/div]]
@@[[div class="DummyForumTitle"]]～[[/div]]@@之间的“无序列表”（即“@@* list@@”）会变成帖子的类别。

**摘要：**摘要放在帖子标题下方，简要概述帖子的用途。
[[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=block]]
我想写一篇关于讨论区的meta文章！
[[include :scpsandboxcn:inc:pseudosummary-end]]
语法如下：
> @@[[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]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:5
[[/div]]
这里URL等各种设置项，其功能说明如下：
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:9em;"]]项目[[/hcell]]
[[hcell]]设置内容[[/hcell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]URL[[/cell]]
[[cell]]用户头像图片的URL地址[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]NAME[[/cell]]
[[cell]]讨论发起人用户名[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]DATE[[/cell]]
[[cell]]帖子创建日期[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]POST[[/cell]]
[[cell]]文章总数[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]SUMMARY[[/cell]]
[[cell]]**※详见下文**[[/cell]]
[[/row]]
[[/table]]
[[div style="text-align:center;font-weight:bold;"]]
Explain:1
[[/div]]
有关SUMMARY的设置，举例说明：

[[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]]
如果帖子没有摘要，同时也要将“摘要:”隐藏，将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]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:6
[[/div]]
如果要显示“摘要:”一词，请设置为block。
||~ 显示摘要 ||~ 隐藏摘要 ||
|| SUMMARY=**block** || SUMMARY=**none** ||

**帖子内容：**这是最复杂的部分，我们一起来看。讨论区帖子的格式如下所示：
[[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]]
语法如下：
> @@[[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]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:7
[[/div]]
请注意语法的末尾有两个@@[[/div]]@@，对于了解html语法的人来说应该比较容易掌握。语法中的设置项如下：
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:9em;"]]项目[[/hcell]]
[[hcell]]设置内容[[/hcell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]URL[[/cell]]
[[cell]]用户头像图片的URL地址[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]NAME[[/cell]]
[[cell]]用户名[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]DATE[[/cell]]
[[cell]]发帖时间[[/cell]]
[[/row]]
[[row]]
[[cell style="width:9em;"]]TITLE[[/cell]]
[[cell]]帖子的标题[[/cell]]
[[/row]]
[[/table]]
[[div style="text-align:center;font-weight:bold;"]]
Explain:2
[[/div]]
在最后的两个@@[[/div]]@@之间插入一个同样的Code:7语法，就可以表现出对单个帖文的回复的效果。
[!-- 讨论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=Re:讨论区帖子]]
包在我身上
[[/div]]
[[/div]]
[!-- 回复1 End --]
[[/div]]
[!-- 讨论1 End --]
> @@[[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]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:8
[[/div]]
可以多次回复帖子，也可以对单个帖文回复多次。最后的@@[[/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 --]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:9
[[/div]]
我觉得这种表现回复的语法相当复杂，一定要注意@@[[/div]]@@的数量。


**新文章：**在帖子的底端，有一个“新文章”按钮。
[[div class="DummyNew-post"]]
[[span class="fake-link"]]新文章[[/span]]
[[/div]]
语法如下：
> @@[[div class="DummyNew-post"]]@@
> @@[[span class="fake-link"]]新文章[[/span]]@@
> @@[[/div]]@@
[[div style="text-align:center;font-weight:bold;"]]
Code:10
[[/div]]
以上就是伪讨论区格式的语法，如果能帮上你的忙我不胜荣幸。

------

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);
[[/module]]
[[div class="nightskyScreen" style="width:90%;text-align:center;margin:auto;height:200px;"]]
++ 星空与UFO
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[[div class="ufo"]]
[[/div]]
[[/div]]
> **参考资料：**
> [https://codepen.io/saransh/pen/BKJun Parallax Star background in CSS] By  Saransh Sinha
> [https://codepen.io/dropside/pen/dIymk UFO speeder] By Louis Coyle
> [[span style="display:block;width:100%;text-align:right;"]]**//Introduced by//** [[*user Nanimono Daemon]][[/span]]

你还记得2017年愚人节的版式吗？版头上面有星空和UFO对不对？可以通过以下语法让这些显示在你的作品和沙盒里。
**星空：**
> @@[[module CSS]]@@
> @@@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-stars_3.css);@@
> @@[[/module]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:1
[[/div]]
**UFO：**
> @@[[module CSS]]@@
> @@@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-1010CSS6.css);@@
> @@[[/module]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:2
[[/div]]
此外，如果你想在文章中出现星空和UFO，只需要在开头添加：
> @@[[module CSS]]@@
> @@@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);@@
> @@[[/module]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:3
[[/div]]
之后这样：
> @@[[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]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:4
[[/div]]
单独的夜空（渐变色背景）如下所示。如果你想在背景上添加文字，建议将文字颜色设置为白色，例如添加style="color:#FFF;"，否则难以看清文字的内容。
> @@[[div class="nightskyScreen" style="color:#FFF;"]]@@
> style="color:#FFF;"这句代码将文字变成了白色。
> @@[[/div]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:5
[[/div]]
[[div class="nightskyScreen" style="color:#FFF;"]]
style="color:#FFF;"这句代码将文字变成了白色。
[[/div]]
此外，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]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:6
[[/div]]
[[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]]
添加UFO的语法如下。因为UFO的轨迹的缘故，夜空背景的height必须至少为150像素。
> @@[[div class="nightskyScreen" style="width:90%;height:150px;margin:auto;"]]@@
> **@@[!-- UFO的代码 --]@@**
> @@[[div class="ufo"]]@@
> @@[[/div]]@@
> **@@[!-- UFO的代码结束 --]@@**
> @@[[/div]]@@
[[div style="font-weight:bold;text-align:center;"]]
Code:7
[[/div]]
[[div class="nightskyScreen" style="width:90%;height:150px;margin:auto;"]]
[!-- UFO的代码 --]
[[div class="ufo"]]
[[/div]]
[!-- UFO的代码结束 --]
[[/div]]
现在，你的页面是不是有一种[[span class="ruby"]]宇宙[[span class="rt"]]Cosmo[[/span]][[/span]]的感觉

**技术笔记：**供想要制作自己的原创CSS版式并与这个语法一起使用的读者查阅，没有相应需求的读者可以跳过这部分。
[[collapsible show="+ 显示技术笔记" hide="- 隐藏技术笔记" hideLocation="bottom"]]
这里的CSS模块（Code:1及Code:2）替换了标准Wikidot页面上的下列元素。

**凡例：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]CSS中元素的标记[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]元素在wikidot页面中的作用[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
代码中追加或修改的内容
[[/cell]]
[[/row]]
[[/table]]
**code1所作的变更：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]#page-content[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]网页正文[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
position:relative;z-index:3;
[[/cell]]
[[/row]]
[[/table]]

[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]#side-bar .side-block[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]侧边栏菜单[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
position:relative;z-index:3;
[[/cell]]
[[/row]]
[[/table]]

[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]#footer[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]帮助或服务条款[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
position:relative;z-index:3;
[[/cell]]
[[/row]]
[[/table]]

[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]a.avatar-hover,  a.avatar-hover:hover[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]将鼠标悬停在帐户上时显示的放大头像相关元素1
（帐户头像后面的灰色背景）[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
z-index:4;
[[/cell]]
[[/row]]
[[/table]]

[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]a.avatar-hover div[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]将鼠标悬停在帐户上时显示的放大头像相关元素2[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
position: relative;z-index:4;
[[/cell]]
[[/row]]
[[/table]]

[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]a.avatar-hover div div[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]将鼠标悬停在帐户上时显示的放大头像相关元素3[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
position:absolute;z-index:4;
[[/cell]]
[[/row]]
[[/table]]

**code2所作的变更：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell style="width:4em;"]]元素[[/hcell]]
[[cell]]#skrollr-body[[/cell]]
[[/row]]
[[row]]
[[hcell]]功能[[/hcell]]
[[cell]]除了折叠模块以外的所有div元素[[/cell]]
[[/row]]
[[row]]
[[hcell]]
变更
[[/hcell]]
[[cell]]
overflow:hidden;width:100%;position:relative;
[[/cell]]
[[/row]]
[[/table]]

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

**code1所添加的伪元素：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell]]元素id[[/hcell]]
[[hcell style="width:8em;"]]伪元素[[/hcell]]
[[hcell style="width:20em;"]]伪元素的功能[[/hcell]]
[[/row]]
[[row]]
[[cell rowspan="2"]]
#container-wrap-wrap
[[/cell]]
[[cell]]
before
[[/cell]]
[[cell]]
星空背景1-1
[[/cell]]
[[/row]]
[[row]]
[[cell]]
after
[[/cell]]
[[cell]]
星空背景1-2
[[/cell]]
[[/row]]
[[row]]
[[cell rowspan="2"]]
#container-wrap
[[/cell]]
[[cell]]
before
[[/cell]]
[[cell]]
星空背景2-1
[[/cell]]
[[/row]]
[[row]]
[[cell]]
after
[[/cell]]
[[cell]]
星空背景2-2
[[/cell]]
[[/row]]
[[row]]
[[cell rowspan="2"]]
#container
[[/cell]]
[[cell]]
before
[[/cell]]
[[cell]]
星空背景3-1
[[/cell]]
[[/row]]
[[row]]
[[cell]]
after
[[/cell]]
[[cell]]
星空背景3-2
[[/cell]]
[[/row]]
[[/table]]

**code2所添加的伪元素：**
[[table class="wiki-content-table" style="width:100%"]]
[[row]]
[[hcell]]元素id[[/hcell]]
[[hcell style="width:8em;"]]伪元素[[/hcell]]
[[hcell style="width:20em;"]]伪元素的功能[[/hcell]]
[[/row]]
[[row]]
[[cell]]
#skrollr-body
[[/cell]]
[[cell]]
after
[[/cell]]
[[cell]]
UFO本体
[[/cell]]
[[/row]]
[[/table]]

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

------

++ Colmod - 多重折叠

[[>]]
**"//Collapsible Modification - multiple collapsible blocks//" Introduced by:**[[*user Boyu12]]
[[/>]]

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

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[include component:coltop show=+ 打开|hide=- 关闭]]``
``就像这样…``
``[[include component:coltop show=+ 打开|hide=- 关闭]]``
``不管多少次…``
``[[include component:coltop show=+ 打开|hide=- 关闭]]``
``都可以折叠起来。``
``[[include component:colend]]``
``[[include component:colend]]``
``[[include component:colend]]``
[[/div]]

----

colend 中设置 nohide=false 之后再设置 hide …
[[include component:coltop show=+ 打开|hide=▽ 关闭]]
再现折叠模块中 hideLocation="both" 的效果。[[footnote]]**译注：**即关闭链接显示在折叠内容的上下两侧。[[/footnote]]
此外，还可以在 coltop 和 colend 中显示不同的链接文本。

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[include component:coltop show=+ 打开|hide=▽ 关闭]]``
``再现折叠模块中 hideLocation="both" 的效果。``
``此外，还可以在 coltop 和 colend 显示不同的链接文本。``
``[[include component:colend hide=△ 关闭|nohide=false]]``
[[/div]] _

[[include component:colend hide=△ 关闭|nohide=false]]

----

coltop 中删除 hide 之后设置 nohide=true ，
colend 中设置 nohide=false …
[[include component:coltop show=+ 打开|nohide=true]]
再现折叠模块中 hideLocation="bottom" 的效果。[[footnote]]**译注：**即关闭链接显示在折叠内容的下侧。[[/footnote]]

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[include component:coltop show=+ 打开|nohide=true]]``
``再现折叠模块中 hideLocation="bottom" 的效果。``
``[[include component:colend hide=- 关闭|nohide=false]]``
[[/div]] _

[[include component:colend hide=- 关闭|nohide=false]]

----

coltop 中设置 folded=false …
[[include component:coltop folded=false|show=+ 打开|hide=- 关闭]]
再现折叠模块中 folded="no" 的效果。[[footnote]]**译注：**即折叠初始打开。[[/footnote]]

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[include component:coltop folded=false|show=+ 打开|hide=- 关闭]]``
``再现折叠模块中 folded="no" 的效果。``
``[[include component:colend]]``
[[/div]]

[[include component:colend]]

----

colmod 嵌入 ``[[div class="collapsiblealt"]]``与``[[/div]]`` 之间，
或者在 coltop 中设置 ifprot=true …
[[div class="collapsiblealt"]]
[[include component:coltop show=认证|hide=注销]]
再现[#toc23 模拟认证]中的折叠模块的效果。

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[div class="collapsiblealt"]]``
``[[include component:coltop show=认证|hide=注销]]``
``再现[#toc23 模拟认证]中的折叠模块的效果。``
``[[include component:colend]]``
``[[/div]]``
[[/div]]

或者

[[div_ class="code" style="white-space:nowrap;padding:1em;color:#000;"]]
``[[include component:coltop ifprot=true|show=认证|hide=注销]]``
``再现[#toc23 模拟认证]中的折叠模块的效果。``
``[[include component:colend]]``
[[/div]]

[[include component:colend]]
[[/div]]

----

**欲了解更多信息，请参阅：**
[http://scp-jp-sandbox3.wikidot.com/draft:boyu12-2/colmod_limit/1 Append Syntax: Colmod - 多重折叠]

[[include component:colend]]
[[include component:colend]]
[[include component:colend]]