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

在Jekyll中,如何为集合呈现自定义元数据?

在Jekyll中,可以通过在集合的每个文件的前面添加YAML前置数据块来为集合呈现自定义元数据。YAML前置数据块是一段位于文件开头,被三个短横线(---)包围的YAML格式的文本块。

以下是一个示例的YAML前置数据块:

代码语言:txt
复制
---
title: "文章标题"
author: "作者名"
date: 2022-01-01
categories:
  - 技术
  - 编程
tags:
  - Jekyll
  - 集合
---

在这个示例中,我们定义了文章的标题、作者、日期、分类和标签等元数据。

在Jekyll的模板中,可以通过page对象来访问这些自定义元数据。例如,要访问标题,可以使用{{ page.title }}

对于集合,可以使用site.collections对象来访问集合的元数据。例如,要访问名为posts的集合中第一个文件的标题,可以使用{{ site.collections.posts[0].title }}

Jekyll中集合的自定义元数据可以用于根据不同的元数据属性来呈现不同的内容,或者用于过滤和排序集合中的文件。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

合并 Jekyll 多种类型的页面

06:49 以前胡思乱想时,有时会讲给小伙伴们听,有时会将想法微信上发给自己,但多数时候是没有后文的,让胡思乱想烂脑中。...第一步: _config.yml 文件添加自定义页面类型集合 collections: article: output: true 其中,article 是我为自定义类型取的名称。...第二步:添加自定义页面类型文件夹 需要在 Jekyll 项目根目录建立一个 _article 文件夹,此名称与第一步的类型名称一致,前面加下划线。...(可选)第三步:添加自定义页面类型默认数据 defaults: - scope: path: "_article" type: "article" values:...制作一个合并了博客和其他页面类型的页面列表 我希望首页混杂我的博客和胡思乱想,于是必须将两种不同类型的集合合并。

73420

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

电脑上的运行效果 ? ? ? 上面预览图中的博客就是基于jekyll的dbyll主题风格的网站。...如果在安装Bundler过程,gem提示缺少依赖包,可以按照提示现将依赖包安装完成之后,安装Bundler。 ?...第二步:设置dbyll 拿到disqus简称之后就可以_config.yml文件文件添加disqus: disqus short name;添加完成之后发布你的网站,就可以看到disqus评论板块了...侧边栏(sidebar) 你可以在编辑/_includes/sidebar.html来自定义你的侧边栏。 其他问题 发表的文章首页不显示?...以下是发表文件的一些规范: 博客更新指南 —– clone 仓库到本地 _posts目录下新建文章,2016-7-30-react-native-study-note,可以参考https://github.com

1.9K70
  • 开垦属于你的网络空间:简单易用的静态博客框架推荐

    不论是Hugo、Jekyll、Hexo还是Eleventy,各自领域内都表现出色。它们具有高度可定制化、快速生成静态文件以及拥有多种主题和插件等核心优势。...灵活多样化:由于其先进模板系统和强大分类系统,Hugo 可以用于创建各种类型的网站,包括企业、政府、非营利组织等官方机构;新闻媒体、事件展示及项目介绍等专题页面;文档库;图片集合与个人博客等。...快捷开发流程:借助内置 Web 服务器进行实时预览,并随时查看内容结构变更后的效果呈现情况。完成开发后只需将代码部署到主机或推送至 Git 仓库自动执行持续集成/交付过程。...内置插件和变量功能:内置 Liquid 扩展,自定义 Permalinks 等特性使得在建立并管理页面时更加简便。...广泛兼容性:不仅 Hexo 可以完美适配于绝大多数操作系统,并且还提供对常见标记语言 ( Markdown) 和第三方插件 ( Octopress) 等格式/工具库进行全面支持。

    46840

    Jekyll 社交图标集合创建

    于是, Jekyll 博客主题设计的时候,通常会在个人简介的地方放置几个社交小图标,点击社交小图标即可把读者带到你的社交个人主页上。...比如说,虽然我们只字体图标文件定义了一个图标,但是当我们使用不同的 color 定义时,图标就会改变其颜色。...为了能够创建一个 SVG 图标集合,我们可以使用 symbol 元素来定义一个图形模板对象,然后用一个 元素实例化。symbol 元素对图形的作用是同一文档多次使用,添加结构和语义。...  现在让我们来尝试一下借助 Iconfont 来创建自定义的社交图标集合吧。...这里提供了三种方式来使用创建好的社交图标集合,目前平台推荐的是Symbol 引用方式。接着即可按照以下三个步骤在你的网页上轻松使用自定义好的社交图标集合了。

    2K40

    Quake 一个开源的知识管理框架

    MxGraph、Mermaid、Ledge Framework 等 所以,就有了:https://github.com/phodal/quake Quake:知识管理框架 Quake 的目标是构建面向极客的知识管理框架...尽管我们没有 Quake 引入数据库,但是依旧可以提供如下所功能: 数据迁移。 历史状态。设计一个拥有历史状态的内容是一件麻烦的事情。 数据查询与更新。 只是呢,现在的这些功能只能支持基本的开发。...Quake 设计理念 2:自由定制 设计一个能支持不同数据模型的知识管理系统痛苦了,需要大量地前期工作。因此,我们先构建了一个可以自定义数据格式的数据引擎。...Quake 里直接采用了 Jekyll 的 Front Matter 语法来定义数据。...自定义显示组件 进行。 现有的 Web 部分架构是基于 Web Component 构建的,以提供自定义数据操作能力。

    79310

    【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

    非常适合简单的网站,作品集。 ? 虽然您可以手动创建静态站点,但这样做有很多缺点。这可能是一个困难的过程,当您打算进行更改时,许多问题会浮出水面,而扩展不是您所期待的。...Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器的三种,它们受欢迎的原因有很多。让我们看看他们能提供什么。 盖茨比(Gatsby) 由节点。盖茨比是这三款中最新的静态网站生成器。...使用反应物.js使Gatsby能够受益于框架呈现DOM的方法,因为组件成为焦点。 Gatsby还支持GraphQL,这意味着数据查询变得更加容易。...不支持XML作为数据文件类型。但是,支持YAML、JSON和CSV。 变身怪医(JekyllJekyll由Tom Preston-Werner2009年发布,是这个列表中最老的静态站点生成器。...选择静态站点生成器 尝试从这三种静态站点生成器挑选可能是一项困难的任务。它们本身都是伟大的工具。让我们来看看为什么你可能想要选择一个在其余的原因。 ?

    3K20

    静态博客搭建工具汇总

    docsify 官网 4 Docute Docute 本质上就是一个 JavaScript 文件,它可以获取 Markdown 文件并将它们呈现为单页面应用。...但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具, 不需要数据库支持。但是可以配合第三方服务,例如Disqus。...最关键的是jekyll可以免费部署Github上,而且可以绑定自己的域名。...官网:http://jekyllrb.com 优点: 1、jekyll是一个静态文件生成器,网站不需要数据库,只要把自己的博客放到对应的目录即可。...用户可以支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 WordPress有许多第三方开发的免费模板,安装方式简单易用。不过要做一个自己的模板,则需要你有一定的专业知识。

    1.3K20

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

    由于系统默认Ruby安装过程容易出现各种问题,因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容,也可以参考文章iMac搭建Jekyll本地环境。...项目根目录直接命令行运行 jekyll build 即可查看构建结果 ➜ blog git:(master) ✗ jekyll build Configuration file: /github...如下图,点击新建环境,然后弹框输入你自定义的环境名称,选择付费模式,然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段,初始化比较久。...是否同意 Cloudbase CLI 收集您的使用数据以改进产品?...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引页和404页面: Zkyx39SOCYgHimv.png 访问静态页面 浏览器输入讯云提供的默认域名

    3.6K105

    发布 GitHub Pages,现在就像数 1, 2, 3 那样简单

    所有的 Markdown 文件现在都被 GitHub Pages 渲染,把你从需要给每个文件添加 YAML 前置描述(文件顶部由 ---符号分割的数据解脱出来。...如果你的页面没有一个明确的标题,并且这个文件是由 H1、H2或者 H3 标签开始的,我们会使用这个标签内容作为页面的标题,显示浏览器的标签上。...当然,你依然可以通过额外的自定义设置(比如使用你自己的布局和样式来覆盖默认主题)来继续控制外观和体验。...所以, GitHub Pages 生成过程是可以尽可能透明和可定制的,所有上面提到的特性都是以 Jekyll 的开源插件的形式实现的,也就是 Jekyll Optional Front Matter ,...Jekyll README Index , Jekyll Default Layout ,以及 Jekyll Titles from Headings 这些插件。

    75840

    Jekyll 文章侧边索引导航

    前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言   Jekyll 与 Hexo 不同之处有很多,其中一处是文章页面不支持原生...Jekyll 生成目录的方案   参考资料 1 中所提到的,如果想要在 Jekyll 实现文章目录,有三种不同的方案可供选择: 第一种方案   利用完整的标签来生成静态目录,可以看到本文的开头就是这样的一个实例...缺点在于 Github Pages 不支持这类自定义插件,你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...# gemfile gem "jekyll-toc" # 添加后需执行 bundle install 安装插件 # _config.yml # 全局配置文件启用 jekyll-toc 插件 plugins...具体 post 模板页使用 toc 模块的代码最后所示。 自适应   为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏时采用如下 common.sass 的样式。

    1.6K30

    .NETASP.NETMVC 深入剖析 Model数据、HtmlHelper、自定义模板、模板的装饰者模式(一)

    与View的使用关系(数据上下文DataContext与View呈现MVC的定义,Model准确点讲是ViewModel而非DomainModel,ViewModel简称显示Model,主要是将要显示的数据融合在一个...可以总结出一个数据上下文实体大部分的情况下都可能会被很多View使用,所以ASP.NETMVC 需要具备很强的自定义性,一个Model可以随意呈现出多Ui而不会因此将ViewModel搞的一团乱;...,不同的语言、平台对模式的运用各不相同,但是模式的中心思想一直不会变,不管你如何设计都必须呈现出框架模式的本质才行; 众多的框架设计模式 :契约式设计、编程、数据驱动设计、管道模型、远程代理模式...,描述的角度是什么,描述的层面又是是什么; 我们就拿ModelMetadata来讲,ASP.NETMVC,Model的使用方向基本上被限定在三个操作集合,第一:请求的数据绑定,第二:数据绑定时的验证...,第三:Model的最终呈现;那么ModelMetadata要包含这三个操作集合所需要的全部数据,当然也可以通过切割成三组数据对象模型,通过继承体系包含起来;那么ModelMetadata需要描述三个方向上的所需要的数据集合

    67060

    一杯茶的时间,上手 Gatsby 搭建个人博客

    而且了解过程还发现了 Netlify CMS[10] 这个内容管理平台,如此一来,文章数据完全可以存在 Github ,同时可以便捷地编辑文章。...一般使用时只需要知道集合里每个项目的数据 edges.node ,同时通过 GraphiQL 浏览其它可以使用的数据。...修改 Markdown 节点 Remark 插件生成的 Markdown 节点中,我们可以往 fields 域放一些自定义的变量。这里我们把自定义的路径存到 fields.slug 。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节我会继续谈谈其它个性化的配置,草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。...上下篇 文章页面我们通常会加入上下篇来引导继续浏览。这里我们同样 createPages 钩子处理,但这回我们添加到 context 域中,这个域里的数据会作为 props 传到模板组件

    3.2K20

    Hugo:一个快速、现代的静态网页引擎

    Hugo并不依赖任何权限、数据库、运行库、解释器或外部库。使用Hugo编写的网站可以运行在S3,Github Pages,Dropbox或其它任何静态网页托管上。...你可以使用任何你喜欢的方式组织URL,通过自定义的index页面和分类组织内容。使用任何形式定义你自己的数据,例如YAML、TOML或JSON。...我确实用过Jekyll,但是对于一个会运行很多年的网站来说,照顾一个ruby app是我不想插手的事。...也许我的服务器和我的桌面端的Ruby版本不同,也许一些Ruby Gems已经我的发行版安装了,但不是我想要的,这就得重新手动安装它们,每次Gem提供的功能出了什么问题,我就得手动重新安装一下,还得SSH...也许jekyll哪天发了新版本,用了最新Ruby特性。 Hugo在这方面有很多优势,比如内置服务器、实时载入和在本地测试时方便的链接转换等。

    1.3K50

    垂直社区产品如何集合相同属性的用户【社区类APP探讨①】

    而垂直社区则是基于一定机制集合了相同属性用户的社区,类别多种多样,游戏的、二次的、音乐的、母婴的、医疗的、旅游的、美食的、体育的等等。...上图左边的是一个二次的垂直社区,其中一个页卡叫做“宅物”,抓住了二次用户的特点,因为他们都拥有特别多的动漫周边和手办等,这样的功能就与其他纯聊天和晒图的社区功能产生了差异。...回到项目本身,对于手游宝来说,应该思考如何为游戏玩家创造话题,而不是单纯模仿综合社区的做法,只给用户一个聊天规则,而不去引导话题。...垂直社区就能够很好的做到这点,因为基于兴趣的用户都是带着自身的经历或者是说积累进来的,如下图的蚂蜂窝:用户进来后能够呈现以旅行为表现的维度,展现他之前的足迹,迅速提升用户优越感,而不需要用户花很长时间社区里互动才获得优越和认同感...二次的文化可以体现为卖萌、颜文字和宅文化,上图的次社APP文案和形象上就充分利用了这些文化进行设计。

    2.6K92

    【译】你可以用GitHub做的12件 Cool 事情

    当你 GitHub 查看文件时(任何文本文件,任何仓库),右上角会有一个小铅笔图标,点击它就可以编辑文件了。...注意第一行的 ```jsx 这意味着代码段将会呈现出: (这个扩展于 gists 。顺便说一句,如果你使用 .jsx 后缀,就会得到JSX的语法高亮) 这是一个所有受支持的语法列表。...8 Issues创建列表 你想在你的 issue 中看到复选框列表吗? 你想在查看 issue 列表是它们以好看的 2of5 进度条呈现吗? 太好了!...我们继续,让 Gwiki 动起来,我从 NodeJS 的文档复制了几页来作为 wiki 页面。然后创建了一个自定义侧边栏,帮助我更好地模拟一些实际的目录结构。...如果我 GitHub 中点击了 settings选项,切换到 GithubPages 设置,然后选择一个 Jekylltheme。。。 我就可以得到 Jekyll-themed 页面。

    83820

    为带有多种语言的 Jekyll 博客添加多语言选择

    -09-01 00:13 我有几篇博客是用多种语言编写的,一开始我是每篇博客添加其他语言的链接,但多语言博客多了之后就成了复制粘贴了。...引入页面配置数据 毕竟博客有多篇,终归要引入配置的。现在我们为这篇文章配置两种语言。(考虑到更通用的情况,我将一种语言定义为一种 version。).../multi-language-in-jekyll-blog.html 这个配置是要放到博客 markdown 的数据头里的。...现在,我们把之前写的 select 搬到 post-version-selector.html 文件,并引入页面配置好的各语言路径。...不同于原生的 html, markdown 的 html 是受到空行影响的,如果 的各个 之间有空行,那么整个 select 会被 markdown 解析器活生生拆掉

    1.5K10

    基于Jekyll与Github Pages搭建博客

    Jekyll 运行环境的配置与安装 事实上,搭建博客的过程,配置这个安装环境我花的时间是最久的也是最懵逼的,最后也是不知道为什么才终于配置成功。...我的博客选择的是 Github 上找的博客主题,它对目录各个文件的内容、功能都有很详细地说明,适合我这样的小白学习使用 Jekyll 。...这些文件的格式中都没有title.MARKUP数据。...修改模板,我暂时只改了_config.yml、index.html,../assets/img里面加上了一些图片,将../_posts里的文章整理了一下。...为了看到博客呈现出来的效果,就要用上我们上一步安装的 Jekyll,先打开命令行,将路径修改至博客模板所在路径,执行命令 jekyll server,复制 http://127.0.0.1:4000/

    1.1K10
    领券