PolyMoNote
Wiki Like SYSTEM 「PolyMoNote」の公式サイト
Template
| 目次 |
|---|
概要
PolyMoNoteはテンプレートを利用することで、サイトの見た目を変更することができます。
"pn/template"ディレクトリに、テンプレートに関連する各ファイル・ディレクトリが収められています。
テンプレートファイル
"page.html"
"pn/template"ディレクトリにある"page.html"が、サイト表示のHTMLのベースになるテンプレートファイルです。
このファイルに記述されたHTMLと変換されたテンプレートタグが、サイトのHTMLとして表示されます。
また、ブックごとに違うテンプレートファイルを使いたい場合は、"pn/template"ディレクトリに"page_ブックID.html"というファイルを作成して置きます。
たとえば、"sample"というブックのテンプレートファイルを別途作る場合は、以下のようなファイル名にします。
// ブックID"sample"のテンプレートファイル page_sample.html
こうすることで、デフォルトや他のブックの場合は"page.html"、ブックID"sample"の場合は"page_sample.html"の内容がテンプレートファイルとして取り込みます。
"sidebar.html"
"pn/template"ディレクトリにある"sidebar.html"が、サイドメニューのテンプレートファイルです。
!!INCLUDE_SIDEBAR!!
環境設定の"サイドメニュー"の項目で設定されたページがサイドメニューの内容として、上記のテンプレートタグ"INCLUDE_SIDEBAR"の位置に取り込まれます。
サイドメニューとして扱われるページは、デフォルトの設定では"SideMenu"となっています。
サイドメニューとして扱うページを変更したい場合は、環境設定の"サイドメニュー"の項目を書き換えてください。
PolyMoNoteのHTMLの構成
デフォルトのテンプレートの場合、PolyMoNoteのHTMLは以下のような構成になります。
枠線は"<div>"タグで、"id"や"class"は、それぞれの属性に割り当てられている名前です。
id: main
サイト全体のレイアウト用。
id: header
ヘッダー。
<h1 id="TOP">SITE_NAME</h1>
サイトの名前、"環境設定"で設定されているサイト名が表示される場所になります。
class: search
検索フォームの場所になります。
class: menu
サイトやページ管理などのメニュー、ログイン中のみ表示されます。
テンプレートタグ"!!EDIT_LINK!!"が置き換わったものです。
<h2 class="page_title">PAGE_TITLE</h2>
ページ名です。
ページ編集で"ページ名を表示しない"の項目にチェックが入っている場合、こちらは非表示となります。
class: pagedata
ページIDやページの作成時間が表示される場所になります。
id: contents
ページの本文が表示される場所になります。
id: sidebar
サイドメニューが表示される場所になります。
class: top_link
ページ上部("<h1>"タグの"id: TOP")へのリンクが表示される場所になります。
テーマファイルによっては、"contents"と"sidebar"の回り込み解除にも利用されます。
class: footer
フッターです。
テンプレートタグ
テンプレートタグについて
サイトの名前やページの本文、サイトの管理メニューなど、PolyMoNoteの各種表示にはテンプレートタグと呼ばれる専用の書式を用います。
テンプレートタグはページが表示された時に、HTMLやテキストに置き換えられます。
テンプレートタグの説明については、こちらのテンプレートタグの一覧をご覧ください。
プラグインをテンプレートに記述する
ページ本文で記述するプラグインやタグを、テンプレートファイル上でテンプレートタグとして記述することができます。
プラグインやタグをテンプレートファイルに記述する場合は、以下のようにします。
!!プラグイン名(引数A){引数B}!!
TOPICPATHプラグインやDIARYNAVIプラグインなど、ほとんどのページで利用されるようなプラグインは、テンプレートファイルに記述したほうがページを作成するたびに書き込む必要がなく便利です。
たとえば、前述のTOPICPATH・DIARYNAVIの各プラグインを記述する場合は以下のようにします。
!!TOPICPATH()!! !!DIARYNAVI(Diary)!!
また、エラーやセキュリティ上の問題はありませんが、テンプレートで記述することをあまり意識していない機能のものもありますので、ご注意ください。
テーマファイル
"pn/templates/theme"ディレクトリに置かれたテーマファイル(スタイルシート・CSSファイル)によるサイトの見た目の変更ができます。
デザインテーマの変更は、"環境設定"のデザインテーマの項目から設定できます。
現在のPolyMoNoteのバージョンでは、標準で以下のテーマファイルが付属しています。
- simple-red.css
- simple-blue.css
- simple-orange.css
- simple-purple.css
- simple-green.css