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

希望这有帮助！

如何链接Jekyll中的帖子类别

1 个答案: