CSS扩展允许将CSS样式表载入到特定文章中。CSS样式表可以是另一个文档,也可以是直接在解析器函数中定义的规则。
用法
例如,如果你有一个名为“MyStyles.css”的CSS样式表,它们是用于页面“MyFancyUserPage”的样式,你可以为后者添加以下解析器函数语法:
{{#css:MyStyles.css}}
再者,如果“MyStyles.css”是位于 /wiki/skins 目录之下的文件,那么路径应该也被写进去,如下所示。请注意,档案路径必须是带有文件根目录斜杠的绝对路径,以将其与档名区分开来。
{{#css:/skins/MyStyles.css}}
或者,CSS规则可以直接包含(inline)在解析器函数中,如下例所示:
{{#css: body { background: yellow; font-size: 20pt; color: red; } }}
安装
- 下载文件,并将其放置在您
extensions/
文件夹中的CSS
目录内。 - 将下列代码放置在您的LocalSettings.php的底部:
:wfLoadExtension( 'CSS' );
- 按需求配置
- 完成 – 在您的wiki上导航至Special:Version,以验证已成功安装扩展。
配置
你可以为扩展文件设置基本URL,可选。
$wgCSSPath = false; # 默认,与 $wgScriptPath 有关 $wgCSSPath = ''; # 与服务器根基(root)有关 $wgCSSPath = 'https://example.org/stylesheets'; # 与不同的站点有关
作为页面CSS替代使用
此前有个 Extension:PageCSS(现已存档),其使用 <css>
和 </css>
标签而非#css:解析器函数。
此扩展可以完成PageCSS扩展提供的大部分功能,但语法不兼容。
避免破坏仍然使用旧的 <css>
标签的现有页面的一种方法是在同一个wiki上同时使用 Extension:CSS 和 Extension:NewPageCSS。
另一个方案(如果你只想用这个扩展,但是已经有一些要求用 Extension:PageCSS 的内容)是保存这一小段函数为一个 PHP 文件,并且把它包含进你的 LocalSettings.php 来重映射 <css> 为 #css:
<?php // Stub to remap <css></css> tags to {{#css:}} parser function extension // For use when installing https://www.mediawiki.org/wiki/Extension:CSS to replace Extension:NewPageCSS on existing wikis $wgHooks['ParserFirstCallInit'][] = 'wfCSSParserStubInit'; // Hook our callback function into the parser function wfCSSParserStubInit( Parser $parser ) { // When the parser sees the <css> tag, it executes the stub wfCSSTagRender function (below) to invoke the {{#css:}} parser $parser->setHook( 'css', 'wfCSSTagRender' ); return true; } // Execute <css> tag function wfCSSTagRender( $input, array $args, Parser $parser, PPFrame $frame ) { // Stub function, just redirect the user-provided input text blindly to the {{#css:}} parser function to re-parse it as wikitext $output = $parser->recursiveTagParse('{{#css:' . $input . '}}', $frame); return $output; }
这样,以前的 PageCSS(或者 NewPageCSS)扩展就能从你的配置中移除了; <css> 现在成了 #css: 而且(如果你已经上线运行这个 CSS 扩展)它的行为方式将与任何其他 CSS 扩展的相同。
改变特定页面颜色或背景的问题
使用解析器函数使用另一个页面的CSS不能够用于改变页面的颜色或背景,然而,使用解析器函数在页面自身可以允许改变背景。 若要解决这个问题,通过嵌入来加载CSS,就不会导致无法改变页面背景的问题。
漏洞
见 讨论页。
参见
- 扩展:NewPageCSS
- 扩展:模板样式 - 类似的扩展,会过滤CSS并存储在单独的页面。