Question

我正在创建一个jekyll博客，这是链接。 https://jinmc.github.io/programmingTips/

您还可以从此处查看代码：https://github.com/jinmc/programmingTips

现在我刚完成侧边栏的制作，而且我知道它是如何工作的，并且仅使用一个关键字csharp即可实现。其余的无效。

我通过制作一个csharp.html文件并在其上实现此代码来实现这一目的。

---
layout: default
sidebar: sidebar_nav
---

<h1>C Sharp</h1>
<ul>
    {% for posts in site.categories.csharp %}
    <li>
    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
            <span class="post-meta">{{ posts.date | date: date_format }}</span>
            <h3>
            <a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
            </h3>
            <p>{{posts.meta}}</p>
    </li>
    {% endfor %}

</ul>

类似的东西。

我可以制作有关侧边栏导航的所有html，但我开始怀疑如果这是一种好的做法，因为其中的内容几乎是相似的。另外，每次创建新类别时，我都必须制作所有其他html文件。但是，仍然没有想到可以实现此目的的自动化。

谢谢！

Answer 1

我建议编写一个JavaScript方法，该方法侦听导航栏元素上的点击，并有选择地隐藏或显示相关的帖子链接。

修改_layouts/home.html，使其呈现一个包含所有帖子链接的ul，并为包含该类别的所有帖子链接的每个类别呈现一个ul。向这些ul元素添加标识类别或“全部”的ID。使用jQuery在页面加载时隐藏所有类别特定的ul元素。在script中使用另一个_layouts/default.html定义一个初始化为'all'的全局变量，这是一个单击侦听器，它会在导航栏中侦听不同类别的单击并隐藏先前显示的ul并显示通过应用CSS样式获得所需的ul。您还可以更改页面上的文本以显示当前类别。

Jekyll博客我是否必须制作类似的HTML

1 个答案: