如何在Jekyll中展示标签并实现跳转及使用次数统计

嘿，我来帮你搞定这个问题！你已经迈出了第一步——展示唯一标签，现在只需要补充数量统计和跳转归档页面的功能就行，分两步走：

1. 修改侧边栏代码：添加计数和正确链接 #

把你现有的侧边栏代码替换成下面这段，我已经加了注释说明每个部分的作用：

<ul class="">
  <!-- 获取所有唯一标签并按字母排序 -->
  {% assign all_tags = site.vacancies | map: 'tags' | join: ',' | split: ',' | uniq | sort %}
  
  {% for tag in all_tags %}
    {% assign tag_count = 0 %}
    <!-- 遍历所有vacancy文章，统计当前标签的使用次数 -->
    {% for vacancy in site.vacancies %}
      {% if vacancy.tags contains tag %}
        {% assign tag_count = tag_count | plus: 1 %}
      {% endif %}
    {% endfor %}
    
    <li class="text-capitalize">
      <!-- 链接到标签归档页，用url_encode处理含空格的标签 -->
      <a href="/tags/?tag={{ tag | url_encode }}" class="sidebar-tag">
        {{ tag }} ({{ tag_count }}) <!-- 显示标签名+使用次数 -->
      </a>
    </li>
  {% endfor %}
</ul>

这段代码做了三件事：

• 给标签列表做了排序，看起来更规整
• 遍历所有vacancies集合文章，统计每个标签的出现次数
• 把链接指向专门的标签归档页，同时用url_encode处理可能带空格的标签，避免链接失效

2. 创建标签归档页面（tags.html） #

接下来需要在你的Jekyll项目根目录下创建一个tags.html文件，用来展示点击标签后对应的文章列表。把下面的代码复制进去：

---
layout: default <!-- 替换成你项目里的默认布局 -->
title: 标签归档
---

<h1>标签归档</h1>

{% if page.url contains 'tag=' %}
  <!-- 从URL中解析出当前点击的标签，并用url_decode还原原始标签名 -->
  {% assign current_tag = page.url | split: 'tag=' | last | url_decode %}
  
  <h2>查看标签 "{{ current_tag }}" 的所有文章</h2>
  <ul class="tag-post-list">
    <!-- 遍历所有vacancy，筛选出带当前标签的文章 -->
    {% for vacancy in site.vacancies %}
      {% if vacancy.tags contains current_tag %}
        <li>
          <a href="{{ vacancy.url }}">{{ vacancy.title }}</a>
          <small>{{ vacancy.date | date: "%Y-%m-%d" }}</small> <!-- 可选：显示文章日期 -->
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% else %}
  <p>请从侧边栏选择一个标签，查看相关文章~</p>
{% endif %}

这个页面的逻辑很简单：

• 如果URL里带有tag=参数，就解析出标签名，然后筛选并展示该标签下的所有vacancy文章
• 如果用户直接访问/tags/，就提示选择侧边栏的标签

测试一下 #

现在重新构建你的Jekyll项目（bundle exec jekyll serve），就能看到侧边栏的标签变成标签名 (次数)的格式，点击后会跳转到对应标签的文章列表页啦！

内容的提问来源于stack exchange，提问作者mrpbennett