如何在Jekyll中链接帖子类别 [英] How to link post categories in Jekyll

问题描述

我在index.html中为Jekyll提供了以下代码.我正在尝试找到一种将与每个帖子相关的类别链接到实际帖子本身的方法.因此，如果某个帖子包含"travel"类别，我想单击显示"travel"的链接，这将使我进入所有归类为此类的帖子.

I've got the following code in my index.html for Jekyll. I'm trying to find a way to link the categories associated with each post to the actual post themselves. So, if a post contains the category "travel" I want to click on a link that says "travel" which will bring me to all posts categorized as such.

 <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>

推荐答案

弄清楚了.对于想知道如何执行此操作的其他用户，请首先在根目录中设置categories.html页.此页面将列出符合特定类别的所有帖子.通过将类别名称转换为诸如<a href="#{{ category | first | remove:' ' }}"这样的命名锚段，然后前面的代码创建了实际的命名锚div，该名称显示了与该类别关联的帖子.最后，在要显示类别列表的页面或部分下，显示最后一段代码，这些代码链接到categories.html页面中的命名锚点部分.

Figured it out. For anyone else wondering how to do the same, first setup a categories.html page in your root directory. This page will list all posts that meet a specific category. It does by turning the category names into named anchor slugs as such <a href="#{{ category | first | remove:' ' }}" and then the preceding code creates the actual named anchor div which displays the post associated with that category. Finally, under the page or section where you want to display the list of categories, you present the final bit of code which links to the named anchor section in your categories.html page.

进入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 %}

第三段代码转到您要显示命名的锚链接类别的位置:

Third piece of code to go where you want to display your named anchor linked categories:

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

使用以下CSS来防止部分在单击之前过早显示:

Use the following CSS to prevent the sections from displaying prematurely before you click on them:

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

希望这会有所帮助！

这篇关于如何在Jekyll中链接帖子类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！