mtde.info

Movable Type Developers Express

このカテゴリでは、Movable Type 4.1 でのナビゲーションに関するサンプルを紹介します。

『ナビゲーション関連サンプル』カテゴリ内のエントリ一覧

ウェブページを用いたナビゲーションバーを作る

2008年3月26日 17:33 | Writer: apstar | 記事本文

Movable Type 4 より追加された、「ウェブページ」の機能を用いて、ナビゲーションバーを作成することができます。

ウェブページ機能を用いたナビゲーション作成においては、以下のようなメリットがあります。

ウェブページを用いたナビゲーションバーを作るの続きを読む

パンくずナビゲーションを作る

2008年3月26日 23:03 | Writer: apstar | 記事本文

パンくずナビゲーション、パンくずリストなどと呼ばれる、トップページからの親子関係をそのままリンクとしたナビゲーションがあります。これをMovable Type 4.1で実現します。

ここでいうパンくずナビゲーションとは下図のようなもので、本サイトにも装備されています。

topicpath01.png

パンくずナビゲーションを作るの続きを読む

次のエントリ、前のエントリへのリンク（デフォルト）

2008年3月26日 23:36 | Writer: apstar | 記事本文

エントリページにおいて、次のエントリ、前のエントリへのリンクがあると非常に便利です。

デフォルトテンプレートにはこの機能がついています。次のエントリはMTEntryNextテンプレートタグで、前のエントリはMTEntryPreviousテンプレートタグで取得することができます。

コード

<MTIf name="entry_template">
   <p class="first">このページは、<$MTEntryAuthorLink$>が<$MTEntryDate format="%x %X"$>に書いたブログ記事です。</p>
   <MTEntryPrevious>
      <p>ひとつ前のブログ記事は「<a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1"$></a>」です。</p>
   </MTEntryPrevious>
   <MTEntryNext>
      <p>次のブログ記事は「<a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1"$></a>」です。</p>
   </MTEntryNext>
</MTIf>

このコードの使途

このコードでは、前のエントリ・次のエントリのリンクが、「エントリの投稿順」でしか取得できません。また、同じカテゴリ内でのエントリのみではなく、全てのエントリが対象となるため、単に情報を時系列で見せればいい日記サイトなどでは有効です。

ハッシュ変数を使って同一カテゴリ内の前・次リンク表示(投稿日時順)

2008年3月26日 23:46 | Writer: apstar | 記事本文

ハッシュ変数を用い、同一カテゴリ内エントリのみの前のリンク・次のリンクを、エントリの投稿日時順に取得します。つまり、別のカテゴリのリンクは生成されません。

コードや説明は、こちらを参照してください。

Movable Type 備忘録：ハッシュ変数を使って同一カテゴリ内の前・次リンク表示

このコードは、通常「ブログ記事の詳細」モジュールの一箇所へ貼ります。

Movable Type 4.1 で使用できるようになった変数を駆使すれば、プラグインを用いなくともこのような制御が可能となります。

ハッシュ変数を使って同一カテゴリ内の前・次リンク表示(エントリベースネーム順)

2008年3月27日 00:00 | Writer: apstar | 記事本文

ハッシュ変数を用い、同一カテゴリ内エントリのみの前のリンク・次のリンクを、エントリのベースネーム（ファイル名）順に取得します。別のカテゴリのリンクは生成されません。

サイトをファイル名で厳密に管理運用する場合には、カテゴリ内の次・前のエントリへのリンクは、エントリベースネーム順で生成したい場合があります。例えば、このサイト（mtde.info）ではエントリベースネーム名に10番単位でソート用インデックスを付加しており、あとからエントリとエントリの間へ別のエントリを追加して挟むことができる設計となっており、そのような理由でエントリベースネームで判断するコードを先行実装しています。

コード

コードは、先のエントリでも紹介しました、こちらのものを改造させて頂きました。

Movable Type 備忘録：ハッシュ変数を使って同一カテゴリ内の前・次リンク表示 
<MTIf name="entry_template">
<ul>
<MTIfNonEmpty tag="EntryCategory">
    <MTEntryCategories>
        <MTSetVarBlock name="cat_name"><$MTCategoryLabel$></MTSetVarBlock>
    </MTEntryCategories>
<MTSetVarBlock name="cat"><MTGetVar name="cat_name" index="0"></MTSetVarBlock>
<MTSetVarBlock name="EntBaseName"><$MTEntryBaseName$></MTSetVarBlock>
<MTEntries lastn="0" category="$cat">
        <MTSetVarBlock name="LopEntBaseName"><$MTEntryBaseName$></MTSetVarBlock>
        <MTSetVarBlock name="ent_name" key="$LopEntBaseName"><$MTEntryTitle$></MTSetVarBlock>
        <MTSetVarBlock name="ent_link" key="$LopEntBaseName"><$MTEntryPermalink$></MTSetVarBlock>
</MTEntries>
<MTLoop name="ent_name" sort_by="key value reverse">
        <MTIf name="EntBaseName" eq="$__key__">
            <$MTSetVar name="find" value="1"$>
        <MTElseIf name="find">
            <li class="prev">前のエントリ: <a href="<MTGetVar name="ent_link" key="$__key__">" title="前のエントリ"><MTGetVar name="ent_name" key="$__key__"></a></li>
            <$MTSetVar name="find" value="0"$>
        </MTIf>
</MTLoop>
<MTLoop name="ent_name" sort_by="key value">
        <MTIf name="EntBaseName" eq="$__key__">
            <$MTSetVar name="find" value="1"$>
        <MTElseIf name="find">
            <li class="next">次のエントリ: <a href="<MTGetVar name="ent_link" key="$__key__">" title="次のエントリ"><MTGetVar name="ent_name" key="$__key__"></a></li>
            <$MTSetVar name="find" value="0"$>
        </MTIf>
</MTLoop>
<MTElse>
    <MTEntryPrevious><li class="prev">前のエントリ: <a href="<$MTEntryPermalink$>" title="前のエントリ"><$MTEntryTitle$></a></li></MTEntryPrevious>
    <MTEntryNext><li class="next">次のエントリ: <a href="<$MTEntryPermalink$>" title="次のエントリ"><$MTEntryTitle$></a></li></MTEntryNext>
</MTIfNonEmpty>
</ul>
</MTIf>

このコードは、通常「ブログ記事の詳細」モジュールの一箇所へ貼ります。

動作サンプル

2008年3月現在、このサイトに実装しています。そちらでご確認ください。

ページ末尾付近に「ページ先頭へ」のアンカーリンクをつける

2008年3月27日 00:17 | Writer: apstar | 記事本文

次の画像ような、「ページ先頭へ」というリンクを生成する方法を紹介します。

totop01.png

これは、単にid要素へのアンカーリンクを貼ればよいです。例えば、このサイトの場合は、（CSSで見た目を調整しています）以下のような「ページ先頭へ」リンクを設けています。headcontentのid要素（つまり、ヘッダー）を目的地アンカーとしています。

<a href="#headcontent" title="<$MTEntryTitle$>">ページ先頭</a>へ

このようなコードは、「ブログ記事の詳細」や「ブログ記事の概要」、あるいは「ブログ記事」や「ブログ記事リスト」など、ページが長くスクロールしそうなモジュールへ貼るとよいです。

エントリ
タグ
はじめに
導入編
ローカル環境
変数
サンプル
その他
トラブル集
2008 mtde.info