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:) |
|
如上所述,(: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进行了复合使用@] | |
%define=warn green%
然后使用 %warn%
来套用 %green%
。未来我们要改变这个%define=warn green%
就可以了,而不用一个一个在单独修改{@@]。
%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%
- Floating left or right:
- 在新窗口中打开链接:
%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
规定列表项目的数字。接下来的列表项目会从该数字开始进行升序排列。
应用样式
上面演示的样式需要管理员通过在“local/config.php”配置开启。 例如要开启"line-height" 样式需要添加如下内容:
到local/config.php配置文件中。
定义其它的HTML元素
你可以通过$WikiStyleApply
来为Wiki样式添加一些额外的HTML元素为。
要增加一个页面锚点标签,请在“config.php”配置文件中输入:
$WikiStyleApply['link'] = 'a';
这样你就可以像下面那样,为class样式增加锚点:
%apply=link red%[[PmWiki.WikiStyles | 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%
这样将颜色属性值设置为小写。
扩展阅读
- Custom WikiStyles 自定义Wiki样式
- 列表样式
- Wiki样式扩展