49

我正在使用标准的 jekyll 安装来维护博客，一切正常。除了我真的很想标记我的帖子。

我可以使用 YAML 前端来标记帖子，但是如何为每个标签生成可以列出标签的所有帖子的页面？

4

7 回答 7

79

这是一个在单个页面上按字母顺序排列的标签的解决方案。
它仅使用 Liquid，这意味着它可以在 GitHub Pages 上运行：

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}

{% for tag in sortedtags %}
  <h3 id="{{ tag }}">{{ tag }}</h3>
  <ul>
  {% for post in site.tags[tag] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
  </ul>
{% endfor %}

您可以在这里看到它的实际效果。

编辑：

还有一种方法可以在没有插件的情况下为每个标签生成一个单独的页面（这将在 GitHub Pages 上工作）。

我的博客上有更详细的解释：
使用 Jekyll 将每个标签/类别的页面分开（没有插件）

首先，您需要一个新的布局文件：

/_layouts/tagpage.html：

---
layout: default
---

<h1>{{ page.tag }}</h1>

<ul>
{% for post in site.tags[page.tag] %}
  <li>
    {{ post.date | date: "%B %d, %Y" }}: <a href="{{ post.url }}">{{ post.title }}</a>
  </li>
{% endfor %}
</ul>

使用此布局文件，您可以通过添加仅包含两行 YAML 前端内容的新文件来添加新标签页。

jekyll以下是标签的示例：

/tags/jekyll/index.html：

---
layout: tagpage
tag: jekyll
---

这种方法的唯一缺点是：每次第一次使用新标签时，都必须记住为它创建一个新的两行文件。

要生成根索引文件（即链接到的标签列表/tags/jekyll/index.html等），您可以使用类似的解决方案，例如此答案顶部的解决方案，在该解决方案中，我生成带有按字母排序的标签的单个页面：

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
    <a href="/tags/{{ tag }}/">{{ tag }}</a><br>
{% endfor %}

这将生成一个链接列表，如下所示：

<ul>
    <li><a href="/tags/.net/">.net</a></li>
    <li><a href="/tags/authentication/">authentication</a></li>
    <li><a href="/tags/backup/">backup</a></li>
</ul>

请注意，此解决方案使用空格来拆分标签，因此当您的标签包含空格并且Yevgeniy Brikman 的评论也适用于此处时，它不起作用。

于 2014-01-08T17:29:32.100 回答
14

此要点将为您生成每个类别的页面：https ://gist.github.com/524748

它使用一个 Jekyll Generator 插件，以及一个 Page 子类。

于 2010-12-14T19:51:31.260 回答
8

看看使用 jekyll 的网站。有一些自定义分支已经实现了标记功能，希望也是你想要的方式:-)

于 2009-09-15T14:18:05.857 回答
5

我有同样的问题，偶然发现：http: //gist.github.com/143571。

这是一个生成标签列表的 rake 任务。我稍微修改了一下，我的版本在：http: //github.com/mattfoster/mattfoster.github.com/blob/master/Rakefile。

虽然这不会为每个标签提供一个页面，但您可以使用锚点，它已经完成了一半！

于 2010-02-25T18:53:36.830 回答
1

我使用了很棒的Jekyll Tagging插件，它可以自动生成标签云和标签页面。容易安装，也容易使用。

这是我博客上“照片”标签的页面（法语），您可以在底部看到标签云。

于 2015-04-30T10:12:46.140 回答
1

根据上面克里斯蒂安的回答，我制作了一个 bash 脚本，可以按照他的描述进行操作。

https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh

确保目录中有随附的 14 行vim 脚本/non_website_resources/

和

制作/_layouts/tagpage.html上面 Christian's answer 中所示的内容，但将其重命名为/_layouts/tag_pages.html

文件结构应该是这样的：

.jekyll_website_root
├── _posts
├── _layout
│   ├── tag_pages.html
├── rebuild_tags.sh

从根目录运行./rebuild_tags.sh

如果您收到权限被拒绝错误，请务必运行chmod 777 rebuild_tags.sh

如果您查看脚本注释，它相当简单：

  • 用于查找目录中每个文件中的sed所有标签.md_post

  • 用于sed将数据按摩成正确的格式

  • 获取所有唯一标签并index.html为每个标签创建一个目录和一个

这样，如果您有任何新标签，只需运行脚本以重建页面，然后再推送到 github

一个很好的简单的非插件方式来做标签

编辑

删除了对其他文件的依赖。只需要一个脚本！

于 2015-07-08T06:38:49.540 回答
0

我用 CSS 做这些。首先列出一个元素并使用标签名称作为它的 id。

<span id="{{ site.posts | map: 'tags' | uniq | join: '"></span><span id="' }}"></span>

然后列出所有帖子并将其标签用作“标签”自定义属性的值。

{% for post in site.posts %}
    <article class="post" tags="{% for tag in post.tags %}{{tag}}{% if forloop.last == false %}{{" "}}{% endif %}{% endfor %}">
        <h3><a href="{{post.url}}">{{post.title}}</a></h3>
    </article>
{% endfor %}

然后在 CSS 中，默认隐藏所有帖子，只显示标签与 url id/hash 匹配的帖子

.post {
    display: none;
}
{% for tag in site.tags %}#{{tag[0]}}:target ~ [tags~={{tag[0]}}]{% if forloop.last == false %}, {% endif %}{% endfor %} {
    display: block;
}
/*
The compiled version will look like this
#tagname:target ~ [tags~="tagname"], #tagname2:target ~ [tags~="tagname2"] {
   display: block;
}
*/

我在这里写了一篇关于这个的文章。

于 2020-11-13T16:52:58.960 回答