如何建立一个SCP Wiki类型网站~全教程

基础篇

背景资料

  • SCP Template:如果你只是希望创建一个简单的仿SCP分部,可以克隆此网站。克隆按钮在主页上。
  • SCP Sigma-9:这是SCP基金会的版式页,你可以在这里找到另一个简短的建站教程,包括了在网站应用Sigma-9版式的方法,你可以按此方法创建网站之后再阅读此教程以获取更多信息。

前言

你来看这里多半是因为你想创建一个类似这样这样这样的网站。这篇教程就是我不仅自己经常摸鱼玩wikidot还经常帮别人建站肝代码看到版式没整好的网站就浑身难受总结出的攻略全集!

如果你希望从零开始建站、或了解更多信息,我非常建议你往下读。欢迎提供建议,随时可能更新!

开始

创建网站

  • 你需要拥有一个wikidot账户,然后正常地创建一个站点。
  • 这一站点不需要特殊设置,但我建议使用模板“Blank Template”——因为这一模板拥有最少的页面数量,一定程度上是自定义最灵活的,如果你试图更好地规划你的站点,你就不需要费心一个个删除页面了。

应用版式

  • 进入页面[你站点的网址.wikidot.com/_admin],选择“外观与表现”选项卡,选择“布景主题”。

设置菜单

  • 注意,SCP Wiki的移动端版式是通过分别放在顶栏、侧栏上的两个div与:target属性实现的。如果你已经用上述方法设置好CSS版式,那么你应该着手修改顶栏与侧栏菜单。
  • 首先,你需要在页面底端加入一个“meta标签”。点击页底的“编辑元信息”工具,点击“新增一个meta标签”,前一个空格填“viewport”,后一个空格填"width=device-width, initial-scale=1.0",保存即可。
  • 顶栏菜单:默认位于页面nav:top。为了移动端适配,顶栏需要分别设置移动端版本和正常版本。
    * 项目按钮
    * 项目按钮
     * [[[page-name|列表内的链接]]]
     * [[[page-name|另一个链接]]]
    * 另一个项目按钮

    如上述方法可以设置一个单独的顶栏菜单,添加适配和侧栏折叠按钮的顶栏代码如下:

    [[div class="top-bar"]]
    此处按上述列表设置普通顶栏
    [[/div]]
    
    [[div class="mobile-top-bar"]]
    
    [[div class="open-menu"]]
    [#side-bar ≡]
    [[/div]]
    
    此处按上述列表设置移动端顶栏
    
    [[/div]]

    使用这样的版式即可完成顶栏设置。

  • 侧栏菜单:默认位于页面nav:side。侧栏的结构比较复杂。
    [[div class="side-block"]]
    [[div class="heading"]]
    侧栏标题
    [[/div]]
    
    [[div class="menu-item"]]
    侧栏栏目
    [[/div]]
    
    [[div class="menu-item"]]
    更多栏目
    [[/div]]
    
    [[/div]]

    如果你需要为自己的网站留一个高度自定义的侧栏,请先注意侧栏页面的末尾需要添加以下代码:

    ~~~~
    
    [[a href="###" class="close-menu"]]
    [[image http://scp-wiki.wikidot.com/local--files/nav:side/black.png style="z-index=-1; opacity: 0.3;"]]
    [[/a]]

    这是一个占满全屏的链接,负责在移动端展开侧栏时点击关闭它。你可以把“opacity”属性设为不同的值使它的透明度发生改变。

进阶篇

特殊页面

“页面未被建立”

你可以创建一个标题为“_404”的页面来充当页面未被建立时显示的提示。即:如果你的网站网址是example.wikidot.com,那么这一页面的网址是example.wikidot.com/_404。

这个页面的全部内容(包括CSS)会在你试图访问的页面不存在时显示,但页面标题会被默认隐藏。

制作CSS版式

移动端适配

一般地,CSS中宽、窄屏设备间的适应功能使用下方的形式:

@media (max-width: 设备的最大宽度) {
    按正常CSS设计写入
}

@media (min-width: 设备的最小宽度) {
    按正常CSS设计写入
}

而在SCP Sigma-9中,识别移动端版式/正常版式的宽度界限是767px。你可以运用这个数字做出许多移动端适配功能。

CC BY-SA 114514.810