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

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

{{タグ}}

テンプレHTML

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

管理画⾯

管理画⾯

管理画⾯の、ページ編集から、テンプレートを確認しましょう。

JS CMSでは、テンプレHTMLと呼びます

管理画⾯

まず、このエリアでは、使⽤できるテンプレHTMLのリストが

表⽰され、選択できます

管理画⾯

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

管理画⾯

テンプレ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タグ}}

Myタグは、⾃⾝で⾃由に定義を追加、編集できます。

テキストはもちろん、⽂書ブロックやイメージブロックなどを登録し、テンプレHTML内で利⽤出来ます。

次に、Myタグを紹介します。

{{Myタグ}}

使⽤例1

{{Myタグ}}

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

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


{{HEAD_TITLE}}

株式会社サンプルサイト | {{PAGE_NAME}}

まずMyタグを処理します


{{HEAD_TITLE}}

株式会社サンプルサイト | {{PAGE_NAME}}

株式会社サンプルサイト | 会社概要

さらに、ページタグを処理します

まずMyタグを処理します

使⽤例2

{{Myタグ}}

{{Myタグ}}

ここではヘッダ部分のHTMLを出⼒します

{{HEADER}}

使⽤例3

{{Myタグ}}

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

{{MENU_GNAVI}}

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

{{MENU_GNAVI}}

ページ⼀覧情報から⾃動⽣成します。

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

{{Myタグ}}

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

{{Myタグ}}

カスタマイズのヒント

メニューなどのページ⼀覧と連動する機能は、ナビゲーションブロックを利⽤します。

詳しくは、ナビゲーションブロックのガイドで

確認してください。

js cmsガイド / テンプレhtml

Internet