单页迭代指导 - The Backrooms-GX

单页迭代指导

文章作者：physicslike
文章译者：Sekai_s和 hoah2333
搬运：TANGyx2010

概述

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

使用方法

如你所见，单页迭代可以像这样切换页面。假设我们一共有四个迭代，基础语法如下所示：

所有迭代之上相同的部分
[[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]]

为了增加迭代内容，需要在末尾的====之后添加如下所示的文本和====。添加链接时注意格式。

新迭代的正文
====

要减少迭代数量，请将模块、正文内容和====一并删除。

以上就是单页迭代的制作方法，现在看看你的页面能否正常工作。

工作原理

该系统的核心在于使用====对内容进行划分。在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页。这样便可以实现页面切换的效果。

应用篇1

CSS模块

如前文所述，可以在迭代正文处添加CSS模块。这样，不同的迭代就可以应用不同的CSS版式。

#page-title:after {
content: "　我在标题上加了一些东西";
}

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

迭代的随机页面

像是这个页面那样，通过设置order="random"来随机显示迭代，这种方法只能在带有子页面的迭代中使用。如果你想在单页迭代上也实现随机显示的效果，可以在第1迭代上添加一个html模块，用javascript脚本跳转到一个随机的链接。示例如下：

<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>

在这种方法中，当浏览器读取到这个html时，会出现一个页面重新跳转的效果。可以使用如下的CSS来隐藏所有的元素，以改善阅读体验。

[[module css]]
*{
display: none;
}
[[/module]]

应用篇2

在这之前，我对语法的结构作了说明，以便于你进行编辑。但是只要你理解了原理，也可以不用将页面分成数个部分。

[[module ListPages limit="@URL|0" range="." urlAttrPrefix="pageN"]]
第N迭代的文本
[[/module]]

像这样，直接在模块中添加正文内容。在这种情况下，html模块和CSS模块可以调用ListPages的相关数值。

CSS模块调用数值示例

通常情况下把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: 1% !important;
}
</style>

html模块调用数值示例

[[%%content{0}%%html]]
html代码
[[/html]]

插入html模块的方法如上所示。然而，直接添加%%content%%一类的元素并不能解析，需要传递到Javascript中再进行编辑。举例说明，%%@@updated_at@%%可以获取上次页面更新时的Unix时间戳。将其与本地时间比较，可以显示出最后编辑的时间。用同样的方法也可以获取评分和讨论数等等。

管理

The Backrooms-GX

君为何来至此处？

概述