在 jekyll 博客中支持标签的简单方法

Question

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

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

Answer 1

这是一个解决方案在单个页面上按字母顺序排列标签。
它仅使用 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 %}

你可以在here看到它。

---

编辑：

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

我的博客有更详细的解释：
Separate pages per tag/category with Jekyll (without plugins)

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

/_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's comment 也适用于此时，它不起作用。

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

这是我博客上的a page for the "photo" tag（法语），你可以在底部看到标签云。

Answer 6

根据上面 Christian 的回答，我制作了一个 bash 脚本来完成他所描述的操作。

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

一定要在/non_website_resources/目录下有伴随的14行vim script

与

将/_layouts/tagpage.html 设为上面 Christian 的回答中所示，但将其重命名为 /_layouts/tag_pages.html

文件结构应该是这样的：

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

从根目录运行./rebuild_tags.sh

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

---

如果你看一下脚本，它相当简单：

• 使用sed 查找_post 目录下每个.md 文件中的所有标签

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

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

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

一个不错的简单的非插件方式来做标签

---

编辑

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

Answer 7

我用 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;
}
*/

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