Extension:TemplateStyles
TemplateStyles リリースの状態: 安定 |
|
---|---|
実装 | タグ , ContentHandler , フック |
説明 | CSSスタイルシートをテンプレートに読み込むことができます。 |
作者 | |
最新バージョン | Continuous updates |
互換性ポリシー | リリースブランチ |
MediaWiki | 1.31+ |
PHP | 5.5+ |
ライセンス | GNU 一般公衆利用許諾書 2.0 以降 |
ダウンロード | |
|
|
<templatestyles src=... /> |
|
translatewiki.net で翻訳を利用できる場合は、TemplateStyles 拡張機能の翻訳にご協力ください | |
問題点 | 未解決のタスク · バグを報告 |
TemplateStyles拡張機能は、Wikiマークアップ記法のページからCSSを読み込むことを可能にするための<templatestyles>
タグを導入します。
これをテンプレートに書くことで、MediaWiki:Common.css に配置しなくてもテンプレートにカスタムCSSを影響させることができます。
拡張機能をWiki上でエディタとして使用する方法は、Help:TemplateStyles を参照してください。
使用法
まず、CSSページを作ってください。 By default any subpage in the Template namespace with a title ending in ".css" will be created with the "Sanitized CSS" content model if it contains no syntax errors.
The set of namespaces may be adjusted with $wgTemplateStylesNamespaces
, or Special:ChangeContentModel may be used on any page.
そして、Wikitextのテンプレートに<templatestyles src="..." />
タグを追加してCSSを読み込みます。
The CSS saved using the "Sanitized CSS" content model must meet strict validity requirements: invalid CSS, unrecognized at-rules, and unrecognized or unsupported properties or property values cannot be saved. If invalid CSS is somehow saved anyway, the offending constructs will be removed when the CSS is output to the browser.
The value of the src
attribute on the tag is the title of the page, defaulting to the Template namespace.
For example, <templatestyles src="Example/styles.css" />
will load the page "Template:Example/styles.css".
This will fail if that page does not exist or has a content model other than "Sanitized CSS".
Styles can be scoped within the page by using the optional wrapper
parameter to the tag, e.g. <templatestyles src="Example/styles.css" wrapper="div.example" />
would scope the styles loaded to any <div class="example">
inside the main parsed content.
Any CSS simple selector sequence can be used for the wrapper
parameter.
This is intended to allow side-by-side comparison of live and sandbox versions of a template.
Use of sanitized CSS is tracked like transclusion of templates, and will show up as a transclusion on Special:WhatLinksHere .
Caveats
- Styles added by TemplateStyles are scoped into
.mw-parser-output
to avoid tampering with the user interface outside of the main parsed content.
- To use TemplateStyles to style something like w:MediaWiki:Protectedpagetext, you would need to enclose the message's contents in
<div class="mw-parser-output">...</div>
.
- To use TemplateStyles to style something like w:MediaWiki:Protectedpagetext, you would need to enclose the message's contents in
- The styles should be written to target specific CSS classes, and anything that generates elements with those classes should be sure to also include the styles itself rather than relying on some other template to have done so.
- Styles included by a template can currently affect content on the page outside of the content generated by that template, but this ability may be removed in the future and should not be relied upon.
- Including styles on a template that affects contents outside of that template, will cause those styles to not be applied when editing a section that doesn't contain that template. Example: including styles on an infobox that affect all tables of the page, when editing a section that doesn't contain the infobox, those tables won't be styled when previewing that section.
- TemplateStyles allows few non-standardized CSS properties.
Requests to support additional properties should be filed in Phabricator in the css-sanitizer and TemplateStyles projects.
- Requests should include links to standards-track documents (e.g. on w3.org) describing the syntax of the properties being requested, and an analysis of current browser support for the properties (e.g. a link to a caniuse.com page about the properties).
- Vendor-prefixed properties (e.g. anything starting with
-webkit-
,-moz-
, or-ms-
) are likely to be declined if they're not needed for modern browsers.
- Vendor-prefixed properties (e.g. anything starting with
@font-face
rules must use afont-family
prefixed with "TemplateStyles".
This should largely prevent redefining fonts used elsewhere in the document.
- To target styles based on skins, use a selector such as
body.skin-vector .myClass
; specification of thebody
element is required and must be followed by a descendant combinator (i.e. the space).
Other classes on the body
or html
elements may be targeted in the same manner. 1.32+
インストール
- Vagrant を使用している場合は、
vagrant roles enable templatestyles --provision
でインストールしてください
- 手動インストール
- ダウンロードして、ファイルを
extensions/
フォルダー内のTemplateStyles
という名前のディレクトリ内に配置します。 - Git でのインストールの場合のみ、PHP の依存関係をインストールするため Composer を実行します。 (See タスク T173141 for potential complications.)
- 以下のコードを LocalSettings.php の末尾に追加します:
wfLoadExtension( 'TemplateStyles' );
- 必要に応じて設定します。
完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。
設定
パラメーター | 既定値 | コメント |
---|---|---|
$wgTemplateStylesAllowedUrls
|
[
"audio" => [
"<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
],
"image" => [
"<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
],
"svg" => [
"<^https://upload\\.wikimedia\\.org/wikipedia/commons/[^?#]*\\.svg(?:[?#]|$)>"
],
"font" => [],
"namespace" => [
"<.>"
],
"css" => []
]
|
PCRE regular expressions to match allowed URLs for various types of external references.
Keys are external reference types, values are arrays of regular expressions (including delimiters) to match allowed URLs. Current external reference types are:
|
$wgTemplateStylesNamespaces
|
[ NS_TEMPLATE => true ]
|
Namespaces in which to set the "Sanitized CSS" content model for titles ending in ".css".
Enabling this for 2 (User) or 8 (MediaWiki) is a bad idea, as it will conflict with the normal CSS files in those namespaces. |
$wgTemplateStylesPropertyBlacklist
|
[]
|
Properties to blacklist in CSS style rules.
The TemplateStylesPropertySanitizer hook allows for finer-grained control. |
$wgTemplateStylesAtRuleBlacklist
|
[]
|
At-rules to blacklist in stylesheets.
The TemplateStylesStylesheetSanitizer hook allows for finer-grained control. |
$wgTemplateStylesUseCodeEditor
|
true
|
Whether to enable Extension:CodeEditor for the "Sanitized CSS" content type. |
$wgTemplateStylesAutoParseContent
|
true
|
If true, the "Sanitized CSS" content model will be added to $wgTextModelsToParse if the CSS content model is already present in that array.
If false, add |
$wgTemplateStylesMaxStylesheetSize
|
102400
|
Maximum size (in bytes) of a stylesheet. null for no limit.
|
その他の依存関係
$wgTidyConfig
should be configured to use no tidying or RemexHtml.
If used with any of the Raggett drivers, a <templatestyles />
tag in the middle of a paragraph (including in an inline template) will cause tidy to break the paragraph at that point.
The other drivers have not been tested for this issue.
潜在的なエラー
If you experience an error when importing pages from another wiki, for example, it may help to enable $wgShowExceptionDetails in your LocalSettings.php
to determine if you are experiencing any of the errors below.
Class 'Wikimedia\CSS\Parser\Parser' not found
- This error may come up when attempting to import a wiki CSS page or when changing the content model of a page to "santized-css". There is, as of April 16, 2020, an open bug in the extension distributor which requires
composer install --no-dev
to be run in the extension subdirectory even when the extension is not installed from Git. 詳細は Topic:Ukv6pdo96a8qfur2 を参照してください。
- This error may come up when attempting to import a wiki CSS page or when changing the content model of a page to "santized-css". There is, as of April 16, 2020, an open bug in the extension distributor which requires
Import failed: The content model 'sanitized-css' is not registered on this wiki.
- Some people get this error on a wiki when importing pages. This extension provides that content model. Install TemplateStyles to fix your import.
関連項目
- Help:TemplateStyles
- css-sanitizer - used for the sanitization of the CSS.
- phab:T483 "RfC: Allow styling in templates" (about possibly deploying this extension on Wikimedia wikis)
- phab:T56864 "ResourceLoader: Implement support for LESS in wiki modules (user and site), supporting e.g. MediaWiki:Common.less"
- Discussions around - best way to store the CSS on-wiki.
- phab:T155813 "Decide on storage and delivery method for TemplateStyles CSS"
- It’s now easier to craft content for mobile devices: Responsive web design at the Wikipedia scale on the Wikimedia Blog.
![]() | この拡張機能は 1 つ以上のウィキメディアのプロジェクトで使用されています。 これはおそらく、この拡張機能が安定していて高いトラフィックのウェブサイトでも十分に動作することを意味します。 この拡張機能がインストールされている場所を確認するには、ウィキメディアの設定ファイル CommonSettings.php および InitialiseSettings.php 内で、この拡張機能の名前を探してください。 特定のウィキにインストールされている拡張機能の完全な一覧は、そのウィキの Special:Version ページにあります。 |
- Stable extensions/ja
- Tag extensions/ja
- ContentHandler extensions/ja
- Hook extensions/ja
- GPL licensed extensions/ja
- Extensions in Wikimedia version control/ja
- CodeEditorGetPageLanguage extensions/ja
- ContentHandlerDefaultModelFor extensions/ja
- ParserClearState extensions/ja
- ParserFirstCallInit extensions/ja
- All extensions/ja
- Extensions requiring Composer with git/ja
- Link templates/ja
- Extensions used on Wikimedia/ja
- Metadata/ja