4

ナビゲーション メニューのリキッド テンプレートを作成し、現在アクティブなメニュー項目にアクティブな CSS ルールを追加しようとしました。

メニュー項目をレンダリングするための私の Liquid タグは次のとおりです。

<ul class="list-inline float-right">
    {% assign menu_pages = site.pages | sort: 'index' %}
    {% for p in menu_pages limit 3 %}
        {% if page.menu_title and page.url == p.url %}
        <li class="active"><a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a></li>
        {% else %}
        <li><a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a></li>
        {% endif %}
    {% endfor %}
</ul>

indexメニュー項目を並べ替えるための yaml フロント マター変数です。
menu_titleメニュー バーに表示されるカスタム メニュー タイトルを追加するための yaml フロント マター変数です。

.html上記の 2 つのフロント マター変数を、ページとしてレンダリングされるルートのファイルに直接追加します。

しかし、ブラウザでこれを確認したところ、main.css および framework.css ファイルにリンクする別の空白のメニュー項目が表示されました。

レンダリングされた html は次のとおりです。

<ul class="list-inline float-right">
    <li><a href="/css/main.css"></a></li>
    <li><a href="/css/framework.css"></a></li>
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/works/">Works</a></li>
    <li><a href="/blog/">Blog</a></li>
</ul>

これは、main.sass および Framework.sass ファイルをフォルダーにある Jekyll アセットにインクルードした直後に発生cssし、部分的な sass ファイルは_sassフォルダーに含まれていました。フロントマターにより、これらの2つのsassファイルがページとしてレンダリングされると思います。これは、2つのsassファイルに追加したyamlフロントマターが原因です。---それらの上にある二重線を削除しようとした後、ローカルホストを更新すると、空白のメニュー項目がなくなりました。

レンダリングするメニュー項目が 3 つあります。

  • 家
  • 作品
  • ブログ

しかし、結果は5です！

これはyamlのフロントマターが原因であるというのは本当ですか? Jekyll sass アセット パイプラインを使用しているときにこれを修正するにはどうすればよいですか?

4

2 に答える 2

2

この場合、site.html_pages代わりに使用することをお勧めします。

{% assign menu_pages = site.html_pages | sort: 'index' %}

https://jekyllrb.com/docs/variables/#site-variablesから、次のsite.html_pagesとおりです。

site.pagesで終わるリストのサブセット.html。

于 2016-09-02T02:43:18.007 に答える
1

if 句は menu_title でフィルタリングしていますが、else 句はフィルタリングしていません。条件を次のように変更できます。

{% if page.menu_title %}
  <li{% if page.url == p.url %} class="active">{% endif %}
    <a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a>
  </li>
{% endif %}
于 2016-09-02T07:46:59.920 に答える