跳轉到內容

編輯維基文字/製作模板 A101

來自華夏公益教科書

簡介


本章應被視為維基模板製作的入門文字,本節將概述模板的功能。首先,讓我們瞭解一些基本術語

  • 模板只是儲存的文字塊,並已命名。有些是普通文字段落,有些包含維基文字以建立標題、縮排、表格等。在簡單情況下,透過在作品中鍵入模板的名稱,將向頁面新增整個文字塊及其所有格式和其他部分,就像使用者自己鍵入的一樣。這種行為可以在使用者想要的任何地方重複,並且幾乎可以在維基頁面上找到的所有作品都可以放在模板中來實現這一點。正如你可能想到的那樣,主要的工作在於最初的設計。
  • 模板的名稱在首次儲存時分配。該名稱必須是唯一的,並且在呼叫模板以供使用時使用。有時還會與名稱一起使用其他文字;它可以包括任何選項引數
  • 選項允許使用者改變模板的預設行為。預設行為適用於大多數情況,但設計者內建了在必要時更改內容的方法。選項值通常限制在簡短的列表中,因此這些將在模板的文件中進行描述。例如,名為align的選項的選項值可能只包括leftrightcenter,不包括其他值。模板並不總是需要選項,因為它們的預設行為通常就足夠了。
  • 預設值是使用者沒有指定時模板使用的值。預設值是在設計中指定的,它們可以應用於格式或使用者文字輸入。例如,在上面的對齊示例中,如果未使用align選項,模板可以使用left,前提是left在設計中被指定為其預設值。同樣,如果使用者忘記鍵入文字輸入,模板可以使用預先計劃的預設輸入來代替缺少的引數;有時只是一個程式碼來說明遺漏了什麼。
  • 引數通常是使用者輸入的供模板處理的文字片段。例如,如果模板將文字變為紅色,它仍然需要知道要著色的文字;這稱為引數,並且使用者在呼叫模板以供使用時會包含該文字。有時引數包含類似於插入影像的程式碼的文字,甚至包含畫廊或表格;這取決於模板的設計目的。模板甚至可以是另一個模板的引數;例如,插入測試段落的模板可能會佔據製作文字框的模板的引數空間。然後新段落將出現在一個新的文字框中。
  • 更一般地說,模板讓我們在建立頁面之前提前完成大部分準備工作,讓我們插入一個文字塊,無論是用於建立表格、方框和其他結構的程式碼,還是隻是經常使用的文字段落。本介紹的其餘部分將通過幾個示例來展示模板在頁面上的作用,接下來的部分將介紹修改和製作新模板以用於編寫華夏公益教科書所需的內容。

在第一個示例中,使用了Caption模板。它有兩個文字引數,沒有選項。

以下是呼叫模板以供使用的程式碼;

{{caption|這是第一個引數的文字: | 這是第二個引數的文字}}

這樣做的結果是生成以下文字

這是第一個引數的文字: 這是第二個引數的文字

請注意,模板已格式化文字,並且每個引數的處理方式都不同。該模板用於建立格式一致的影像標題。Caption模板的原始碼幾乎只包含文字格式。

在第二個示例中,使用了Drop模板。它有一個文字引數和多個選項,此處不需要任何選項。

以下是呼叫模板以供使用的程式碼;

{{drop|N}}otice that the template has inserted...

這樣做的結果可以在下面的段落中看到。

N

otice that the template has inserted a drop capital from the single character used as a parameter. This template can be used to start sections within certain body text. Again, the source code for the template Drop is largely text formatting.


第三個示例使用Dropimage模板來製作一個帶有影像的下拉框。該模板有許多選項,但只使用了兩個選項;width選項和align選項。其他選項使用預設值。有兩個引數;頂部標題Press to View和內容,在本例中是影像的維基文字程式碼。透過點選框上的箭頭可以檢視示例中的內容。

以下是呼叫模板的程式碼;

{{dropimage|width=150px|align=center|Press to View|[[image:Flower poster.jpg|600px]]<br>A Flower Poster}}

這樣做的結果是

Press to View

A Flower Poster



該示例的模板包含用於構建框結構的程式碼,而影像程式碼嚴格來說是其引數,即它處理的專案。

雖然對該主題的詳細研究很複雜,但應該清楚的是,使用和製作上面提到的模板對於大多數維基編寫者來說都是輕而易舉的。遺憾的是,編寫者往往只有在作品快完成時才意識到模板的優勢,如果在工作初期就能識別重複的例行工作,就能節省大量時間。只要例行工作經常重複,就需要使用模板。

確實,維基家族中的大多數模板都是由文字段落的格式化或某種方框的製作組成的。考慮到這一點,以下文字將解釋文字、方框和下拉控制元件模板製作的過程。作為準備工作,那些打算製作任何型別的方框模板的人將受益於對錶格的基本瞭解,這些知識可以在頁面Tables的前幾節中快速獲得,那裡也介紹了CSS樣式。

查詢和使用模板

[edit | edit source]

在華夏公益教科書模板名稱空間中已經存在數千個模板。換句話說,模板列表已經很長了。乍一看,這似乎避免了模板製作的必要性,但事情並非如此簡單。

如果知道模板的名稱,就可以輕鬆找到它,但如果不知道名稱,找到與你正在尋找的模板類似的模板可能需要很長時間。模板在其各自的頁面上描述了其功能,但許多頁面沒有包含註釋,因此知道哪些是哪些以及它們的功能,即使找到了,也變得更加困難。

WikipediaWikibooks中製作的模板不可互換,因為它們位於不同的伺服器上。雖然製作它們的程式碼相同,但此描述適用於在華夏公益教科書中查詢內容。

  • 要檢視華夏公益教科書中按字母順序列出的模板列表,請點選連結到所有模板名稱空間的連結。
  • 要查詢按各種模板類別列出的模板,例如,下拉控制元件模板,請點選連結到Category:Templates頁面的連結。
  • 如果知道模板的名稱,則可以使用任何維基頁面上的搜尋框查詢模板頁面。例如,要查詢Dropimage,只需鍵入;
Template:Dropimage

然後回車

找到模板頁面後,可以透過檢視其編輯視窗檢視製作模板的程式碼。許多頁面在其模板程式碼所在的同一個頁面上包含文件,並使用<noinclude></noinclude>標籤將其隔離開來。

如果在搜尋後,你仍然需要製作模板,就像許多人一樣,那麼請繼續閱讀。


放到頁面上

[edit | edit source]

模板在頁面中使用時,需要透過輸入一行維基文字進行呼叫,因此使用者需要知道模板名稱、選項和引數的正確拼寫。即使知道這些資訊,在試用過程中也很容易出現模板錯誤,特別是在試用過程中,因此請考慮使用 沙盒 進行測試。有些模板將所有文件和詳細資訊放在同一個頁面上,這使得它們易於使用。例如,檢視 PlainlistCodebits 模板。

呼叫任何模板在頁面中使用,程式碼需要在雙花括號內輸入。{{}}。花括號內包含模板名稱,然後,如果需要,是選項序列,接著是引數序列。所有條目都用管道符號隔開。(|)。例如,使用具有兩個選項和一個引數的模板的一般形式如下

{{Name|Option1=Value|Option2=value|Parameter1}}


一個典型的使用示例是

{{Plainlist|width=250px|background=LightSalmon|框中的文字在這裡。}}


以上程式碼只有一個引數;預設情況下它編號為1。引數被賦予數字或名稱以在設計程式碼中識別它們,將在後續部分提供示例。示例中的模板呼叫使用的是所謂的未命名引數,因為它前面沒有像1=(編號引數)或content=(典型命名引數)這樣的術語。當模板具有多個引數時,引數編號或名稱有助於使模板清楚地識別哪個引數是哪個。或者,模板可以管理未命名和未編號的引數條目,只要它們按正確的數字順序排列即可。如有疑問,請使用名稱或編號。有時,特別是當引數的第一個字元是符號時,使用命名或編號引數可以避免使用未命名條目導致的損壞。

選項的順序無關緊要,因為所有選項在任何情況下都必須命名。使用命名值只是在選項的之前新增選項的名稱和一個等號。這當然需要了解模板的詳細資訊。

模板名稱對大小寫敏感,除了第一個字母,因此一個有用的約定是始終對模板名稱、引數和選項使用小寫字母;這樣你就永遠不會懷疑。

引數名稱在所有方面都對大小寫非常敏感,因此大寫字母會產生很大影響。一般來說,不要在模板呼叫中混合未命名命名引數,因為程式用來解釋其含義的方法會變得混亂。要麼使用全部未命名,並特別注意其順序,要麼使用全部命名,按照你喜歡的任何順序。

從程式碼中查詢詳細資訊

[編輯 | 編輯原始碼]

假設我們找到了別人製作的模板,但其詳細資訊不清楚。即使對標記語言不太瞭解,通常也可以透過檢查模板的編碼來辨別模板的選項和引數。要了解如何做到這一點,請遵循以下推理。

可以在沙盒中透過輸入特殊程式碼來顯示模板頁面上的編碼和其他內容。這樣做時,模板不會執行任何操作;它只是顯示模板頁面的文字。也就是說,它顯示編碼和任何文件。例如,可以在沙盒中透過輸入以下程式碼來檢視Tocbox模板的程式碼

{{msgnw:tocbox}}

為了讓讀者不必費力地這樣做,下面提供了Tocbox的模板程式碼。

Tocbox 模板的程式碼

{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};" align={{{align|left}}}
| align=center style="font-weight:bold;"|{{{Heading|{{{1}}}}}}
|-
| align=left style="font-weight:normal;"|{{{Content|{{{2}}}}}}
|}
<noinclude>


模板頁面本身對它的使用有很好的描述,但暫時假設描述性材料不存在。模板頁面頂部的程式碼始終是模板原始碼;考慮上面給出的示例。雖然它看起來很複雜,但這裡不是要理解它,而是要從程式碼本身找到選項和引數。

請注意,程式碼的結尾用 <noinclude> 標記標記,以確保任何後續文字不會用作模板的一部分。在本例中,有兩個引數;它們可以被識別為具有以下形式的條目

{{{heading|{{{1}}}}}} 和 {{{content|{{{2}}}}}}


這些條目分別標識了引數。即使沒有太多理解,也很清楚第一個引數是標題文字,第二個引數是內容文字,這些術語以及數字可以用作它們的名稱。如果使用者忘記輸入例如內容的引數,頁面上會顯示一個{{{2}}}作為提示,提醒使用者缺少什麼。

此模板中的所有選項都可透過典型形式識別;

{{{align|left}}}


此摘錄表明存在一個名為align的選項,其預設值為left。預設值的含義是,如果使用者在模板呼叫中沒有使用該選項,則align將使用left值。該選項幾乎可以取任何名稱;事實上,它被賦予了與其相關的HTML 屬性相同的名稱(主程式碼塊中等號之前的部分)。此程式碼中包含多個屬性,但只有兩個屬性被編碼為選項;alignwidth,這兩個選項都具有與上面示例類似的括號格式。

現在已經瞭解了選項和引數,請在頁面上測試模板,如下所示

這是程式碼

{{tocbox|align=center|width=300px|Heading text|Content paragraphs}}

結果是

Heading text
Content paragraphs


現在應該清楚的是,儘管最初沒有模板規範,但仍然能夠從編碼中獲取其使用資訊。


修改模板

[編輯 | 編輯原始碼]

假設我們找到了一個幾乎正確的模板,但並不完全正確。例如,假設唯一的錯誤部分是背景顏色。可以透過新增一個修改其背景顏色的術語來更改此類模板的原始碼。然後,可以將修改後的版本儲存為一個新模板,並使用不同的名稱。請注意,如果將修改後的模板儲存為與以前相同的名稱,則依賴於原始顏色的現有使用者會在其工作中遇到不必要的更改。

還有另一種方法允許新使用者選擇顏色,而現有使用者可以繼續享受其工作顯示的預設顏色。如果將背景屬性設定為選項,並將原始背景顏色設定為其預設值,則可以保留模板的舊名稱。然後,由於舊使用者不會費心指定背景顏色,也許甚至不知道他們現在可以這樣做,他們將獲得與以前一樣的預設顏色,並對此感到滿意。需要不同顏色的新使用者可以在呼叫模板以供使用時簡單地將其指定為選項值。這樣,雙方都會滿意。

修改模板有時與製作新模板的難度相似,此過程將在下面其他部分介紹。對於背景更改情況,一個合適的修改後的 Tocbox 程式碼模組將如下所示。程式碼是

修改後的 Tocbox 模板的程式碼

{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};background:{{{background|#f9f9f9;}}};" align={{{align|left}}}
| align=center style="font-weight:bold;"|{{{Heading|{{{1}}}}}}
|-
| align=left style="font-weight:normal;"|{{{Content|{{{2}}}}}}
|}
<noinclude>


在上面的程式碼中,background 屬性已設定為選項。此外,原始背景顏色#f9f9f9;(淺灰色)已用於預設值。為了強調這一點,如果使用者沒有費心指定背景顏色,他仍然會像以前一樣獲得灰色。請再次注意,新增的選項不必稱為background,而是可以例如稱為bgc或其他名稱。在這種情況下,模板的選項程式碼將類似於background:{{{bgc|#f9f9f9;}}},然後可以使用例如頁面上的bcg=papayawhip來呼叫另一種顏色。

這裡的真實模板Tocbox沒有修改,雖然此示例為執行此操作提供了可靠的演示方法。在上面的修改之後,新使用者可以像下面這樣呼叫模板

{{tocbox|align=center|width=250px|background=papayawhip|Heading|Long text paragraphs}}


瞭解 CSS 屬性值可以使模板的外觀發生很大變化。幸運的是,此主題有很好的文件記錄。請參閱外部W3 站點的CSS 參考列表,以獲取全面列出的值和屬性。雖然參考頁面上的示例是為樣式表設計的,但其中找到的語法也是用於修改模板和其他內聯樣式中的樣式的語法。此外,還可以在 網頁顏色 中找到有用的顏色參考。在下面的製作框部分提供了一個包含許多用於表格的 CSS 屬性的下拉框。如果時間緊迫,可以注意到該專案(即 WikiBooks)中迄今完成的大部分模板工作,只需要使用文字和表格的 CSS 屬性就足夠了。因此,對這兩個領域的學習很有回報。

CSS 參考資源很有用,但也可以使用HTML 屬性更改樣式(例如帶有等號align樣式)。此類屬性可以在 HTML 參考文字(而不是 CSS 文字)以及上面提到的下拉框中看到。可能你會感興趣地知道,一些 HTML 屬性是完成某些任務的唯一方法;例如colspan(跨越表格列)、rowspan(跨越表格行)和align(將表格對齊到中心,這是 CSS float 屬性無法做到的)。


製作模板

[編輯 | 編輯原始碼]

模板有很多型別,但用於插入和修改文字的模板數量最多。接下來是框;無論是資訊框、所謂的使用者框,還是簡單的文字框,它們都具有共同的結構。一些模板具有動態功能,例如下拉控制元件,但一旦基本輪廓清晰,就可以將它們塑造成多種用途。至少將考慮每個型別的示例。

模板製作包括編寫功能程式碼、維基文字或 HTML,有時也會混合使用。方法是在沙盒中測試程式碼,直到功能正常工作。然後可以將選項和引數分配給程式碼。這些選項和引數會再次進行測試,如果一切順利,則可以將程式碼塊儲存為模板。

在儲存模板時,還要檢查是否存在同名模板。儲存模板最簡單的方法如下。首先,確保您已登入 **華夏公益教科書** 頁面,以避免在錯誤的專案中建立模板。轉到華夏公益教科書頁面左側的 *搜尋* 框,輸入要查詢的未建立模板的文字。假設這裡要建立的模板名稱為 **標題**。在搜尋視窗中輸入的行只需

Template:標題


如果找到模板,則表示該名稱已被佔用,需要使用其他名稱。假設未找到該名稱,則搜尋結果視窗將顯示未找到該名稱,並詢問您是否要 *建立* 頁面。單擊連結建立頁面。

該連結將開啟一個模板編輯頁面,其中模板名稱已列為其地址。從沙盒中的工作內容複製程式碼,然後將其貼上到空白模板頁面中。在程式碼塊中最後一行之後的行中,新增標籤 **<noinclude></noinclude>**。所有不打算作為模板程式碼一部分的文字都必須放在這些標籤 *之間*,例如模板的描述。

最後,按頁面底部的 *儲存頁面* 按鈕儲存頁面。模板現在已建立,可以使用其給定的名稱呼叫它。轉到沙盒,測試模板的功能。


文字段落

[編輯 | 編輯原始碼]

模板的程式碼不需要以任何特殊字元或符號開頭。主要考慮因素是程式碼執行所需的操作,就像直接在頁面上輸入程式碼一樣。在程式碼塊的“結尾”,請務必新增上面提到的 **<noinclude></noinclude>** 標籤。

所有可在頁面中使用的現有維基文字和 HTML 程式碼都可用於文字模板。頁面使用者無權訪問與樣式相關的部分,即網頁標題及其樣式表。因此,使用者只能修改可用的頁面部分,即頁面主體內的文字。熟悉網頁設計的人都知道,唯一剩下的可用方法是使用 **行內樣式** 修改頁面的文字。由於維基文字允許在其內部使用 HTML 程式碼,因此可以使用 **<div></div>** 標籤和 **<span></span>** 標籤來實現工作方法。CSS(層疊樣式表)屬性和值用於在這些標籤內修改原本適用的文字樣式。

這裡還需指出 **span** 和 **div** 在文字模板中的使用區別。**Span** 應該只用于格式化文字,請注意,應用於文字的任何格式都不會超出最後一個文字字元;另一方面,**div** 會將其格式應用於跨越頁面的矩形文字塊。這意味著 **div** 更適合在頁面上更改背景顏色。在 類和樣式筆記 的 *類和樣式標籤* 部分可以找到一個比較示例。


最簡單的案例

[編輯 | 編輯原始碼]

在執行任何格式化操作之前,請考慮從簡單的文字塊建立模板的方法。輸入一個文字塊,其中包含所有格式和頁面佈局,然後將該塊儲存為模板。就這麼簡單。此類文字塊可用於測試文字,例如 洛倫茲·伊普森,這是一個眾所周知的虛擬內容文字塊,印刷商和其他人在排版工作時使用它。要使用此類模板,只需輸入

{{lorem ipsum}}

在頁面的任何方便位置生成文字塊。此文字塊未預先格式化硬換行符,因此它將在輸入的位置 *換行*,並使用頁面的 *預設* 文字樣式。


新增樣式

[編輯 | 編輯原始碼]

要 *修改* 文字樣式,例如,對於文字 **這是文字**,我們首先將文字放在 <span></span> 標籤內,如下所示

<span>這是文字</span>

然後我們在第一個標籤 *內部* 構建一個樣式語句。此示例使字型為 *Garamond*,20 點,顏色為紅色。它看起來像這樣

<span style="font-family:Garamond;font-size:20pt;color:red">這是文字</span>

結果將是

這是文字


請注意,第一個標籤仍然有一個關閉箭頭;它位於樣式語句的末尾。

還要注意,語句中有三個樣式規則,用分號分隔;它們是 *font-family:Garamond* 用於設定字型的 *面*,*font-size:20pt* 用於設定字型的 *大小*,以及 *color:red* 用於設定文字的 *顏色*。

樣式語句以術語 *style=* 開頭,語句的右側完全包含在雙引號內。

各個樣式規則由一個 *屬性* 組成;左側部分和一個 *值*;右側部分。這兩個部分由一個冒號 *分隔*。樣式語句的格式是嚴格的。如果格式中存在錯誤,則整個語句都可能失敗。請注意,維基文字 *可以* 用於文字本身;例如,生成斜體(雙引號)或粗體文字(三引號)。維基文字 *除了* CSS 樣式之外還起作用,前提是沒有明顯的衝突。可以使用多個跨度和樣式語句來生成相當複雜的結果。

這些標籤集可以 *巢狀*;也就是說,一個標籤集在另一個標籤集內。請注意巢狀的 **span** 標籤,因為它們可能會產生意外的結果。假設使用 span 標籤對多個段落應用了整體樣式。在這些段落中,使用 *另一個* span 集對其中一個段落進行不同的格式化。當檢視時,在 *內部* span 關閉的地方,樣式將恢復到樣式表中描述的主體文字樣式,而不是預期的外部樣式定義。這可能是因為第一個關閉標籤被錯誤地解釋為結束標籤。可以透過 *對兩者都使用 div 標籤* 或最多 *對其中一種格式使用 span 標籤* 來解決此問題。

許多屬性可以用來修改文字。它們包括樣式表中找到的所有文字樣式,即字型、填充、對齊、邊距、邊框、文字顏色和背景的樣式。**CSS 屬性列表** 以及其他關於 字型和文字 的資料提供了所有此類工作的資訊來源。雖然 CSS 屬性和示例主要針對樣式表,但屬性和值本身 *可以在* 頁面和模板中使用。Study Work 下拉框包含一個有用的程式碼模組,用於學習文字屬性。它包含大多數有用的文字條目,可以複製到 沙盒 中進行學習。

學習工作
此模組包含大多數有用的文字屬性。將其複製到沙盒中,以試驗文字屬性值。
<div style="font-family:lucida handwriting;font-weight:bold;font-style:italic;font-size:12pt;color:blue;background:papayawhip;word-spacing:0pt;letter-spacing:0pt;line-height:1.8em;border:1px solid red;margin:10pt 100pt 10pt 50pt;padding:10pt 20pt 15pt 20pt;text-align:justify;"><center>Text Property Notes</center>

Both PADDING and MARGIN style-rule values use the sequence TOP, RIGHT, BOTTOM, then LEFT, i.e. clockwise starting at the top.

BORDER uses the sequence BORDER-WIDTH, BORDER-STYLE, then BORDER-COLOR for all of the four borders at once.   Other properties can address the four separately.

PADDING is the space around the text.   MARGIN is the space around the text block.   BORDER is the line that surrounds the text and its padding.

The code block contains the common text properties.

Experiment with the settings. </div>



學習工作使用的顏色值


用於 CSS 屬性的顏色值採用以下形式:Background:RGB(255,202,149)



現在,繼續使用 *紅色文字* 示例。雖然可以像這樣將程式碼儲存為模板,但這並不是很有用,因為它只包含固定文字。為了引入 *使用者選擇的可變文字* 的概念,我們需要將程式碼中的文字位置更改為 *引數*。

假設基本程式碼正常工作,則可以新增 *引數* 括號。在上面的文字示例中,只有一個 *引數*,即要格式化的內容。從上面的程式碼開始,只需替換文字部分,使程式碼行現在看起來像這樣

<span style="font-family:Garamond;font-size:20pt;color:red">{{{content|{{{1}}}}}}</span>

請注意,原始文字現在已被替換為

{{{content|{{{1}}}}}}

*數字* 將引數標識為數字 1。它也是引數的 *名稱*。單詞 *content* 只是一個方便的標籤,不過數字或標籤都可以用於 *命名引數*。如果使用者忘記在引數位置寫入任何文字,則頁面上將顯示引數的編號以提醒使用者。如果模板具有 *多個* 引數,則可以使用類似的過程,使用 2、3、4 等數字序列,併為每個引數新增一個合適的標籤來替換 *content*。

以通常的方式儲存它將完成此類模板。假設模板要儲存為名稱 *BigText*,則呼叫它以供使用的條目將只是

{{BigText|1=這是要格式化的文字}}

請注意,當模板具有 *多個* 引數時,使用的引數可以作為 *命名引數* 輸入,使用帶有等號的編號或標籤,也可以作為 *未命名引數* 輸入,透過省略新增的名稱,直接輸入文字。引數應該 *全部未命名* 或 *全部命名*,而不是兩者混合。如果它們是 *未命名* 的,則必須保持正確的順序,如果它們是 *命名* 的,則可以使用 *任何* 順序。編號名稱和標籤名稱 *可以在* 模板呼叫中混合使用,不會有任何困難。

雖然實際上 *任何* 標籤都可以透過在開頭標籤中新增樣式語句來修改,但這並不意味著該工作總是可以製作成模板。在製作此類模板時,至少存在一個例外。**<pre></pre>** 標籤透過其自身的定義會導致模板的引數程式碼被忽略,需要採用不同的方法。與其嘗試製作修改過的預格式化文字模板,不如考慮使用 Prettypre 來製作這些標籤的現成精美版本。

也就是說,可以透過內聯樣式修改<pre></pre>標籤來製作更有趣的預格式化文字,也可以將這些標籤新增到用作模板引數的文字中,但從預格式化標籤包圍的文字建立模板會更困難。


為了完整性,我們還可以向基本的紅色文字模板示例新增選項。假設我們想在工作中不時更改文字的顏色。我們可以為新顏色製作另一個完整的模板,或者只是在文字顏色程式碼中新增一個選項。新程式碼如下所示

<span style="font-family:Garamond;font-size:20pt;color:{{{tint|red}}}">{{{content|{{{1}}}}}}</span>


請注意,整個屬性值(也適用於屬性值)必須用三個花括號括起來。此外,該值應替換為選項名稱/預設值組合。在這種情況下,如果使用者沒有指定文字顏色,則無論如何它都會是紅色。如果指定了(見下文示例),則可以使用模板呼叫中的選項tint=將其更改為任何顏色。假設該模板的名稱為BigText,則用於紫色文字的模板呼叫將是,比如

{{BigText|tint=purple|1=我的紫色文字在這裡}}


其他選項可以以相同的方式建立,並且無論用於模板的標籤是什麼,都可以使用類似的技術。

瞭解不同的標籤並能夠訪問 CSS 屬性列表,可以讓模板設計具有相當大的範圍。


製作框

[編輯 | 編輯原始碼]

以下部分製作了來自 Wikitext 的框或表格模板。它們也可以用相同的方式用 HTML 表格製作。在製作這樣的模板時,Wikitext 就可以了,但當需要一個表格進入模板作為其引數或其引數的一部分時,應該使用 HTML 表格。WikiBooks 文字 製作表格 涉及 HTML 表格結構,並解釋瞭如何使用樣式。假設讀者熟悉以下文字中介紹的這些概念。


框結構

[編輯 | 編輯原始碼]

框本質上是表格,實際上是表格單元格。用於格式化表格的 CSS 屬性列表非常廣泛。簡單的框使用表格容器,以及其中一個或兩個單元格

除了表格容器外,表格的其他結構還包括其單元格。在下面的示例中,有兩行,每行只有一個單元格。表格的每個部分都有影響它的屬性,並且在下面的列表中可以看到典型表格編碼的示例。

{|style="background:lightyellow;width:150px;margin:none;border:1px solid lightgrey" align=left
|-
| style= " text-align: center; padding: 5px 0 0 0"|'''標題'''
|- style="text-align:justify;"
| style="padding:0px 10px 10px 10px;"|內容。
|}


在沙盒中執行此程式碼會生成以下內容

標題
內容。


如有必要,請參考 WikiBooks 文字 製作表格 或維基百科文字 幫助-表格 獲取有關製作表格的詳細說明。還可以參考下面的下拉框,瞭解常用表格屬性及其含義的列表。

CSS 屬性摘要
Wiki 標記表格常用的樣式規則 

兩組不同的樣式規則正在使用;一組與表格中特定元素關聯的 HTML 屬性,以及一組更廣泛使用的級聯樣式表集,即 CSS 屬性。

表格標題單元格中的每一個都可以被視為表格更一般的構建中的單獨元素。在每個屬性與相同級別相同元素的 CSS 屬性表示相同格式的情況下,CSS 屬性優先。

為了快速參考,列出了每組樣式規則的簡短列表,但這些列表絕非完整。在此下拉列表底部提供了一個連結,用於完整 CSS 屬性參考。




表格的 HTML 屬性;使用格式;

attribute1=value1 attribute2=value2 attributeN=valueN

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.



CSS 樣式規則;使用格式;

style="property1:value1; property2:value2; propertyN:valueN;"

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

mix-blend-mode:multiply   mode                       T           blend mode

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.



WIKITEXT 的樣式表示式間距規則


主要避免事項

  • 樣式表示式中不允許換行符。讓軟體進行換行。
  • 冒號或分號前不允許有空格。

這些有餘地

  • 各種表格符號和單詞style之間的空格可以。
  • 任何等號周圍的空格都可以。
  • 樣式規則與其外部括號之間的空格可以。
  • 冒號和分號後的空格可以。
  • 分號可以放置在最後一個樣式規則的面。

此外

  • 像 '2px solid black' 這樣的複合值必須用空格隔開。
  • HTML 屬性必須用空格與 CSS 樣式表示式隔開。
  • HTML 元素行間距允許,但 Wikitext 元素不允許。
  • Wikitext 和 HTML 表格元素可以縮排以提高畫質晰度。
  • 程式碼列表中的長行只有在新增一些空格的情況下才能換行。



組合兩種樣式規則方法

只要它們保持自己的本地格式,就可以將屬性與 CSS 樣式混合使用。也就是說;引號之間沒有等號,引號之外沒有 CSS 規則。請注意,Wiki 單引號程式碼和各種 HTML 標籤仍然可以直接用於文字。下面顯示了混合樣式的示例。

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


內聯樣式的優先順序。

當在相同級別上屬性和樣式之間存在衝突時,樣式將具有優先順序

當樣式表示式中存在兩個相似的屬性時,每個屬性都有不同的值,則將使用第二個值。

當同一表格行中存在兩個完整的樣式表示式時,第二個表示式將被忽略。對於一行中的兩個相似屬性,情況也是如此;第二個屬性被忽略。





請參考 CSS 參考列表 獲取有關屬性和值的更詳細說明。



目前,只需注意以下幾點

  • 表格用以下符號括起來:{| |}
  • 放置在表格上方的標題以|+開頭。
  • 表格內的標題單元格以!開頭。
  • 新行用以下符號建立:|-
  • 行內的資料單元格用以下符號建立:|
  • 樣式語句可以存在於表格、行或單元格級別。
  • 另一個管道符號將單元格的樣式與其文字分開。 |
  • 將表格、行和單元格放在新行上可以避免模板中的許多問題。

請根據此描述中的推理進行程式碼操作。

表格容器具有背景寬度邊距邊框屬性,以及對齊屬性。

  • 背景;設定整個表格的背景顏色。
  • 寬度;設定表格的總寬度。
  • 邊距;刪除表格的邊距。
  • 邊框:在一個屬性中設定表格邊框的粗細、型別和顏色。
  • 對齊:允許將框放置在頁面上的左側右側中央


第一行中的單元格具有文字對齊填充和標題文字形式。

  • 文字對齊;將單元格文字水平放置在中央。
  • 填充;設定框標題文字的第一個單元格內的填充。
  • 標題文字;使用 Wiki 標記加粗。


下一行具有文字對齊。此屬性會將樣式一次性應用於行中的所有單元格,但並非所有屬性都可以執行此操作。

  • 文字對齊;將底部單元格(主要內容)中的文字對齊。


內容單元格具有填充和內容文字。

  • 填充;設定內容文本週圍的間距。
  • 內容文字;是框模板的主要文字。

可以為該文字框指定其他屬性,例如,用於指定要使用的字型的詳細資訊,但本示例中已經足夠了。


引數和選項

[編輯 | 編輯原始碼]

旨在提供三個選項以及兩個引數。選項將是背景寬度對齊。引數名稱將是12,標籤為標題內容

以下程式碼中添加了選項和引數

{|style="background:{{{background|lightyellow}}};width:{{{width|150px}}};margin:none;border:1px solid lightgrey" align={{{align|left}}}
| style= " text-align: center; padding: 5px 0 0 0"|'''{{{Heading|{{{1}}}}}}'''
|- style="text-align:justify;"
| style="padding:0px 10px 10px 10px;"|{{{Content|{{{2}}}}}}
|}


引數已替換標題內容文字。引數一和二的格式為

{{{heading|{{{1}}}}}} 和 {{{content|{{{2}}}}}}


每個引數格式都包含一個引數標籤標題內容)、一個管道符號|,以及引數的真實名稱12)。在每種情況下,引數名稱整個引數表示式都用三個花括號括起來。{{{}}}


選項已為屬性背景寬度對齊建立。格式為 

background:{{{background|lightyellow}}} width:{{{width|150px}}} 和 align={{{align|left}}}


請注意,括號的格式類似於文字模板建立中給出的示例,並且使用相同的嚴格格式來標識選項和引數。

引數也可以使用選項格式。當引數使用此格式時,它必須在模板呼叫中使用命名引數樣式。這種引數的優點是可以擁有任何預設值,包括影像。使用選項格式的引數的缺點是高度醒目的編號提醒將丟失。您將回憶起,更正式的引數樣式為引數提供了一個數字作為預設值。

模板可以以通常的方式儲存。假設模板以Textbox名稱儲存,那麼可以透過鍵入以下內容來呼叫它以供使用

{{textbox|background=lightgrey|width=325px|align=center|Heading text here|Content text here}}

方框的變化很大。透過調整表格結構,可以新增影像和其他效果。維基百科和華夏公益教科書中的大多數資訊方框都是基於表格構建的。


製作下拉控制元件

[edit | edit source]

下拉框節省了頁面空間,可用於文字和影像。在華夏公益教科書中,這些框是動態的,單擊此類框標題上的連結會將其下拉以顯示整個內容部分。再次單擊連結會將其恢復到關閉狀態。

下拉框可以透過兩種方式建立。過去,建立它們的方法是使用類NavFrameNavHeadNavContent。如今,collapsible類可以用於表格和div框,其簡潔性使其成為明顯的選擇。第一部分簡要描述了可摺疊div的佈局。本部分的其餘部分專門用於基於可摺疊表格的版本;這種方法是現成下拉控制元件模板 Dropimage 的基礎。

一個現成的模板存在於一個相當可適應的下拉框中;它是 Dropimage,不過對於那些想要了解細節的人來說,他們可以在 Sorting and Hiding 中找到。

可摺疊方框

[edit | edit source]

下拉框的基本程式碼如下

<div class="collapsible">
<div class="title">Title</div>
<div class="body">
Hideable content
</div>
</div>

上面的程式碼生成一個跨越頁面整個寬度的下拉框。collapsible包含另外兩個部分,title指的是帶有連結的面板,body指的是下拉框本身內的文字框。

預設情況下,當頁面載入時內容是隱藏的;也就是說,頁面首次開啟時,該框處於關閉狀態。要預設顯示內容,使用者需要在類宣告中新增“selected”。CSS 樣式也可以像下面這樣新增,並且模板製作的選項括號和引數括號已顯示,如上一節所述

<div class="collapsible selected" style="color:{{{color|darkgray}}}; width:{{{width|300px}}}; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<div class="title" style="font-weight:{{{bold|bold}}};">{{{Heading|{{{1}}}}}}</div>
<div class="body" style="background-color:{{{background|lightyellow}}};color:{{{color2|black}}}">
{{{Content|{{{2}}}}}}
</div>
</div>

可以透過更改任何部分的樣式來獲得佈局的變化,但首選的方法是使用可摺疊表格,這將在下一節中介紹。

可摺疊表格

[edit | edit source]

(目前正在重寫以更新可摺疊表格) 下面的面板顯示了基於collapsible框類的相當基本的下拉框的HTML和Wikitext程式碼版本。這兩個版本是等效的,但是打算製作模板的使用者應該使用HTML版本,因為它可以將表格作為其內容而不會出現任何不穩定性。在Wikitext中巢狀表格是有問題的。

HTML 可摺疊表格單元格

<table class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px">
 <tr>
   <th style="text-align:center;">Any Heading</th>
 </tr>
 <tr>
   <td>Content cell text, images or HTML tables</td>
 </tr>
</table>


WIKITEXT 可摺疊表格單元格


{| class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px"
 |-
 ! style="text-align:center;" | 任何標題
 |-
 | 內容單元格文字或影像
 |}


如果需要開啟頁面時處於selected狀態而不是collapsed狀態,那麼只需在class="collapsible selected"行中新增類selected即可。預設狀態是collapsed,無需新增。

表格行中的width樣式設定了表格在頁面上的初始寬度,除了未格式化的文字外,表格將在開啟時擴充套件以適應內容。

應避免使用表格的floatalign屬性,因為瀏覽器可能不支援表格對齊。可以透過將表格的初始寬度設定為100%,並將表格包裝在寬度設定為所需寬度的div框中,以與大多數瀏覽器相容的方式對齊表格。對於左對齊和右對齊,請在div框上使用float。對於居中對齊,請在div上使用auto邊距。

HTML 可摺疊表格單元格

<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<table class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px">
 <tr>
   <th style="text-align:center;">Any Heading</th>
 </tr>
 <tr>
   <td>Content cell text, images or HTML tables</td>
 </tr>
</table>
</div>


WIKITEXT 可摺疊表格單元格

<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
{| class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px"
 |-
 ! style="text-align:center;" | Any Heading
 |-
 |  Content cell text or images only
 |}
</div>


引數和選項

[edit | edit source]

引數和選項括號在下面面板中顯示了下拉框模板的HTML版本,並且需要注意的是,該方法類似於之前部分中使用的用於簡單表格的方法。需要注意的是,最外層的表格只是為了允許整個結構居中,因為collapsible類不支援它。


基本下拉框模板編碼

<table style="border:none; align={{{alignT|left}}}">
<tr><td>
<table class="collapsible" style="border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}};"  cellpadding="{{{padding|5px}}}">
 <tr>
   <th style="background:{{{backgroundH|transparent}}};text-align:center;">{{{heading|{{{1}}}}}}</th>
 </tr>
 <tr>
   <td style="text-align:{{{alignC|left}}};"> {{{content|{{{2}}}}}}</td>
 </tr>
</table>
</td></tr>
</table>
<noinclude>
All other template page material goes between these tags.
</noinclude>

上面的HTML程式碼塊已儲存為模板dropthingDropthing,並且可以透過在頁面上鍵入以下內容來呼叫它以供使用

{{dropthing|backgroundT=mistyrose| alignT=center|width=400px| Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


使用此模板呼叫生成的下拉框如下所示

Press to View
山楂花開.



對於有需要的人,還存在一個名為 Dropimage 的更復雜的現成模板。它有一組很大的單個選項,以及新增更多屬性和類的功能,其編碼將在下面介紹。

高階選項

[edit | edit source]

雖然使用者總是受到原始模板設計的限制,但預先計劃的選項提供了一些自由度。然而,有一種方法允許使用者新增在原始設計中未考慮的類和 CSS 屬性。為了使這種方法起作用,模板的設計者必須預料到未來可能需要進行這種更改,並新增一些額外的按鍵操作。下面將進行說明。

也許令人驚訝的是,classstyle宣告本身都是HTML屬性,與aligncellpadding和其他屬性相同。因此,這些術語可以像其他選項一樣指定,具有類和樣式的預設值。然後,使用者可以指定他希望模板使用的樣式或類的列表,或者不做任何操作,每個選項的預設值將適用。顯然,如果將現有模板的常用值設定為這些預設值,則可以進行更改而不會影響原始使用者。下面的示例允許使用類selected用於原始作者僅使用名為collapsible的類的模板。


新增類

[edit | edit source]

為了允許使用者更改上述下拉表格模板的類,需要修改類宣告(表示式)行,如下所示

class="{{{class|collapsible}}}"


這會建立一個名為class的新選項,其預設值為collapsible;也就是說,如果使用者沒有編寫class選項,則將應用預設值。現在,修改了類聲明後,使用者可以新增類selected或任何其他合適的類,他對此很熟悉(而其他人仍然正常使用該模板),如下所示

{{dropthing|backgroundT=mistyrose|class=collapsible selected| alignT=center|width=200px| Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


以這種方式生成的框只是

Press to View
山楂花開.


該模板僅對於此框將以開啟狀態顯示,因為已新增類selected作為選項。請注意,需要宣告所有目標類,並且不需要使用引號。此條目完全替換了預設類宣告。類似地,可以使用其他類,儘管用於自動格式化表格的類集需要擴充套件一些。

更多樣式選項

[edit | edit source]

要修改模板以新增使用者編寫的樣式表示式,模板中表格行中的現有樣式表示式將被替換,如下所示

style="{{{mystyleT|border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}} }}}"


請注意,現在整個 CSS 樣式表示式(但不是後面的屬性)都是mystyleT 選項的預設值。當在模板呼叫中使用此選項時,值表示式的引號不應使用。

典型的模板呼叫,引入新屬性可能如下所示

{{dropthing|myclass=collapsible| alignT=center|mystyleT=border:3px solid brown; width:300px; background:mistyrose;color:darkgreen; font-weight:bold|Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}


而使用此模板呼叫所得到的結果只是

Press to View
山楂花開.

其他文字可以放在這裡...



注意,預期的新樣式語句必須完整重寫,並且現在在選項語句中添加了一個原始設計中未包含的新 CSS 屬性(文字顏色)。

如果未使用 mystyleT 選項,則仍然可以使用各個選項。如果同時更改表示式和各個值,最好研究一下其中一個是否會覆蓋另一個的可能性。

模板 Dropimage 已經修改為包含使用者對類和樣式的修改。

以上各節中給出的三種示例型別有望讓讀者瞭解模板的製作。請記住,這裡沒有討論模板的許多方面;例如,條件行為、迴圈和自身作為模板執行的預設值的概念。有關模板的更多資訊,請參閱下面的連結。

最重要的是,學習如何在製作模板時使用 CSS 樣式,並嘗試其效果。

另請參閱

[編輯 | 編輯原始碼]
華夏公益教科書