首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jekyll中列出页面类别和对应的帖子数量

在 Jekyll 中列出页面类别和对应的帖子数量,可以通过使用 Jekyll 的数据文件和循环结构来实现。以下是一种实现方式:

  1. 首先,在 Jekyll 项目的根目录下创建一个名为 _data 的文件夹。
  2. _data 文件夹中创建一个名为 categories.yml 的 YAML 数据文件。
  3. categories.yml 文件中,按以下格式定义页面类别和对应的帖子数量:
代码语言:txt
复制
- name: 分类1
  slug: category1
- name: 分类2
  slug: category2
- name: 分类3
  slug: category3

这里,name 是页面类别的名称,slug 是用于生成该类别的 URL 的唯一标识符。

  1. 在 Jekyll 的模板文件中,可以使用 Liquid 模板语言来读取 categories.yml 数据文件,并进行循环遍历和输出。 例如,在一个名为 categories.html 的模板文件中,可以添加以下代码:
代码语言:txt
复制
<ul>
{% for category in site.data.categories %}
  <li>{{ category.name }} - {{ site.posts | where: 'categories', category.slug | size }}</li>
{% endfor %}
</ul>

这里,site.data.categories 表示读取 categories.yml 文件中的数据。site.posts 表示当前网站的所有帖子。where: 'categories', category.slug 表示筛选出帖子中分类与当前循环的页面类别相匹配的部分。size 表示计算该筛选结果的数量。

  1. 最后,通过在 Jekyll 项目中创建一个页面,并在该页面的 Front Matter 中指定使用 categories.html 模板,就可以生成包含页面类别和对应帖子数量的列表页面了。

需要注意的是,以上只是一种实现方式,你可以根据自己的需求和项目结构进行调整和扩展。同时,根据实际情况,可能需要在 Jekyll 的配置文件中进行一些配置,以使其能够正确识别数据文件和模板文件。

腾讯云产品推荐: 腾讯云静态网站托管服务(https://cloud.tencent.com/product/s3) 腾讯云云服务器(https://cloud.tencent.com/product/cvm) 腾讯云对象存储 COS(https://cloud.tencent.com/product/cos)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何拥有一个免费空间来写博客(github)

今天,我就来示范如何在github上搭建Blog,你可以从中掌握githubPages功能,以及Jekyll软件基本用法。更重要是,你会体会到一种建立网站全新思路。 ?...它号称程序员Facebook,有着极高的人气,许多重要项目都托管在上面。 简单说,它是一个具有版本管理功能代码仓库,每个项目都有一个主页,列出项目的源文件。 ?...$ cd jekyll_demo   $ git init 然后,创建一个没有父节点分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...然后,首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历。这里要注意是,Liquid模板语言规定,输出内容使用两层大括号,单纯命令使用一层大括号。...文章页面: ? 第七步,绑定域名。 如果你不想用http://username.github.com/jekyll_demo/这个域名,可以换成自己域名。

5.8K20

搭建一个免费,无限流量Blog----github PagesJekyll入门

今天,我就来示范如何在github上搭建Blog,你可以从中掌握githubPages功能,以及Jekyll软件基本用法。更重要是,你会体会到一种建立网站全新思路。 ?...它号称程序员Facebook,有着极高的人气,许多重要项目都托管在上面。 简单说,它是一个具有版本管理功能代码仓库,每个项目都有一个主页,列出项目的源文件。 ?...$ cd jekyll_demo   $ git init 然后,创建一个没有父节点分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...然后,首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历。这里要注意是,Liquid模板语言规定,输出内容使用两层大括号,单纯命令使用一层大括号。...文章页面: ? 第七步,绑定域名。 如果你不想用http://username.github.com/jekyll_demo/这个域名,可以换成自己域名。

1.7K70
  • Sticky Posts Switch插件教程WordPress为分类添加置顶文章

    在本文中,我们晓得博客将向您展示如何在WordPress类别添加置顶文章。 注意:Sticky Post仅适用于内置帖子类型帖子,不适用于自定义帖子类型。  ...Sticky Posts Switch插件教程WordPress为分类添加置顶文章 Sticky Posts Switch插件特点使您可以对首页、存档页面类别页面每个自定义帖子类型使用粘性帖子功能对自定义帖子类型快速批量编辑支持选择帖子类型... MultilingualPress如何在WordPress类别添加置顶文章?  ...在WordPress类别添加置顶帖/文章最简单方法是使用WordPress Sticky Posts Switch插件,可让您在主页、存档页面分类页面上设置置顶文章。  ...Sticky Posts Switch插件教程WordPress为分类添加置顶文章  此外还可以选择在主页、帖子存档页面或分类页面类别标签)上显示粘性帖子位置。

    5.5K20

    使用Jekyll显示Jupyter笔记本

    Jekyll是一个用Ruby编写静态站点生成器,支持博客并与Github页面整合。因为Github只负责托管,这种设置使数据分析共享可视化变得简单。...Iris数据集将用作生成本指南中输出示例。 1.打开感兴趣笔记本,或使用下面的代码创建示例笔记本。运行所有相关单元格,以便在页面上显示你想要在Jekyll博客上显示内容。...如果日期格式不正确,帖子可能不会出现在博客上: touch YYYY-MM-DD-example-post.md 4.markdown文件应以三个破折号开头并包含标题,这些标题为Jekyll提供了适当页面数据以便填充帖子信息...博客,您应该会看到指向新帖子标题链接(示例为“超赞数据可视化”)。...根据帖子内容可能需要转义字符。有关转义字符格式化块更多信息,请参阅Jekyll文档。 以下部分显示如何通过调整并设置表格图像样式以改进显示。

    3.9K20

    何在Ubuntu 16.04上建立一个Jekyll开发网站

    在添加新帖子页面时,使用现有结构并遵循Jekyll命名约定非常重要。 提示: tree是查看文件目录结构一个非常有用命令。...当我们调用时jekyll serve,Jekyll将配置文件内容文件解析为新目录,_site开始提供该_site文件夹内容: ... ├── 404.html ├── about.md ├── _...一旦保存对帖子页面的更改,静态站点将自动重建,因此不要直接对_site文件夹文件进行更改。...如果我们在我们网站上工作时让开放服务器在前台运行时打开此终端,我们将在添加页面帖子以及更改内容时立即收到反馈。...在Web浏览器,我们可以在jekyll serve输出显示服务器地址端口访问它: 结论 在本教程,我们安装了Jekyll并创建了一个包含一些自动生成内容开发站点。

    1.6K71

    如何为自己创建一个既时尚又好用博客网站

    上面预览图中博客就是基于jekylldbyll主题风格网站。jekyll是一个简单免费Blog生成工具,而dbyll就是基于jekyll一款开源主题项目。...具有以下特性: 特性 支持标签类别 支持社区简介与添加作者头像 支持分页 支持pygments风格语法高亮 支持评论 支持自定义侧边栏背景图片 响应式布局 基于Bootstrap Glyphicon...Ruby项目所需要的确切gem版本,为Ruby项目提供了完整可运行环境。...具体步骤: 第一步:创建GitHub Pages 关于如何在GitHub上创建个人博客,可以查阅这篇文章《轻松搞定GitHub Pages》。...发表文章: dbyll支持Markdown语法,所以你只需要将.md文件放到_posts目录下,jekyll就会自动将.md文件渲染成一个html页面。一个.md文件代表一个HTML页面

    1.9K70

    何在Ubuntu 16.04上建立一个Jekyll开发网站

    在添加新帖子页面时,使用现有结构并遵循Jekyll命名约定非常重要。 提示: tree是查看文件目录结构一个非常有用命令。...当我们调用时jekyll serve,Jekyll将配置文件内容文件解析为新目录,_site开始提供该_site文件夹内容: ... ├── 404.html ├── about.md ├── _...一旦保存对帖子页面的更改,静态站点将自动重建,因此不要直接对_site文件夹文件进行更改。...如果我们在我们网站上工作时让开放服务器在前台运行时打开此终端,我们将在添加页面帖子以及更改内容时立即收到反馈。...在Web浏览器,我们可以在jekyll serve输出显示服务器地址端口访问它: 结论 在本教程,我们安装了Jekyll并创建了一个包含一些自动生成内容开发站点。

    1.4K31

    5个最佳WordPress广告插件

    广告空间管理——管理广告空间单个广告。延迟显示/隐藏广告——例如,在用户在页面上停留10秒后显示广告。广告上限–设置每个用户会话显示最大广告数量。例如,使用户在访问期间不会看到超过20个广告。...5个最佳WordPress广告插件  它带有一个易于使用设置页面,您可以在其中管理您广告代码并选择您想要显示它们方式位置。该插件可以在文章之前或之后、内部帖子内容、摘录之后等自动显示广告。  ...灵活广告放置,在帖子任何位置专门或随机插入广告。简单配置界面,无需编码知识:只需复制并粘贴AdSense代码,勾选选择选项,插件将为您完成剩下工作。...只要您使用自托管WordPress,您就可以在您网站上放置您想要任何广告。如何在WordPress文章投放广告?所有广告管理插件都允许您使用简码或块手动放置广告。...您所做就是将您广告添加到插件,然后将该广告短代码或块包含在您要显示广告帖子。如何在WordPress上帖子之间放置广告?

    8.5K20

    何在GitHub免费搭建个人博客网站?

    何在GitHub免费搭建个人博客网站?当你想要开始自己博客之旅,但又不想花费金钱购买服务器域名时,还有一些免费平台可供你选择。...以下是一种无需服务器域名方法,利用GitHub PagesJekyll搭建个人博客网站(http://m.bokequ.com/list/22-0.html)  步骤一:准备 GitHub 账户...步骤四:上传文件到 GitHub 仓库  将 Jekyll 主题文件夹所有文件上传到你在步骤二创建 GitHub 仓库。...步骤六:定制你博客  编辑 Jekyll 主题文件夹配置文件内容文件,定制你个人博客。你可以修改页面布局、添加新页面和文章,以及调整样式颜色。  ...通过 GitHub Pages Jekyll,你可以免费搭建个人博客网站,无需购买服务器域名。这是一个简单且经济高效方式,让你能够开始你博客之旅,并与世界分享你想法创作。

    14910

    静态站点生成器:makesite.py

    对于一个面向互联网网站,您将静态网站/博客放在某个托管服务/或Web服务器,Apache HTTP服务器,Nginx等。...layout/post.html:它包含博客文章模板。 请注意,它不以开头,也不包含标签。 这不是一个完整独立模板。 该模板仅定义博客帖子特定一小部分博客帖子页面。...layout/list.html:它包含博客列表页面的模板,该页面按反向时间顺序列出博客所有帖子。 除了在顶部提供一个标题和在底部提供一个RSS链接之外,这个模板并没有太多作用。...快速回顾一下,我们创建一个_site目录来编写生成静态网站,定义一些默认参数,加载所有布局模板,然后调用make_pages()来渲染带有这些模板页面博客帖子,调用make_list()来呈现博客列表页面...如果您需要更复杂模板引擎(Jinja2或Cheetah),则需要修改makesite.py以添加对它支持。 内容 在这个项目中,内容文件位于内容目录。 大多数内容文件都是用HTML编写

    2K30

    用Python开源机器人和5美元,我在Instagram上搞到了2500个真粉儿

    当你准备发帖时候,就可以看到标签分类标签被使用数量帖子标签分类标签使用数量 通过这3个标签,我已经得到了一大群粉丝了。这些已经是我标签模板,并且得到大量应用。...大部分经常被使用在帖子标签 通过对我帖子经常被点zan、评论标签数量分析,我将分析结果写成了一个小程序将其简单处理后保存为JSON。 提示:最好使用正能量标签,将会呈现积极感觉。...每个标签平均被zan数量 如果我们仔细看一下上图,就能发现 “美味” 标签帖子,我平均得到了390个zan。 我还会发布其他2-3个类别标签,而不是所有的图片都发这个标签。...我会集中在两个大标签类别1-2个小标签类别,两个大标签类别分别是“素食”“假期/美好生活”。小标签类别是属于自然风光(是我家乡,德国)。...我决定收集每个帖子zan评论,然后将结果整理之后,得出以下图表: 每篇帖子zan评论 在上图中,当我在服务器上开始运行脚本时绘制了一条垂直线,如果你将红线、红虚线内图表数值进行比较,

    2.5K50

    新人如何搭建(copy)一个属于自己博客

    本文作者:IMWeb mmo 原文出处:IMWeb社区 未经同意,禁止转载 对于很多刚学前端朋友们来说(比如我),在学习过程中经常会记一些笔记,除了现实烂笔头,我们也可以在PC上记笔记...GitHub官网:点我 GitHub秘籍:如何与直男打交道 上面的GitHub教程可能会与目前GitHub界面有点不同,其道理相同,或者往下拉,看看别的回复帖子,也有新版教程,这里GitHub教程会相对庞大...接下来我们还要给指定‘用户’展示一把锁,在上面的操作保存后,将会多一个Custom domain,在这里,我们将指定一个‘用户’,写上我们域名,Save保存即可;接下来就可以正常访问到我们页面啦.../editorial-jekyll-theme/assets/cssmain.css 这里需要说明下github实现页面的原理,当我们开启github pages时候,我们域名所访问对应其自己...刷新我们新 博客 页面,文章都这里差不多就结束了,当然,不少朋友心里有话想说:不是搭建一个属于自己博客吗,这就是copy啊!! ?

    48920

    新人如何搭建(copy)一个属于自己博客

    对于很多刚学前端朋友们来说(比如我),在学习过程中经常会记一些笔记,除了现实烂笔头,我们也可以在PC上记笔记、写总结,下面分享一些或多或少会用上网站或工具。...,其道理相同,或者往下拉,看看别的回复帖子,也有新版教程,这里GitHub教程会相对庞大,懒惰我就不重复教了,见谅。...首先我们要清楚问题所在,回到页面上,我们按F12打开控制台,接着进入眼帘是红DuangDuang报错,我们将鼠标指着报错地方,内容如下 ?.../assets/cssmain.css 这里需要说明下github实现页面的原理,当我们开启github pages时候,我们域名所访问对应其自己github下,博客仓库内根目录index.html...刷新我们新博客页面,文章都这里差不多就结束了,当然,不少朋友心里有话想说:不是搭建一个属于自己博客吗,这就是copy啊!! ?

    1K40

    使用Solr涡轮增压您WordPress搜索

    在本指南中,您将学习如何在Ubuntu 14.x或Debian 7.x上安装Java,安装配置Solr,并使用WPSolr插件将其集成到WordPress博客。...单击Solr Options选项卡: 要编制索引帖子类型:建议选择所有类型。发布索引所有博客帖子页面所有页面(例如关于页面),以及附件所有文档(例如PDFDOC文件)。...要编制索引自定义分类法:一般不需要在此处输入任何内容; 但是,如果已自定义WordPress以按类别标签以外方式组织博客帖子,请在此处输入分类标准名称。...每页结果数:配置每页应显示搜索结果数。 由构面显示数量:构面是指Solr显示过滤器,以使访问者能够从搜索结果列出候选名单。此值是每个构面显示最大值数。...注意每当您发布新帖子页面或附件时,必须选择此按钮才能将新页面编入索引。 操作完成后,同一页面将显示索引文档数量。 测试新搜索 您博客上将完成以下步骤。

    4.9K60

    如何将 Jekyll 部署到云开发静态网站托管

    云开发静态托管是云开发提供静态网站托管能力,静态资源(HTML、CSS、JavaScript、字体等)分发由腾讯云对象存储 COS 拥有多个边缘网点腾讯云 CDN 提供支持 使用Jekyll搭建静态站点...它有一个模版目录,其中包含原始文本格式文档,通过一个转换器( Markdown)和我们 Liquid 渲染器转化成一个完整可发布静态网站,你可以发布在任何你喜爱服务器上。...由于系统默认Ruby安装过程容易出现各种问题,因此建议自定义安装新Ruby。关于卸载及重装 Ruby Jekyll详细内容,也可以参考文章iMac搭建Jekyll本地环境。...我选择直接从Github下载我博客相关内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io) 对于基于Jekyll静态站点目录结构,可以参考官网提供...如果你有自己域名,你也可以添加自己域名解析,例如下面我修改为使用我自己域名,并设置了自定义索引页404页面: Zkyx39SOCYgHimv.png 访问静态页面 在浏览器输入讯云提供默认域名

    3.6K105

    快速搭建个人博客

    : 进入 设置页面 配置个人信息 image.png 找到 Username image.png 这个 Username 就是我们 _config.yml disqus_username # Disqus...创建 文章统一放在网站根目录下 _posts 文件夹。 image.png 创建一个文件 image.png 在下面写文章,标题,还能实时预览,最后提交保存就能看到自己新文章了。...进阶 若你对博客模板进行修改,你就要看看 Jekyll 开发文档,是中文文档哦,对英语一般朋友简直是福利啊(比如说我)。 还要学习 Git GitHub 工作机制了及使用。...下载 点击图片进入下载页面,选择对应平台进行下载 image.png 下面以Mac平台为例: 安装 将下载好文件解压,将这只小猫拖到应用程序文件夹 image.png 就可以在Launchpad找到这只小猫咪...聪明你应该发现怎么做了吧~ 安装 jekyll jekyll bundler $ gem install jekyll $ gem install jekyll bundler 进入你 Blog

    1.9K21

    如何搭建免费博客

    ---- 总结一下 对于上面所述github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定仓库,可以通过github...jekyll 模板 jekyll 是基于ruby来编写一个博客模板生成工具,也就是说我们可以根据相关规则来生成对应html文件,当然这份工作github也能帮你去做。...详细介绍参见jekyll官方文档。 jekyll安装 jekyll安装可以参见 windows安装Jekyll linuxMacOS安装Jekyll jekyll使用 1....编译运行,一切都准备好后,开始编译生成我们网站: jekyll build # 生成_site目录 jekyll server # 生成并启动一个server...到这里,我们使用jekyll根据我们写模板生成了对应静态页面,下面我们把数据传入到githubgh-pages下面。 git add .

    1.1K40

    H2O-ac theme for Jekyll

    这吸引了很多小伙伴纷纷转投 Jekyll H2O 主题阵营,本人也是其中之一。...新特性 更适合学术人和运维程序员页面结构   H2O 主题其实在很大程度上已经满足了大部分人需求,只是对于学术研究人员运维程序员来说,个人觉得页面结构还是有点不够合适。...学术研究人员比较重视在首页直接展示个人信息研究情况,能够让人很快地了解到所需信息,这其实是将 About me 这样一个平常辅助页面当成了主页面来用。...根据实际页面的内容需求,增加了学术首页、归档页系统日志页。 学术首页   学术首页如下图所示,并将原来 H2O 的卡片首页移动到 blog 子目录下了。...当左侧内容向上或向下滑动时,右侧索引导航将会使对应对应一级标题高亮。 (2022年5月14日更新)   为文章移动端页面添加了索引导航按钮。

    1.1K30

    个人免费博客花式搭建指南

    可能是出于扩大业务考虑, Cloudflare 现在也开始提供类似于 Netlify 持续部署免费静态页面托管服务,并且提供了一个非常棒域名 *.pages.dev。...根据笔者尝试,Cloudflare Pages Netlify 编译配置几乎一模一样,两者也同样为每一次成功编译结果提供独立预览域名,并将最新编译生成结果自动设置为主域名对应内容。...在实际使用过程,笔者根据自己需求也在 H2O 主题上做出了一定功能修改,并开源为 jekyll-them-H2O-ac。...a tag will be recommended if the size of it is more than this value # Build settings # 文章列表展示页每页显示文章数量...# 号与文字之间空一格,# 号与代码同行时距离不宜过长,相邻几行都有注释对齐为佳;当代码注释内容超过一行时最好将注释放在代码后一行,此时 # 号前不留空格; 在使用图片进行解释时候,在对应段落附近加载图片

    1.8K40
    领券