跳轉到內容

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

來自華夏公益教科書,開放世界的開放書籍

簡介


本章節應該被視為關於製作維基模板的入門文字,本節的第一部分對模板的功能進行了概述。首先,讓我們瞭解一些基本術語

  • 模板只是儲存的文字塊,並被賦予了名稱。有些是普通的文字段落,有些包含維基文字以建立標題、縮排、表格等。在簡單情況下,透過在作品中輸入模板名稱,整個文字塊就會被新增到頁面中,包括所有格式和其他部分,就好像是由使用者自己輸入的一樣。這種行為可以在使用者想要的任何地方重複,並且幾乎可以在維基頁面上找到的任何作品都可以放在模板中來實現。正如您可能猜到的,主要的工作量在於模板的初始設計。
  • 模板的名稱是在它們第一次儲存時分配的。名稱必須是唯一的,並且在呼叫模板以供使用時使用。有時,除了名稱之外,還會使用其他文字;它可以包含任何選項和引數。
  • 選項允許使用者改變模板的預設行為。預設行為適合大多數情況,但設計者內建了更改事物的方式以防萬一。選項值通常限制在較短的列表中,因此這些將在模板的文件中進行描述。例如,名為align的選項的選項值可能只包含left、right或center,而沒有其他選項。模板並不總是需要選項,因為它們的預設行為通常就足夠了。
  • 預設值是使用者沒有指定時模板使用的值。預設值在設計中指定,它們可以應用於格式或使用者文字輸入。例如,在上面的對齊示例中,如果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 樣式的介紹。

查詢和使用模板

[編輯 | 編輯原始碼]

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

如果知道模板的名稱,那麼就可以很容易地找到它,但如果不知道名稱,找到與您要查詢的模板相似的模板可能需要很長時間。模板在其自己的頁面上描述了其功能,但許多模板沒有包含說明,因此知道哪個是哪個,以及即使找到它們它們的功能,任務就變得更加困難了。

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

  • 要檢視華夏公益教科書中按字母順序排列的模板列表,請點選 所有模板名稱空間 的連結。
  • 要查詢按各種模板類別排列的模板,例如下拉控制元件模板,請點選 類別:模板 頁面上的連結。
  • 如果您知道模板的名稱,則可以使用任何維基頁面上的搜尋框找到模板頁面。例如,要查詢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|標題文字|內容段落}}

結果是

標題文字
內容段落


現在應該清楚的是,儘管一開始沒有對模板進行任何規範,但還是可以從程式碼中獲取其使用方法的資訊。


修改模板

[編輯 | 編輯原始碼]

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

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

修改模板有時與製作新的模板一樣困難,這個過程將在下面的其他部分中介紹。對於背景更改情況,一個合適的修改後的 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|標題|長的文字段落}}


瞭解 CSS 屬性值可以讓模板的外觀發生很大變化。幸運的是,這個主題有很好的文件記錄。請參閱外部W3網站的CSS 參考列表,其中列出了所有值和屬性。儘管參考頁面上的示例是為樣式表設計的,但其中找到的語法也是在模板和其他內聯樣式中修改樣式時使用的語法。此外,您還可以在 網路顏色 中找到有用的顏色參考。在下面的框製作部分提供了一個包含表格的大多數 CSS 屬性的下拉框。如果時間緊迫,可以注意到到目前為止在這個專案(即 WikiBooks)中完成的大部分模板工作,可以使用比 CSS 屬性的文字和表格屬性多不了多少的東西完成。因此,對這兩個領域的學習非常有益。

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


製作模板

[編輯 | 編輯原始碼]

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

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

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

Template:Caption


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

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

最後,透過點選頁面底部的儲存頁面按鈕儲存頁面。模板現在已經建立,可以使用其給定的名稱呼叫。


文字段落

[edit | edit source]

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

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

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


最簡單的例子

[edit | edit source]

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

{{lorem ipsum}}

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


新增樣式

[edit | edit source]

修改文字樣式,例如文字這是文字,首先將文字放在<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標籤,因為可能會出現意外結果。假設使用跨度標籤對多個段落應用整體樣式。在這些段落中,使用另一個跨度集以不同的方式格式化其中一個段落。當檢視此內容時,在內部跨度關閉的地方,樣式將恢復到樣式表中描述的主體文字樣式,而不是預期的外部樣式定義。這可能是因為第一個關閉標籤被錯誤地解釋為結束標籤。這個問題可以透過對兩者都使用 div 標籤避免,或者最多透過僅對其中一種格式使用 span 標籤避免

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

學習工作
此模組包含大多數有用的文字屬性。將其複製到沙盒中,以試驗文字屬性值。
<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)



引數

[edit | edit source]

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

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

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

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

{{{content|{{{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 規則。請注意,維基撇號程式碼和各種 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}}

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


製作下拉控制元件

[編輯 | 編輯原始碼]

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

下拉框可以透過兩種方式建立。 過去,製作它們的方法是使用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 版本,因為它可以將表格作為其內容而不會有任何不穩定性。 在 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;" | 任何標題
 |-
 | 內容單元格文字或僅影像
 |}


如果需要在開啟頁面時使用collapsed狀態而不是selected狀態,則只需新增類selected,如行class="collapsible selected" 所示。 預設狀態是collapsed,不需要新增。

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

應避免使用floatalign屬性,因為瀏覽器可能不支援表格對齊。 可以透過將表格的初始寬度設定為 100%,並將表格包裝在寬度設定為所需寬度的 div 框中來以與大多數瀏覽器相容的方式對齊表格。 對於左對齊和右對齊,請在 div 框上使用 float。 對於居中對齊,請在 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 樣式,並嘗試其效果。

另請參閱

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