Wiki样式

Wiki样式介绍

Wiki样式可以让作者通过类似%red%%bgcolor=lightblue%的方式定义页面内容的字体、颜色、背景色等属性。和CSS是表现、HTML是内容并不矛盾。

Wiki样式与CSS样式

Wiki样式是为了让作者编写页面时,无需动用修改CSS就可以达到部分Wiki管理员预设的部分Wiki样式效果。

另外,虽然PmWiki允许作者通过使用 class= style= 的方式定义表格或DIV区块颜色,但他们是HTML语法,而非Wiki样式。如果要这么做,可能需要对CSS相关知识有一定了解。

文本颜色和字体

Wiki样式最基本的功能就是改变文字的颜色、背景色、字体等属性。 PmWiki定义的基本Wiki样式是:%black%, %white%, %red%, %yellow%, %blue%, %gray%, %silver%, %maroon%, %green%, %navy%, 和 %purple%(英文代表具体颜色)。下面是示例:

篮子中有 %red% 红色的苹果, %blue% 蓝莓, %purple% 紫色的茄子, %green% 绿色的黄瓜%%等瓜果蔬菜。

篮子中有 红色的苹果, 蓝莓, 紫色的茄子, 绿色的黄瓜等瓜果蔬菜。

对于未预先定义的颜色,需要使用%color=...%的方式。另外,为了避免WikiWord混淆,RGB 颜色(#rrggbb) 必须使用小写字母。例如:

麻烦也给我一个 %color=#ff7f00% (橘色的)橘子%%。

麻烦也给我一个 (橘色的)橘子

要改变文字背景色,可以使用%bgcolor=...%,例如:

下面我要讲两句话。 %bgcolor=green yellow% 这句是绿色的背景黄色的字(绿底黄字),完了。

下面我要讲两句话。 这句是绿色的背景黄色的字(绿底黄字),完了。

更多关于:Wiki样式颜色的内容。

文字对齐方式

Wiki样式可以设置文字的对齐方式,例如:

%center% 这句是居中文本。 

%right% 这句将会右对齐。

这句是居中文本。

这句将会右对齐。

也可以建立浮动文本,例如:

%rfloat% 这句会飘呀飘的飘到右边。

%rframe% 在框架内向右浮动。

这是一段用来演示的文本占位符,从前有座山,山里有座你懂的。

这句会飘呀飘的飘到右边。

在框架内向右浮动。

这是一段用来演示的文本占位符,从前有座山,山里有座你懂的。

作用范围

Wiki样式也可以指定作用范围。如果没有指定作用范围,Wiki样式会一直应用到本段结尾或下一个样式之前的所有内容。 通过apply= 属性可以自定义Wiki样式的应用范围。下面是允许的指定范围

设置语法缩写样式应用范围
%apply=img ...%-以下所有图片,直到有新的样式设置
%apply=p ...%%p ...%当前段落
%apply=pre ...%-当前Pre(预格式化文本)段
%apply=list ...%%list ...%当前列表
%apply=item ...%%item ...%当前列表条目
%apply=div ...%-当前Div
%apply=block ...%%block ...%当前块级元素,可以是一段、一个列表、一个列表项目、一个标题或一个Div块。

因此, %p color=blue%%apply=p color=blue%%list ROMAN%%apply=list list-style=upper-roman%效果是一样的。

一些已定义的样式也可以被使用,因此 %right%等于 %text-align=right apply=block%的缩写。

示例:应用一个Wiki样式到整段:

%p bgcolor=#ffeeee% 前面的这个背景色样式应用将作用于整个段落,即使后面设置了%blue%这里是蓝色 %% 的样式。一样不影响第一个定义背景色为当前段(P)的背景色。

前面的这个背景色样式应用将作用于整个段落,即使后面设置了这里是蓝色 的样式。一样不影响第一个定义背景色为当前段(P)的背景色。

注意: 你需要定义一个作用范围,必须让设置的样式在作用范围的开始处,例如你将样式像“%apply=p ...% ”这样应用到当前段落,必须要让样式写在段落开头,下面是几个实例解释:

这是当前段落的第一句。
我是试图应用 %apply=p color=blue% 来改变颜色。
因为这不是第一段的第一行开始部分,所以它无法使用。

这是当前段落的第一句。 我是试图应用 来改变颜色。 因为这不是第一段的第一行开始部分,所以它无法使用。

在当前段的第一句应用%apply=p color=red%后
''将会''生效,变为红色的字体。
因为那是本段的第一句。

在当前段的第一句应用后 将会生效,变为红色的字体。 因为那是本段的第一句。

* 这是一个列表
* %list red% 列表样式不能从第二列开始!
  • 这是一个列表
  • 列表样式不能从第二列开始!

大范围的应用

通过这样的>>WikiStyle<< Wiki样式模块,可以在一些大范围项目中,直到使用>><< 来闭合结束样式。

>>blue font-style:italic bgcolor=#ffffcc<<
上面一行的Wiki样式,将应用在这一大块内容中。

包括
    预先格式化的Pre段 %red%打酱油的红色文本%%
* 列表
-> 列表内容
>><<

上面一行的Wiki样式,将应用在这一大块内容中。

包括

    预先格式化的Pre段 打酱油的红色文本
  • 列表
列表内容

注意, 像(:div style="..." class="...":) 的命令只能应用于正规的HTML样式规则和class属性。

使用HTML "class" 和"style"来制作高级表格

Wiki样式仅使用%...%(百分号)。

表格, 表格命令 和(:div:)块可以让有经验的作者通过 class= style=来使用HTML/CSS的一些属性。 值得注意的是,这些属性并不是Wiki样式,而是HTML/CSS语言。

(:table style="font-style:italic; color:green; border:1px solid blue; background-color:#ffffcc":)
(:cellnr:)
上面一行,定义了文本为绿色的斜体字,

这包括了
    预先Pre格式化的文本
* 列表
-> 包括列表项目
(:tableend:)

上面一行,定义了文本为绿色的斜体字,

这包括了

    预先Pre格式化的文本
  • 列表
包括列表项目

如上所述,(:div style="..." class="...":) 并不是>>Wiki样式<<,它仅能包含HTML风格和class属性。

自定义Wiki样式

这个define=属性可以用了为任何Wiki样式定义一个语法,并且它可以在Wiki样式中复合、重复使用。下面将演示定义一个“盒模型”(HTML、css)的样式语法:

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

%box% [@这是定义过盒模型语法后的内容样式@]

%box font-weight=bold color=green% [@这句,我对定义过的Box进行了复合使用@]

这是定义过盒模型语法后的内容样式

这句,我对定义过的Box进行了复合使用

小技巧: 将常用的语法样式放在组头 以便这个组的所有页面都可以重复利用。另外Wiki管理员可以通过local customization来预设一些常用样式。 (详见:自定义Wiki样式)。
小技巧:预先定义的Wiki样式名应该和实际意义有关,而不是用颜色来命名。例如我们要应用一个绿色的警告框,可以起名为%define=warn green%然后使用 %warn% 来套用 %green%。未来我们要改变这个%define=warn green%就可以了,而不用一个一个在单独修改{@@]。
小技巧: 任何为定义的Wiki样式都将自动当作一个class类处理,因此%pre%将会等于%class=pre%

预设样式

PmWiki已经预设了部分Wiki样式:

  • 文本颜色: black, white, red, yellow, blue, gray, silver, maroon, green, navy, purple (shortcut for %color=...%)
  • 对齐方式: %center% and %right%
  • 图片和模型
    • Floating left or right: %rfloat% and %lfloat%
    • Framed items: %frame%, %rframe%, and %lframe%
    • 缩略图尺寸: %thumb%
  • 在新窗口中打开链接: %newwin% (类似 %target=_blank%)
  • 注释(注释中的内容不会被编译): %comment% (类似 %display=none%)
  • 有序列表: %decimal%, %roman%, %ROMAN%, %alpha%, %ALPHA% (see also Cookbook:OutlineLists)

Wiki样式属性对照表

在CSS和HTML中,和Wiki样式有同样功能的属性对照表:

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

    Special: define, apply

前两栏是cascading style sheet (CSS) 样式属性。最后一栏语法只适用于特定项目。

  • class=id=给HTML元素(class或ID)指定一个CSS样式。
  • target=name 打开一个被浏览器称为"name"的链接。
  • rel=name 指定当前文档与被链接文档的关系。
  • accesskey=x 给这个链接指定为'x'的快捷键。
  • value=9 规定列表项目的数字。接下来的列表项目会从该数字开始进行升序排列。
* 上面的宽(width)和高(height)属性加星号是因为他们属于用来处理<img .../> 标签。如果使用他们( 不加任何"apply="的Wiki样式), 可以设置<img ... />标签的 'width=' 和'height='属性。或者通过Wiki样式的'width:' 和'height:'属性来设置。

应用样式

上面演示的样式需要管理员通过在“local/config.php”配置开启。 例如要开启"line-height" 样式需要添加如下内容:

$WikiStyleCSS[] = 'line-height';

到local/config.php配置文件中。

定义其它的HTML元素

你可以通过$WikiStyleApply来为Wiki样式添加一些额外的HTML元素为。

要增加一个页面锚点标签,请在“config.php”配置文件中输入:

$WikiStyleApply['link'] = 'a';

这样你就可以像下面那样,为class样式增加锚点:

%apply=link red%[[PmWiki.WikiStyles | test link]]

test link

要一个ID属性到表格的“TR”中,请在在config.php中添加如下内容:

$WikiStyleApply['row'] = 'tr';

然后你就可以像下面这样使用一个看上去很高级的表格了。示例:

(:cellnr:) %apply=row id=myid bgcolor=pink% cell content

也可以使用这种简单点的表格标记样式:

|| border=1
|| %apply=row id=myrowid% 1 || 2 || 3 || 4 ||

注:使用%apply=row...%的Wiki样式同样可以用在(:cellnr:)中。

示例

Wiki样式示例包含了大量Wiki样式示例。

已知问题

  • %block width=50% %这样的百分号无法使用。
  • 如果你需要像border="2px solid blue" 设置多个属性值,请把你的值放在引号中。
  • 请像%color=#aa3333%这样将颜色属性值设置为小写。

扩展阅读