3

我的 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>
4

1 回答 1

3

弄清楚了。对于其他想知道如何做同样的事情的人，首先categories.html在你的根目录中设置一个页面。此页面将列出符合特定类别的所有帖子。它通过将类别名称转换为命名锚 slug 来<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;
}

希望这可以帮助！

于 2015-07-05T21:53:42.710 回答