如何创建每个类别的链接 [英] how to create a link to each category

问题描述

我试图创建一个显示所有类别的导航栏，然后单击每个类别，然后将其链接到该类别中的所有帖子.

I am trying to create a navigation bar displaying all the categories and then by clicking on each category, it then links to all the posts in that category.

我在下面尝试过，它显示所有类别，但不显示链接.

I tried below, it displays all the categories but not as a link.

{% for category in site.categories %}
   <div class= "categories-title"><a name="{{ category | first }}">{{ category | first   }}</a></div>   
{% endfor %}

我还尝试了jekyll-category-archive-plugin，如下所示，但它给出了错误:未知标签"category".

I also tried jekyll-category-archive-plugin as below, but it gives Error: Unknown tag 'category'.

{% for category in site categories %}
  {% category link category %}This is a link to {{category}} {% endcategorylink %}
{% endfor %}

任何人都可以给我一些技巧以最好地做到这一点吗?

Can anyone give me some tips how to best do this?

非常感谢. 静

推荐答案

还有另一种适用于GitHub Pages的解决方案:
一页包含所有类别的所有帖子.

There's another solution that works on GitHub Pages:
One single page that contains all posts for all categories.

我在这里回答了类似的问题，展示了如何执行此操作:
在jekyll博客

I answered a similar question here where I showed how to do this:
An easy way to support tags in a jekyll blog

在我的答案中，我使用的是标签而不是类别，但据我所知，两者的工作方式完全相同.
(这样您就可以获取我的代码，并用site.categories替换site.tags)

In my answer, I'm using tags instead of categories, but as far as I know, both work exactly the same way.
(so you can just take my code and replace site.tags by site.categories)

为每个标记生成的HTML如下所示:

The generated HTML for each tag will look something like this:

  <h3 id="jekyll">jekyll</h3>
  <ul>
    <li>
      <a href="/blah/">Newest Jekyll post</a>
    </li>
    <li>
      <a href="/foo/">Older Jekyll post</a>
    </li>
  </ul>

---

该页面显示每个类别的所有帖子.
现在转到导航栏中的类别列表.

---

That was the page which displays all posts for each category.
Now to the categories list in the navigation bar.

再次，看看上面的HTML:
感谢id="jekyll"部分，您可以使用链接/tags/#jekyll加载/tags/页面并直接跳转到Jekyll标签.

Again, take a look at the HTML above:
Thanks to the id="jekyll" part, you can use the link /tags/#jekyll to load the /tags/ page and directly jump to the Jekyll tag.

在我的网站上，我链接到/tags/页的任何地方都在使用它.

On my site, I'm using this everywhere where I'm linking to the /tags/ page.

要在导航栏中也创建这些链接，您只需从问题中获取第一个示例代码并进行以下更改:

To create these links in your navigation bar as well, you just need to take the first example code from your question and change this:

<a name="{{ category | first }}">

...对此:

<a href="/tags/#{{ category | first }}">

(我只是假设您的类别页面也位于URL /tags/下，就像我的示例一样)

(I'll just assume that your categories page is under the URL /tags/ as well, like in my example)

因此完整的代码将如下所示:

So the complete code will look like that:

{% for category in site.categories %}
    <div class="categories-title"><a href="/tags/#{{ category | first }}">{{ category | first }}</a></div>   
{% endfor %}

对于每个类别，生成的HTML将具有如下链接:

The generated HTML will have a link like the following, for each category:

<div class="categories-title"><a href="/tags/#jekyll">jekyll</a></div> 

---

您在评论中写道:

我看到您在一页上有所有带有帖子的标签.我已经创建了一个类别页面，我想将此页面用作模板.在导航栏中单击每个类别时，我希望它链接到其自己的页面.

I see that you have all tags with posts on one page. I have created a categories page and I would like to use this page as a template. While clicking each category in the navigation bar, I would like it to link to its own page.

同时，我写了一篇博客文章，内容是在没有插件的情况下构建单独的类别页面:
每个标记/Jekyll类别(无插件)

In the meantime, I wrote a blog post about building separate category pages without a plugin:
Separate pages per tag/category with Jekyll (without plugins)

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