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

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

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

---
title: "文章标题"
author: "作者名"
date: 2022-01-01
categories:
  - 技术
  - 编程
tags:
  - Jekyll
  - 集合
---

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

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

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

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

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

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网：https://cloud.tencent.com/product/iot
腾讯云移动开发：https://cloud.tencent.com/product/mobile
腾讯云区块链服务：https://cloud.tencent.com/product/bcs
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云音视频处理：https://cloud.tencent.com/product/mps

相关·内容

合并 Jekyll 多种类型的页面

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

7342 0

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

在电脑上的运行效果 ? ? ? 上面预览图中的博客就是基于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.9K7 0

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

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

4664 0

Jekyll 社交图标集合创建

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

2K4 0

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

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

7931 0

如何拥有一个免费空间来写博客（github）

因此，github就设计了Pages功能，允许用户自定义项目首页，用来替代默认的源码列表。所以，github Pages可以被认为是用户编写的、托管在github上的静态网页。 ?...并在该文件中填入以下内容。　　<!...在该文件中，填入以下内容：（注意，行首不能有空格）　　— 　　layout: default 　　title: 你好，世界　　— 　　{{ page.title }} 　　我的第一篇文章... 　　{{ page.date | date_to_string }} 每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。...它用三根短划线”—“，标记开始和结束，里面每一行设置一种元数据。”

5.8K2 0

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

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

3K2 0

静态博客搭建工具汇总

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

1.3K2 0

搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门

因此，github就设计了Pages功能，允许用户自定义项目首页，用来替代默认的源码列表。所以，github Pages可以被认为是用户编写的、托管在github上的静态网页。 ?...并在该文件中填入以下内容。　　<!...在该文件中，填入以下内容：（注意，行首不能有空格）　　--- 　　layout: default 　　title: 你好，世界　　--- 　　{{ page.title }} 　　我的第一篇文章　　{{ page.date | date_to_string }} 每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。...它用三根短划线"---"，标记开始和结束，里面每一行设置一种元数据。"

1.7K7 0

如何将 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.6K10 5

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.6K3 0

.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需要描述三个方向上的所需要的数据集合

6706 0

发布 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 这些插件。

7584 0

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

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

3.2K2 0

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

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

1.3K5 0

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

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

2.6K9 2

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

我们直接保存到本地，在工程里面使用。我们新建一个 Mac的工程保存到本地名字叫做- Jekyll-Admin-Mac。...在Xcode6中使用IBDesignable创建自定义控件(翻译) 关于如何 NSView自定义背景颜色参考下面的连接我们设置 NSView为继承与 BaseView 背景颜色试图。...我们在 SideMenuView类里面新增一个方法,用来加载自定义的试图。...这就涉及到面向对象思想，但是我们可以在 Swift中使用 Struct作为我们的配置数据源。...我们在点击 NSTableView点击方法获取选中的 Row，之后让选中数据源状态被选中，其他取消选中。

2.1K1 0

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

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

8382 0

基于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.1K1 0

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

当然，这种方式也会有一定的缺点：无法定制呈现内容的样式，更无法修改模板；平台提供的在线编辑器的体验可能并没有离线编辑器的体验这么好，比如优秀的 Typora；对于页面权限的控制受限，无法像博客那样可以自由控制...；不一定支持自定义域名，或需付费才支持自定义域名。 ...预览项目由于这里导入的项目是 Jekyll，所以 Read the Docs 无法对其进行编译并显示预览页面。...所以最好的就是在 Github 建一个空的项目，将空的项目导入到 Read the Docs 中即可。 ...由于本站是采用 Jekyll 静态生成器的，所有只需将 _posts 目录下的 Markdown 文件全部拖拽到这里导入即可完成 Gitbook 的转换。

9422 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云