SCP基金會

• 社群
  • 新聞與月刊中心
  • 網站變更公告
  • 聊天指南
  • 作者頁面
  • 工作人員名單
  • 競賽資料庫
  • 非官方競賽與挑戰活動
• 資源
  • 指南中心
  • 心得與資源中心
  • 機動特遣隊
  • 基金會設施
  • 基金會部門
  • 項目分級
  • 維安權限分級
  • 人物檔案
• 規則
  • 網站守則
  • 評價政策
  • 授權指南
  • 圖像使用政策
  • 條目刪除守則
  • 頁面刪除申報區
• 聯絡工作人員

• 社群
  • 新聞與月刊中心
  • 網站變更公告
  • 聊天指南
  • 作者頁面
  • 工作人員名單
  • 競賽資料庫
  • 非官方競賽與挑戰活動
• 資源
  • 指南中心
  • 心得與資源中心
  • 機動特遣隊
  • 基金會設施
  • 基金會部門
  • 項目分級
  • 維安權限分級
  • 人物檔案
• 規則
  • 網站守則
  • 評價政策
  • 授權指南
  • 圖像使用政策
  • 條目刪除守則
  • 頁面刪除申報區
• 聯絡工作人員

進階排版與你

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果你將游標懸浮在於上面第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;」的參數來改變成不同的顏色。這只會作用於你看見的頁面上,而不會影響其他人看這個頁面。

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

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

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

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

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

[[html]]
<div style="display:inline-block; width = 100%">
<div id="findbalance" class="titlebox" style="float:left">
Left side!
 <Button type="button" class="inputfield" id="submit">Submit</Button><br/>
</div>
<div id="wise" style="display:none;float:right" class="titlebox" >
Strong side!
 <Button type="button" class="inputfield" id="wiseSubmit">Submit</Button>
</div>
</div>
<script>
document.getElementById("submit").onclick= function(){
document.getElementById("findbalance").style.display = "none";
document.getElementById("wise").style.display="";
}
document.getElementById("wiseSubmit").onclick= function(){
document.getElementById("wise").style.display = "none";
document.getElementById("findbalance").style.display = "";
};
</script>
<style>
.titlebox{
 border: black 1px solid;
 padding: 10px;
 width: 40%;
 background: beige;
}
.inputfield {
padding: 2px;
margin: 2px;
}
</style>
[[/html]]

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