如何链接Jekyll中的帖子类别

Question

我在我的index.html中为Jekyll获得了以下代码。我试图找到一种方法将与每篇文章相关的类别链接到实际文章本身。所以，如果一个帖子包含“旅行”类别，我想点击一个链接，指出“旅行”，这会将我带到所有被归类的帖子。

<ul class="post-list" style="list-style-type: none;"> 
{% for post in paginator.posts %} 
    {% unless post.categories contains 'portfolio' %} 
    <li> 
    <h3><a href="{{ post.url }}">{{ post.title }}</a></h3> 
    <span class="post-meta">{{ post.date | date: "%c" }}</span> &nbsp; 
    Filed In: 
    {% unless p.categories == empty %} 
        {% for categories in post.categories %} 
         <a href="/{{ categories | first }}">{{ categories }}</a> //problem area 
        {% endfor %} 
       {% endunless %} 
    &nbsp; 
    {{ post.excerpt }} <a href="{{ post.url }}">Find out more...</a><br><br>  
    </li> 
    {% endunless %} 
    {% endfor %} 
</ul> 

Answer 1

想通了。对于其他人想知道如何做同样的事情，首先在你的根目录下设置一个categories.html页面。此页面将列出符合特定类别的所有帖子。它通过将类别名称转换为命名的锚节点，例如<a href="#{{ category | first | remove:' ' }}"，然后前面的代码创建实际的命名锚点div，该锚点显示与该类别关联的帖子。最后，在您要显示类别列表的页面或部分下方，显示链接到您的categories.html页面中指定锚点部分的最后一位代码。

第一段代码进入Categories.html：

<h2>Posts by Category</h2> 
<ul> 
{% for category in site.categories %} 
<li><a href="#{{ category | first | remove:' ' }}"><strong>{{ category | first }}</strong></a></li> 
{% if forloop.last %} 
    {% else %} 
    {% endif %} 
    {% endfor %} 
</ul> 

第二条代码进入Categories.html：

{% for category in site.categories %} 
<div class="catbloc" id="{{ category | first | remove:' ' }}"> 
<h2>{{ category | first }}</h2> 
<ul> 
{% for posts in category %} 
{% for post in posts %} 
{% if post.url %} 
<li> 
    <a href="{{ post.url }}"> 
<time>{{ post.date | date: "%B %d, %Y" }}</time> - 
{{ post.title }} 
</a> 
</li> 
{% endif %} 
{% endfor %} 
{% endfor %} 
</ul> 
    </div> 
    {% endfor %} 

第三个代码去哪里要显示你的命名锚链接类别：

Filed In: 
{% unless p.categories == empty %} 
{% for categories in post.categories %} 
<a href="http://localhost:4000/category.html#{{categories}}">{{ categories }}</a> 
{% endfor %} 
{% endunless %} 

使用以下CSS来防止在你点击它们之前显示的部分过早：

.catbloc:not(:target){ 
display: none; 
} 

希望这有助于！