嗨嗨!這裡是阿達!
我知道你們有很多想法,想要給一個樓層加代碼其實非常的容易!
熟讀這篇教程,你就可以進行一些基本的代碼操作啦!
fandom wiki使用的是css代碼(當然json也是可以的,不過你要向管理員和fandom官方提出申請,這個以後再說),所以你在網上搜到的一部分CSS代碼技巧是可以直接用的(或者改一改),那我們開始吧:
<div>
CSS中最重要的一個代碼就是div,在這裡你們可以把它理解為括號,舉個例子:
就可以翻譯為:
<div 这东西我要加粗;这东西我要黑色的;这东西我要圈起来(前面我回来再讲)>
我要表達這件事情
</div>
如果你不及時增加</div>的話,就像你的補充內容右邊不加括號一樣,大家根本分不清你後面說的到底是不是補充內容(舉個例子,就像現在一樣,我不加右括號的話會不會很難受?而且你不知道我這段話說的是不是正文。程序也一樣,它根本不知道你是不是結束了在這段特殊格式下的內容,所以它就從你輸入這段代碼的下方文字一直延續到本頁面結束!所以,記得增加</div>。
這個樣子的話div會將「我要表達這件事情」放到居中,「你想要表達什麼」放到右邊,而由於(這東西我要圈起來)的大括號中間沒有斷掉,所以它依舊修飾着兩句話,直到文本結束。上面轉化為代碼格式就是:
<div 这东西我要圈起来>
<div 这东西我想在中间排着>
我要表達這件事情
</div>
<div 好了下面的全给我在右边排着>
你想要表達什麼
</div>
</div>
屬性
屬性是用來修飾被div圈起來的文字的屬性的,這也是wiki的重中之重。每個屬性用" "分隔開。常用的一般有Class、Style、title和ID四大屬性。
屬性ID
ID屬性相當於給被圈起來的文字加了個在本頁面獨一無二的名稱,一般寫作時不常用,但是也描述一下它的用法
<div id="hello">你好啊</div>
相當於把「你好啊」加了一個全文獨一無二的屬性名稱「hello」。
屬性Class
和上面一樣,但是這個是用來描述這段話所在的集群的。
<div class="smile">我大笑起来</div>
<div class="smile">我狂笑起来</div>
這樣的話「我大笑起來」和「我狂笑起來」都被放到了"smile"的集群裡面。
屬性title
是不是很有意思?它的表達格式是這樣的:
<div title="认真你就输了!">我说得对吗</div>
這樣你就可以在wiki里埋一些彩蛋,甚至可以做到行把
屬性style
這個是在寫wiki中最重要的一部分,你想要給wiki文字上色也好,排位也好,弄大小也好,字體也好,都需要用到這個,每一個style標籤都要用到「 ; 」進行分割,比如<div style="color:green;font-family:黑体">这个样子。
下面列出來一些常用的style標籤。
color
顧名思義,顏色。它會給文字帶來一些顏色效果,比如<div style="color:green">和<div style="FF0000">,它会给整个圈起来的字体上色.
font-family
可以改變文字的字形,比如<div style="font-family:微软雅黑">,儘量使用所有瀏覽器都適配的中文/英文字體,比如宋體、黑體、溫軟雅黑等,你弄的太奇怪的字體只能在有這個字體庫的設備上有效。
font-size
可以改變文字的大小,比如<div style="font-size:5pt">,pt指的字体的大小数值,fandomwiki的正文字体大小是10pt,可以按照这个标准去修改。fandomwiki有<small>和<big>两个独立的外框可以设置。
font-style
可以讓文字斜過來,比如<div style="font-style:italic">,一般情况下有normal和italic两种,但是在fandomwiki中可以用'' ''来代替。
font-variant
可以將word強制修改成word,比如<div style="font-variant:small-caps">,会变成小的大写子母,对中文没啥用。
letter-spacing
可以改變文字中間的間隙大小,比如<div style=style="letter-spacing:4pt">。正常数值为1pt。
line-height
可以改變文字的行高,比如<div style=style="line-height:7pt">。
font-weight
可以改變文字的粗細,比如<div style=style="font-weight:bolder">,正常值为normal,可以自定义粗细大小的数值为100-900的整百数。
vertical-align
可以改變文字的上下狀態,比如<div style="vertical-align:sub">,super为上标字,sub为下标字,fandomWiki有专门的上下标快捷键。
text-decoration
可以產生劃線,比如<div style="text-decoration:underline">,常见的后缀有line-through(删除线)、overline(上划线)、underline(下划线)和none(没有线),fandomWiki有专门的快捷键。
text-transform
可以轉換英文單詞的大小寫,比如<div style="text-transform:capitalize">,对中文无效。常见的后缀有capitalize(每个单词第一个字母大写)、uppercase(全部大写)、lowercase(全部小写)和none(不做改动),没啥大用。
text-align
特別常用,讓字體靠左/居中/靠右。 比如<div style="text-align:center">。 常見的後綴有left(左靠)、center(居中)和right(右靠)。
cursor
改變鼠標放置在文本上的狀態用的,例如<div style="cursor:auto">。
自動auto
添加crosshair
正常默認default
點擊狀態pointer
移動move
左右e-resize
左下右上ne-resize
左上右下nw-resize
上下n-resize
同左下右上,代碼不同se-resize
同左上右下,代碼不同sw-resize
同上下,代碼不同s-resize
同左右,代碼不同w-resize
打字text
請稍後wait
問號help
<span>
這個的用法和<div>类似,也可以当括号使用,div能干的span大部分都能干。<span>的好处是它可以不用换行的切换文字的属性,值得注意的一点是,<div>里可以包含<span>,但是<span>是不可以包含<div>的。<span>也要用</span>來作為格式內容的終結。
中括號「[]」
這裡一般是放置從外部引入的鏈接等,常用的一般分為三種:
- [[页面]]
- [[file]]
- [[语言:.....]]
[[页面]]
一般是將一個頁面引到另外一個頁面的傳送門,如果要是這個頁面存在於本wiki的話,那麼你只需要在那個Wiki頁面的專用後綴那裡複製一下,然後粘貼到一對雙中括號中間,那麼它將會將點擊這裡的人引到那個wiki頁面。舉例:
專用後綴:https://backrooms.fandom.com/zh/wiki/Level_1554中,Level_1554是页面专用的后缀。你想要跳转到这个页面只需要[[Level 1554]]。
但如果不是本wiki的頁面的話會相對麻煩一些,你需要用到空格來描述你要引過去的鏈接。比如:[https://backrooms.fandom.com/wiki/Level_63 Level 63],效果:Level 63。
[[file]]
一般是放置一張已經從主站導入的照片或視頻或什麼奇奇怪怪的文件時使用的,舉個例子,如果我想把adaihappyjan.jpg這個已經上傳到wiki的文件導入到我的頁面中,我只需要
[[File:adaihappyjan.jpg]]
下面是效果:
哇!是不是太大了,那我們壓縮一下吧,對於file類導入比較有用的指令包括***px、thumb、vertical-align、horizontal-align等,我們把它放進來。
[[File:adaihappyjan.jpg|160x200px|thumb|描述一下这张照片]]
描述一下這張照片
看右邊,現在是不是小很多?
這樣子的話我們現在就可以向層級裡面放描述照片啦,當然如果不需要描述的話也可以不用加thumb,寫出大小就可以將圖片放置進文字欄。
[[File:adaihappyjan.jpg|160x200px]]
現在看左邊,照片就已經放進文字欄了,而且它可以放置到我任何想要放置的位置,像這樣:
,這樣你就可以無縫插入了。
[[语言:.....]]
有的時候這篇文章在別的後室fandomwiki里有別的語言存在,那麼可以在wiki里插入[[语言:对应文章]],比如[[en:Level_60]],它就表示着這個文章在英文站中它的專用後綴叫Level_60,同樣的,這也可以讓進入英文站的漢語用戶更方便的找到對應的中文版本,因為fandom會在下方推送瀏覽器所屬語言的版本(如果有的話)。