跳轉至內容

編輯維基文字/製作模板 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



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

雖然對本主題的詳細研究很複雜,但應該清楚的是,使用和製作上面提到的模板是大多數維基作者都能做到的。可悲的是,作者往往只有在工作快完成時才會意識到模板的優勢,而早期的工作中的一點努力,識別重複的例行程式,可以節省很多時間。每當例行程式重複多次時,就需要使用模板。

確實可以說,維基家族專案中的大多數模板要麼是文字段落的格式化,要麼是建立某種方框。考慮到這一點,以下文字解釋了文字、方框和下拉控制元件的模板製作過程。作為準備,打算建立任何型別的方框模板的人將受益於對錶格的基本瞭解,並且可以在頁面表格的前幾節中快速獲得此知識,該頁面還介紹了 CSS 樣式。

查詢和使用模板

[編輯 | 編輯原始碼]

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

如果知道模板的名稱,那麼很容易找到它,但如果不知道名稱,則可能需要很長時間才能找到與您要查詢的模板類似的模板。模板在它們自己的頁面上描述了它們的功能,但許多模板沒有包含註釋,因此瞭解哪些模板是哪些,以及它們的作用(即使找到它們)變得更加困難。

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

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

然後回車

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

如果在搜尋後,您仍然需要製作模板(毫無疑問很多人都會這樣做),那麼請繼續閱讀。


將它放到頁面上

[編輯 | 編輯原始碼]

透過在頁面中鍵入一行維基文字,來呼叫模板以供頁面使用,因此使用者需要知道模板名稱、選項和引數的正確拼寫。即使知道這些,也很容易在頁面中出現模板錯誤,尤其是在試驗期間,因此請考慮使用沙盒進行測試。一些模板在同一頁面上具有所有文件和詳細資訊,這使得它們易於使用。請檢視模板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。此預設值的意義是,如果使用者在模板呼叫中未使用該選項,則將使用left值作為align的值。該選項幾乎可以具有任何名稱;實際上,它被賦予了與之關聯的HTML 屬性相同的名稱(主程式碼塊中等號之前的部分)。此程式碼中有幾個屬性,但只有兩個屬性被編碼為選項;alignwidth,並且這兩個選項都具有與上述示例類似的括號格式。

現在已經瞭解了選項和引數,請按照以下步驟在頁面上測試模板

這是程式碼

{{tocbox|align=center|width=300px|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 屬性無法實現的)。


製作模板

[編輯 | 編輯原始碼]

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

製作模板包括編寫功能性程式碼,Wikitext 或 HTML,有時也混合使用兩者。該方法是在沙盒中測試程式碼,直到功能正常執行。然後,可以將選項和引數分配給程式碼。再次對其進行測試,如果一切正常,則可以將程式碼塊儲存為模板。

在儲存模板時,還需要檢查是否存在具有相同名稱的現有模板。儲存模板的最簡單方法如下:首先,確保您已在WikiBooks頁面登入,以避免在錯誤的專案中建立模板。轉到 WikiBooks 頁面左側的搜尋框,並輸入要查詢的尚未建立的模板的字詞。假設這裡要建立的名稱為Caption。在搜尋視窗中輸入的行只是

Template:Caption


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

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

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


文字段落

[編輯 | 編輯原始碼]

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

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

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


最簡單的案例

[編輯 | 編輯原始碼]

在進行任何格式化之前,請考慮如何從一個簡單的文字塊建立模板。鍵入一個文字塊,其中包含所有格式和頁面佈局,然後將該塊儲存為模板。就這麼簡單。這類文字塊常用於測試文字,例如Lorem Ipsum,這是一個眾所周知的虛構內容文字塊,印表機和其他人在排版工作時使用。要使用這種模板,只需鍵入

{{lorem ipsum}}

在頁面上的任何方便位置,即可生成文字塊。該文字塊沒有預先格式化的硬換行,因此它將在鍵入的位置內換行,並使用頁面的預設文字樣式。


新增樣式

[編輯 | 編輯原始碼]

修改文字樣式,例如,對於文字This is the text,我們首先將文字放在<span></span>標籤中,如下所示

<span>This is the text</span>

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

<span style="font-family:Garamond;font-size:20pt;color:red">This is the text</span>

結果將是

This is the text


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

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

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

每個樣式規則都包含一個屬性;左側部分,和一個;右側部分。這兩部分由一個冒號分隔。樣式語句的格式非常嚴格。如果格式中存在錯誤,則整個語句可能會失敗。請注意,Wikitext可以在文字本身中使用;例如,用於生成斜體(雙引號)或粗體文字(三引號)。Wikitext 補充CSS 樣式,前提是沒有明顯的衝突。可以應用多個跨度和樣式語句來產生相當複雜的結果。

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

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

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>



用於 Study Work 的顏色值


用於接收 Background:RGB(255,202,149) 等形式的 CSS 屬性的顏色值。



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

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

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

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

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

數字將引數標識為第一號。它也是引數的名稱content這個詞只是一個方便的標籤,雖然數字或標籤都可以用於命名引數。如果使用者忘記在引數位置寫入任何文字,那麼引數的編號將出現在頁面上以提醒使用者。如果模板有多個引數,可以應用類似的過程,用數字序列 2、3、4 等,並在每個引數位置新增一個合適的標籤來代替content

以通常的方式儲存它,就完成了這樣的模板。假設模板要以BigText 的名稱儲存,那麼呼叫它以供使用的條目就只是

{{BigText|1=This is the text to format}}

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

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

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


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

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


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

{{BigText|tint=purple|1=My purple text goes here}}


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

瞭解不同的標籤並訪問 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"|'''Heading'''
|- style="text-align:justify;"
| style="padding:0px 10px 10px 10px;"|Content.
|}


在沙盒中執行此程式碼會產生以下結果

Heading
Content.


如有必要,請參閱 WikiBooks 文字 製作表格 或 Wikipedia 文字 幫助-表格,以獲取有關製作表格的詳細建議。另請參閱下面的下拉框,以獲取常用表格屬性及其含義的列表。

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 表格元素 *可以* 縮排。
  • 程式碼 LISTINGS 中的長行 *只有* 在添加了一些空格的情況下才能換行。



將兩種樣式規則方法結合起來

可以將屬性與 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}}} and align={{{align|left}}}


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

引數也可以使用選項格式。當引數這樣做時,它必須在模板呼叫中使用命名引數樣式。這種引數的優點是可以具有任何預設值,包括影像。將選項格式用於引數的缺點是會丟失非常明顯的編號提醒。您會記得,更正式的引數樣式將引數編號作為預設值。

可以按通常方式儲存模板。假設模板儲存為Textbox,那麼可以透過鍵入以下內容來呼叫它

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

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


建立下拉控制元件

[編輯 | 編輯原始碼]

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

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

存在一個適用於非常靈活的下拉框的現成模板;它就是 Dropimage,但對於那些想要了解詳細資訊的人來說,他們可以在 排序和隱藏 中找到這些詳細資訊。

可摺疊框

[編輯 | 編輯原始碼]

下拉框的基本程式碼如下

<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>

透過更改任何部分的樣式可以獲得佈局變化,但是首選方法是使用可摺疊表格,下一節將對此進行說明。

可摺疊表格

[編輯 | 編輯原始碼]

(目前正在重寫以更新可摺疊表格)下面面板顯示了基於collapsible框類的相當基本的下拉框的 HTML 和 Wikitext 程式碼版本。這兩個版本是等效的,但打算建立模板的使用者應使用 HTML 版本,因為 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,如行class="collapsible selected"中所示。預設狀態為摺疊,不需要新增。

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

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

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>


引數和選項

[編輯 | 編輯原始碼]

下面面板中顯示了下拉框模板的 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 的模板。它包含大量獨立選項,以及新增更多屬性和類的功能,其編碼將在後面介紹。

高階選項

[編輯 | 編輯原始碼]

雖然使用者始終受限於原始模板的設計,但他們可以在預先計劃的選項範圍內進行一些調整。但是,有一種方法允許使用者新增原始設計中未考慮的類和 CSS 屬性。為了使這種方法起作用,模板的設計者必須預料到將來可能需要進行此類更改,並新增一些額外的擊鍵。具體解釋如下。

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


新增類

[編輯 | 編輯原始碼]

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

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


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

{{dropthing|backgroundT=mistyrose|class=collapsible selected| alignT=center|width=200px| 點選檢視|[[image:Cerasus blossom.jpg|400px|thumb|center|''山楂花開''.]] }}


以這種方式生成的框只是

Press to View
山楂花開.


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

更多樣式選項

[編輯 | 編輯原始碼]

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

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 樣式,並嘗試它們的各種效果。

另請參閱

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