在 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 %}

您可以此处查看它的实际情况。

---

编辑：

还有一种方法可以为每个标签生成一个单独的页面，无需插件（可在 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 的评论也适用于此处。

Answer 2

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

使用 Jekyll Generator 插件以及 Page 子类。

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

根据上面克里斯蒂安的回答，我制作了一个 bash 脚本来执行他所描述的操作。

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

确保附带 14 行 vim 脚本 在 /non_website_resources/ 目录

AND

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

文件结构应如下所示：

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

从根目录运行 ./rebuild_tags.sh

如果您收到权限被拒绝错误，请务必运行 chmod 777rebuild_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/哈希匹配的标签的帖子

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

我写了一篇关于此的文章 此处。

Answer 8

我写了一个 pre-push 挂钩来检测丢失的标签页。它将使用 bash 脚本 gentag 创建缺失的标签页面。如果推动吃水，钩子也会发出警告。

为简单起见，它假设标签作为 yaml 数组输入到前面的内容中，并使用 yq 收集。

还有一个 pre-receive 挂钩可以将网站部署在个人网络服务器上。