交互式wikidot页面制作指南——锚点篇

[[module CSS]] #u-A, #u-X, #u-Y, #u-Z, .A, .X, .Y, .Z{     display:none; } #u-Y:target ~ .Y, #u-X:target ~ .X, #u-Z:target ~ .Z{     display:block;     color:white; } #u-A:target ~ .A{     display:block;     color:black } .grass{     background-color:green;     color:white; } [[/module]] [[>]] [[module rate]] [[/>]] ++  导言 本文主要向读者介绍如何使用“网页锚点”来制作一个可以根据读者的某些特定指令，逐级演化的Wikidot页面。 ++ 阅读完本页面所有内容后你将可以徒手制作如下内容 [[div id="u-A"]] [[/div]] [[div style="grid-template-columns: auto auto auto;"]] 我们是按钮，点击我们后就可以在下面的显示框显示不同的各自文本 [[div style="-moz-border-radius:5px; -webkit-border-radius: 5px; background-image: url(http://themes.wikidot.com/local--files/rainbow-base/button_2.png); background-repeat: repeat-x; background-color:#F4F4F4; border: 1px solid #dddddd; height: 35px; text-align:center; width:100px;"]] [#u-X 按钮X] [[/div]] [[div style="-moz-border-radius:5px; -webkit-border-radius: 5px; background-image: url(http://themes.wikidot.com/local--files/rainbow-base/button_2.png); background-repeat: repeat-x; background-color:#F4F4F4; border: 1px solid #dddddd; height: 35px; text-align:center; width:100px;"]] [#u-Y 按钮Y] [[/div]] [[div style="-moz-border-radius:5px; -webkit-border-radius: 5px; background-image: url(http://themes.wikidot.com/local--files/rainbow-base/button_2.png); background-repeat: repeat-x; background-color:#F4F4F4; border: 1px solid #dddddd; height: 35px; text-align:center; width:100px;"]] [#u-Z 按钮Z] [[/div]] [[/div]] [[div style="background-color:black; border-style:solid; border-color:green; border-width:3px;  width=0.8"]] [[div id="u-X"]] [[/div]] [[div id="u-Y"]] [[/div]] [[div id="u-Z"]] [[/div]] [[div class="X"]] 文本X [[/div]] [[div class="Y"]] 文本Y [[/div]] [[div class="Z"]] 文本Z [[/div]] [[/div]] ++ 基础知识介绍：什么是一篇wikidot网页 本章节会解释一些即将被用到的网页编辑技巧，以及介绍理解他们所需的小知识。 欸欸欸，先别跳过这一段，我知道你可能会在想“这有什么好说的”。但为了后面更多会稍显复杂的知识和技巧，一些基本的事实，还是要先被列举在这里。 [[span style="color: orange"]]事实一[[/span]]：HTML语言编写了所有的wikidot网页。所有wikidot网页中的文本框，图片，输入框，超链接等等元素，都是HTML element。此页面的头版，右上角的用户图案，闪烁的karma彩条，它们都列于此列。 比如，通过在HTML语言中写下如下代码 [[code]] <div>我是一个div元素</div> [[/code]] 一个div元素便被创造了出来，将这个代码喂给一个叫做浏览器的程序后，一个包含文本“我是一个div元素”的网页便被渲染到了你的设备上！ [#u-A 咦，为什么这html代码和我平时在wikidot编辑栏中输入的wikidot代码如此相像？它们都有双重括号，都有一个“/”符号在结尾。] [[div class="A"]] 为了便捷、扩大用户群、规范化网页内容，以及其他的什么设计目的，wikidot的开发团队选择新设计了一套较为类似html代码的wikidot代码。wikidot自己有一个翻译机，它会先把用户输入的wikidot代码翻译成html代码后，再将html代码渲染到用户设备上。 [[/div]] 即使有那么多绕来绕去的东西，只要记住第一条事实就好了，所有的wikidot中的东西都是html元素。 [[code]] <div style="background-color:red"> 我是一个div元素 </div> [[/code]] 若要想修改一个html元素的“风格“， 只需要在这个元素的名牌后加一个"style"参数，再细细自定义就好啦！ 另外，每个html元素都会有一对自己的名字 ”id“ 和 ”class“，有了自己的名牌，当其他人想要找它有事时，直接叫这个名牌就好了，譬如，我想把一个div的class定义为“grass”，那么，我便会写下如此代码 [[code]] <div id="name" class="grass"> 我是一个div元素 </div> [[/code]] 在wikidot编辑栏里输入的[[div]]文本[[/div]]，本质上和上述<div>没有区别。 [[div id="wangKeng" style="background-color:grey; color:white; border-style: solid; border-color:yellow"]] 我是一个id为“u-wangKeng”的div元素，如果你是第一次看见我，请当作没看见继续向下阅读。 如果你是第二次看见我，欢迎回来，我很想念你。 [[/div]] [[span style="color: orange"]]事实二[[/span]]：每个html元素的“风格”都可以被一种方便的方式修改，这个方式叫做CSS，Cascading Style Sheet, 层叠式风格表格。 一个页面里的HTML元素那么多，如果我有一个页面里有一百个文本框，其中五十个文本框要绿色的背景，五十个文本框要蓝色的背景，我要咋办，难道要我...一个一个改？ 不！我无法忍受如此重复的行为，为了方便，我要使用CSS! CSS, 层叠式风格表格，它可以帮助我们定下一个页面中，到底各是哪些元素需要什么特殊的风格。 譬如，我要求，所有class为“grass”的文本框，都要有一个绿色的背景。那么，我便会写下如此代码 [[div style="border:dashed"]] <style>[[span style="color:green"]]@@       @@---->这条字符是为了告诉网页浏览器，下面的内容是css[[/span]] .grass {[[span style="color:green"]]@@       @@---->“.” 一个点，意思是“我们是在寻找class为grass的任何元素”[[/span]]            background-color:green } </style>[[span style="color:green"]]@@       @@---->这条字符是为了告诉网页浏览器，上面的内容是css[[/span]] [[/div]] 效果如下： [[div class="grass"]] 草 草 草 草 草 草 草 草 草 草 草 草 草 草 [[/div]] 如果想要在wikidot编辑栏里使用css代码，便请在代码外再包裹一对wikidot代码，如下： [[code]] [[module CSS]] .grass{     background-color:green; } [[/module]] [[/code]] 如你所见，你可以通过先输入一个”background-color“来向计算机声明”我要修改这个元素的背景颜色“，再通过输入一个”red“来向计算机继续声明”修改背景颜色成红色“。除了背景颜色，一个元素还有很多很多数不清的属性可以修改，本文仅再介绍本文即将使用到的另外一个，display属性。 若将一个元素的display属性设置为”none“，那么这个元素将完全不被显示，计算机在一个一个渲染html元素的时候，如果看到这个为none的display，它甚至都不会给它在页面上留个地盘。 若将一个元素的display属性设置为”block“，那么计算机将老老实实地渲染这个元素。 ++ 继续使用C S S +++ CSS选择器 在上面的css代码例子中，我在grass前放置了一个“.”，这一个点是啥意思呢？为啥后面会有个大括号呢？大括号前面和里面的东西都是什么？ [[span style="color:orange"]]原来，大括号前面的东西被叫做css选择器，它定义了大括号内容中的参数要被使用在哪些网页元素里[[/span]] 这选择器有很多不同的种类，上面的例子中使用的一个点，便是“class”选择器，它会告诉浏览器：“听着，给我找到所有class为grass的网页元素，并且把如此这般的风格使用在他们上面！” 一个小练习：在自己的沙盒里使用css代码，制作两个div吧。请将他们一个设置为蓝色背景颜色，一个设置为红色背景颜色。 除了class选择器，本文仅介绍另外即将被使用到的三种CSS选择器。 ++++ id选择器  #id  若在字符前面输入#，便会告诉浏览器选择所有id和字符吻合的元素，这和上面的class选择器非常相似，只不过“.”被换成了“#”。 ++++ 后选择器  前元素～后元素 这个选择器就有点点复杂了，他会选择所有“位于前一个元素后面”的元素，如果我输入了 [[code]] .grass ~ .bug{ background-color:yellow } [[/code]] 那么，我的意思就是，选择所有位于grass后面，而且class为bug的元素！[[span style="color:orange"]]注意，请在波浪线前后都加一个空格！[[/span]] ++++ target选择器 元素:target 你认为后选择器比较复杂？这里还有个重量级。target选择器将选择所有被激活的元素！ smjb，隔着儿汽车人火种呢。[[span style="color:orange"]]怎么激活元素?[[/span]] [#A 你可以点击一下这个链接来激活“A”元素] [#- 点击这个链接来不激活任何元素] 点完了吗？观察一下你的页面有哪些变化？是的，你的网页url改变了！当你的url的结尾多了一串“#A”的字符，便意味着你激活了id为A的元素！ 这个页面上没有任何id为A的元素，所以并没有什么会发生。若我想要告诉浏览器：“给我把id为A的元素背景颜色都改成红的，但只有当A被激活的时候再改。” 我便会输入如下代码。 [[code]] #A:target{ background-color:red } [[/code]] 好吧，“被激活的元素”这一说其实不是这个意思，这只是我为了降低理解难度创造出来的概念。真实的故事其实是，在html网页中有很多的“锚点”，anchor point，当你“指向”这个锚点的时候，你的网页浏览器便会把你的窗口移动到那个锚点的位置，这个“指向”的动作，也正是target选择器的名字由来。而你则可以使用css来定义某个元素在被指向，或不被指向时的显示风格。 那么要如何栽下一个锚点呢？最简单的方法是定义一个有id的html元素，就像这样 [[code]] <div id = "A"> 我是一个id为A的元素！我可以充当一个锚点！ </div> [[/code]] 好，那么请问，我要输入一个什么样的wikidot代码，才可以定义一个id为“wangKeng”的元素呢？ 你的心里有答案了吗？ 答案揭晓：你无法在wikidot中制作一个id为“wangKeng”的元素 还记得我前文所说，wikidot会将你的wikidot代码先翻译成html代码后，再渲染在你的电脑屏幕里吗。这整个wikidot页面中，除了你的自定义文本中有元素，还有很多其他的早已存在的元素，譬如头版，譬如侧栏，为了方便，他们都会有自己的id，头版的id叫做“header”，侧栏的id又叫做“side-bar”。如果用户也自己定义了一个id为“header”的元素，那岂不是全都乱套了！所以，wikidot在翻译wikidot语言成html的时候，会鸡贼地把所有用户自定义元素的id前面加上一个“u-”前缀。譬如，我如此写下一个div： [[code]] [[div id="scp"]] 我以为我的id是scp [[/div]] [[/code]] 这个元素的真实id其实是“u-scp”。 那么，现在我要在wikidot里定义单单这个元素的显示风格，我要输入什么样的css代码？如下 [[code]] [[module CSS]] #u-scp{   background-color:black } [[/module]] [[/code]] 除了上述的原因，在wikidot的语法页面中还陈述说，这种在id前自动加前缀的机制也是为了保证安全。（我搞不清楚为什么） 我在前文中已经栽下了一个id为“u-wangKeng”的div，它现在正充当着这个页面中的一个锚点，亲爱的读者，你可以点击下面这个文本来观察一下，网页浏览器是如何“指向”一个锚点的. [#u-wangKeng 回到未来] +++ 将CSS选择器组合起来 请你猜一猜，如下选择器都在什么情况下选择了哪些元素？ [[code]] #head{ } .neck{ } #head:target{ } #head:target ~ .neck{ } [[/code]] 前三个可能都很简单，[[span style="color:orange"]]而最后一个则代表“选择所有class为neck的元素，但！仅仅在当id为head的元素被激活的时候！” 理解并使用这最后一个选择器，将是我们制作“随读者行为演变的wikidot页面”的重要一环。[[/span]] ++ 开始制作能够逐级演化的wikidot页面 +++ 需求解析-我们到底要做到是什么东西 我们想要一个页面，它可以根据用户的点击“按钮”行为，更新页面内容。 换一句话说，我们的页面会有不同的“版本”，或者如果你更愿意，你可以说：“我们的页面会有不同的‘迭代’。“ 那么，再说的具象一些，就是”用户不点击按钮，什么都不显示，用户点击a按钮，页面只显示a文本，用户点击b按钮，页面只显示b文本，以此类推。“。 阅读了上面那么多的内容，你的心里是不是已经有一个答案了？ +++ 真开始制作了 首先，我们需要一个文本A，嗯，第一步。 [[code]] [[div]] 我是文本A [[div]] [[/code]] 有没有发觉什么不对？是的，电脑怎么可能知道上面这个div被我们叫做文本A？因此，我们需要给这个div贴个名字，你可以贴个id，也可以贴个class，本文在这里使用了id。 [[code]] [[div id="textA"]] 我是文本A，我的id是”u-textA“。如果不知道为什么我的id前有个”u-“，请再次阅读上文关于鸡贼wikidot的内容。 [[div]] [[/code]] 我们还需要一个按钮A，当然了。这个按钮A的功能可不是”显示文本A“，若如此的话那就太简单了，这个按钮A的功能是”将本浏览器对准锚点A“。为什么？如果看不懂这一段的话还请再阅读一遍上文的锚点内容。所以这个”按钮A“其实就是个超链接，点击之后修改浏览器的URL，这只要使用wikidot自带的超链接语法就可以了。 [[code]] [#u-AnchorA 点击我将浏览器对准锚点，u-AnchorA] [[/code]] wikidot自带的超链接语法将括号左边的字符串看做是”点击这个文本后浏览器将使用的url“，右边的字符串则是此文本的文本。预览如下 [#u-AnchorA 点击我将浏览器对准锚点，u-AnchorA] 好，我们有了文本，有了按钮，还缺什么？我们还缺一个锚点！我们来制作这样的一个锚点 [[code]] [[div id="AnchorA"]] 我是锚点A，我的id为”u-AnchorA“，如果不知道为什么我的id前有个”u-“，请再次阅读上文关于鸡贼wikidot的内容。 [[/div]] [[/code]] 好，万元素具备，只欠让他们能够”消失“和”出现“的CSS了。首先，文本A在用户点击按钮前不会出现，那我就要先将文本A的display设置为none！ [[code]] #u-textA{ display:none; } [[/code]] 第二，我还要让浏览器在对准”u-AnchorA“锚点时，将u-textA的显示设置为block [[code]] #u-AnchorA:target ~ #u-textA{ display:block; } [[/code]] 注意，我在这里使用了”~“选择器，意思是”选择所有id为u-textA的元素，但！只有在浏览器对准u-AnchorA的时候，并且，这个u-textA还需要位于u-AnchorA的后面。“ 事已至此，万事俱备，将所有内容总结下来，你希望书写的代码便会看起来像这个样子。 供你预览的沙盒页面在https://scpsandboxcn.wikidot.com/statemachine [[code]] [[module CSS]] #u-textA{ display:none; } #u-AnchorA:target ~ #u-textA{ display:block; } [[/module]] [[div id="AnchorA"]] 我是锚点A，我的id为”u-AnchorA“,我可以被按钮A指中，我的位置在u-text的前面。 [[/div]] [[div id="textA"]] 我是文本A，当锚点A被指中时，我便会显示，除此之外的任何时间我都将隐匿在虚无中。 [[/div]] [#u-AnchorA 我是按钮A，点击我后可以指向u-AnchorA] [[/code]] 想要确定自己真的学会了的话，便请将上述代码复制到自己的沙盒，同时制作一个按钮B，锚点B，文本B。 上述的代码如果正常运作的话，将会有个很不尽人意的”副作用“，若要在其上面再做调整，只需将锚点元素的display也调整为”none“就可以了。 ----- 本指南结束，祝你幸福。 -----