進階排版與你

作品著作資訊

---

原文：Advanced Formatting and You

作者：DrMagnus

譯者：Viken-K

---

進階排版與你

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

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

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

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

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

---

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

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

引用塊

顯示引用塊代碼

為了使用引用塊，你必須在一行文字的開頭加上「> 」符號。請注意在「>」符號後面要有一格空格。

代碼：
> 這是個會產生引用塊的範例代碼。
>
> 然後這裡我做了一次換行。請注意那個空的引用塊，「>」後面還是有一格空格。
成果：

這是個會產生引用塊的範例代碼。

然後這裡我做了一次換行。請注意那個空的引用塊，「>」後面還是有一格空格。

分頁

顯示Tabview代碼

Tabviews允許你整理你的資訊成更能簡單地檢索的型式，並且可以節省空間。

代碼：
[[tabview]]
[[tab 第一個分頁的名字]]
你的文字/文章要填入的地方
[[/tab]]
[[tab 第二個分頁的名字]]
你的文字/文章2要填入的地方
[[/tab]]
[[/tabview]]
成果：

第一個分頁的名字

你的文字/文章要填入的地方

第二個分頁的名字

你的文字/文章2要填入的地方

嘿，嘿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-895和SCP-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教程，但它的基本概念如下：

Div Id

一個 # 符號表示了它是個 id，當你給定一個div的 id="myId"時，它將會取用你CSS module裡#myId { /*屬性在此 */ }的屬性。單一個 id指向了頁面中的單一元素。

範例：
這將會讓包含在myId元素內的文字變成紅色。

#myId{
color: red;
}

Div Classes

一個 . 符號表示了它是個 class。Class就跟 id一樣只不過它會作用於這個 class css中的所有元素上。所有div class="myClass"的將會得到 .myClass {/*屬性在此*/} 的CSS數值。

範例：
這將會使得任何 .myClass內的物件都有一個1相素寬的實心黑色邊框。
.myClass {
border: solid black 1px;
}

組合式 Id和 Class

你也可以「嵌合」這些結構。.myClass .myClass2 {/*屬性*/} 將會是「所有包含在 .myClass div裡的 .myClass2 div」。所有不在 .myClass div裡的 .myClass2 div將不會受到影響。

範例：
這將使得任何在 #myId1元素裡的 .myClass物件使用 helvetica字型。
#myId1 .myClass {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

將同一設計應用於多個 id和/或 class上

你也可以使用 , 來應用相同的格式在多個 class或 id上。 #myId1, #myId2 { /*屬性*/}將會把這些屬性同時應用於 #myId1和 #myId2上。Class也是相同的道理，它將會讓這些效果應用在兩個 class上。

範例：
這將會讓所有 .myClass元素，以及一個特定的叫做 myId1的元素置中文字。
#myId1, .myClass {
text-align: center;
}

---

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

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

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

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

如果你將游標懸浮在於上面第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-ZH-647: 26 於：31 Dec 2020 12:59 創建
憎恨之紅事件: 7 於：14 Dec 2020 16:51 創建
SCP-ZH-446: 25 於：05 Dec 2020 14:09 創建
故事列表: 0 於：21 Nov 2020 12:53 創建
SCP-2828: 3 於：23 Oct 2020 12:11 創建

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

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

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

條件

• pagetype（頁面類型）
  • "normal": 非隱藏頁
  • "hidden": 隱藏頁
  • "*": 全部

• category（分類）
  • "." 代表當前的分類（default）
  • "*" 代表所有分類
  • 此外，用空格或是逗號來分開每一個分類
  • 分類是預設成全部和的（分類OR分類OR分類）
  • "-category" 代表不要這個類別的頁面 (AND NOT)
  • "%%category%%" 代表與當前頁面的類別相同 ( 如果用於 _template 頁面上)

• tags（標籤）
  • "-" 代表沒有這個標籤的頁面，可見或不可見
  • "=" 代表有著任何與當前頁面相同的可見標籤的頁面
  • "==" 代表有著與所有與當前頁面相同的可見標籤的頁面
  • 此外，用空格或是逗號來分開每一個分類
  • 標籤是預設成全部和的（標籤OR標籤OR標籤）
  • "-tag" 代表沒有這個標籤的頁面 (AND NOT)
  • "+tag" 代表有這個標籤的頁面 (AND)

• parent（父頁面選擇器）
  • "-" 代表沒有父頁面的頁面
  • "=" 代表跟當前頁面是兄弟姊妹（相同的父頁面）
  • "-=" 代表與當前頁面有不同的父頁面
  • "." 代表當前頁面的子頁面（這個頁面是父頁面）
  • 此外也可以填單一特定頁面的完整頁面名稱

• outgoing（外向連結選擇器）
  • 輸入一個單一完整且存在的頁面名稱，來選擇有連向這個頁面的頁面
  • "." 代表有連向當前頁面的頁面

• create_at（創建日期選擇器）
  • "=" 代表與當前頁面創建時間相同
  • "yyyy" 代表特定的年份
  • "yyyy.mm" 代表特定的年份及月份
  • 一些可選的前綴像是 ">", "<", "=", "<=", ">=", "<>" (預設是 "=")
  • 日期不是網站時間而是 UTC (GMT)
  • "last n unit" 或 "older than n unit" ，裡面的 'n' 是數字（預設為 1），而 'unit' 是 "hours", "day", "week", 或是 "month"

• update_at（更新時間選擇器）
  • 日期不是網站時間而是 UTC (GMT)
  • "last n unit" 或 "older than n unit" ，裡面的 'n' 是數字（預設為 1），而 'unit' 是 "hours", "day", "week", 或是 "month"

• created_by（作者選擇器）
  • "=" 代表與當前頁面的創建者相同
  • "-=" 代表不是由當前頁面的創建者所創建的
  • 此外，可以填入單一用戶的名字

• rating（評分狀態選擇器）
  • "n" 代表頁面評分狀態等於n的
  • "=" 代表頁面評分狀態等於當前頁面
  • 一些可選的前綴像是 ">", "<", "=", "<=", ">=", "<>" (預設是 "=")

可選組合

可選組合	展示功能
%%created_at%%	頁面創建日期
%%created_by%%	頁面創建者
%%created_by_unix%%	頁面創建者的"Unixified"名 — 用來建立URL
%%created_by_id%%	頁面創建者的"ID"數字 — 用來建立URL
%%created_by_linked%%	頁面創建者的連結和頭像
%%updated_at%%	頁面更新的時間（編輯、設置標籤、設置父頁面）
%%updated_by%%	頁面更新者
%%updated_by_unix%%	頁面更新者的"Unixified"名 — 用來建立URL
%%updated_by_id%%	頁面更新者的"ID"數字 — 用來建立URL
%%updated_by_linked%%	頁面更新者的連結和頭像
%%commented_at%%	最新評論時間
%%commented_by%%	最新評論者
%%commented_by_unix%%	最新評論者的"Unixified"名 — 用來建立URL
%%commented_by_id%%	最新評論者的"ID"數字 — 用來建立URL
%%commented_by_linked%%	最新評論者的連結和頭像
%%name%%	去除分類後的頁面名稱
%%category%%	頁面分類（如果有的話）
%%fullname%%	連帶分類的頁面名稱（如果有的話）
%%title%%	頁面標題
%%title_linked%%	頁面標題，同時作為連向該頁面的超連結
%%parent_name%%	去除分類後的父頁面名稱
%%parent_category%%	父頁面分類（如果有的話）
%%parent_fullname%%	連帶分類的父頁面名稱（如果有的話）
%%parent_title%%	父頁面標題
%%parent_title_linked%%	父頁面標題，同時作為連向該頁面的超連結
%%link%%	指向該頁面的URL
%%content%%	頁面內文
%%content{n}%%	第n個段落的頁面內文
%%preview%%	該頁面的前200個文字
%%preview(n)%%	該頁面的前n個文字
%%summary%%	頁面內文摘要
%%first_paragraph%%	該頁面的第一段
%%tags%%	該頁面的可見標籤（不以底線開頭的）
%%tags_linked%%	該頁面的可見標籤，同時作為連向system:page-tags/tag/{標籤}的超連結
%%tags_linked|link_prefix%%	該頁面的可見標籤，同時作為連向link_prefix{標籤}的超連結
%%_tags%%	該頁面的隱藏標籤（以底線開頭）
%%_tags_linked%%	該頁面的隱藏標籤，同時作為連向system:page-tags/tag/{標籤}的超連結
%%_tags_linked|link_prefix%%	該頁面的隱藏標籤，同時作為連向link_prefix{標籤}的超連結
%%form_data{name}%%	該頁面資料庫的字段值（如果有的話）
%%form_raw{name}%%	對被選定的字段，儲存於該頁面資料庫內的值（如果有的話）
%%form_label{name}%%	該字段被定義於資料庫內的標記（如果有的話）
%%form_hint{name}%%	該字段被定義於資料庫內的提示符（如果有的話）
%%children%%	該頁面的子頁面數量
%%comments%%	該頁面的評論數量
%%size%%	該頁面的字數
%%rating%%	該頁面的評分值（數字或是星級，取決於網站管理者的設定）
%%rating_votes%%	該頁面的投票數
%%rating_percent%%	5星評分級的評分百分比
%%revisions%%	該頁面的修訂次數
%%index%%	該頁面於ListPages中輸出的序數（1 到 %%total%%）
%%total%%	忽視 limit 後的頁面總數（可能會比%%limit%%還高）
%%limit%%	傳遞給ListPages的限制數（如果未傳遞則為空）
%%site_title%%	當前網站的標題
%%site_name%%	當前網站的Wikidot Unix名字
%%site_domain%%	當前網站使用的網域名

---

第5章節：一個好東西⁵

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

我們是泰坦

代碼：

[[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的代碼，做出更進階應用的方式。如果你有任何的疑問請不吝私訊我。

Footnotes

1. 譯註：此為翻譯過用於本站的文章，原文請詳閱這裡

2. 譯註：後面的章節是原作者在發布後隔一天才更新上的，顯然他遺忘了這裡……

3. 譯註：這是Google Chrome的，其它瀏覽器則需要再確定。

4. 譯註：原文是篩選出DrMagnus創立的頁面，但顯然的……我們沒有由他建立的頁面。

5. 譯註：所以我說第6章呢？我們親愛的DrMagnus？