JS CMSガイド / 埋込ページタグ

- ページ編集内容の書出し - ディレクトリ関連 - ページ関連 - グループ関連 - ぱんくず - 出⼒値の確認⽅法

埋込みタグ

⽬次

{{ページタグ}}

制作者向けガイド

ページタグは、JS CMSに⽤意されているタグで、ページに関する情報を出⼒します。

このスライドでは、重要度の⾼い順に、ページタグをいくつか紹介します。

{{PAGE_CONTENTS}}

ページ編集内容の書出し

{{PAGE_CONTENTS}}

このタグは、ページ編集内容を、HTMLに変換して出⼒します。

テンプレートに必ず必要なタグです。

<html> <body> {{PAGE_CONTENTS}}</body> </html>

{{PAGE_CONTENTS}}


⼀番、ミニマムなテンプレートは、このようになります。

{{PAGE_CONTENTS}}


<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>公開すると、このように変換されます。

{{PAGE_CONTENTS}}


<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>

管理画⾯での表⽰

{{PAGE_CONTENTS}}


<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>

公開ページでの表⽰

{{PAGE_CONTENTS}}


<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>このように、⼀番重要な埋込みタグなります。

このタグだけでも、カスタマイズすることができます。

{{PAGE_CONTENTS}}

{{SITE_DIR}}

ディレクトリ関連

{{SITE_DIR}}

このタグは、公開するHTMLページから、サイトルートまでの相対パスを出⼒します。

<html> <body> {{SITE_DIR}}</body> </html>

{{SITE_DIR}}


{{SITE_DIR}}

例えば、ページを、/html/sample.htmlへ書きだした場合、


<html> <body> ../ </body> </html>

サイトルートまでは、1階層上になるので、このように変換されます。

{{SITE_DIR}}

{{SITE_DIR}}

/index.html

{{SITE_DIR}}

/aa/index.html

{{SITE_DIR}}

/aa/bb/index.html

{{SITE_DIR}}

他の階層の例を⾒てみます。

{{SITE_DIR}}

/index.html

{{SITE_DIR}}

/aa/index.html

{{SITE_DIR}}

/aa/bb/index.html

./

{{SITE_DIR}}

サイトルート直下

{{SITE_DIR}} ./

/index.html

{{SITE_DIR}} ../

/aa/index.html

{{SITE_DIR}}

/aa/bb/index.html

{{SITE_DIR}}


1階層した

{{SITE_DIR}} ./

/index.html

{{SITE_DIR}} ../

/aa/index.html

{{SITE_DIR}}

/aa/bb/index.html

../../

{{SITE_DIR}}


1階層した

2階層した

<a href=“{{SITE_DIR}}index.html”>トップページ</a><img src=“{{SITE_DIR}}images/sample.png”> <link rel="stylesheet" href="{{SITE_DIR}}css/site.css">

<a href=“../index.html”>トップページ</a><img src=“../images/sample.png”> <link rel="stylesheet" href=“../css/site.css”>

このタグを利⽤すれば、画像やリンク、CSSなどのベースのパスを抽象化できます

{{SITE_DIR}}

もちろん、テンプレートに直接パスを書いても問題ありません。

{{SITE_DIR}}

<a href=“../index.html”>トップページ</a>

デフォルトHTMLディレクトリのみへの公開であれば、直接パスを書いてしまった⽅が、わかりやすいでしょう。

{{SITE_DIR}}


いろんな深さのディレクトリにHTMLを公開する場合は、このタグを、利⽤してください

{{SITE_DIR}}


<a href=“{{SITE_DIR}}index.html”>トップページ</a>

公開先のディレクトリに応じて、パスを調整して出⼒してくれます

{{SITE_DIR}}


<a href=“{{SITE_DIR}}index.html”>トップページ</a>

<a href=“./index.html”>トップページ</a><a href=“../test/index.html”>トップページ</a>

そのほか、ディレクトリを書出すページ情報タグを紹介します。

{{ASSET_DIR}}

{{DEF_DIR}}

{{ASSET_DIR}}

{{DEF_DIR}}

公開サイトの関連ファイルを設置するディレクトリ名を出⼒します。

デフォルトでは、html/を出⼒します。

{{ASSET_DIR}}

{{DEF_DIR}}

公開サイトの関連ファイルを設置するディレクトリ名を出⼒します。

デフォルトでは、html/を出⼒します。

デフォルトで設定されている、 HTML書き出しディレクトリ名を

出⼒します。デフォルトでは、html/を出⼒します。

{{PAGE_DIR}}

{{PAGE_ID}}

{{PAGE_NAME}}

ページ関連

{{PAGE_DIR}}

このらのタグは、ページの書出しディレクトリ名やページID、ページ名を出⼒します。

{{PAGE_ID}}

{{PAGE_NAME}}

管理画⾯ページ設定

この値は、ページ設定画⾯で設定したページ関連の値になります。


{{PAGE_NAME}}


{{PAGE_NAME}}

{{PAGE_DIR}}


{{PAGE_NAME}}

{{PAGE_DIR}}

{{PAGE_ID}}


{{PAGE_NAME}}

{{PAGE_DIR}}

{{PAGE_ID}}

それぞれ、ページタグとして使⽤できます

<html> <body> {{PAGE_DIR}} {{PAGE_ID}}{{PAGE_NAME}}</body> </html>

テンプレHTML

サンプルを⾒てましょう

<html> <body> {{PAGE_DIR}} {{PAGE_ID}}{{PAGE_NAME}}</body> </html>

<html> <body> /html/ company_history.html 沿⾰ </body> </html>

それぞれ、このように出⼒されます。

テンプレHTML

テンプレHTML

次に、これらのタグの使いどころについて、紹介します。

<title>株式会社サンプルサイト |{{PAGE_NAME}} </title>

テンプレHTML

{{PAGE_NAME}}は、タイトルタグで利⽤できます。

<title>株式会社サンプルサイト |{{PAGE_NAME}} </title>

<title>株式会社サンプルサイト | ページ名</title>

テンプレHTML

ページごとの名前が⼊ります

テンプレHTML

<title>{{HEAD_TITLE}}</title> ※{{HEAD_TITLE}}はMyタグとして設定

デフォルトサイトでは、Myタグを組み合わせて、使⽤してます

テンプレHTML

<title>{{HEAD_TITLE}}</title>

<title>株式会社サンプルサイト |{{PAGE_NAME}}</title>

※{{HEAD_TITLE}}はMyタグとして設定

まずは、Myタグの値が出⼒され、

テンプレHTML

<title>{{HEAD_TITLE}}</title>

<title>株式会社サンプルサイト |{{PAGE_NAME}}</title>

<title>株式会社サンプルサイト | ページ名</title>

※{{HEAD_TITLE}}はMyタグとして設定

最後にページタグが処理されます

テンプレHTML

<html> <body class=”page_{{PAGE_ID}}”> 内容 </body> </html> {{PAGE_DIR}}や{{PAGE_ID}}は、

bodyのクラス名に利⽤すると便利です

テンプレHTML

<html> <body class=”page_{{PAGE_ID}}”> 内容 </body> </html>

このように変換された場合、

<html> <body class=”page_company”> 内容 </body> </html>

テンプレHTML

<html> <body class=”page_{{PAGE_ID}}”> 内容 </body> </html>

<html> <body class=”page_company”> 内容 </body> </html>

body{backround:#fff;} body.page_company{

background:#ffc; }

CSSも同時に定義することにより、ページごとのデザインを調整できます。

CSS

{{PAGE_GROUP_IDS}}

グループ関連

{{PAGE_GROUP_NAMES}}

{{PAGE_GROUP_IDS}}

このらのタグは、ページが所属するグループの情報を出⼒します。

{{PAGE_GROUP_NAMES}}

この値は、管理画⾯のグループ設定画⾯で設定したページ関連の値になります。

この値は、管理画⾯のグループ設定画⾯で設定したページ関連の値になります。

テンプレHTML

<html> <body> {{PAGE_GROUP_IDS}} {{PAGE_GROUP_NAMES}} </body> </html>

それでは、サンプルを⾒てましょう。

<html> <body> {{PAGE_GROUP_IDS}} {{PAGE_GROUP_NAMES}} </body> </html>

<html> <body> company 会社概要

</body> </html>

グループ (ID:compnay,name:会社概要) に所属している場合は、このように出⼒されます。

テンプレHTML

次に、これらのタグの使いどころについて、紹介します。

テンプレHTML

<html> <body class=”{{PAGE_GROUP_IDS}}”> 内容 </body> </html> {{PAGE_GROUP_IDS}}は、

bodyのクラス名に利⽤すると便利です

このように変換された場合、

テンプレHTML

<html> <body class=”{{PAGE_GROUP_IDS}}”> 内容 </body> </html>

<html> <body class=”company company_sub”> 内容 </body> </html>

テンプレHTML

CSS

body{backround:#fff;} body.company{ background:#ffc; } CSSも同時に定義することにより、

グループごとのデザインを調整できます。

<html> <body class=”{{PAGE_GROUP_IDS}}”> 内容 </body> </html>

<html> <body class=”company”> 内容 </body> </html>

<html> <body class=”{{PAGE_GROUP_IDS[0]}} {{PAGE_GROUP_IDS[1]}}”>

テンプレHTML

CSS

body{backround:#fff;} body.company{ background:#ffc; } body.company_sub{ background:#ffc; }

<html> <body class=”company company_sub”>

ページが深いグループに配置されている場合はこのように複数のグループを出⼒できます

{{PAGE_BREADLIST}}

ぱんくず

{{PAGE_BREADLIST}}

パンくずリストタグを出⼒します。

パンくずリストタグは、現状では、カスタマイズ出来ず、

以下のフォーマットで書きだされます。

出⼒値の確認⽅法


ページ情報タグの値は、ページ公開しなくても、確認できます。


編集エリアの下で、ページ情報タグの値が

確認できます。


なお、ブログ関連のタグは、開発中の機能です。


ページ情報タグについては、以上です。

次のスライドでは、

別の埋込みタグである{{Myタグ}}を紹介します。

Internet

JS CMSガイド / 埋込ページタグ