2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

Help:模板样式表

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索
Commons-emblem-notice.svg
这个页面“Help:模板样式表”是萌娘百科的帮助文档
  • 本文用于介绍萌娘百科中一些特定功能的操作方法;
  • 本文仅是一篇论述,不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况,请以方针或指引的条文为准。

模板样式表(templatestyles)可以让用户在不需要界面管理员权限下也能编写适用于条目正文的样式表。关于如何编写样式表,参见MDN文档

用法

创建样式表

首先,用户需要创建一个内容模型为“已过滤的CSS”页面用以存放样式表:

  • 在模板名字空间下创建以.css结尾的页面时,系统会自动将页面的内容模型切换为“已过滤的CSS”。
  • 或是在创建页面后打开Special:ChangeContentModel,输入页面名,然后将【新的内容模型】设置为“已过滤的CSS”即可。

恭喜,你已经创建了一个模板样式表!您现在可以在该页面编写CSS文本了。

使用样式表

在需要使用样式表的页面输入<templatestyles src="【样式表页面名】" />即可使用!建议将该标签放在页面最开头,避免网速缓慢用户加载过程中出现样式闪烁的问题。

如果页面名省略了名字空间则会默认使用模板名字空间(与嵌入模板一致)。

目前wrapper参数并不能正确生效。<templatestyles/>还支持wrapper参数用以在所有样式的选择器前额外追加一个选择器,限制生效范围,适合于修改广泛使用的样式表前先复制一份到沙盒样式表中并在沙盒页中做比较用(比如<templatestyles src="Example/styles.css" wrapper="div.example" />将会在所有样式的选择器前追加div.example选择器,使得样式只在<div class="example"/>内生效)。

Lua模块亦能通过frame:extensionTag使用:

local p = {};

function p.templateStyle( frame, src )
   return frame:extensionTag( 'templatestyles', '', { src = "【样式表页面名】" } );
end

return p;

测试样式表

你可以在Help:沙盒/styles.css中添加样式,并在Help:沙盒中引入<templatestyles src="Help:沙盒/styles.css" />和需要测试的内容。建议对大量嵌入的样式表做出更改之前先进行测试。

样式表的限制

为了保障网站安全性和确保所有用户都能显示一致的样式,模板样式表扩展对样式表内容有以下限制:
(这些限制由服务器判定,编辑器也会有相关提示,推荐不要使用 Wikiplus 或 In-page Edit 等编辑工具而是使用编辑界面以获得相关提示)

  1. 样式表不得含有错误的格式、无法识别的at-rule、无法识别或不支持的属性或属性值,可以使用的属性和属性值参见扩展源码
  2. 样式表不得含有非标准属性(包括浏览器前缀),参见T162379
  3. 样式表如若需要使用@font-face,则其font-family样式值包含的字体名必须带有TemplateStyles前缀;
  4. (萌百暂不支持)样式表如若需要限定在特定皮肤下生效,则必须在选择器中包含body.skin-vector等皮肤 class,body是必要的
  5. 样式表扩展会在将样式表输出到页面中时对所有样式的选择器前追加.mw-parser-output 以将样式限制在正文范围内,避免恶意用户篡改其他部分(如编辑按钮等),如果需要在正文以外范围使用(如系统消息,例如编辑冲突警告),则需要在相应页面手动用<div class="mw-parser-output">...</div>包裹整个源码。

提供了哪些反濫用工具?

  • 模板样式CSS页面有自己的内容模型(sanitized-css),因此可以使用new_content_model变量使用滥用过滤器跟踪或控制对它们的更改。
  • 模板样式表的跟踪方式与普通的模板相同,因此您可以通过“链入页面”选项查看样式表的使用位置,查看“页面信息”下页面上使用的样式表(可能在编辑屏幕上, 取决于您使用的编辑器),并使用“相关更改”查看最近可能影响页面的更改。
  • 模板样式还在HTML代码中保留标识信息。要查找特定规则的来源,请查看页面源代码,寻找带有data-mw-deduplicate属性的<style/>标签,其中data-mw-deduplicate的值形如TemplateStyles:r123456",而123456是样式表的修订版ID(可以用Special:Diff查看)。