進階排版與你
評分: +5+x

進階排版與你

你好啊,別來無恙?如果你正在閱讀這個頁面,那你可能是想從這裡學到如何利用wikidot編碼做出一些花俏的東西!

這份文章適用於那些想擺脫基本的粗體、斜體和折疊頁的人。那些部分我也會談到一點沒錯啦,但這份指南主要將聚焦在可用於文章內的進階 設計。

如果你在尋找著更基本的格式,ghostchibi已經寫了這份1很了不起的文章。

你可以在我的一些SCP檔案中看到部分於指南中所介紹格式的應用實例,像是SCP-3872SCP-027-J

如果你對這份指南的任何部分抱有疑問,請透過wikidot私訊我!


第1章節:基本Wikidot格式技巧


有些基本的wikidot編碼本身就很狡猾,並且沒有被良好的解釋該如何使用。這兩個是我最常收到別人詢問的語法:

引用塊


分頁

嘿,嘿Magnus,這裡有個頁面裡有個真的超級酷的格式,我想使用它。告訴我要怎麼做!

好的,這位路人甲,這比你想像的還要簡單。在每個頁面的右下角有一個「+ 選項」的按紐,點一下,會有一小排清單展開來……你懂的。再點一下「Page Source」它將會顯示這一個頁面裡每個細節的Wikidot代碼。

如果你不知道該做些什麼的話,這將會讓你看見任何你想在wiki上找到的東西。


第2章節:使用非Wikidot的代碼


從這裡開始事情會變得更加有趣,Wikidot支援所有類型的物件。它們不只有自己的標記式語言,你還可以加入客製化的div。

代碼:
[[div id="myDiv" style="background-color: green; text-color:white;"]]
這是一個div!
[[/div]]
成果:

這是一個div!

Div被定義為一個能容納其他東西的標準Web容器。那些東西可以是文字、其他的div、span和其他的網頁物件。你可以透過調整它們的性質來自由的設計它們的格式。

普遍來說,這是透過CSS來完成的,或者叫做Cascading Style Sheets。這將會覆蓋標準的wikidot格式,這也是為什麼我使用的折疊頁跟你可能使用的那種有一些細微的差異。

使用Div將允許你創造方框和各種不同形狀的框來滿足你文章的需求。

舉個例子,如果你想要某些東西看起來像是訊息對話:

代碼:
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
我喜歡大屁股,而且我不會說謊。
[[/div]]
@@ @@
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: blue; padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
我的其他弟兄說他無法否認。
[[/div]]
[[/div]]
成果:

我喜歡大屁股,而且我不會說謊。

我的其他弟兄說他無法否認。


如你所見,這裡有很多東西可以拿來用。你還可以看到,我使用了另一個非標準的wikidot代碼:HTML 區塊。

如果你知道該如何編寫HTML,你可以使用[[html]] [[/html]]區塊來進行添加,並在裡面包含著任何你想要的、HTML跟<script>標記裡的javascript 。

這使你可以引入一些真的非常棒的組件。一個我很頻繁被問起的組件就是該如何做雙層摺疊頁。

這不會很難去實現。一個值得注意的點是,下面一層的星號必須比上面那一層的還多一個空格。

代碼:
[[div class="foldable-list-container"]]
* Lol 折疊頁
* 第二個
* 艮多
* 甚至艮多
* 測試
[[/div]]
成果:

  • Lol 折疊頁
    • 第二個
  • 艮多
    • 甚至艮多
      • 測試

你也可以設計自己的foldable-list-container div,但要記得調整module css裡,你要引入進div的元素。想理解該怎麼做的話請看第3和第4章節。

最後一個非wikidot的代碼,被時常添加在一些管理用的頁面中的,就是iframe。

I frame被用來從其他網站引入完整的內容到當前的頁面。以下是一個範例:

代碼:
[[iframe http://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
成果:


這是來自我個人網站上的一個頁面,我在那裡執行著一些技術性計畫,而這是一個隨機尋找SCP的按紐。它逐字的將那個網頁擷取過來,並透過一個較小的div展示在當前的頁面中。這就是SCP-895SCP-027-J當中,那些稍微更「進階」的圖片使用的方法。

這個SCP-027-J的圖片區塊將透過以下的範例來生成:

代碼:
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://home.helenbot.com/images/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J?
[[/div]]
[[/div]]
成果:

SCP-027-J?


第3章節:Divs及該如何去設計它們

所以你已經看過了一些div,然後有一些裡面寫著「Style」。這裡是比較硬核的CSS設置,也就是去定義每個你所想使用物件的基礎,或是加入你自己的客製化CSS設定。

這是你現在正看著的這個頁面的CSS模組:

[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
text-color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content{
text-align: left;
}

.collapsible-block-folded, .collapsible-block-unfolded{
text-align: center;
text-color: black;
}
[[/module]]


它們確切的功能是去覆蓋原本折疊頁的CSS設置,就如同你上面所看到的折疊頁那樣。

CSS模組允許你對這個頁面做任何事情,你甚至可以改變母體容器的顏色。你可以改變頁面本身的配色,如同能廣泛的在GoI中心頁所看到的那樣,像是第三定律世界線中心頁。你也可以把你的CSS儲存在其他頁面裡,然後引入(import)它,如同你能在一些世界線中心裡所看到的那樣。

這是很重要的提醒,任何應用於「母體」容器的屬性同時也會應用在子容器上,除非被子容器的屬性所覆蓋。如果你讓一個div的功能是置中文字,那麼在這個div裡的文字全部都會被置中,除非你在這裡面的「子」div裡覆蓋了這個屬性。

這將不會是個CSS教程,但它的基本概念如下:


第4章節:為了好玩和益處來調整頁面

最後一章節2是個大學問:如果我想調整某個東西,那我到底該怎麼知道要調整哪裡?

我想這應該不是個網頁開發的教程,所以這個部分不會那麼的完整,但我還是傳授你如何替換元素屬性的速成課程。

如果你將你的游標懸浮在某個東西上(字面上來說,這個網頁上的任何部分)並點擊右鍵,你應該會看見選項裡有個「檢查」3。點擊它將讓你打開一個看起來像是大型控制台的視窗。

如果你將游標懸浮在於上面第2章節中的藍色「文字訊息」之上時,並檢查它的元素,你將會得到以下的屬性:

element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}

你可以點擊這些屬性的右手邊來調整屬性參數,或是點及它們的上下來添加新的屬性,而最好去理解的方式就是不斷的實驗。如果這些都搞砸了,去google你想使用的屬性,或是大略的描述你所想完成的事情,後面加上「CSS」。

試著調整「background: blue;」的參數來改變成不同的顏色。這只會作用於看見的頁面上,而不會影響其他人看這個頁面。


第5章節: Listpages

好吧,這個部分感覺起來就像我的曾祖父一樣。Listpages是一個由wikidot所提供的module,它可以允許你根據條件來搜尋整個wiki,並展示結果。一個最簡單的應用就像這樣:

代碼:
[[module ListPages created_by="Viken-K" limit="5" separate="no"]]
%%title_linked%% - %%rating%% 於:%%created_at%% 創建
[[/module]]
成果:

SCP-4000: 0 於:23 Sep 2020 13:03 創建
忘念碑: 6 於:13 Sep 2020 05:07 創建
死霧: 10 於:01 Sep 2020 06:03 創建
SCP-ZH-729: 10 於:21 Aug 2020 01:23 創建
文章使用零件中心頁: 4 於:20 Aug 2020 12:09 創建

這簡易的篩選出由Viken-K4所建立的頁面,限制是5篇,然後不做分行。在這個模組的「body」裡,你將要提供你所想要顯示什麼出來。以這個為例,我展示出了標題、投票狀態和創建日期。

Listpages將顯著的拖慢你頁面載入的速度,如果你大量的使用它們的話,同時我也非常不建議在一個頁面裡使用超過一個Listpages。

以下是一小部分的條件以及可選的東西:


第5章節:一個好東西5

你知道網頁開發嗎?來炫耀一下。


結論

我希望這有至少有提供你一些如何使用wikidot的代碼,做出更進階應用的方式。如果你有任何的疑問請不吝私訊我。

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License