在Jekyll上使用CSS中的liquid tempting在每个页面上调整div的背景色

Jekyll是一个静态网站生成器，它使用Liquid模板语言来生成网页内容。在Jekyll上使用CSS中的Liquid模板语言来调整div的背景色，可以通过以下步骤实现：

在Jekyll项目的根目录中找到_layouts文件夹，如果没有则创建一个。
在_layouts文件夹中创建一个名为default.html的文件（或者根据需要命名）。
在default.html文件中，使用Liquid模板语言的语法来定义页面的结构和内容。
在需要调整背景色的div元素上，使用Liquid模板语言的语法来设置背景色。例如，可以使用条件语句来根据特定条件设置不同的背景色。

下面是一个示例的default.html文件的代码：

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
  <style>
    .my-div {
      background-color: {% if page.color %}{{ page.color }}{% else %}white{% endif %};
    }
  </style>
</head>
<body>
  <div class="my-div">
    <!-- 页面内容 -->
    {{ content }}
  </div>
</body>
</html>

在上面的代码中，我们定义了一个名为my-div的class，并使用Liquid模板语言的条件语句来设置背景色。如果页面的Front Matter中定义了color属性，则使用该颜色作为背景色，否则默认为白色。

使用时，只需在每个页面的Front Matter中添加color属性并设置对应的背景色即可。例如，在某个页面的Front Matter中添加以下内容：

---
layout: default
title: My Page
color: #f1f1f1
---

这样，该页面的背景色就会被设置为#f1f1f1。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供弹性、可靠的云服务器实例，适用于各种应用场景。了解更多信息，请访问：腾讯云云服务器
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问：腾讯云对象存储

请注意，以上答案仅供参考，具体实现方式可能因个人需求和项目配置而有所差异。

相关·内容

CSS中的float定位技术在iOS上的实现

不过在 CSS 中，任何元素都可以浮动，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。...在CSS中也只定义了向左和向右浮动的功能，向左向右浮动的布局视图的原则是按视图添加的顺序，以及设定的浮动方向优先按左或者按右浮动，然后再整体的从上到下进行布局展示。...也就是说可以预先提供N种不规则布局的模板，然后每个页面或者每个区域从这N个不同的模板中随机的选取其中几个进行组合排列来达到那种看似不规则的排列效果。而所有的这些都可以通过浮动技术来简单解决。...浮动布局的停靠属性我们看到浮动布局视图里面还有一个gravity属性，这个属性在左右浮动布局视图中可以用来设置所有子视图的整体的上，中，下三种停靠模式，而在上下浮动布局视图中则可以用来设置所有子视图的整体的左...而且其提供的能力甚至要比CSS中的浮动属性更加强大。而我们在进行WEB前端开发时很多的界面布局其实都是通过CSS的浮动属性来完成的。

2.1K2 0

Jekyll 优化合集

由于本站目前是采用 Jekyll 来搭建的，所以为了提供给读者更加高效的阅读条件，笔者在廖柯杰大佬开发的 H2O 主题的基础上做了一些功能上的增加和优化，接下来就来详细介绍一下。...实现代码高亮 Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现，据说大部分的高亮博客中基本上都是使用 Pygments。...Prism 工具的安装使用相较其他两种稍微复杂一点，需要下载插件 prism.rb 手动安装到 _plugins 文件夹中，然后在文章模板页添加 prism.css 和 prism.js 的引入。...，使用的也是同一个页面模板，只是内容稍有不同。...此处，为了原生支持 LaTex 语法中采用双$符号来声明公式，同时也相应调整了 MathJax 的配置。于是就可以在基于文章模板的页面中直接使用如下所示的 LaTex 声明即可正确显示数学公式了。

2K3 0

在MNIST数据集上使用Pytorch中的Autoencoder进行维度操作

这将有助于更好地理解并帮助在将来为任何ML问题建立直觉。 ? 首先构建一个简单的自动编码器来压缩MNIST数据集。使用自动编码器，通过编码器传递输入数据，该编码器对输入进行压缩表示。...此外，来自此数据集的图像已经标准化，使得值介于0和1之间。由于图像在0和1之间归一化，我们需要在输出层上使用sigmoid激活来获得与此输入值范围匹配的值。...在下面的代码中，选择了encoding_dim = 32，这基本上就是压缩表示！...由于要比较输入和输出图像中的像素值，因此使用适用于回归任务的损失将是最有益的。回归就是比较数量而不是概率值。...检查结果：获得一批测试图像获取样本输出准备要显示的图像输出大小调整为一批图像当它是requires_grad的输出时使用detach 绘制前十个输入图像，然后重建图像在顶行输入图像，在底部输入重建

3.4K2 0

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

前言我相信，每个程序员都有一个愿望，都想有一个属于自己的"家"——属于自己的博客，专属的网站。在自己的“家”中，可以和志同道合的兄弟一起分享和讨论任何技术，谈天说地。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...现在我们打开http://localhost:4000,即可看见我们在Github上创建的主页，理论上和username.com/username.gi… 访问的应该是一模一样的。...，它提供的服务处于我们的网站服务器和我们的网站访问者之间，其原理是缓存了我们服务器上的页面，所以实际用户建立的 HTTPS 连接是用户的浏览器与 Kloudsec 之间的。

2291 0

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

1.2K2 0

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

以下是 Hugo 的核心优势：极高的性能：Hugo 被誉为世界上最快速度的框架之一，在几秒钟内即可渲染完整网站。...此外，Hugo 还具有以下关键特性：强大资源管道：包含 CSS 和 JavaScript 打包功能 (支持 Sass 编译)，图像处理工具 (调整尺寸、裁剪旋转)、EXIF 数据抽取；多语言支持：支持多国语言翻译...Markdown 和 Liquid 模板支持：通过渲染 Markdown 和 Liquid 模板，Jekyll 可以将您提供的内容转换为完整且静态化的可以直接托管在 Apache、Nginx 或其他 Web...内置插件和变量功能：内置 Liquid 扩展，自定义 Permalinks 等特性使得在建立并管理页面时更加简便。...这使得使用 Hexo 的体验变得非常灵活便利。完善文档资料：在官方网站上提供详尽清晰易懂并附带示例代码说明书籍，让初学者也能轻松上手。

3894 0

MAC电脑上的神功能“一指禅”，在Windows系统中也能使用

大家都知道，在苹果家的产品中，所有的系统都是不开源的。这使得苹果系统中的环境非常的好，而且同时也拥有很多高效便捷的小功能。...而我们经常使用的WIN系统，拜开源所赐，没有什么系统中的软件或者功能是WIN系统复制不出来的。...所以今天macdown小编就来给大家推荐一款工具，就算在WIN系统中也能使用MAC系统中的神功能—“一指禅”。...比如说我想知道一个Word文档中的内容是不是我所需要的，一般情况下只能打开这个文档去浏览，而我们大家都知道Word的启动速度相对来说并不是那么的迅速，所以如果使用“一指禅”来预览这个文档的话，就会节省出很多的时间...而QuickLook就是在WIN系统中实现“一指禅”这个功能的工具，虽然它本身的体积可能比较大，但它占用的系统资源非常少，不会影响系统的流畅度，几乎可以忽略不计。

1.5K4 0

在基于debian的deepin或者Ubuntu上双等号“==”和双中括号“]”不能使用的真相

使用的deepin-linux，今天写shell脚本的时候，忽然发现 sh test.sh 会报错[[: not found ，双等号和双中括号都不能使用了，很郁闷，后来探索发现，sh其实是dash...的别名，需要使用 bash test.sh 才可以。

1.3K2 0

静态博客搭建工具汇总

它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll、Hugo、Hexo 也可以运行在码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。...最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。...4、相对hexo而言，可以直接在github网页版上编辑和发布博客，PC间切换和同步非常方便。（这点本人非常喜欢）缺点： 1、jekyll用的liquid语法确实不是对程序员友好的，。...是一种使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。

1.2K2 0

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

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持使用Jekyll搭建静态站点...它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...如下图，点击新建环境，然后在弹框中输入你自定义的环境名称，选择付费模式，然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段，初始化比较久。...上传结束以后，在静态页面托管的「文件管理」页面可以对我们上传的内容进行调整，在「设置」页面可以添加域名、错误页面等信息，同时也给出了腾讯云提供的默认域名。

3.5K10 5

基于Jekyll与Github Pages搭建博客

它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Pages 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...Jekyll 运行环境的配置与安装事实上，在搭建博客的过程中，配置这个安装环境我花的时间是最久的也是最懵逼的，最后也是不知道为什么才终于配置成功。...我的博客选择的是在 Github 上找的博客主题，它对目录中各个文件的内容、功能都有很详细地说明，适合我这样的小白学习使用 Jekyll 。...在本地博客文件的根目录里打开命令行，使用命令rougify style github > css/syntax.css生成一个 github 风格的样式到css/syntax.css文件中。

1.1K1 0

转义，解决花括号在 Jekyll 被识别成 Liquid 代码的问题

转义，解决花括号在 Jekyll 被识别成 Liquid 代码的问题发布于 2017-10-12 16:08...更新于 2018-08-12 06:49 在 DependencyProperty.UnsetValue 的正确打开方式和合并 Jekyll 多种类型的页面这两篇博客中...，我都遇到了代码中的花括号被 Jekyll 识别为 Liquid 代码的问题。...---- 然而 Liquid 的问题还需 Liquid 来解。而 Liquid 的 raw 就是用来解决这个问题的。...欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接： https://walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布

1.4K1 0

如何做一个自适应网页？

背景现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验...{ margin: 1em 2em; } } 这段css表示的意思就是当前视口至少要有800像素，才会给.container选择器加上对应的css样式，你可以加入很多这样的条件，调整页面显示的最佳尺寸...，改变相应的样式，这种行为被称为断点同时在设计项目的时候，我们可以先完成一个手机端的页面，然后通过断点的方式不断完善pc的展示效果，这种通常被叫做移动优先设计现代自适应布局在很久之前，我们经常使用...layout.html (2).png 这种自适应的方式在切换起来很流畅，并且布局的改动在grid的加成下变得异常简单明了其实最本质的内容就是对不同的屏幕加载不同的css样式，你也可以使用媒体查询的方式加载...，比如TaiwindCSS中的断点加上对应的前缀就可以了，基于移动端优先的方式，它给了几个常用断点 Pasted image 20230606213705.png 在写断点的时候直接在元素上加前缀就可以了

3952 0

怎么通过码云(Gitee.com)创建自己的博客建立主页

它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile）以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在码云 Pages 上，也就是说，你可以使用码云的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile）以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在码云Pages上，也就是说，你可以使用码云的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...Jekyll 使用文档：http://jekyll.bootcss.com/docs/home/ 其他帮助: 如何自定义404？答：在项目根目录新建 404.html 文件即可。

7K2 0

Jekyll 文章侧边索引导航

前言 Jekyll 生成目录的方案第一种方案第二种方案第三种方案实践布局目录生成自适应最终代码参考资料前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能，因此这两个例子的做法都不是很合适。...实际上，从需要维护的代码量来说，第一个例子的做法所需的 js 代码应该是算少的，但是不是存在完全不使用 js 代码也能实现这样的功能的方案呢？实际上是存在的。...具体在 post 模板页使用 toc 模块的代码如最后所示。自适应为了实现目标二，这里采用了最简单的 CSS 媒体查询，即在平常 PC 端宽屏时采用如下 common.sass 中的样式。...在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。最终代码 <!

1.5K3 0

github pages代码高亮highlighter

github pages 一直想添加代码高亮 highlighter ，基于 jekyll 3.0 的 rouge 终于搞定了： ?...下载代码高亮库在 cmd 中输入： rougify style monokai.sublime > rouge.css 可以下载 rouge.css 出来，将这个 css 文件放到 github pages...项目中存放 css 的目录下，并在 html 中引用这个库，请自行更改引用的路径：配置文件...背景色为白色，字段显示不出来，所以我把 rouge.css 的背景色改成了黑色，在 rouge.css 最后面添加如下代码： div[class="highlight"] > pre > code[class..."] > pre[class="highlight"] { background:black; } 最后效果图如最开始的图片那样了，可以在我的 github pages 代码中查看具体的详情

1.2K1 0

合并 Jekyll 多种类型的页面

还好多数时候我记得，就像我亲自记得 3 岁时候的一些故事一样。但今天大脑被一些凌乱的事情撑爆了，心情极度低落。正好近期学着写博客，于是想把一些胡思乱想的事情写在自己的站点上。...阅读本文，将学到如何用 Jekyll 做多种类型的页面，并在首页的列表中将这些不同种类的页面合并按日期排序。...第一步：在 _config.yml 文件中添加自定义页面类型集合 collections: article: output: true 其中，article 是我为自定义类型取的名称。...制作一个合并了博客和其他页面类型的页面列表我希望在首页中混杂我的博客和胡思乱想，于是必须将两种不同类型的集合合并。...---- 参考资料 Concat arrays in Jekyll(liquid) Sorting & ordering collections · Issue #2515 · jekyll/jekyll

7142 0

如何搭建免费博客

---- 总结一下对于上面所述的github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定的仓库中，可以通过github...在_layout下创建一个default.html,作为一个网站的模板,添加如下内容（此处代码中的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意）：　　<!...的支持Liquid 语法,详细参见:Liquid for Designers 4....在浏览器中打开127.0.0.1:4000可以看到刚刚生成的网站： ? ?...到这里，我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add .

1.1K4 0

Jekyll搭建博客并部署到GitHub

时间设置因为我们是直接参考复制别人的主题，所以这个步骤在Windows会稍微不一样。我们需要先安装tzinfo-data到Windows中才可以。...下载主题我使用的是mzlogin 的主题。直接下载解压到想要的位置即可。 3. 安装TZINFO-DATA gem install tzinfo-data 4....修改侧边栏把主页中侧边栏的Repo修改成分类栏。...2021年更新 (1) 在2021年尝试使用本地预览的时候发现如下问题： D:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/jekyll-3.9.0/lib/jekyll/commands...原因是GitHub只会阅读Jekyll中xxx.github.io/_includes,而不会进入blog/_includes 导致。该问题是可以解决的。

9762 0

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

-09-01 00:13 我有几篇博客是用多种语言编写的，一开始我是在每篇博客中添加其他语言的链接，但多语言博客多了之后就成了复制粘贴了。...引入页面配置元数据毕竟博客有多篇，终归要引入配置的。现在我们为这篇文章配置两种语言。（考虑到更通用的情况，我将一种语言定义为一种 version。）...现在，我们把之前写的 select 搬到 post-version-selector.html 文件中，并引入页面中配置好的各语言路径。...不同于原生的 html，在 markdown 中的 html 是受到空行影响的，如果的各个之间有空行，那么整个 select 会被 markdown 解析器活生生拆掉...liquid 中如果要遍历 key-value 值，需要使用 for 来取出其中的 key 和 value。

1.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云