注) この文書はDiazo: Basic Syntaxをgoogle 翻訳にかけた後,フォーマットなどを少し修正したものです。少し訳を修正した部分もありますが,google 翻訳そのままの部分がほとんどです。
Diazoのテーマは、静的なHTMLページ(「テーマ」と呼ばれる)と、 rules.xmlと呼ばれるルールファイルで構成されています。
rulesファイルは<rules />
というタグを使ったXML文書が含んでいます。
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
...
</rules>
ここでは、3つの名前空間を定義しています。デフォルトの名前空間はルールとXPathセレクターに使用されます。 css名前空間はCSS3セレクタに使用されます。これらはXPathセレクタと機能的に同等です。 実際、CSSセレクタは、コンパイラの前処理ステップで同等のXPathセレクタに置き換えられます。 したがって、パフォーマンスに影響はありません。 細かい制御のためにインラインXSLTディレクティブを追加する場合は、 xsl名前空間が使用されます。 私たちはこのガイドの後半でこれに着きます。 Diazoは、 nth-child疑似セレクタなどの複雑なCSS3セレクタとXPathセレクタをサポートしています。 XPathやCSS3を初めてお使いの方は、参考になることをお勧めします。
ルール記述のための命令一覧です。
<theme />
<theme />
は、rulesファイルの<rules />
要素内で使用する。
テーマファイルの指定に使用する場合には以下のように記述する。
<theme href = "theme.html" />
相対パスはrules.xmlファイルに対する相対位置で解決される。
次の属性を使用できます。
href (必須)
:
テーマHTMLファイルへのパス指定。相対URLまたは絶対URLで。if
:
このテーマリファレンスを使用するためにはtrueでなければならない任意の条件を指定。 詳細はこのガイドの後半の複数のテーマの使用に関するセクションを参照してください。if-path
:
このテーマリファレンスを使用するための現在のリクエストと一致する必要があるURLパスセグメントを指定。 詳細はこのガイドの後半の複数のテーマの使用に関するセクションを参照してください。if-content
または css:if-content
:
このテーマリファレンスが使用されるためにコンテンツに存在しなければならない要素を指定。 詳細はこのガイドの後半の複数のテーマの使用に関するセクションを参照してください。<notheme />
<notheme />
:
特定の条件ですべてのテーマをオフにするのに使用します。 例えば
<theme href = "theme.html" /> <notheme css:if-content = "body.rawpage" />
複数の<notheme />要素を使用できます。 いずれかの条件が真である場合、テーマは省略されます。
以下の属性のどれか1つ以上が必要です。
if
:
テーマを省略するときの任意の条件を指定するために使用if-path
:
テーマを省略するための現在の要求と一致する必要があるURLパスセグメントを指定するために使用if-content
またはcss:if-content
:
テーマを省略するためにコンテンツ内に存在しなければならない要素を指定するために使用します。複数の属性が使用されている場合、すべて条件が真のときのみにこの命令文は有効。
<replace />
テーマ内の要素をコンテンツ内の要素で置き換えるために使用します。 例:
<replace theme="/html/head/title" content="/html/head/title"/>
CSSセレクタを使用して同様のことをすると次のようになります。
<replace css:theme="title" css:content="title"/>
どちらの場合も,テーマの<title />
要素は(動的)コンテンツの<title />
要素に置き換えられます。
以下の属性を使用できます。
theme
or theme-children
or css:theme or css:theme-children
(必須):
置き換えられるテーマ内のノードを指定する。 theme-children
を使用すると、XPathまたはCSS式と一致するタグ内のすべての要素が置換されますが、一致したタグ自体はそのまま残ります。
content
またはcontent-children
またはcss:content
またはcss:content-children
(必須):
テーマ内の一致するノードを置き換えるコンテンツ内のノードを指定する。 content-children
を使用する場合、XPath式またはCSS式に一致するタグ内のすべての要素が使用されますが、一致するタグ自体は除外されます。
attributes
:
タグの代わりに属性を置き換える場合は、 属性属性を使用して、一致するテーマノードで置き換えられる属性のスペース区切りリストを提供できます。 たとえば、 attributes = "class"
の場合、一致するテーマノードのclass属性は、一致するコンテンツノードのclass属性に置き換えられます。
注意:タグで動作する<replace />
ルールと同様に、名前付き属性がテーマノードとコンテンツノードの両方に存在しない場合、何も起こりません。 テーマノードに属性が存在するかどうかにかかわらず属性をコピーする場合は、代わりに<copy />
を使用できます。
attributes = "class id"
を使用すると、 class属性とid属性が置き換えられます。特殊なケースとして、 ‘attributes= “*”`と書いて、一致するテーマノードのすべての属性を削除し、一致するコンテンツノードからすべての属性をコピーすることができます。
注意: attributes
を使用する場合は、 theme-children
やcontent-children
,またはCSSの同等のものを使用しないでください 。
<merge />
、 <copy />
、 <drop />
も参照してください。
method
:
コンテンツを操作する<drop />
などのルールがあり、この置換を実行する際にその操作を考慮する必要がない場合は、 method = "raw"
を<replace />
ルールに追加できます。
if
:
置き換えを実行するための任意の条件を指定するために使用されます。
if-path
:
置換が実行されるための現在の要求と一致しなければならないURLパスセグメントを指定するために使用されます
if-content
またはcss:if-content
:
置換が実行されるためにコンテンツ内に存在しなければならない要素を指定する。
<replace
>のより高度な使い方については、テーマの変更とコンテンツの変更の章を参照してください。
<before />
と<after />
<before />と<after />
は、 <replace />
とほぼ同じですが,テーマの中の指定箇所の前や後にコンテンツを挿入します。 例:
<before css:theme="#content" css:content="#info-box" />
これは、テーマにおけるidがcontent
である要素の直前に,コンテンツ(ここではidがinfo-box
のもの)を配置します。 代わりに,info-box
を下に置きたい場合は、次のようにします。
<after css:theme="#content" css:content="#info-box" />
既存の,どの子要素よりも前の,#contentの内側にコンテンツ(ここではinfo-box
)を挿入するには、次のようにします。
<before css:theme-children="#content" css:content="#info-box" />
<before />と<after />
の必須属性とオプション属性は<replace />
と同様です。
ただし,attributes
はサポートされてません。
<drop />
テーマまたはコンテンツから要素を削除するために使用されます。 これは、 テーマ属性またはコンテンツ属性(またはそのcss:
と-children
属性のうち等価なもの)を受け入れる唯一の要素ですが、両方は受け入れません。
<drop css:content="#portal-content .about-box" />
<replace css:theme-children="#content" css:content="#portal-content" />
これは、まず,コンテンツ要素内のidがportal-content
である要素のうち,クラス名がabout-box
であるコンテンツを全て削除します。その後,
コンテンツファイル内の,id がportal-content
であるすべての要素を、テーマファイル内のid がcontent
である要素にコピーします。
同様に,
<drop theme="/html/head/base" />
とすると,テーマファイルのヘッダから<base />タグを削除します。
次の属性を使用できます。
theme
or theme-children
or css:theme
or css:theme-children
:
ドロップするテーマのノードを指定する。 theme-childrenを使用すると、XPathまたはCSS式と一致するタグ内のすべての要素は削除されますが、一致するタグ自体はそのまま残ります。
content
or content-children
or css:content
or css:content-children
ドロップするコンテンツ内のノードを指定する。 content-childrenを使用すると 、XPathまたはCSS式に一致するタグ内のすべての要素は削除されますが、一致するタグ自体はそのまま残ります。
attributes
:
タグ全体ではなく属性を削除する場合は、 属性属性を使用して、一致するテーマノードにドロップする必要がある属性のスペースで区切られたリストを提供できます。 たとえば、 attributes="class"
の場合 、 クラス属性は一致したノードから削除されます。 attributes="class id"
を使用すると、 class属性とid属性の両方が削除されます。
特殊なケースとして、 attributes=“*”
と書いて、一致するテーマノードのすべての属性を削除することができます。
注意: 属性を使用する場合は、 theme-childrenまたはcontent-childrenまたはCSSの同等のものを使用しないでください 。
<merge />
と<replace />
も参照してください。
if
:
いつドロップするかを指定するために使用されます。
if-path
実行されるドロップの現在の要求によって一致しなければならないURLパスセグメントを指定するために使用されます
if-content
or css:if-content
実行されるドロップのためにコンテンツに存在しなければならない要素を指定するために使用されます。
<strip />
テーマやコンテンツからタグを取り除いて、子をそのまま残します。 これは、 theme-children
またはcontent-children
を持つ<drop />
の逆と考えることができます。例えば:
<strip css:theme="#content" />
これにより、idの内容を持つ要素が削除され、すべての子要素がそのまま残ります。 同様に:
<strip css:content="#main-area .wrapper" />
<replace css:theme="#content-area" css:content="#main-area" />
これにより、テーマの要素がidのcontent-areaで置き換えられ、idのメイン 領域を持つコンテンツ内の要素に置き換えられますが、 #main-area
にあるCSSクラスのラッパーを含むネストされたタグは除外されます。
<strip />
は<drop />
と同じ属性と文法を使用します。
<merge />
コンテンツ内の属性の値を、テーマ内の同じ名前の属性とマージするために使用されます。 これは主にCSSクラスのマージに便利です:
<merge attributes="class" css:theme="body" css:content="body" />
テーマに次のbodyタグがある場合:
<body class = "alpha beta">
内容は次のとおりです。
<body class="delta gamma">
結果は次のようになります。
<body class="alpha beta delta gamma">
次の属性を使用できます。
attributes
(必須):
マージする属性のスペース区切りのリスト。 ルールが効果を持つためには、テーマとコンテンツノードの両方に属性が存在していなければなりません。theme
またはcss:theme
(必須):
属性値をマージするテーマノード。content
(必須):
属性値をマージするコンテンツノード。saeparator
:
属性をマージするときに使用するセパレータ。 デフォルトではスペースを使用します。 区切り文字なしでマージするには、 separator = ““を使用します。if
:
マージをいつ実行するかについての任意の条件を指定するために使用されます。if-path
:
マージを実行するための現在の要求と一致する必要があるURLパスセグメントを指定するために使用されますif-content
or css:if-content
:
マージを実行するためにコンテンツ内に存在しなければならない要素を指定するために使用されます。<copy />
コンテンツ内のノードからテーマ内のノードに属性をコピーするために使用されます。 <replace />とは異なり、属性がターゲットテーマノードに存在しない場合でも<copy />は動作します。 それが存在する場合、それは置き換えられます。 例えば:
<copy attributes="class" css:theme="body" css:content="body"/>
次の属性を使用できます。
theme
or css:theme
(必須):
属性をコピーするテーマ内のノードを指定するために使用します。content
or css:content
(必須):
属性のコピー元となるコンテンツ内のノードを指定するために使用されます。attributes
(必須):
テーマにコピーする必要がある属性のスペース区切りのリスト。
特殊なケースとして、 attributes= "*"
と書いて、一致するテーマノードのすべての属性を削除し、一致するコンテンツノードのすべての属性をコピーすることができます。if
:
いつコピーを実行するかの任意の条件を指定するために使用されます。if-path
:
実行されるコピーの現在の要求と一致する必要があるURLパスセグメントを指定するために使用されますif-content
or css:if-content
:
コピーが実行されるためにコンテンツに存在しなければならない要素を指定するために使用されます。ほとんどの場合、Diazoコンパイラの内部動作についてはあまり気にしないでください。 ただし、規則が適用される順序を理解することが役立つことがあります。
<before />
ルール(theme-children
ではなく)は常に最初に実行されます。<drop />
ルールが実行されます。<drop />
ルールが適用されていないか、またはmethod = "raw"
が使用されていれば、 テーマを使用する<replace />ルールは次に実行されます。<strip />
ルールが実行されます。 コンテンツまたはテーマノードが削除される場合でも、 <strip />
ルールは他のルールの起動を妨げないことに注意してください。<replace />
ルールが以前に同じテーマノードに適用されていない限り、 theme-childrenを使用して<before />
および<replace />
および<after />
ルールが次に実行されます。<after />
ルール( theme-childrenではなく)が最後に実行されます。ルールがテーマに一致しない場合(コンテンツと一致するかどうかにかかわらず)、暗黙のうちに無視されます。
<replace />
ルールがテーマに一致するがコンテンツに一致しない場合、一致した要素はテーマにドロップされます。
<replace css:theme = "#header" content = "#header-element" />
ここで、id ヘッダー要素を持つ要素がコンテンツに見つからない場合 、そのテーマのid ヘッダーを持つプレースホルダーが削除されます。
同様に、一致するコンテンツがない場合、 <copy />
ルールと一致するテーマノードのコンテンツは削除されます。 これを考えるもう1つの方法は、コンテンツノードが一致しない場合、Diazoはコピーまたは置換するときに空のノードセットを使用するということです。
見つからないコンテンツノードの場合にプレースホルダを置いておきたい場合は、これを条件付きルールにすることができます。
<replace css:theme="#header" content="#header-element" if-content = "" />
条件付きルールの詳細については、次のセクションを参照してください。