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

在Jekyll博客中显示当前类别的帖子

Jekyll是一个简单易用的静态网站生成器,它可以帮助用户快速创建个人博客或静态网站。在Jekyll博客中显示当前类别的帖子,可以通过以下步骤实现:

  1. 确定博客的类别结构:在Jekyll中,可以通过在博客文章的Front Matter(头部元数据)中添加categories字段来指定文章所属的类别。例如,可以在文章的头部元数据中添加categories: [技术, 编程]来表示该文章属于"技术"和"编程"两个类别。
  2. 创建类别页面模板:在Jekyll中,可以通过创建类别页面模板来显示特定类别的帖子。可以在项目的根目录下创建一个名为category.html的HTML文件作为类别页面模板。
  3. 编写类别页面模板:在category.html文件中,可以使用Jekyll的模板语法和Liquid标签来动态地显示当前类别的帖子。以下是一个示例的category.html文件的代码:
代码语言:txt
复制
---
layout: default
---

<h1>{{ page.title }}</h1>

<ul>
  {% for post in site.categories[page.category] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

在上述代码中,{{ page.title }}用于显示当前类别的标题,{% for post in site.categories[page.category] %}用于遍历当前类别的帖子,{{ post.url }}{{ post.title }}分别用于显示帖子的链接和标题。

  1. 创建类别页面:在Jekyll的博客目录中,可以创建一个名为_categories的文件夹,并在该文件夹中创建一个与类别名称相同的Markdown文件,例如技术.md。在该Markdown文件中,可以设置layoutcategory,并指定titlecategory字段的值。以下是一个示例的技术.md文件的代码:
代码语言:txt
复制
---
layout: category
title: 技术
category: 技术
---

在上述代码中,layout: category表示该Markdown文件使用category.html作为模板,title用于设置类别页面的标题,category用于指定当前类别的名称。

  1. 生成并部署网站:使用Jekyll的命令行工具生成静态网站,并将生成的网站文件部署到服务器或托管平台上。具体的生成和部署步骤可以参考Jekyll的官方文档。

通过以上步骤,就可以在Jekyll博客中显示当前类别的帖子了。当访问类别页面时,将会动态地显示该类别下的所有帖子,并提供链接以便用户查看每篇帖子的详细内容。

对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的云计算服务,例如:

  • 云服务器(CVM):提供弹性计算能力,支持多种操作系统和应用场景。产品介绍链接
  • 云数据库MySQL版(CDB):提供高可用、可扩展的MySQL数据库服务。产品介绍链接
  • 云存储(COS):提供安全可靠的对象存储服务,适用于存储和管理各类非结构化数据。产品介绍链接

请注意,以上仅为示例,具体选择和推荐的腾讯云产品应根据实际需求和情况进行决策。

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

相关·内容

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

    它具有“博客意识”,并包含处理日期组织内容的特殊功能,但其用途不仅限于博客网站。...添加新帖子和页面时,使用现有结构并遵循Jekyll的命名约定非常重要。 提示: tree是查看文件和目录结构的一个非常有用的命令。...一旦保存对帖子或页面的更改,静态站点将自动重建,因此不要直接对_site文件夹的文件进行更改。...如果我们我们的网站上工作时让开放服务器在前台运行时打开此终端,我们将在添加页面和帖子以及更改内容时立即收到反馈。...Web浏览器,我们可以jekyll serve输出显示的服务器地址和端口访问它: 结论 本教程,我们安装了Jekyll并创建了一个包含一些自动生成内容的开发站点。

    1.6K71

    Inspector面板显示变量和(Unity3D)

    一、前言 Unity有一个强大的特性,它可以帮助我们没有任何编程的情况下修改Inspector面板的值。...本文介绍了我们需要知道的所有信息,以便在Unity Inspector面板显示我们的变量和自定义。...在编程语言中,public意味着其他也可以看到这个值。Unity public,也意味着变量显示Inspector面板。...三、显示 公共+变量 我们的测试脚本现在应该有一个Address变量。假设我们也可以在其他脚本中使用一个Address,我们就可以为它创建一个完整的。...显示Inspector面板 诀窍是:如果一个应该显示Inspector面板,我们只需通过编写[System.erialable]声明之上 下面是我们修改的脚本: using UnityEngine

    3.1K20

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

    它具有“博客意识”,并包含处理日期组织内容的特殊功能,但其用途不仅限于博客网站。...添加新帖子和页面时,使用现有结构并遵循Jekyll的命名约定非常重要。 提示: tree是查看文件和目录结构的一个非常有用的命令。...一旦保存对帖子或页面的更改,静态站点将自动重建,因此不要直接对_site文件夹的文件进行更改。...如果我们我们的网站上工作时让开放服务器在前台运行时打开此终端,我们将在添加页面和帖子以及更改内容时立即收到反馈。...Web浏览器,我们可以jekyll serve输出显示的服务器地址和端口访问它: 结论 本教程,我们安装了Jekyll并创建了一个包含一些自动生成内容的开发站点。

    1.4K31

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

    本文作者:IMWeb mmo 原文出处:IMWeb社区 未经同意,禁止转载 对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实的烂笔头,我们也可以PC上记笔记...脑图:Xmind、百度脑图... 总结:CSDN、简书、segmentfault、博客园......GitHub官网:点我 GitHub秘籍:如何与直男打交道 上面的GitHub教程可能会与目前GitHub的界面有点不同,其道理相同,或者往下拉,看看别的回复帖子,也有新版的教程,这里GitHub的教程会相对庞大...基于jekyll的进阶会相对复杂,本文只对新手起作用,这里将教你简单的把一些博客模板拷贝下来,并加以修改,成为自己的专属博客 首先,我们先找一块自己喜欢的jekyll模板,这里介绍两个不错的网站:jekyllthemes...细心的朋友一下就发起了其中的端倪,浏览器访问的样式链接根本就不存在 /editorial-jekyll-theme 这个路径,其实,这是jekyll的配置问题 我们编辑器打开_config.yml

    48920

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

    对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实的烂笔头,我们也可以PC上记笔记、写总结,下面分享一些或多或少会用上的网站或工具。...脑图:Xmind、百度脑图... 总结:CSDN、简书、segmentfault、博客园......github.com/ GitHub秘籍:https://www.zhihu.com/question/20070065 上面的GitHub教程可能会与目前GitHub的界面有点不同,其道理相同,或者往下拉,看看别的回复帖子...基于jekyll的进阶会相对复杂,本文只对新手起作用,这里将教你简单的把一些博客模板拷贝下来,并加以修改,成为自己的专属博客。...细心的朋友一下就发起了其中的端倪,浏览器访问的样式链接根本就不存在 /editorial-jekyll-theme 这个路径,其实,这是jekyll的配置问题 我们编辑器打开_config.yml,然后我们把罪魁祸首揪出来

    1K40

    使用Markdown RCE服务器

    背景介绍 Hashnode是一个面向开发人员的博客平台,您可以在其中使用自定义域免费托管您的博客,其中包含许多功能,而这其中一项功能便是"批量Markdown导入器",当我将我的博客Jekyll迁移到...Hashnode时,我正在寻找一个导入功能,幸运的是Hashnode有一个markdown导入器,允许批量导入markdown帖子,但需要采用某种特定格式,出于某种原因我导入帖子时不断出错,由于UI上没有描述性错误...,导致我无法弄清楚原因,然后我查看了我的Burp的响应,就在那时我注意到了一个Bug 漏洞利用 寻找 LFI Markdown有自己的怪癖和功能,允许文件引用图像,要在博客文章或任何MD文件包含图像可以使用以下语法...,这是响应在Burp Suite的样子 这只是一个正常的Markdown解析帖子格式,这让我们想知道Markdown功能允许用户通过指定路径来插入图像 !.../etc/passwd) 这一次应用程序尝试使用路径中指定的位置来获取图像,而不是直接使用Markdown正文中显示的图像,应用程序遍历目录并passwd为我们获取文件,但它没有将内容显示响应而是将文件上传到

    21120

    如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

    前言 我相信,每个程序员都有一个愿望,都想有一个属于自己的"家"——属于自己的博客,专属的网站。自己的“家”,可以和志同道合的兄弟一起分享和讨论任何技术,谈天说地。...关于jekyll其他一些命令的用法如下: $ jekyll build # => 当前文件夹的内容将会生成到 ./_site 文件夹。...$ jekyll build --destination # => 当前文件夹的内容将会生成到目标文件夹。...$ jekyll build --watch # => 当前文件夹的内容将会生成到 ./_site 文件夹, # 查看改变,并且自动再生成。...整个过程你可以设置 URL 路径,你的文本布局显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

    28210

    如何快速给自己构建一个温馨的家——用Jekyll搭建静态博客

    前言 我相信,每个程序员都有一个愿望,都想有一个属于自己的"家"——属于自己的博客,专属的网站。自己的“家”,可以和志同道合的兄弟一起分享和讨论任何技术,谈天说地。...关于jekyll其他一些命令的用法如下: $ jekyll build # => 当前文件夹的内容将会生成到 ./_site 文件夹。...$ jekyll build --destination # => 当前文件夹的内容将会生成到目标文件夹。...$ jekyll build --watch # => 当前文件夹的内容将会生成到 ./_site 文件夹, # 查看改变,并且自动再生成。...整个过程你可以设置 URL 路径,你的文本布局显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

    1.3K20

    Blog 搭建路与坑 | 基于 Github Page 和 Jekyll

    本文主要介绍 Github Page 和 Jekyll 下搭建个人博客的路与坑! ---- 我的博客地址:https://flyinglsj.github.io/ ? 1....尽量选择 WITHOUT DEVKIT ,因为我安装的时候,安装了 WITH DEVKIT 版本的好像在博客搭建过程中使用不了。 Ruby 下载界面 ? DEVKIT 下载界面 ? 2....安装 Jekyll 因为我们是 Github 上搭建博客,要显示效果,你需要 Push 到 Github 上才能显示效果。Jekyll 主要的功能就是可以本地实时显示你的博客,仅此而已。...然后浏览器输入 http://127.0.0.1:300 就可以运行博客了。...Blog 搭建过程,主要简单介绍自己搭建的过程遇到的问题,详细搭建过程可以见文章内的详细链接。

    1.1K10

    用Github搭建个人博客

    这时候,[阿成][]同学又出现了,提到另一个方法,就是利用github已支持的jekyll,按要求建目录、文件,然后直接传到github对应的项目中就可以了,github会自动解析模板并显示,此方法优点就是只需要安装...jekyll templates可以看到,是支持include的,只需要在根目录下创建一个名为_includes的目录,把页面片放到这个目录,然后用下面的语法加载对应的页面片文件即可: {% include...footer.html %} #加载名为 footer.html 的文件到当前位置 {% include footer.html param="value" %} #也可传参数到页面片文件footer.html...相关插件 做为一个技术博客,常用会需要展示代码,有几种方式可以让我们页面展示所需的代码片断或者Demo效果。...高亮展示 对于代码的阅读体验,当然能高亮显示会更好些,jekyll也支持相应的代码高亮显示,像这样: {% highlight 代码类型 %} 代码放这里 {% endhighlight %} 支持的代码类型可以

    73310

    下载 Jekyll,并使用它在本地搭建一个博客

    0 前言 之前搭建的博客是在线的,没有本地搭建一个进行预览,导致修改样式或者添加功能的时候要频繁的 push ,然后再去查看改得好不好看,这样的体验可以说是非常糟糕。...所以我下载了 Jekyll 到本地,然后生成本地的博客进行预览,觉得改得还行才 push,这样就比较省事了。...Jekyll 可以将纯文本转换为静态博客网站,简单好用,不需要自己开发大部分功能,甚至直接找模板修改一下就能够使用。 关心博客内容就足够了,别的就直接使用模板吧。...接着就是就入 cmd ,然后 cd 到博客模板解压出来的路径下,最后输入命令 jekyll server ?...3 相关说明 如果想把本地的博客发布到网上,那就需要接着折腾了,域名、服务器,还有别的都得搞。推荐使用 GitHub Pages 搭建,原因很简单,方便简单又不花钱。

    1.1K40

    Jekyll-Admin-Mac 开发纪要-左侧菜单栏

    博客将在 6月底停止 简书的更新,全新的博客地址请点击前往-> 君赏博客 本文章文字大约 4500字,大概花费 10分钟阅读。本文章设计的图片比较多,流量党慎入!。...本教程属于 制作 Jekyll-Admin-Mac的教程系列,可以关于 君赏博客关注以后教程。 本文章一些知识点,不感兴趣可以提前关闭!...因为接触到使用 Jekyll构建博客十分的方便,但是 Jekyll-Admin里面的功能又差强人意。...Xcode6使用IBDesignable创建自定义控件(翻译) 关于如何 NSView自定义背景颜色参考下面的连接 我们设置 NSView为继承与 BaseView 背景颜色试图。...但是呢和我们网页的看起来还是有写差别的。 我们 SideMenuItemView.xib上面的底部添加一条线。布局如下: ?

    2.1K10

    无服务器+域名也能搭建个人博客?真的,而且很快

    基于Gitee快速搭建个人博客 一. 背景 个人搭建博客也是有成本的 关于 jekyll 二....而最近发现的一个超级方便且简单个人博客系统——— jekyll 关于 jekyll jekyll 是一个简单的免费的Blog生成工具,类似 WordPress....最关键的是 jekyll 可以免费部署 Gitee/Github上,并且支持一件构建. 且无需我们手动申请域名 话不多说我们下面就开始使用吧~~~ 二....部署 基于 jekyll 搭建的个人博客可以部署 Gitee/GitHub 上, 我们这里部署主要以 Gitee 为例 原因我想大家很清楚: Gitee(码云) 他快啊....而且这种方式因为目录层级少, 图片可以直接显示 如果是团队博客的话, 可以以自己名字+时间为目录存放图片 四.

    2.2K10
    领券