ウェブページテンプレートを作る！

ウェブページテンプレートを作る！

メインぺージと同様に、ウェブページもMT化を進めていきましょう！
ウェブページはデザインの、テンプレート＞アーカイブ・テンプレート＞ウェブページから開くことができます。

準備

例によって、確認用にウェブぺージをいくつか作っておいてくださいね。
必要なヘッダー、フッターのモジュールはindex.htmlのインデックス・テンプレートからコピーしておきましょう。
また、CSSやファイルのリンクなど、index.htmlと共通して必要なものも、前回と同じようにパス<$mt:BlogRelativeURL$>〜から始まるように変えておきましょう。

ぺージタイトル、本文を表示させる

まずはウェブページに最低限必要なタイトルと本文を表示させましょう。

<$mt:PageTitle$>

ウェブページのタイトルを表示します。

https://movabletype.net/tags/2007/08/pagetitle.html

<$mt:PageBody$>

ウェブページの本文を表示します。

https://movabletype.net/tags/2007/08/pagebody.html

<$mt:PageMore$>

ウェブページの続きに入力した内容を表示します。

https://movabletype.net/tags/2007/08/pagemore.html

<section class="UL-mainImage">
  <div class="mt-container">
    <h2 class="UL-mainImage__title">
      <i class="fa fa-file-text-o"></i><$mt:FolderLabel$>
    </h2>
  </div>
</section>
<main class="pages-wrap">
  <div class="mt-container">
    <h3 class="pages__title"><$mt:PageTitle$></h3>
    <div class="pages-textArea">
      <$mt:PageBody$>
      <$mt:PageMore$>
    </div>
  </div>
</main>

ナビからウェブページに飛んで、確認してみましょう。すると…？

ウェブページのタイトルと本文が表示されました。

パンくずリストを表示させる

インデックスページのテンプレートを作る！その２でナビゲーションを作成したときに説明したように、ウェブページはフォルダに入れることができます。
さらにフォルダの中にフォルダを入れ、その中にウェブページを作ることもできます。

う〜ん、サイトを見ている人が、どのページを見ているのかわからなくなっちゃうかもしれないね。

そんなときは、フォルダから現在位置を表示するパンくずリストを作りましょう！

テーマ「Stylish Corporate」にもパンくずリストが採用されています。

パンくずリストは、現在見ているぺージを格納しているフォルダを上から順番に並べて表示しています。
なので「上位のフォルダを表示する」MTタグと、前回使った「フォルダ名を表示させる」MTタグを組み合わせると、パンくずリストが表示できます。

<mt:ParentFolders>

最上位のフォルダから現在のフォルダまでを繰り返して表示するブロックタグです。

https://movabletype.net/tags/2015/12/parentfolders.html

これを組み合わせると

<ul>
  <li><a href="<$mt:BlogRelativeURL$>">トップ</a></li>
  <mt:ParentFolders>
  <li>
    <a href="<$mt:PagePermalink$>"><$mt:FolderLabel encode_html="1"$></a>
  </li>
  </mt:ParentFolders>
  <li><span><$mt:PageTitle encode_html="1"$></span></li>
</ul>

になります。
該当の箇所に入れ、確認してみましょう。

パンくずリストが表示されました！

とってもシンプルですがウェブページのテンプレートが完成しました。

パンくずリストもモジュールにしておいてもいいかもね