らい帳
プログラミングの知識は不要で自分のブログが簡単に作成できる無料ソフト「らい帳」の使い方を紹介しています。

おすすめ記事一覧などの独自のメニューを作成する

本ソフトには「関連記事一覧」や「最新記事一覧」といった記事の一覧を表示する機能があります。

関連記事や最新記事は本ソフトが自動的に設定しますが、「おすすめ記事一覧」や「人気記事一覧」など、独自のメニューを作成することもできます。

作成手順

以下のように、「メニュー」のページを表示し、新規作成ボタンをクリックします。

メニュー 新規作成

メニュー編集画面で、以下の項目を入力します。

メニュー名
メニューの名前を入力します。
アクセスキー
テンプレートでこのメニューを使用するための識別子です。詳しくは後述します。
追加するページ
記事のファイル名を入力して、追加ボタンをクリックすると一覧に追加されます。

以下は「おすすめ記事一覧」を作成した例です。

記事の順番はドラッグ&ドロップで入れ替えることができます。

メニュー作成画面

テンプレートでの使用方法

作成したメニューを表示するようにテンプレートを修正します。

まずは、作成したメニューの記事一覧を表示するためのファイルを新規に作成します。

以下の場所に作成します。

  • templates
    • widgets
      • reccomend.njk ←新規作成
    • post.njk
    • top.njk
    • (その他)

後述するパスの設定が正しくできれば、ファイルの作成場所はどこでも問題ありませんが、よくわからない場合は以下のサンプルにしたがって作成することをおすすめします。

ファイルの中身は以下のように記事一覧を表示するようにします。

1行目と3行目の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 %}

動作確認

テンプレートを修正したら、プレビューで記事のページを表示してみると、おすすめ記事の一覧がサイドメニューに表示されることが確認できます。

メニューの表示




Related Posts

  • 作成したサイトをレンタルサーバーにアップロードする

    サイト生成で生成したファイルをレンタルサーバーにアップロードして世の中に公開する方法を紹介します。ここではエックスサーバーというレンタルサーバーを例にして説明します。エックスサーバーは10日間の無料お...


  • らい帳の基本的な使い方

    らい帳の基本的な使い方を紹介します。ダウンロードしたexeファイルをダブルクリックして起動するとインストーラが起動され自動でインストールされます。アンインストールしたい場合は他のソフトと同様、「プログ...


  • 画像を管理して簡単に表示する方法

    ブログを書いていいて、面倒なのが画像の管理です。らい帳では自分のパソコンに入っているjpgやpng形式の画像ファイルを簡単に管理してブログで表示できます。記事の作成画面で、以下の画像エリアが表示されて...


  • googleアドセンスの広告を設定して収益化する

    ブログにgoogleアドセンスの広告を表示して収益化する方法を紹介します。無料ブログなどのサービスでは、広告を貼ることができない場合が多いですが、らい帳で作成したブログは、広告やアフィリエイトなどを自...


  • UMLでフローチャートなどの図を作成する

    らい帳にはUMLでフローチャートなどの図を作成する機能があります。フローチャートだけでなく、シーケンスダイアグラムやガントチャートなども作成可能です。UMLの作成にはmermaid.jsというライブラ...


  • テーブル(表)を表現する

    テーブル(表)形式で表現したい場合は、以下のようにします。:の位置で文字寄せを指定できます。先頭に:XXXを記載すると、XXXは表題になります。


  • プログラミングコードをシンタックスハイライトで表示する

    プログラミングのコードを表現したい場合はコードの文字列を`(バッククウォート)で囲うと、囲われた部分の文字列はコードとして表現されます。変数に値を代入するにはa = 3;のようにします。複数行に渡るプ...


  • 文献などの引用を表現する

    文献などを引用を示すための表現をする場合は文章の先頭にを記載します。複数行に渡る文章の引用を示す場合はそれぞれの行の先頭にを記載します。Markdown(マークダウン)は、文書を記述するための軽量マー...


  • 数式をLATEXで表現する

    $$で囲うとLATEXの形式で数式を表現できます。$だと、文章中に数式を表現できます。数式の変換ライブラリはkatexを使用しています。詳しい使い方は公式ページをご確認ください。半径 rrr の円の面...


  • 箇条書きのリストを表示する

    箇条書きリストを表現するにはリストの各項目の先頭に*または-または+を記載します。+を使用した場合は、リストの先頭の・が表示されませんが、その代わりにアイコンリストとしてフォルダ構成などを表現できます...