おすすめ記事一覧などの独自のメニューを作成する
本ソフトには「関連記事一覧」や「最新記事一覧」といった記事の一覧を表示する機能があります。
関連記事や最新記事は本ソフトが自動的に設定しますが、「おすすめ記事一覧」や「人気記事一覧」など、独自のメニューを作成することもできます。
作成手順
以下のように、「メニュー」のページを表示し、新規作成ボタンをクリックします。
メニュー編集画面で、以下の項目を入力します。
- メニュー名
- メニューの名前を入力します。
- アクセスキー
- テンプレートでこのメニューを使用するための識別子です。詳しくは後述します。
- 追加するページ
- 記事のファイル名を入力して、追加ボタンをクリックすると一覧に追加されます。
以下は「おすすめ記事一覧」を作成した例です。
記事の順番はドラッグ＆ドロップで入れ替えることができます。
テンプレートでの使用方法
作成したメニューを表示するようにテンプレートを修正します。
まずは、作成したメニューの記事一覧を表示するためのファイルを新規に作成します。
以下の場所に作成します。
- templates
- widgets
- reccomend.njk ←新規作成
- post.njk
- top.njk
- (その他)
- widgets
後述するパスの設定が正しくできれば、ファイルの作成場所はどこでも問題ありませんが、よくわからない場合は以下のサンプルにしたがって作成することをおすすめします。
ファイルの中身は以下のように記事一覧を表示するようにします。
１行目と３行目のreccomendと記載されている部分は上記で設定した、アクセスキーに置き換えてください。
reccomend.njk<p class="widget-title">{{ menus.reccomend.title }}</p>
<ul class="index">
{% for p in menus.reccomend.pages %}
<li class="index-item">
{{ macro.link(page, p) }}
</li>
<hr class="thin narrow">
{% endfor %}
</ul>テンプレートで以下の記載をすると、上記ファイルが読み込まれ、おすすめ記事一覧が表示されます。
{% include 'widgets/reccomend.njk' %}例えば、各記事のサイドメニューで、最新記事一覧の下に、おすすめ記事の一覧を表示させたい場合は以下のようにpost.njkで最新記事一覧（latest.njk）の下に今回の記載を追記します。
post.njk{% block aside %}
{% include 'widgets/latest.njk' %}
{% include 'widgets/reccomend.njk' %}
{% include 'widgets/categories.njk' %}
{% include 'widgets/tags.njk' %}
{% endblock %}動作確認
テンプレートを修正したら、プレビューで記事のページを表示してみると、おすすめ記事の一覧がサイドメニューに表示されることが確認できます。
