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

Posted 2023-02-15

【中文标题】在 jekyll 博客中支持标签的简单方法

【英文标题】：An easy way to support tags in a jekyll blog

【发布时间】：2010-11-27 09:16:50

【问题描述】：

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

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

【参考方案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 也适用于此时，它不起作用。

【讨论】：

这就像抓取信息然后将其分配给 var，感谢您的帖子。我不确定我会做什么，也许什么都没有。

这是一个聪明的技巧！我遇到的一个问题是我的标签中有空格，因此split: ' ' 会将一个标签拆分为多个单词。为了解决这个问题，我使用| 字符作为分隔符而不是空格并在其上拆分：gist.github.com/brikis98/e71d6c736158080968f5

但是你在根目录下的 index.html 是什么样的呢？它是否只是将所有标签/类别列为链接，所以当您单击它们时，它会将您带到 tags/jekyll/index.html 页面？

@Jwan622：我刚刚编辑了答案并添加了如何执行此操作的示例代码。

如果遇到大小写与sort 混淆，可以改用sort_natural。我还遇到了带有换行符和空格的标签（即使它们不在前面）所以我不得不像这样传递给 strip_newlines 和 strip：% assign sortedtags = tags | strip_newlines | split: '|' | sort_natural % % for tag in sortedtags % % assign strippedtag = tag | strip % <h3 id=" strippedtag "> strippedtag </h3>

【参考方案2】：

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

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

【参考方案3】：

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

【参考方案4】：

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

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

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

【讨论】：

您可以在没有 Rake 任务的情况下生成标签列表，只需使用 Liquid。以我的tags page 为例。

【参考方案5】：

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

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

【参考方案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

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

---

编辑

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

【参考方案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的文章。