js cmsガイド / 埋込ページタグ
Post on 12-Apr-2017
346 Views
Preview:
TRANSCRIPT
- ページ編集内容の書出し - ディレクトリ関連 - ページ関連 - グループ関連 - ぱんくず - 出⼒値の確認⽅法
埋込みタグ
⽬次
{{ページタグ}}
制作者向けガイド
ページタグは、JS CMSに⽤意されているタグで、ページに関する情報を出⼒します。
このスライドでは、重要度の⾼い順に、ページタグをいくつか紹介します。
{{PAGE_CONTENTS}}
ページ編集内容の書出し
{{PAGE_CONTENTS}}
このタグは、ページ編集内容を、HTMLに変換して出⼒します。
テンプレートに必ず必要なタグです。
<html> <body> {{PAGE_CONTENTS}}</body> </html>
{{PAGE_CONTENTS}}
<html> <body> {{PAGE_CONTENTS}}</body> </html>
⼀番、ミニマムなテンプレートは、このようになります。
{{PAGE_CONTENTS}}
<html> <body> {{PAGE_CONTENTS}}</body> </html>
<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>公開すると、このように変換されます。
{{PAGE_CONTENTS}}
<html> <body> {{PAGE_CONTENTS}}</body> </html>
<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>
管理画⾯での表⽰
{{PAGE_CONTENTS}}
<html> <body> {{PAGE_CONTENTS}}</body> </html>
<html> <body> <h1 class="cms-h default">沿⾰</h1> <p class="cms-p default”>⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。⽂書が⼊ります。</p> </body> </html>
公開ページでの表⽰
{{PAGE_CONTENTS}}
<html> <body> {{PAGE_CONTENTS}}</body> </html>
<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}}
<html> <body> {{SITE_DIR}}</body> </html>
{{SITE_DIR}}
例えば、ページを、/html/sample.htmlへ書きだした場合、
<html> <body> {{SITE_DIR}}</body> </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}}
<a href=“../index.html”>トップページ</a>
いろんな深さのディレクトリにHTMLを公開する場合は、このタグを、利⽤してください
{{SITE_DIR}}
<a href=“../index.html”>トップページ</a>
<a href=“{{SITE_DIR}}index.html”>トップページ</a>
公開先のディレクトリに応じて、パスを調整して出⼒してくれます
{{SITE_DIR}}
<a href=“../index.html”>トップページ</a>
<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タグ}}を紹介します。
top related