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

Posted 2023-03-28

【中文标题】如何在 Jekyll GitHub Pages 上按页面分隔帖子？

【英文标题】：How to separate posts by pages on Jekyll GitHub Pages?

【发布时间】：2021-07-27 23:03:46

【问题描述】：

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

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

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

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

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

【问题讨论】：

看看我的jekyll blog这是你想要的吗？

@JaganKaartik 嗨！感谢您的评论，但我现在无法访问您的博客。你能再打开它吗？

这个link 应该可以工作。

转到侧边栏 > 类别或标签

天啊！！啊啊啊！！！就是这个！！你能给我一些关于如何使它像这样的建议吗？！是的，我只是想要这个！

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