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

Jekyll + liquid:从页面元数据中获取值列表

Jekyll是一个静态网站生成器,它使用Ruby语言开发。它允许用户使用模板引擎Liquid来创建静态网页,并从页面元数据中获取值列表。

Liquid是一种简单但强大的模板语言,用于将数据渲染到网页模板中。它被广泛应用于Jekyll、Shopify等许多网站和应用程序中。

从页面元数据中获取值列表是指在Jekyll中,可以在每个页面的开头添加一些元数据,以表示该页面的特定属性。然后,可以使用Liquid模板语言的语法来提取这些元数据并在页面中使用。

以下是一个示例页面的元数据设置:

代码语言:txt
复制
---
title: My Page
author: John Doe
date: 2022-01-01
tags:
  - jekyll
  - liquid
---

这是我的页面内容。

在这个例子中,titleauthordatetags都是页面的元数据,它们可以在页面的模板中使用。

要从页面元数据中获取值列表,可以使用Liquid语法中的page对象和元数据的键名。例如,要获取页面的标题和作者,可以使用以下代码:

代码语言:txt
复制
<h1>{{ page.title }}</h1>
<p>Author: {{ page.author }}</p>

在上面的代码中,{{ page.title }}会被替换为页面的标题,{{ page.author }}会被替换为页面的作者。

Jekyll提供了丰富的Liquid模板语言的功能,包括条件判断、循环和过滤器等,可以更灵活地处理页面元数据和生成动态内容。

对于Jekyll开发者来说,掌握Liquid模板语言和了解如何从页面元数据中获取值列表是非常重要的。它可以帮助他们更好地管理和利用页面的元数据,并将其应用于各种应用场景,例如生成动态导航菜单、展示文章标签、显示作者信息等。

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

请注意,以上提到的腾讯云产品仅作为示例,不代表其他品牌商的产品和服务。

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

相关·内容

  • 如何搭建免费博客

    pages就是为也解决这个问题而出现,允许开发者自定义一个展示页面,来替代原有的代码列表。...---- 总结一下 对于上面所述的github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定的仓库,可以通过github...的支持Liquid 语法,详细参见:Liquid for Designers 4....创建首页,首页是为了显示文章列表的网页,我们需要做的是遍历_post文件夹的所有文章,然后展现出来,添加简单的代码如下:  ---   layout: default   title:...到这里,我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add .

    1.1K40

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

    $ cd jekyll_demo   $ git init 然后,创建一个没有父节点的分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...   {{ page.date | date_to_string }} 每篇文章的头部,必须有一个yaml文件头,用来设置一些数据。...它用三根短划线”—“,标记开始和结束,里面每一行设置一种数据。”...这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml设置的baseurl变量。...文章页面: ? 第七步,绑定域名。 如果你不想用http://username.github.com/jekyll_demo/这个域名,可以换成自己的域名。

    5.8K20

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

    $ cd jekyll_demo   $ git init 然后,创建一个没有父节点的分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...>   我的第一篇文章   {{ page.date | date_to_string }} 每篇文章的头部,必须有一个yaml文件头,用来设置一些数据。...它用三根短划线"---",标记开始和结束,里面每一行设置一种数据。"...这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml设置的baseurl变量。...文章页面: ? 第七步,绑定域名。 如果你不想用http://username.github.com/jekyll_demo/这个域名,可以换成自己的域名。

    1.7K70

    Jekyll 搭建静态网站

    Jekyll 是一个简单的免费的静态网页生成工具,不需要数据库支持,可以配合第三方服务,可以免费部署在 Github 上,而且可以绑定自己的域名。...简介 Jekyll 是一个简单的博客形态的静态站点生产机器。...它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...bundle exec jekyll serve 打开浏览器 http://localhost:4000 ,可以看到示例页面 更换主题 Jekyll 支持很多主题,列表 我们以 jekyll-theme-yat

    1.3K20

    开发工具总结(14)之Jekyll制作文档并发布到GitHub

    第四步:上传博客到Github即可访问自己的博客。 ---- 二、Jekyll目录和文件结构介绍 文件 / 目录 描述 _config.yml 保存配置数据。...这些文件的格式中都没有 title.MARKUP 数据。学习如何使用 drafts. _includes 你可以加载这些包含部分到你的布局或者文章以方便重用。...布局可以在 YAML 头信息根据不同文章进行选择。 这将在下一个部分进行介绍。标签 {{ content }} 可以将content插入页面。 _posts 这里放的就是你的文章了。...The permalinks 可以在文章自己定制,但是数据和标记语言都是根据文件名来确定的。...---- 三、相关语法官网 Liquid语法: https://help.shopify.com/themes/liquid Jekyll中文网: http://jekyll.com.cn/ 在本地预览博客效果

    1K30

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

    灵活多样化:由于其先进模板系统和强大分类系统,Hugo 可以用于创建各种类型的网站,包括企业、政府、非营利组织等官方机构;新闻媒体、事件展示及项目介绍等专题页面;文档库;图片集合与个人博客等。...,方便国际化项目的开发; 模块化设计:可通过 Hugo Modules 与其他项目共享内容、资源、数据和主题等。...Markdown 和 Liquid 模板支持:通过渲染 Markdown 和 Liquid 模板,Jekyll 可以将您提供的内容转换为完整且静态化的可以直接托管在 Apache、Nginx 或其他 Web...内置插件和变量功能:内置 Liquid 扩展,自定义 Permalinks 等特性使得在建立并管理页面时更加简便。...如果你正在寻找一个简单但又功能齐全、容易上手操作与维护、并拥有广泛应用领域 (个人博客到企业级门户) 静态网站生成器,elevevnty 将会是您理想之选!

    46840

    静态博客搭建工具汇总

    它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll、Hugo、Hexo 也可以运行在 码云(Gitee.com) Pages 上,也就是说,你可以使用码云的服务来搭建你的仓库页面、博客或者网站,而且是完全免费的。...但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具, 不需要数据库支持。但是可以配合第三方服务,例如Disqus。...官网:http://jekyllrb.com 优点: 1、jekyll是一个静态文件生成器,网站不需要数据库,只要把自己的博客放到对应的目录即可。...(这点本人非常喜欢) 缺点: 1、jekyll用的liquid语法确实不是对程序员友好的,。不过jekyll功能比hexo强大很多,有时间折腾的可以选它。

    1.3K20

    用 Eleventy 建立一个静态网站

    Eleventy 是一个基于 JavaScript 的 Jekyll 和 Hugo 的替代品,用于构建静态网站。 静态网站生成器是一种基于原始数据和一组模板生成完整的静态 HTML 网站的工具。...它可以自动完成单个 HTML 页面的编码任务,并让这些页面准备好为用户服务。由于 HTML 页面是预先建立的,它们在用户的浏览器中加载得非常快。...由于这些原因,企业经常使用它们来记录应用编程接口 (API)、数据库模式和其他信息。文档是软件开发、设计和其他方面技术的一个重要组成部分。...Eleventy: 一个静态网站生成器 Eleventy(11ty)是一个简单的静态网站生成器,是 Jekyll 和 Hugo 的替代品。...在 Linux 上,你可以使用你的包管理器安装 Node.js: $ sudo dnf install nodejs 如果你的包管理器没有 Node.js,或者你不在 Linux 上,你可以 Node.js

    2K10

    Jekyll 优化合集

    虽然标签有标签分类,但是因为存在大量重复也不是很方便; 如果想要将文章整理成一个系列或者专题,恐怕比较困难,只能通过建立单独的页面和编写代码的方式生成列表。...实现 代码高亮   Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现,据说大部分的高亮博客基本上都是使用 Pygments。...# prism.rb module Jekyll class PrismBlock < Liquid::Block include Liquid::StandardFilters...其实在 Jekyll 要做到这个也不是很难,只需要对整个文章的内容进行字符计数即可。...参考资料 让 Jekyll 支持 LaTex 数学公式(MathJax v3) Jekyll 实现文章阅读耗时与字数统计 Jekyll 如何做中文字数统计 版权声明:如无特别声明,本文版权归 仲儿的自留地

    2.1K30

    使用Jekyll显示Jupyter笔记本

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

    3.9K20

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    继上一轮改造过后,比较拖页面加载速度的主要有三点: 页面首个请求响应时间; 图片资源加载时间; 站内搜索引用的 JSON 资源加载时间。...第 1 点在页面仍然托管在 GitHub Pages 的前提下,似乎没有什么好办法能产生质的飞跃;本篇主要改善了第 2 点和第 3 点。...当然也有,我们 Jekyll 的 layout 机制来想办法。...Jekyll 的 layout 可以理解为页面模板,它是可以继承的,比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用的 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的,它的搜索数据是来自一个动态生成的 JSON 文件。

    1.1K00

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    继上一轮改造过后,比较拖页面加载速度的主要有三点: 页面首个请求响应时间; 图片资源加载时间; 站内搜索引用的 JSON 资源加载时间。...第 1 点在页面仍然托管在 GitHub Pages 的前提下,似乎没有什么好办法能产生质的飞跃;本篇主要改善了第 2 点和第 3 点。...当然也有,我们 Jekyll 的 layout 机制来想办法。...Jekyll 的 layout 可以理解为页面模板,它是可以继承的,比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用的 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的,它的搜索数据是来自一个动态生成的 JSON 文件。

    1.2K31

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

    它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...由于系统默认Ruby安装过程容易出现各种问题,因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容,也可以参考文章iMac搭建Jekyll本地环境。...我选择直接Github下载我的博客相关的内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io) 对于基于Jekyll的静态站点的目录结构,可以参考官网提供的...如下图,点击新建环境,然后在弹框输入你自定义的环境名称,选择付费模式,然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段,初始化比较久。...是否同意 Cloudbase CLI 收集您的使用数据以改进产品?

    3.6K105

    技术人如何搭建自己的技术博客

    它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...但如果我们只是在 GitHub 上面使用的话,到不需要知道 Jekyll 的语法,一般 Github 会自动将我们写的 Markdown 文件转换成静态页面。...构建一个技术博客很简单,基本上步骤就是网上找一个自己喜欢的主题,直接 Fork 到自己的 Github ,然后在删掉原博客的内容,在上传自己的文章即可,以我自己的博客为例。...仍然把博客托管在 Github 上面,每次提交完代码后,在腾讯云上面执行一个脚本,这个脚本会自动 Github 拉取最新更新的文件,并自动生产静态的 Html 文件推送到 Nginx 目录,域名重新指向这台服务器

    1.4K10

    技术人如何搭建自己的技术博客

    它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...但如果我们只是在 GitHub 上面使用的话,到不需要知道 Jekyll 的语法,一般 Github 会自动将我们写的 Markdown 文件转换成静态页面。...构建一个技术博客很简单,基本上步骤就是网上找一个自己喜欢的主题,直接 Fork 到自己的 Github ,然后在删掉原博客的内容,在上传自己的文章即可,以我自己的博客为例。...仍然把博客托管在 Github 上面,每次提交完代码后,在腾讯云上面执行一个脚本,这个脚本会自动 Github 拉取最新更新的文件,并自动生产静态的 Html 文件推送到 Nginx 目录,域名重新指向这台服务器

    94830

    盘点静态博客生成工具

    在互联网,博客是诞生比较早的载体,然而随着时代的发展,越来越多的博客平台已经关闭,在这个时候人们逐渐意识到,拥有一个自己的博客无论是对自己,还是对自己的后代都是非常有帮助意义的。...博客有很多种类型,有静态博客,就是内容是通过文档记录的,还有动态博客,就是内容是通过数据库记录的。今天我们主要讨论下静态博客,以及那些生成静态博客的工具。...jekyll 使用ruby语言开发的静态博客系统,它内嵌liquid语言模板引擎,支持标签和过滤器。...它支持自定义url地址,同时,它还支持页面的自定义布局设计,更重要的一点,如果你之前使用了其它的博客系统,它是支持博客迁移的,也就是它会提供给你其它博客迁移到jekyll的完整帮助。...总结 静态博客系统的优点就是它不需要数据库,只需要静态文件就可以提供浏览,这样它可以提供非常大的并发访问。

    96430
    领券