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

如何在Jekyll中使用液体生成的JSON作为"_data“site.data对象?

在Jekyll中使用液体生成的JSON作为"_data"site.data对象的方法如下:

  1. 首先,确保你已经安装了Jekyll并且了解基本的Jekyll目录结构和配置文件。
  2. 创建一个名为_data的文件夹在你的Jekyll项目根目录下。这个文件夹用于存放自定义的数据文件。
  3. _data文件夹中创建一个名为mydata.json的JSON文件,用于存放你要生成的数据。
  4. 在你的Jekyll模板文件中,可以通过site.data.mydata来访问这个JSON文件中的数据。
  5. 如果你想使用液体模板语言生成这个JSON文件,可以在Jekyll的构建过程中使用自定义的插件或者脚本来生成这个文件。具体的实现方式取决于你使用的工具和技术栈。

以下是一个示例的液体模板代码,用于生成一个包含两个对象的JSON文件:

代码语言:txt
复制
---
layout: default
---

{% assign data1 = "value1" %}
{% assign data2 = "value2" %}

{% capture mydata %}
{
  "object1": {
    "property1": "{{ data1 }}",
    "property2": "{{ data2 }}"
  },
  "object2": {
    "property1": "value3",
    "property2": "value4"
  }
}
{% endcapture %}

{% assign mydata_json = mydata | jsonify %}

{% assign mydata_file = "_data/mydata.json" %}

{% capture write_file %}
{{ mydata_json }}
{% endcapture %}

{% assign write_file_cmd = "echo '" | append: write_file | append: "' > " | append: mydata_file %}

{% assign result = write_file_cmd | shell %}

{{ result }}

在这个示例中,我们使用了液体模板语言的变量、条件和过滤器来生成一个包含两个对象的JSON字符串。然后,我们使用jsonify过滤器将这个JSON字符串转换为有效的JSON格式。最后,我们使用echo命令将这个JSON字符串写入到_data/mydata.json文件中。

请注意,这只是一个示例,实际的实现方式可能因为你的具体需求和技术栈而有所不同。你可以根据自己的情况进行调整和扩展。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种弹性计算服务,提供可扩展的云服务器实例,适用于各种应用场景。了解更多信息,请访问:腾讯云云服务器(CVM)

腾讯云对象存储(COS)是一种高可用、高可靠、可扩展的云存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问:腾讯云对象存储(COS)

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

相关·内容

jekyll简易教程

bundle exec jekyll serve 进入本地环境 127.0.0.1:4000 文件目录 目录 描述 _data 格式化好网站数据应放在这里,jekyll 引擎会自动加载在该目录下所有的...yaml 文件(后缀是 .yml, .yaml, .json 或者 .csv )这些文件可以经由 site.data 访问。..._includes 你可以加载这些包含部分到你布局或者文章以方便重用。可以用这个标签 {% include file.ext %} 来把文件 _includes/file.ext 包含进来。..._layouts 用来保存模板 _posts 存放文章,文章格式很重要,必须要符合: YEAR-MONTH-DAY-title.md _sass 存放模板scss格式 _site 一旦 Jekyll...完成转换,就会将生成页面放在这里(默认) _config.yml 保存配置数据,如果需要使配置生效,需要重启jekyll index.md 网站入口,一般不放内容,一般用来进入home模板 assets

62420

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

这可能是一个困难过程,当您打算进行更改时,许多问题会浮出水面,而扩展不是您所期待。 Gatsby、Hugo和Jekyll是最受欢迎静态站点生成三种,它们受欢迎原因有很多。...缺点 学习Golang 可能是困难。 不支持XML作为数据文件类型。但是,支持YAML、JSON和CSV。...变身怪医(JekyllJekyll由Tom Preston-Werner在2009年发布,是这个列表中最老静态站点生成器。 Jekyll是用Ruby编写,全世界都在使用。...与Hugo一样,Jekyll也附带一个HTTP服务器,通常用于生成博客。它也经常用于生成投资组合。 虽然Jekyll对页面内容使用Markdown,但它也使用液体模板语言来处理页面。...选择静态站点生成器 尝试从这三种静态站点生成挑选可能是一项困难任务。它们本身都是伟大工具。让我们来看看为什么你可能想要选择一个在其余原因。 ?

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

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载措施,新起一篇作为记录和分享。...Jekyll layout 可以理解为页面模板,它是可以继承,比如我博客所有页面模板有一个共同祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索,它搜索数据是来自一个动态生成 JSON 文件。...这个 JSON 文件编译前长这样: https://github.com/mzlogin/mzlogin.github.io/blob/master/assets/search_data.json Jekyll...修改引用 JSON 文件地方,比如我 _includes/sidebar-search.html 里写法由: json: 'https://mazhuang.org/assets/search_data.json

    1.2K31

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

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载措施,新起一篇作为记录和分享。...0x02 站内搜索引用 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索,它搜索数据是来自一个动态生成 JSON 文件。...这个 JSON 文件编译前长这样: https://github.com/mzlogin/mzlogin.github.io/blob/master/assets/search_data.json Jekyll...编译后长这样: https://mazhuang.org/assets/search_data.json 这样资源是没有办法直接通过替换网址来用 jsDelivr 加速,因为 jsDelivr 上缓存是编译前文件...checkout、初始化 ruby 环境、安装 Jekyll 并编译博客源码工作,最后将编译生成 _site 目录里内容推送到 built 分支。

    1.1K00

    hexo_config

    pathname长度超了,然后去网上搜索问题,发现有的解决方法是要改成site.title,但是我有部分文章title也是超长,然后这个问题一直搁置了,后来我看到了一个hexo持久化链接文章,可以随机生成一个字符串作为持久化链接...,是通过一个hexo-abbrlink一个插件,我搜索了一下发现jekyll并没有这个插件,然后还发现了一些hexo一些其他插件很好用,hexo-admin,恩,就打算迁移到hexo。...server 启动服务器 hexo deploy 部署网站 hexo clean 清除缓存文件 (db.json) 和已生成静态文件 (public)。...hexomd文章不能使用<!...---- gitalk 一个评论插件,作用就是会在github生成issue,作为评论 ---- 一言 中二一句话?????

    38230

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

    今天,我就来示范如何在github上搭建Blog,你可以从中掌握githubPages功能,以及Jekyll软件基本用法。更重要是,你会体会到一种建立网站全新思路。 ?...它缺点是:   * 有一定技术门槛,你必须要懂一点git和网页开发。   * 它生成是静态网页,添加动态功能必须使用外部服务,比如评论功能就只能用disqus。   ...在你电脑上,建立一个目录,作为项目的主目录。我们假定,它名称为jekyll_demo。   $ mkdir jekyll_demo 对该目录进行git初始化。   ...$ cd jekyll_demo   $ git init 然后,创建一个没有父节点分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...$ mkdir _layouts 进入该目录,创建一个default.html文件,作为Blog默认模板。并在该文件填入以下内容。   <!

    5.8K20

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

    今天,我就来示范如何在github上搭建Blog,你可以从中掌握githubPages功能,以及Jekyll软件基本用法。更重要是,你会体会到一种建立网站全新思路。 ?...它缺点是:   * 有一定技术门槛,你必须要懂一点git和网页开发。   * 它生成是静态网页,添加动态功能必须使用外部服务,比如评论功能就只能用disqus。   ...在你电脑上,建立一个目录,作为项目的主目录。我们假定,它名称为jekyll_demo。   $ mkdir jekyll_demo 对该目录进行git初始化。   ...$ cd jekyll_demo   $ git init 然后,创建一个没有父节点分支gh-pages。因为github规定,只有该分支页面,才会生成网页文件。   ...$ mkdir _layouts 进入该目录,创建一个default.html文件,作为Blog默认模板。并在该文件填入以下内容。   <!

    1.7K70

    何在Ubuntu 16.04上使用Git Hooks部署Jekyll站点

    介绍 Jekyll是一个静态站点生成器,它提供了内容管理系统(CMS)一些优点,同时避免了此类数据库驱动站点引入性能和安全问题。...在本教程,我们将配置一个生产环境以使用Nginx来托管Jekyll站点,以及Git在您将更改推送到站点存储库时跟踪更改并重新生成站点。...现在,创建一个远程对象,它表示用于跟踪您工作远程存储库和分支Git对象。通常,默认远程称为origin,因此我们将其用于本教程目的。...为了在更改内容时重新生成站点,您需要像提交初始提交一样,将文件添加到提交,提交它们,然后推送更改。对文件进行更改后,请使用以下命令将所有已更改文件添加到提交。...结论 在本教程,您学习了如何在将更改推送到Git存储库之后部署网站,同时腾讯云社区提供关于在 Linux 上搭建Jekyll静态博客教程,欢迎使用

    1.3K30

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

    何在 Swift3获取类名字符串 解决 Cocoapods不能使用 IBDeisgnable 面向对象思想 ✅为什么要开发 Jekyll-Admin-Mac?...因为接触到使用 Jekyll构建博客十分方便,但是 Jekyll-Admin里面的功能又差强人意。...如果修改 Jekyll-Admin里面的源码代价是巨大,不如用自己擅长语言来写,正好还有自动生成 API 可以用。 对于 Jekyll-Admin-Mac UI我们采用网页配色即可。...Keys无法作为正常 Array使用,我们需要用 Array()对其进行初始化。...然而现在一个问题已经出现,现在这么多配置需要配置岂不是很麻烦。 这就涉及到面向对象思想,但是我们可以在 Swift中使用 Struct作为我们配置数据源。

    2.1K10

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

    何在GitHub免费搭建个人博客网站?当你想要开始自己博客之旅,但又不想花费金钱购买服务器和域名时,还有一些免费平台可供你选择。...步骤三:下载 Jekyll 主题  Jekyll 是一个简单易用静态网站生成器,GitHub Pages 支持使用 Jekyll 搭建个人网站。...步骤四:上传文件到 GitHub 仓库  将 Jekyll 主题文件夹所有文件上传到你在步骤二创建 GitHub 仓库。...你可以使用 GitHub Desktop、Git 命令行或者直接通过 GitHub 网站上传文件。  ...步骤六:定制你博客  编辑 Jekyll 主题文件夹配置文件和内容文件,定制你个人博客。你可以修改页面布局、添加新页面和文章,以及调整样式和颜色。

    14910

    手把手教你用vuepress搭建自己网站(1)

    ,凡是不被自己吸收,为自己所用,都只能称作为做信息,而不能视作为知识....特点:比Jekyll要先进一点,先生成文件,在部署 基于Node.js静态网站生成器 主题很丰富,在vuepress之前很多博客,文档网站都是基于Hexo搭建,是用jekyll还是Hexo搭建,基本上做...如果你想获取到正确类型定义,你可以配合 vuepress-types一起使用 vuepress-types作为VuePress类型定义包,还处于实验阶段 具体使用,可参考文档vuepress-plugin-typescript...使用文档,可以去尝试一下,这个不仅仅可以写Ts,在md也可以写TypeScript 在自己用 VuePress搭建网站过程,从零开始,一行行代码配置,编写,以及考虑代码模块化拆分,维护性,可实现按需定制化...文件夹后,在cmd或git bash终端下,使用npm init -y,或yarn init -y初始化,会自动生成一个package.json文件 yarn init -y 或 npm init -

    1.2K20

    hugo-站点变量

    站点变量 在站点配置定义了许多(但不是全部)站点范围变量....但是,Hugo 提供了许多内置变量,可方便地访问模板全局值. .Site.AllPages : 获取所有页面 – 数组 .Site.Author: 获取配置定义 作者名 .Site.BaseUrl...: 获取配置定义网站 URL .Site.BuildDrafts : 是否使用草稿 – 布尔值 .Site.Copyright : 配置 版权信息 .Site.Data : 自定义在 /data.../目录下数据 .Site.DisqusShortname : 配置段代码名 .Site.GooGleAnalytics : 配置定义 Google 分析码 .Site.Home : 首页对象....Site.IsMultiLingual : 是否有不止一种语言 .Site.IsServer : 是否在使用内置服务器 – 布尔值 .Site.LastChange : 一个字符串,网站最近更改日期

    44031

    用 Eleventy 建立一个静态网站

    Eleventy 是一个基于 JavaScript Jekyll 和 Hugo 替代品,用于构建静态网站。 静态网站生成器是一种基于原始数据和一组模板生成完整静态 HTML 网站工具。...Eleventy: 一个静态网站生成器 Eleventy(11ty)是一个简单静态网站生成器,是 Jekyll 和 Hugo 替代品。... 安装 Eleventy 并保存到你项目的 package.json 。...然后把 _site 文件上传到你 Web 服务器,发布你网站给世界看。 尝试 Eleventy Eleventy 是一个静态网站生成器,它易于使用,有模板和主题。...如果你已经在你开发流程中使用 Node.js,Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好结果,并使你免于复杂网站设计和维护。

    2K10

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

    其他   除了以上这些,也有一些其他支持 Markdown 语法和部署简单免费博客搭建方法,比如说将静态网站部署在普通虚拟主机、虚拟服务器上,将静态网站文件当做是对象存储并开放匿名访问,使用 Read...实现与评价   这里就以笔者个人博客站点为例解释一下如何使用静态生成器来搭建博客。...当然,还有另外一个原因,Github 原生支持静态生成器就是 Jekyll,这也意味着在 Github 上部署 Jekyll 更加方便。   ...在实际使用过程,笔者根据自己需求也在 H2O 主题上做出了一定功能修改,并开源为 jekyll-them-H2O-ac。...# 号与文字之间空一格,# 号与代码同行时距离不宜过长,相邻几行都有注释对齐为佳;当代码注释内容超过一行时最好将注释放在代码后一行,此时 # 号前不留空格; 在使用图片进行解释时候,在对应段落附近加载图片

    1.8K40

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

    上面预览图中博客就是基于jekylldbyll主题风格网站。jekyll是一个简单免费Blog生成工具,而dbyll就是基于jekyll一款开源主题项目。...如果在安装Bundler过程,gem提示缺少依赖包,可以按照提示现将依赖包安装完成之后,在安装Bundler。 ?...Pages上使用dbyll为例,来向大家演示dbyll使用。...具体步骤: 第一步:创建GitHub Pages 关于如何在GitHub上创建个人博客,可以查阅这篇文章《轻松搞定GitHub Pages》。...以下是发表文件一些规范: 博客更新指南 —– clone 仓库到本地 在_posts目录下新建文章,2016-7-30-react-native-study-note,可以参考https://github.com

    1.9K70

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

    gohugoio/hugo Stars: 68.0k License: Apache-2.0 Language: Go Hugo 是一个使用 Go 语言编写静态网站生成器,旨在提供快速和灵活构建体验...jekyll/jekyll Stars: 46.9k License: MIT Language: Ruby Jekyll 是一个用 Ruby 编写博客静态网站生成器。...简单易用:Jekyll 不会给用户带来不必要复杂性和配置,它只做你告诉它去做事情。 高度可定制化:使用 Jekyll,您可以根据自己需求轻松地创建个人、项目或组织网站,并对其进行完全控制。...数百种主题和插件 该项目具有以下关键特性和核心优势: 极高生成速度:Hexo 使用了先进技术来加快网站内容生成过程,让您可以更迅捷地发布新文章或更新现有内容。...11ty/eleventy Stars: 14.6k License: MIT Language: JavaScript eleventy 是一个简单静态网站生成器,它是 Jekyll 一种替代方案

    46840

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

    第四篇:Vuepress制作文档并发布到GitHub ---- Jekyll做博客有点复杂,如果说小白,不推荐轻易上手,出现问题也是很多,这里仅作为学习和交流。...第四步:上传博客到Github即可访问自己博客。 ---- 二、Jekyll目录和文件结构介绍 文件 / 目录 描述 _config.yml 保存配置数据。..._drafts drafts 是未发布文章。这些文件格式中都没有 title.MARKUP 数据。学习如何使用 drafts...._data 放一些其他配置文件,必须是.yml或者.yaml格式,比如有一个文件叫members.yml,如果想引用这个文件里内容就通过site.data.membres来引用 _site 一旦 Jekyll...完成转换,就会将生成页面放在这里(默认)。

    1K30

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

    //使用gem安装Jekyll gem install jekyll //使用Jekyll创建你博客站点 jekyll new blog #创建你站点 //开启Jekyll服务 //进入blog...关于jekyll其他一些命令用法如下: $ jekyll build # => 当前文件夹内容将会生成到 ./_site 文件夹。...$ jekyll build --destination # => 当前文件夹内容将会生成到目标文件夹。...$ jekyll build --watch # => 当前文件夹内容将会生成到 ./_site 文件夹, # 查看改变,并且自动再生成。...在整个过程你可以设置 URL 路径,你文本在布局显示样式等等。这些都可以通过纯文本编辑来实现,最终生成静态页面就是你成品了。

    28210
    领券