Changements récents - Rechercher:
PmWikiZhCn /

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(approuver les sites) (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%这样将颜色属性值设置为小写。

扩展阅读