このセクションでは、JSM7で使用する主要CMSパーツのテンプレートについて説明します。 CMSパーツを追加した箇所に設定したテンプレートが呼び出されます。
テンプレートの所在は次の通りです。 * templates/cmsplugin_filer_image/plugins/image/default.html * テンプレートファイルが存在しない場合は新規作成します。 利用可能な変数は以下の表を御覧ください。
変数名 | データ型 | 説明 |
---|---|---|
instance | テキスト | 画像ファイル名 |
instance.image | テキスト | 画像ファイル名 |
instance.image.url | URL | 画像ファイルのURL |
instance.alt | テキスト | 代替文 |
instance.width | 整数 | 画像ファイルの幅 |
instance.height | 整数 | 画像ファイルの高さ |
instance.use_orginal_image | true/false | 元の画像ファイルを使う |
instance.caption | テキスト | 画像ファイルのキャプション |
instance.description | テキスト | 画像ファイルの概要 |
instance.alignment | テキスト | 画像ファイルの表示位置 |
instance.extra_class | テキスト | 付与する任意のclass |
instance.targe_blank | true/false | 新しいウィンドで開く許可 |
size.0 | 整数 | 指定の幅 |
size.1 | 整数 | 指定の高さ |
opts.crop | true/false | トリミングの許可 |
link | URL | 画像ファイルのクリック時のリダイレクト先 |
サイムネイルオプションは幅、高さの指定よりも優先して適用されます。幅、高さを指定する場合は、サムネイルプションのプルダウン選択を解除してください。 スタイルシートクラス(instance.extra_class)のプルダウン選択肢はJSM7の設定ファイルに次のフォーマットで指定して追加します。 設定ファイルに記述がなければ新規に追加します。
※
設定を反映させるには管理画面のテンプレート管理から任意のテンプレートを選択して空更新(何もせずに保存)して下さい。
1 2 3 4 5 | FILER_IMAGE_EXTRA_CLASS_CHOICES = (
('add_class1', u'追加クラス1'),
('add_class2', u'追加クラス2'),
・・・,
)
|
以下にテンプレートファイルの基本構成を示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | {% load thumbnail %}{% spaceless %}
{# 画像ファイルのクリックリンク #}
{% if link %}<a href="{{ link }}"{% if instance.target_blank %} target="_blank"{% endif %}>{% endif %}
{# リサイズなしで表示する場合 #}
{% if instance.use_original_image %}
<img
class="image-parts {% if instance.extra_class %}{{ instance.extra_class }}{% endif %}"
{% if instance.alignment %} align="{{ instance.alignment }}"{% endif %}
alt="{% if instance.alt %}{{ instance.alt }}{% endif %}"
src="{{ instance.image.url }}"
{% if instance.width %} width="{{ instance.width }}"{% endif %}
{% if instance.height %} height="{{ instance.height }}"{% endif %}
{% if instance.caption %} title="{{ instance.caption }}"{% endif %}
/>
{# リサイズして表示する場合 #}
{% else %}
{% thumbnail instance.image size crop=opts.crop as thumbnail %}
<img
class="image-parts {% if instance.extra_class %}{{ instance.extra_class }}{% endif %}"{% endif %}
{% if instance.alignment %} align="{{ instance.alignment }}"
alt="{% if instance.alt %}{{ instance.alt }}{% endif %}"
src="{{ thumbnail.url }}"
{% if thumbnail.width %} width="{{ thumbnail.width }}"{% endif %}
{% if thumbnail.height %} height="{{ thumbnail.height }}"{% endif %}
{% if instance.caption %} title="{{ instance.caption }}"{% endif %}
/>
{% endif %}
{# キャプションまたは概要があれば表示する #}
{% if instance.caption or instance.description %}
<span class="info">
{% if instance.caption %}<span class="title">{{ instance.caption }}</span>{% endif %}
{% if instance.description %}<span class="desc">{{ instance.description }}</span>{% endif %}
</span>
{% endif %}
{% if link %}</a>{% endif %}
{% endspaceless %}
|
リンクパーツには2種類があります。任意のplaceholderに配置するリンクパーツ1と記事パーツ(CKエディタ)の中で挿入するリンクパーツ2とです。
テンプレートの所在は次の通りです。テンプレートファイルが存在しない場合は新規作成します。 利用可能な変数は以下の表を御覧ください。 templates/cms/plugins/link.html
変数名 | データ型 | 説明 |
---|---|---|
title | テキスト | リンクタイトルまたはページタイトル |
new_window | ture/false | 新しいウィンドで開く許可 |
substitute | テキスト | 代替表示 |
link | URL | リンク先(内部/外部/ファイル) |
is_file | true/false | リンク先がファイル |
visible | true/false | リンクの表示 |
icon | テキスト | アイコンファイル名 |
icon_opts | object | アイコンのリサイズ設定 |
icon_url | URL | アイコンの表示用URL |
comment | テキスト | コメント |
extension | テキスト | ファイルリンク時のファイル拡張子 |
lastupdate | テキスト | 内部リンク先ページの最初の公開日 |
changeddate | テキスト | 内部リンク先ページの最終更新日 |
is_new | true/false | 内部リンク先ページが新着記事 |
file_size | テキスト | ファイルリンク時のファイルサイズ |
is_newはデフォルトでは30日以内であればtrueが返ります。 判定基準を変更したければJSM7の設定ファイルに次のフォーマットで指定して追加します(10日以内を判定基準にした場合)。 設定ファイルに記述がなければ新規に追加します。
※
設定を反映させるには管理画面のテンプレート管理から任意のテンプレートを選択して空更新(何もせずに保存)して下さい。
1 | ARTICLE_DATE_WITHIN = 10
|
以下にテンプレートファイルの基本構成を示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | {% load thumbnail %}{% spaceless %}
{% if visible %}
<h4 class={% if is_new %}"title new"{% else %}"title"{% endif %}>
{# アイコンが指定されている場合 #}
{% if icon %}
{% thumbnail icon icon_opts.size|default:"100x80" crop=icon_opts.crop upscale=icon_opts.upscale as thumbnail %}
<figure class="image">
<a href="{{ link }}">
<img src="{{ thumbnail.url }}"{% if new_window %} target="_blank"{% endif %}>
</a>
</figure>
{% endif %}
{# リンクの表示 #}
<span class="day">
{% if substitute %}
{{ substitute }}
{% else %}
{% firstof lastupdate|date:"Y/m/d H:i:s" changeddate|date:"Y/m/d H:i:s" %}
{% endif %}
</span>
<a href="{{ link }}">{{ title }}{% if file_size %}{{ file_size|filesizeformat }}{% endif %}</a>
</h4>
{% endif %}
{% endspaceless %}
|
テンプレートの所在は次の通りです。テンプレートファイルが存在しない場合は新規作成します。 利用可能な変数は以下の表を御覧ください。 templates/cmsplugin_filer_link/link.html
変数名 | データ型 | 説明 |
---|---|---|
name | テキスト | リンクタイトル |
link | URL | リンク先(内部/外部/ファイル/Eメール) |
style | テキスト | 追加クラス/id |
new_window | ture/false | 新しいウィンドで開く許可 |
追加クラスはJSM7の設定ファイルに次のフォーマットで指定して追加します。 設定ファイルに記述がなければ新規に追加します。
※
設定を反映させるには管理画面のテンプレート管理から任意のテンプレートを選択して空更新(何もせずに保存)して下さい。
1 2 3 4 5 | FILER_LINK_STYLES = (
(' ', u'なし'),
('add_class', u'追加クラス'),
('add_id', u'追加id'),
)
|
以下にテンプレートファイルの基本構成を示します。
1 2 3 4 | <a href="{{ link }}"
{% if style and style|cut:" "|length %} class="{{ style }}"{% endif %}
{% if new_window %} target="_blank"{% endif %}>{{ name }}
</a>
|
テンプレートの所在は次の通りです。テンプレートファイルが存在しない場合は新規作成します。 利用可能な変数は以下の表を御覧ください。 templates/cmsplugin_filer_file/plugins/file/default.html
変数名 | データ型 | 説明 |
---|---|---|
object.title | テキスト | リンクタイトル |
object.file.url | URL | ファイルURL |
object.file.size | テキスト | ファイルサイズ |
object.file_exists | true/false | ファイルの存在 |
object.get_file_name | テキスト | ファイル名 |
object.target_blank | true/false | 新しいウィンドで開く |
1 2 3 4 5 6 7 8 9 10 11 12 | {% if object.file.url %}
<span class="file">
<a href="{{ object.file.url }}"{% if object.target_blank %} target="_blank"{% endif %}>
{% if object.title %}{{ object.title }}{% else %}{{ object.get_file_name }}{% endif %}
{% if object.file_exists %}
<span class="filesize">({{ object.file.size|filesizeformat }})</span>
{% else %}
(file missing!)
{% endif %}
</a>
</span>
{% endif %}
|
トピックスページのリンクを抽出するタグです。 テンプレートは以下にあります。 templates/topics.html
変数名 | データ型 | 説明 |
---|---|---|
page.title | テキスト | リンクタイトル |
page.url | URL | リンクアドレス |
page.filerimagefield | object | 画像ファイル |
page.alt | テキスト | 代替文 |
page.changeddate | テキスト | 最終更新日時 |
page.substitute | テキスト | 任意のテキスト |
page.lastupdate | テキスト | 最初の公開日 |
page.is_new | true/false | 新着情報 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | {% load thumbnail %}
{% for page in page_list %}
<dl class="someclass{% if page.is_new %} new{% endif %}">
<dt class="day">
{% if page.substitute_datetime %}
{{ page.substitute_datetime|date:"Y/m/d" }}
{% else %}
{% firstof page.substitute page.changeddate|date:"Y/m/d" %}
{% endif %}
</dt>
<dd class="title">
<a href="{{ page.url }}">
{{ page.title }}{% if page.file_size %}({{ page.file_size|filesizeformat }}){% endif %}
</a>
</dd>
{% if page.image_url %}
{% thumbnail page.filerimagefield 230x150 as thumbnail %}
<dd class="image">
<a href="{{ page.url }}">
<img alt="{{ page.alt }}" src="{{ thumbnail.url }}">
</a>
</dd>
{% else %}
<dd class="image">
<a href="{{ page.url }}"><img alt="" src="#"></a></dd>
{% endif %}
</dl>
{% endfor %}
|
1 2 3 | <div class="pankzu">
<a href="/">HOME</a>/{% show_breadcrumb 1 "breadcrumbs.html" %}
</div>
|
1 2 3 4 5 6 7 | {% for ance in ancestors %}
{% if not forloop.last %}
<a href="{{ ance.get_absolute_url }}" target="_top">{{ ance.get_menu_title }}</a>/
{% else %}
{{ ance.get_menu_title }}
{% endif %}
{% endfor %}
|
1 2 3 4 5 6 7 8 9 10 | {% extends "base_default.html" %}
{% load cms_tags menu_tags %}
<p class="category"><a href="/category1/">カテゴリ1</a></p>
{% show_menu_below_id "category1_id" 0 100 0 0 "menu_sitemap.html" %}
<p class="category"><a href="/category2/">カテゴリ2</a></p>
{% show_menu_below_id "category2_id" 0 100 0 0 "menu_sitemap.html" %}
<p class="category"><a href="/category3/">カテゴリ3</a></p>
{% show_menu_below_id "category3_id" 0 100 0 0 "menu_sitemap.html" %}
|