如何在 Jekyll GitHub Pages 上按页面分隔帖子？答案

【问题标题】：How to separate posts by pages on Jekyll GitHub Pages?如何在 Jekyll GitHub Pages 上按页面分隔帖子？
【发布时间】：2021-07-27 23:03:46
【问题描述】：

我刚开始使用 GitHub 页面，我有一个问题。

创建“类别”页面后，我想添加一些类别的帖子（不是所有帖子！）。但是如果我设置喜欢

---
title: "Project"
permalink: /project/
layout: categories
---

然后他们显示所有帖子。但我只想显示一些帖子（我不确定，但可能是“项目”页面下的一些帖子？）。

很抱歉，即使我不知道如何问这个问题，但如果你得到这个......有人可以帮助我吗？

【问题讨论】：

看看我的jekyll blog这是你想要的吗？
@JaganKaartik 嗨！感谢您的评论，但我现在无法访问您的博客。你能再打开它吗？
这个link 应该可以工作。
转到侧边栏 > 类别或标签
天啊！！啊啊啊！！！就是这个！！你能给我一些关于如何使它像这样的建议吗？！是的，我只是想要这个！

标签： github jekyll blogs

【解决方案1】：

在您博客的开头部分（三点划线之间），您可以设置预定义变量或创建自定义变量。

预定义变量date、category/categories 和tags 可以开箱即用，用于帖子的前端。

首先，对于您要标记和分类的每篇文章，您的头条内容应该如下所示。

例子，

---
layout: post
title:  Building a CRUD API using Node.js
tags: [ API , Node.js , Javascript ]
categories: [Software Development, Long Posts]
---

---
layout: post
title:  My dog bruno
tags: [ Pets , Dogs , Fun ]
categories: [ Lifestyle , Short Posts ]
---

现在，创建一个tag.html 和一个categories.html 文件。

如果您在根目录中创建它们，您将能够访问页面通过your_site_url/tags 或your_site_url/categories

例如。

http://localhost:4000/tags
http://localhost:4000/categories

如果您在文件夹 pages 中创建它们，则通过 url/pages/tags 或 url/pages/categories

例如。

http://localhost:4000/pages/tags
http://localhost:4000/pages/categories

根据https://jekyllrb.com/docs/variables/ site.tags.TAG 将给出所有列表带有标签TAG 的帖子。同样site.categories.CATEGORY 将给出所有帖子的列表类别CATEGORY。

它以 [tag,post] 或 [category,post] 格式显示。如果您遍历 site.tags 或 site.categories 使用

   {% for tag in site.tags %}
       tag[0] -> Will be the tag value.
       tag[1] -> Will be the entire post.
   {% endfor %}

   {% for tag in site.categories %}
       tag[0] -> Will be the category value.
       tag[1] -> Will be the entire post.
   {% endfor %}

现在使用来自https://github.com/codinfox/codinfox-lanyon/tree/dev/blog/的这些sn-ps

在tags.html里面添加如下sn -p

---
layout: page
title: Tags
---

<div class="tags-expo">
  
  <div class="tags-expo-list">
    {% for tag in site.tags %}
    <a href="#{{ tag[0] | slugify }}">
      <div class="tag">{{ tag[0] }}</div>  
    </a>
    {% endfor %}
  </div>
  
  <hr />

  <div class="tags-expo-section">
    {% for tag in site.tags %}
    <h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
    <ul class="tags-expo-posts">
      {% for post in tag[1] %}
      <a class="ay-list" href="{{ site.baseurl }}{{ post.url }}">
        <li>
          {{ post.title }}
          <!-- Add the below line if you want the date to be displayed -->
          <small class="post-date">{{ post.date | date_to_string }}</small> 
        </li>
      </a>
      {% endfor %}
    </ul>
    {% endfor %}
  </div>

</div>

在 categories.html 中添加以下 sn-p 并使用 site.categories 而不是 site.tags。

---
layout: page
title: Categories
---

<div class="tags-expo">
  <div class="tags-expo-list">
    {% for tag in site.categories %}
    <a href="#{{ tag[0] | slugify }}"> <div class="tag">{{ tag[0] }}</div></a>
    {% endfor %}
  </div>
  <hr />
  <div class="tags-expo-section">
    {% for tag in site.categories %}
    <h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
    <ul class="tags-expo-posts">
      {% for post in tag[1] %}
      <a class="post-title" href="{{ site.baseurl }}{{ post.url }}">
        <li>
          {{ post.title }}
          <!-- Add the below line if you want the date to be displayed -->
          <small class="post-date">{{ post.date | date_to_string }}</small> 
        </li>
      </a>
      {% endfor %}
    </ul>
    {% endfor %}
  </div>
</div>

slugify 用于将字符串转换为小写 URL“slug”。

这应该为您提供两个带有标签和类别的单独页面，其中帖子根据给定的标签/类别显示。

这些 sn-ps 来自 https://github.com/codinfox/codinfox-lanyon，因此您需要参考 CSS 或使用您的自定义 CSS。

【讨论】：