Wiki樣式基本介紹

WikiStyles允許作者修改頁面內容(如文字)的顏色或其它屬性。Wikistyle使用百分比符號所寫成,例如%red%或者是%bgcolor=lightblue%

Wiki樣式和CSS樣式的比較

Wiki樣式(WikiStyles)是專門用在撰寫Wiki頁面,而和CSS並不完全相同。Wiki樣式讓作者們可以使用管理者所定義好的CSS樣式。並且可以自行定義不同的CSS樣式組合。而不用更動網路主機中的CSS定義資料。

要注意的地方是,雖然PmWiki允許作者們在表格以及區塊中使用進階的 class= style= 。但是以上兩者其實是HTML語法,而不是Wiki樣式。所以要使用上述的進階用法,您必須具有CSS的相關知識。

字體及文字顏色

最基本的wikistyles為改變文字屬性,例如文字顏色、背景顏色以及字型。PmWiki 定義了數種改變文字顏色的方法,例如:%black%, %white%, %red%, %yellow%, %blue%, %gray%, %silver%, %maroon%, %green%, %navy%, and %purple%。

籃子裡有%red%蘋果,%blue%藍苺,%purple%茄子,%green%來姆果
,%%以及其它水果。

籃子裡有蘋果,藍苺,茄子,來姆果 ,以及其它水果。

對於未定義名稱的顏色,必須使用%color=...%這樣的格式。(註:為避免與WikiWord混淆,RGB顏色(#rrggbb)定義務必使用小寫字母。)

我也想來點%color=#ff7f00%椪柑%%!

我也想來點椪柑

使用%bgcolor=...%來設定背景顏色:

這個句子有%bgcolor=green yellow%綠底黄字的設定。

這個句子有綠底黄字的設定。

請參見 WikiStyle Colors 獲得關於更多有關文字顏色設定的方法。

文字對齊(Text justification)

Wiki樣式也可以用於文字對齊的設定

%center%此文字被置中 

%right% 靠右對齊

此文字被置中

靠右對齊

Wiki樣式也可用於建立浮動文字(floating text)

%rfloat% 此文字為向右的浮動文字

%rframe% 此文字在框架內會向右浮動

框架外的文字

此文字為向右的浮動文字

此文字在框架內會向右浮動

框架外的文字

作用範圍

Wikistyles可以設定套用的範圍;倘若不設定範圍,則樣式會一直生效,直到下一個樣式定義,或者到達段落結尾。使用時在樣式定義前加上範圍修飾字即可。例如套用到整個段落(%p ...%)、整份清單(%list ...%)、清單項目(%item ...%)以及任何的區塊(%block ...%)。下表的「apply=」後面加上不同的語法,即可套用到不同的範圍:

應用語法縮寫應用範圍
%apply=img ...%-以下所有的圖片
%apply=p ...%%p ...%僅此段落
%apply=pre ...%-此預先格式化內容(preformatted text)
%apply=list ...%%list ...%僅此清單
%apply=item ...%%item ...%僅此清單項目
%apply=div ...%-僅此div
%apply=block ...%%block ...%僅此區塊(block),不論為段落、清單、標題或division

然而,%p color=blue%%apply=p color=blue%的效用是一樣的;另外,%list ROMAN%%apply=list list-style=upper-roman%的效用也是一樣的。

某些predefined style shortcuts也可以被使用,例如%right%便是%text-align=right apply=block%的縮寫。

%p bgcolor=#ffeeee%段落最前面的樣式定義會套用在整個段落內容上,即使裡頭又定義了%blue%其它的樣式%%。

段落最前面的樣式定義會套用在整個段落內容上,即使裡頭又定義了其它的樣式

>>Wiki樣式<<區塊能將樣式套用到自定範圍的頁面內容中。樣式區塊會一直作用直到下一個>><<

>>blue font-style=italic bgcolor=#ffffcc<<
上一行後所有內容的樣式皆為藍色斜體字,

包括了
    預先格式化文字
* 清單
-> 縮排物件
>><<

上一行後所有內容的樣式皆為藍色斜體字,

包括了

    預先格式化文字
  • 清單
縮排物件

Wikistyle 同等語法:

在其他的語言中,和wikistytle具有同等效力的語法如下:

    ------------ CSS -------------          --HTML--
    color               bgcolor             class 
    background-color    margin              id
    text-align          padding             hspace
    text-decoration     border              vspace
    font-size           float               target
    font-family         list-style          rel
    font-weight         width*              accesskey
    font-style          height*             value

    Special: define, apply

前兩欄的同等語法來自於 階層式樣式表(cascading style sheet) (CSS) 同名稱語法的所有特性。而最後一欄的同等語法只適用於特定項目

  • class= and id= assign a CSS class or identifier to an HTML element
  • target=name opens links that follow in a browser window called "name"
  • rel=name in a link identifies the relationship of a target page
  • accesskey=x uses 'x' as a shortcut key for the link that follows
  • value=9 sets the number of the current ordered list item

自訂的樣式與其語法

define=屬性可用來為任何wiki樣式定義一個語法。之後的文章使用這個語法,即可重覆利用這個樣式定義。

例如下面,我們定義一個為box的樣式語法:

%define=box block bgcolor=#ddddff border="2px dotted blue"%

%box% [@
$ 回聲 "Hello world"
Hello World
$ 離開
@]

%box font-weight=bold color=green% [@
$ 回聲 "I said, HELLO"
@]
$ 回聲 "Hello world"
Hello World
$ 離開
$ 回聲 "I said, HELLO"

小技巧︰將常用的樣式語法集中放在Group Header?頁面中,以便群組裡頭所有的頁面都能利用這些縮寫。系統管理員可以在local customization?先定義一些套用於整個系統的樣式縮寫(詳見CustomWikiStyles?)。

小技巧︰樣式縮寫應命名成有意義的字詞,而不是直接用顏色名字。比如說如果警告訊息要用綠色字,則設定縮寫為%define=warn green%,並使用%warn%來套用警告樣式,而非使用%green%。之後若決定變換警告樣式,則只要修改%define=warn green%,所有%warn%就會跟著變換。這樣比起一個一個換掉%green%來得容易多了。

預設的樣式語法

PmWiki預先設定了一些樣式語法

  • 文字顏色:black, white, red, yellow, blue, gray, silver, maroon, green, navy,purple (於%color=...%使用)
  • 對齊:%center%%right%
  • 圖片與格子(Images and boxes)
    • 向右浮動、向左浮動:%rfloat%%lfloat%
    • 圖框: %frame%, %rframe%, 和 %lframe%
    • 縮圖大小:%thumb%
  • 在新視窗開啟連結:%newwin%(予%target=_blank%使用)
  • 註釋:%comment%(予%display=none%使用)
  • 有序清單:%decimal%, %roman%, %ROMAN%, %alpha%, %ALPHA%(請參照Cookbook:OutlineLists)

使用範例

WikiStyleExamples?頁面有許多wiki樣式的使用範例。

已知問題

  • 在樣式定義中,百分比符號(%)無法正確作用(例如:%block width=50% %

<< Table directives? | DocumentationIndex | Wiki style examples? >>