LoginSignup
0
1

More than 5 years have passed since last update.

MovableTypeでパンくずのテンプレートモジュールを作成

Last updated at Posted at 2018-02-01

MTを構築した際、全ページ共通で使えるパンくずのテンプレートモジュールを作成したので、作り方をメモしておきます。

前提

各ページにページIDを構造的に定義します。
こうすれば、例えばID01-で部分一致させれば、ID01-未満全て(ID01-01,ID01-02,ID01-01-01...)を絞ることができます。

パス ページID ページ内容
/ ID00 トップページ
/blog01/ ID01 ブログ01トップ
/blog02/ ID02 ブログ02トップ
/blog02/page01/ ID02-01 ブログ02ページ01
/blog02/page02/ ID02-02 ブログ02ページ02
/blog02/page02/sub01/ ID02-02-01 ブログ02ページ02の下位ページ01
/blog02/page02/sub02/ ID02-02-02 ブログ02ページ02の下位ページ02

ウェブページ

タイトルを以下のようにIDに[]をつけて設定する。
[ID02-01]ブログ02ページ01
HTMLに吐き出される際は[]は書き出さない。

IDの割り当て

各ブログでアーカイブテンプレートを作成するときに、タイトルをIDとタイトル文字に分けて、それぞれpage_titleとpage_idに格納。
page_idは後述の<$mt:Include parent="1" module="パンくず"$>で使用。

%b.html
<mt:SetVars>
  page_title=<$mt:PageTitle  regex_replace="/\[[\w-]+\]/","" $>
  page_id=<$mt:PageTitle regex_replace="/(\[|\].+)/g","" $>
</mt:SetVars>

<!DOCTYPE html>
<html lang="ja">
<head>
  <$mt:Include parent="1" module="HEAD"$>
  <title><mt:Var name="page_title"></title>
</head>
<body>
  <$mt:Include parent="1" module="ヘッダー"$>
  <$mt:Include parent="1" module="パンくず"$>
  <$mt:PageBody$>
  <$mt:Include parent="1" module="フッター"$>
</body>
</html>

パンくず

ウェブサイトトップ -> デザイン -> テンプレート -> モジュールからパンくずを作成する。

表示サンプル

自分の階層以上の階層にリンクが貼られます。

第2階層のページでの表示

TOP > ブログ02トップ

第3階層のページでの表示

TOP > ブログ02トップ > ブログ02ページ02

第4階層のページでの表示

TOP > ブログ02トップ > ブログ02ページ02 > ブログ02ページ02の下位ページ02

パンくず.module
<mt:Ignore>########### 第2階層名 ###########</mt:Ignore>
<mt:If name="page_id" like="ID01-">
<$mt:SetVar name="bread_level_2" value="ブログ01"$>
<$mt:SetVar name="bread_level_2_dir" value="blog01"$>

<mt:ElseIf like="ID02-">
<$mt:SetVar name="bread_level_2" value="ブログ02"$>
<$mt:SetVar name="bread_level_2_dir" value="blog02"$>
...
</mt:If>

<mt:Ignore>########### 第3階層名 ###########</mt:Ignore>
<mt:If name="page_id" like="ID02-01-">
<$mt:SetVar name="bread_level_3" value="ブログ02ページ01"$>
<$mt:SetVar name="bread_level_3_dir" value="blog0201"$>

<mt:ElseIf like="ID02-02-">
<$mt:SetVar name="bread_level_3" value="ブログ02ページ02"$>
<$mt:SetVar name="bread_level_3_dir" value="blog0202"$
...
</mt:If>

<mt:Ignore>########### 出力部分 ###########</mt:Ignore>
<nav>
  <ul>
    <li><a href="/">TOP</a></li>

    <mt:If name="bread_level_2" ne="">
    <li><a href="/<mt:Var name="bread_level_2_dir">/"><mt:Var name="bread_level_2"></a></li>
    </mt:If>

    <mt:If name="bread_level_3" ne="">
    <li><a href="/<mt:Var name="bread_level_2_dir">/<mt:Var name="bread_level_3_dir">/"><mt:Var name="bread_level_3"></a></li>
    </mt:If>  
    <li><mt:Var name="page_title"></li>
  </ul>
</nav>

詳細

<mt:If name="page_id" like="ID01-">

page_idにID01-が含まれている場合の表示を設定します。
(例えばID01-01、ID01-01-01などID01を含まないID01以下のページです)

<$mt:SetVar name="bread_level_2" value="ブログ01"$>
<$mt:SetVar name="bread_level_2_dir" value="blog01"$>

bread_level_2のvalueには第2階層表示名、bread_level_2_dirのvalueには第2階層ディレクトリを設定します。

<mt:If name="bread_level_2" ne="">

第3階層以下のページで表示されます。bread_level_2が設定されていない場合は表示されません。

以上。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1