JS CMSガイド / テンプレHTML

- ページ⽣成の仕組み
- テンプレHTML
- 埋込みタグ
- 埋込みタグ {{ページタグ}}
- 埋込みタグ {{Myタグ}}
- カスタマイズのヒント
⽬次
テンプレHTMLと埋込みタグ
制作者向けガイド

⼀般的なCMSの場合
テンプレート
WordPressなど
ページデータ

テンプレート
WordPressなど
⼀般的なCMSでは、 
通常はテンプレートと 
ページデータがあります
ページデータ

テンプレートページデータ
WordPressなど
ユーザがアクセスした 
タイミングで、

テンプレート
WordPressなど
公開ページを 
動的に⽣成します
ページデータ

JS CMSの場合
JS CMS

JS CMSの場合
JS CMS
JS CMSも同様に
テンプレートと、 
ページデータがありますが、

JS CMSの場合
JS CMS
公開処理
管理画⾯で公開処理時に 
ページを⽣成します

JS CMSの場合
JS CMS
公開処理
ユーザーは、静的なHTMLページを 
閲覧します

JS CMSの場合
JS CMS
JS CMSでは、埋込みタグを利⽤して、 
プログラムレスでカスタマイズできます
{{タグ}}
公開処理

JS CMSの場合
JS CMS
このスライドでは、主にテンプレートと、 
埋込みタグの役割について説明します
{{タグ}}

JS CMSは、カスタマイズ済みの状態で配布しているので、 
そのサイトをベースに説明していきます。

管理画⾯
管理画⾯の、ページ編集から、 
テンプレートを確認しましょう。
JS CMSでは、テンプレHTMLと呼びます

管理画⾯
まず、このエリアでは、 
使⽤できるテンプレHTMLのリストが 
表⽰され、選択できます

管理画⾯
テンプレHTMLは、ページごとに選択でき、 
初期選択は、default.htmlです

管理画⾯
テンプレHTMLを確認の内容を確認するには、 
「編集」をクリックします。

管理画⾯
ファイルマネージャに、 
選択したテンプレHTMLが表⽰されます。

/html/_template/のファイルリストが 
表⽰されます
テンプレHTMLの編集

ここに配置されているHTMLファイルは、 
すべてテンプレHTMLとして利⽤できます。

この画⾯では、テンプレHTMLの追加も、 
簡単に⾏えます

テンプレHTMLの中⾝をみていきましょう

テンプレHTMLは、普通のテキストファイルで 
この画⾯内で⾃由に編集できます

テンプレート内では、 
埋込みタグを利⽤できます。

⾚枠の{{**}}表記の箇所が埋込みタグです。 
ページ公開時に、HTMLテキストに変換され、 
出⼒されます

埋込みタグについて、次のスライドから 
詳しく⾒ていきます

埋込みタグ
JS CMSに⽤意されているタグ
⾃由に設定できるタグ
{{ページタグ}}
{{Myタグ}}
{{ファイルタグ}} 外部ファイルを埋込む

埋込みタグ
JS CMSに⽤意されているタグ
⾃由に設定できるタグ
{{ページタグ}}
{{Myタグ}}
{{ファイルタグ}} 外部ファイルを埋込む
埋込みタグは、3種類あります

埋込みタグ
JS CMSに⽤意されているタグ{{ページタグ}}
まずは、ページタグを紹介します

埋込みタグ
{{ページタグ}}

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

例えば、 
公開するページのHTMLや、ページ名、ページID、 
グループ情報などのMETA情報を出⼒します。
{{ページタグ}}

では、デフォルトのテンプレートでは、 
どのようなページ情報タグが使われているか、 
⾒ていきましょう。
{{ページタグ}}

使⽤例1
{{ページタグ}}

{{ページタグ}}
{{SITE_DIR}}は、 
ページからのサイトルートまでの相対パスを
使⽤例1
{{ページタグ}}

{{ページタグ}}
{{ASSET_DIR}}は、 
アセットディレクトリのパスを出⼒します
使⽤例1
{{ページタグ}}

{{ページタグ}}
使⽤例1
{{ページタグ}}
{{SITE_DIR}}{{ASSET_DIR}}
./html/
の出⼒内容は、以下のようになります

{{ページタグ}}
{{SITE_DIR}}は、テンプレHTMLに、リンクや画像など、 
ファイルパスを直接記述するときに利⽤すると、便利です

{{ページタグ}}
<a herf=“ {{SITE_DIR}} index.html"> 
<img src=“{{SITE_DIR}} images/sample.png"> 
</a>

{{ページタグ}}
<a herf=“ {{SITE_DIR}} index.html"> 
<img src=“{{SITE_DIR}} images/sample.png"> 
</a>
<a herf=“../index.html"> 
<img src=“../images/sample.png"> 
</a>

{{ページタグ}}
使⽤例2

{{ページタグ}}
このタグは、ページタグで⼀番重要なタグで、 
テンプレHTML内に必須です。

{{ページタグ}}
ページ編集内容を 
HTMLで出⼒します

{{ページタグ}}
使⽤例3

{{ページタグ}}
このタグは、パンくずリストを⽣成します

{{ページタグ}}
ページ⼀覧情報から、⾃動でページごとに 
パンくずを⽣成します

さらに詳しい解説は、
ページタグのガイドで確認してください。
{{ページタグ}}

Myタグは、⾃⾝で⾃由に定義を追加、編集できます。 
テキストはもちろん、⽂書ブロックやイメージブロック
などを登録し、テンプレHTML内で利⽤出来ます。
次に、Myタグを紹介します。
{{Myタグ}}

デフォルトで設定済みの 
Myタグ使⽤例を紹介します。  
まずは、<head>エリアです。

ここではタイトルタグのテキストを出⼒します。

{{HEAD_TITLE}}
株式会社サンプルサイト | {{PAGE_NAME}}
まずMyタグを処理します

{{HEAD_TITLE}}
株式会社サンプルサイト | {{PAGE_NAME}}
株式会社サンプルサイト | 会社概要
さらに、ページタグを処理します
まずMyタグを処理します

{{Myタグ}}
ここではヘッダ部分のHTMLを出⼒します
{{HEADER}}

ここではメニュー部分のHTMLを出⼒します
{{MENU_GNAVI}}

ここではメニュー部分のHTMLを出⼒します
{{MENU_GNAVI}}
ページ⼀覧情報から⾃動⽣成します。

このように、埋込みタグを記述して、 
カスタマイズしていけます。
{{Myタグ}}

さらに詳しい解説は、
Myタグのガイドで確認してください。
{{Myタグ}}

カスタマイズのヒント

メニューなどのページ⼀覧と連動する機能は、  
ナビゲーションブロックを利⽤します。  
 
詳しくは、ナビゲーションブロックのガイドで 
確認してください。

JS CMSガイド / テンプレHTML

More Related Content

Featured

JS CMSガイド / テンプレHTML