Extension:TemplateStyles

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Extension:TemplateStyles and the translation is 50% complete.
Outdated translations are marked like this.
MediaWiki 拡張機能マニュアル
OOjs UI icon advanced-invert.svg
TemplateStyles
リリースの状態: 安定
実装 タグ , ContentHandler , フック
説明 CSSスタイルシートをテンプレートに読み込むことができます。
作者
最新バージョン Continuous updates
互換性ポリシー Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki >= 1.36.0
PHP 7.3+
ライセンス GNU 一般公衆利用許諾書 2.0 以降
ダウンロード
  • $wgTemplateStylesUseCodeEditor
  • $wgTemplateStylesDisable
  • $wgTemplateStylesDefaultNamespace
  • $wgTemplateStylesDisallowedAtRules
  • $wgTemplateStylesDisallowedProperties
  • $wgTemplateStylesAllowedUrls
  • $wgTemplateStylesAutoParseContent
  • $wgTemplateStylesMaxStylesheetSize
  • $wgTemplateStylesNamespaces
<templatestyles src=... />
translatewiki.net で翻訳を利用できる場合は、TemplateStyles 拡張機能の翻訳にご協力ください

使用状況とバージョン マトリクスを確認してください。

問題点 未解決のタスク · バグを報告

TemplateStyles拡張機能は、Wikiマークアップ記法のページからCSSを読み込むことを可能にするための‎<templatestyles>タグを導入します。 これをテンプレートに書くことで、MediaWiki:Common.css に配置しなくてもテンプレートにカスタムCSSを影響させることができます。

拡張機能をWiki上でエディタとして使用する方法は、Help:TemplateStyles を参照してください。

使用法

まず、CSSページを作ってください。 規定では、「.css」で終わるテンプレート名前空間のサブページは、すべて、文法エラーがなければ「サニタイズ済みCSS」content model で作成されます。

名前空間の集合が$wgTemplateStylesNamespacesで修正されるか、あるいはSpecial:ChangeContentModel が任意のページで使用される場合があります。 そして、Wikitextのテンプレートに<templatestyles src="..." />タグを追加してCSSを読み込みます。

「サニタイズ済みCSS」コンテンツモデルを使用して保存されたCSSは厳密な妥当性要件を満たさなければなりません。無効なCSS、認識されない@-規則、認識されない、あるいはサポートされないプロパティーまたはプロパティーの値は保存できません。 無効なCSSがなぜが保存されてしまった場合、そのCSSがブラウザに出力された際に問題のある内容は取り除かれます。

タグの要素 src の値はページタイトルであり、既定はテンプレート名前空間となります。 (この既定値は $wgTemplateStylesDefaultNamespace で変更できます。) 例えば、<templatestyles src="Example/styles.css" /> は "Template:Example/styles.css"をロードします。 そのページが存在しないか、"サニタイズ済みCSS"以外のコンテンツモデルを持つ場合は失敗します。

スタイルはタグの省略可能な wrapper パラメーターを使用してページ内でスコープさせることができます。例えば <templatestyles src="Example/styles.css" wrapper="div.example" /> はロードしたスタイルをパース済みコンテンツ内のすべての <div class="example"> にスコープします。 wrapperパラメーターには、すべてのCSSシンプルセレクター構文が利用できます。 This is intended to allow side-by-side comparison of live and sandbox versions of a template.

サニタイズ済みCSSはテンプレートのトランスクルージョンと同様にトラッキングされ、Special:WhatLinksHere 上にトランスクルージョンとして表示されます。

注意

  • TemplateStylesによって追加されるスタイルは、パース済みメインコンテンツ以外に影響を与えないように .mw-parser-output でスコープされます。
    • TemplateStylesを使用してw:MediaWiki:Protectedpagetextのようなスタイルにしたい場合、メッセージ内容を <div class="mw-parser-output">...</div>で囲む必要があります。
  • スタイルは特定のCSSクラスに絞って記述すべきであり、それらのクラスを持つエレメントを生成するものは自身でスタイルを含めるようにすべきで、他のテンプレートに依存すべきではありません。
    • 現在はテンプレートに含まれたスタイルはそのコンテンツ以外のページ中のコンテンツにも影響を与えることができますが、この機能は将来的に削除される可能性があるため信頼してはなりません。
    • テンプレートのコンテンツ外に影響するスタイルが含まれている場合、そのテンプレートを含まないセクションの編集中のプレビューにスタイルが適用されなくなります。 例:インフォボックスにページ内のすべてのテーブルに影響するスタイルを含めた場合、インフォボックスを含まないセクションを編集しプレビュー表示したとき、それらのテーブルにはスタイルは適用されません。
  • TemplateStylesはいくつかの非スタンダードなCSSプロパティを許可します。 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.
  • @font-face rules must use a font-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 the body 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' );
    
  • 必要に応じて設定します。
  • Yes 完了 – ウィキの「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:

audio
Sound file, for cue properties of the CSS Speech Module.
image
Image file, for properties such as background.
svg
SVG file, for Masking and Filters.
font
For @font-face's src.
namespace
@namespace.の時
css
@importの時
$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 'sanitized-css' to that array manually if you want categories and such parsed out of the CSS page.

$wgTemplateStylesMaxStylesheetSize
102400
Maximum size (in bytes) of a stylesheet. null for no limit.
$wgTemplateStylesDefaultNamespace
NS_TEMPLATE
The default namespace for the src attribute of the ‎<templatestyles> tag.

その他の依存関係

$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 を参照してください。
  • 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.

関連項目