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样式名应该和实际意义有关,而不是用颜色来命名。例如我们要应用一个绿色的警告框,可以起名为
%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%
这样将颜色属性值设置为小写。
扩展阅读