开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用Jekyll为同一篇博客文章生成两个布局

Jekyll是一个静态网站生成器，它可以帮助开发者快速创建简单、高效的静态网站。使用Jekyll可以为同一篇博客文章生成多个布局，这在一些需要不同展示方式的场景下非常有用。

在Jekyll中，可以通过在文章的Front Matter中指定不同的布局来实现为同一篇博客文章生成多个布局。Front Matter是指位于文章开头的一段YAML或JSON格式的元数据，用于配置文章的一些属性。

以下是一个示例的Front Matter：

---
layout: default
title: My Blog Post
---

在上面的例子中，layout属性指定了文章使用的布局，这里使用了名为"default"的布局。通过在Jekyll的布局文件中定义不同的HTML结构和样式，可以实现不同的展示效果。

在Jekyll的布局文件中，可以使用Liquid模板语言来动态生成页面内容。可以根据需要在布局文件中添加不同的HTML结构、CSS样式和JavaScript代码，以实现不同的布局效果。

以下是一个示例的Jekyll布局文件：

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
  </header>
  
  <div class="content">
    {{ content }}
  </div>
  
  <footer>
    &copy; 2022 My Blog
  </footer>
</body>
</html>

在上面的例子中，{{ page.title }}和{{ content }}是Liquid模板语言的语法，用于动态生成页面标题和文章内容。

通过在Jekyll的配置文件中定义不同的布局，可以为不同的文章指定不同的布局。以下是一个示例的Jekyll配置文件：

# _config.yml

defaults:
  -
    scope:
      path: ""
    values:
      layout: "default"
  -
    scope:
      path: "_posts"
    values:
      layout: "alternate"

在上面的例子中，通过defaults属性定义了两个默认配置，分别对应根目录下的所有文件和_posts目录下的所有文件。通过layout属性指定了不同的布局，根目录下的文件使用"default"布局，_posts目录下的文件使用"alternate"布局。

通过以上配置，当创建新的博客文章时，可以根据需要选择使用"default"布局或"alternate"布局。这样就可以为同一篇博客文章生成两个不同的布局。

推荐的腾讯云相关产品：腾讯云静态网站托管（https://cloud.tencent.com/product/scf-static），腾讯云对象存储（https://cloud.tencent.com/product/cos）。

腾讯云静态网站托管可以帮助开发者快速部署和管理静态网站，提供高可用、高性能的访问体验。

腾讯云对象存储是一种高可靠、低成本的云存储服务，可以用于存储和管理静态网站的文件和资源。

相关搜索:运动布局-为过渡constraintSetEnd和constraintSetStart使用两个布局文件时，文本大小不会更改如何使用索引匹配为同一条件返回两个不同的值使用kotlin语言为android studio中的一个活动添加和管理两个/多个布局如何在SAPUI5中为两个不同环境中的不同地址使用同一资源？如何在Angular中使用AuthGuard为两个不同的用户角色提供对同一菜单的路由访问？在Angular Jasmine测试中为具有不同泛型类型的同一类使用两个提供程序如何使用Mockito测试对同一方法的两个不同调用，为每个调用返回不同的响应？生活中的大数据大数据研究分析客户大数据平台

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

无论是用 NodeJS 编写的 Hexo，还是用 Ruby 编写的 Jekyll，甚至是用 Go 编写的 Hugo，都能轻易为你带来一个支持自定义模板、功能以及 Markdown 语法的个人网站或者个人博客...实现与评价这里就以笔者的个人博客站点为例解释一下如何使用静态生成器来搭建博客。...也就是说，如果你想使用某个 Jekyll 主题，唯一的方式就是克隆这个 Jekyll 主题的项目，并在此基础上开始你的博客。...在实际的使用过程中，笔者根据自己的需求也在 H2O 主题上做出了一定的功能修改，并开源为 jekyll-them-H2O-ac。...Github 篇 Netlify 篇 Cloudflare 篇 FTP 篇 VPS 篇 Online Editor 篇本站对于以上几种部署方式也有不同的节点对应，如下所示：托管方支持访问域名

1.8K4 0

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

版权声明：本文为博主原创文章，未经博主允许不得转载。...---- 在线文档制作工具系列篇 ↓：第一篇：GitBook制作文档并发布到GitHub 第二篇：Hexo制作文档并发布到GitHub 第三篇：Jekyll制作文档并发布到GitHub...第四篇：Vuepress制作文档并发布到GitHub ---- Jekyll做博客有点复杂，如果说小白，不推荐轻易上手，出现的问题也是很多的，这里仅作为学习和交流。...第三步:在_posts文件夹中放入自己写好的博客,文件名必须是日期-标题名,例如:2019-01-01-我的第一篇博客。第四步:上传博客到Github中即可访问自己的博客。...学习如何使用 drafts. _includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。

1K3 0

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

博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。...添加两条记录，@和www的主机记录，记录类型为CNAME类型，CNAME表示别名记录，该记录可以将多个名字映射到同一台计算机。记录值请写username.github.io....一般都是放在博客的一篇文章的最后，当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。大家估计都类似。

2821 0

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

博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。...添加两条记录，@和www的主机记录，记录类型为CNAME类型，CNAME表示别名记录，该记录可以将多个名字映射到同一台计算机。记录值请写username.github.io....一般都是放在博客的一篇文章的最后，当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。大家估计都类似。

1.3K2 0

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

为带有多种语言的 Jekyll 博客添加多语言选择发布于 2018-03-06 06:47 更新于 2018...是时候做一个通用的布局来实现多语言博客了！本文将为大家提供一个我编写好的多语言博客选择器（MIT License）。 ---- 先来看看效果。...引入页面配置元数据毕竟博客有多篇，终归要引入配置的。现在我们为这篇文章配置两种语言。（考虑到更通用的情况，我将一种语言定义为一种 version。）.../multi-language-in-jekyll-blog.html 这个配置是要放到博客 markdown 的元数据头里的。...制作布局文件为了更加通用，我在 _include 文件夹中新建了 post-version-selector.html 的布局文件，然后在每一个需要引入语言选择器的地方加上 {% include post-version-selector.html

1.5K1 0

免费构建自己的博客-Jekyll进阶

Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...模板模板是指将一个网页分割为多个部分，存放在不同的文件中，以实现尽可能复用代码的目的。...若要使用 Jekyll 布局，就必须了解 HTML 基本标签的用户，读者可以通过右侧链接进行学习：http://www.w3school.com.cn/html/index.asp 。...代码高亮本站点模板默认开启了代码高亮，编写博客时只需要使用 markdown 的代码块方法编写即可。...教程链接免费构建自己的博客-开发环境安装免费构建自己的博客-编写第一篇博客免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶免费构建自己的博客-进一步丰富博客

9850 0

【Jekyll搭建GITHUB个人博客】安装Ruby 环境、包管理器 RubyGems、Jekyll与错误解决

转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】今天在博客专家群看到CSDN韩俊强发表了一篇用Jekyll搭建个人博客的文章...介绍下Jekyll Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...使用 Jekyll 搭建博客之前需要安装环境 Git 环境、Ruby 环境、包管理器 RubyGems、本机已安装好了Git，就不在演示了，git的话，搜索一下，有很多教程的。...原文件为: ? 修改为: ? - D:/Ruby23 - D:/Ruby23 注意不要写成反斜杠！是/ 这两个目录分别为你Ruby和devkit的安装目录。

5771 0

快速搭建个人博客

看看看博客的主页样式： image.png 在手机上的布局： image.png 废话不多说了，开始进入正文。...快速开始从注册一个Github账号开始我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。...--- layout: post # 使用的布局（不需要改） title: My First Post # 标题 subtitle: Hello World...所以当你只放一篇文章的时候是不会出现标签的。 image.png 建站的初期，博客比较少，若你想直接在首页生成比较多的标签。...注册的步骤就不在介绍了解析域名注册好域名后，需要将域名解析到你的博客上管理控制台 → 域名与网站（万网） → 域名选择你注册好的域名，点击解析添加解析分别添加两个A 记录类型, 一个主机记录为

1.9K2 1

合并 Jekyll 多种类型的页面

正好近期学着写博客，于是想把一些胡思乱想的事情写在自己的站点上。阅读本文，将学到如何用 Jekyll 做多种类型的页面，并在首页的列表中将这些不同种类的页面合并按日期排序。...---- 制作除博客之外的新页面类型 Jekyll 不止支持博客（post）页面类型，也可以支持自定义页面类型。当然博客是它唯一的内建类型（hard-coded type）。...第一步：在 _config.yml 文件中添加自定义页面类型集合 collections: article: output: true 其中，article 是我为自定义类型取的名称。...post 类型的页面布局。...可以参考我的 posts 布局文件和 article 布局文件，两者几乎一样都是可以的，只是 article 遍历的时候使用 site.article。

7342 0

Jekyll + Github Pages 搭建个人免费博客

它的方便之处在于支持多种文本标记语言：Markdown，Textile，HTML，然后 Jekyll 就会帮你加入你选择主题的样式的布局中。最终生成你自己的静态博客网站。...以上两个步骤操作完成后，在 CMD 窗口执行如下命令安装Jekyll： gem install jekyll #安装jekyll jekyll -v #查看jekyll版本号 2.本地搭建博客...例如：2019-10-11-5分钟搭建博客.md 3.部署代码到 Github 1.创建 Github 账号注：这里我使用的 Github 托管静态博客的，你也可以选择把代码托管到码云或者其他平台上...可能存在兼容性问题，使用下面的命令 cd mundana-jekyll-theme bundle install #安装依赖 bundle exec jekyll serve #运行项目我的博客地址...手把手博客搭建参考资料 1.使用 github + jekyll 搭建个人博客 https://www.cnblogs.com/wangfupeng1988/p/5702324.html 2.Github

2.1K3 0

Mifa Design：一个服务于 Markdown 的设计体系

并不是为了和 Ant Design 齐名，只是用于为我的网站、博客、APP、小程序等等，提供一个一致化的 UI 及阅读体验。 ?...Mifa 微信公号编辑器打开 md.phodal.com 即可使用缘由过去，在讨论程序员影响力的时候，我们讨论了 Avatar、ID 一致性带来的影响。...设计系统因为，他们解决的是同一个问题，一致性。Design System 要解决的是一定规模公司中的 UI 设计问题，Mifa Design 则是为了提供一致化的阅读体验。 ?...对于一篇文章（Markdown）来说，需要个性化的东西有：标题、引用、段落、列表、表格、代码、链接。而这已经基本上包含了一个基础的 CSS 框架，所需要的几个重要的基本要素。...模板：Mifa Jekyll 主题及 Markdown 编辑器模板，顾名思义就是整合前面的元素，构建整体的布局。诸如一个博客包含了 header、footer 及博客本身的内部： ?

1.2K6 0

免费构建自己的博客-编写第一篇博客

本节，将开始编写第一篇属于自己的博客。先别着急写首先可以先试试下载本站的源码，部署一下。...其实存在国内加速地址：https://gitee.com/yks/Newbe.Docs 启动博客右键点击run.cmd，点击”使用管理员身份运行”。...# 存放局部视图，将可复用的组件存放于此 ├─_layouts # 存放布局文件，用于对博客的大体页面结构进行控制 ├─_plugins # jekyll插件 └─_...posts # 存放博客文章添加博文使用资源管理器，进入src文件夹。...教程链接免费构建自己的博客-开发环境安装免费构建自己的博客-编写第一篇博客免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶免费构建自己的博客-进一步丰富博客

4870 0

Jekyll 文章侧边索引导航

如果你使用带有 markdownlint 插件的编辑器编辑文章时，可能会有一堆告警。当然，如果不想折腾的人，这种方法不失为一种最简单方便的解决方案。...布局从目标一来看，其实在大部分的静态博客主题中都是有这样的功能的（PS：可能 Jekyll 是个例外，原生只支持静态目录）。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能，因此这两个例子的做法都不是很合适。...Table 标签作为表格布局标签，应该专注于展示表格数据，而非为整个页面布局操心。于是，Div 布局开始流行起来。Div 层的概念和布局的含义完全吻合，也容易理解。...Flex 布局的出现为 Div 布局提出了改善，使得页面布局不再被浮动元素和 Div 层浮动时内容大小为零所困恼。

1.6K3 0

如何搭建免费博客

随着github的出现，这样问题出现了改观，使用gitbub提供的github pages功能可以提供一个独立的站点供我们使用。结合相关的域名配置，我们就可以很方便的搭建属于自己的博客平台。...pages就是为也解决这个问题而出现，允许开发者自定义一个展示页面，来替代原有的代码列表。...到这里，不禁有一个疑问，gh-Pages虽然给了一个可以展示html平台，写博客如果全部都写html，那我们还要精力去调整样式和布局的问题.再者博客也要有评论功能，这两个问题如何解决？...jekyll 模板 jekyll 是基于ruby来编写的一个博客模板生成工具,也就是说我们可以根据相关的规则来生成对应的html文件，当然这份工作github也能帮你去做。...详细介绍参见jekyll官方文档。 jekyll安装 jekyll的安装可以参见 windows安装Jekyll linux和MacOS安装Jekyll jekyll使用 1.

1.1K4 0

利用 GitHub Pages 快速搭建个人博客前言快速开始写文章自定义域名进阶利用GithHub Desktop管理GitHub仓库修改个人介绍常见问题其他Star补充最后要说个事情

看看看博客的主页样式： ? 在手机上的布局： ? 废话不多说了，开始进入正文。...快速开始从注册一个Github账号开始我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。...--- layout: post # 使用的布局（不需要改） title: My First Post # 标题 subtitle...所以当你只放一篇文章的时候是不会出现标签的。 ? 建站的初期，博客比较少，若你想直接在首页生成比较多的标签。...添加解析分别添加两个A 记录类型, 一个主机记录为 www,代表可以解析 www.qiubaiying.top的域名另一个为 @, 代表 qiubaiying.top 记录值就是我们博客的IP地址，

4.1K11 0

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

这样一来，使用起来与普通的静态空间毫无差异，可以上传静态网页搭建博客。...这三款软件笔者分别在三个平台都使用过，总体上感觉都不错。本地目录和远程目录都是左右式布局，直接拖拽就可以完成上传下载，操作简单便捷。...运行流水线如下图所示，可以看到两个动作添加完毕，点击右上角 Run pipeline 按钮开始执行流水线。从下图可以看到环境准备和 Jekyll 编译动作正在执行。 ...有了自动部署的好处就是，可以更加专注于博客内容本身，即使是在不常用的机器上编写再推送到 Github，也不需要担心本地没有环境编译 Jekyll 以及用 FTP 客户端配置 FTP 信息和上传静态页面。...（采用 CC BY-NC-SA 4.0 许可协议进行授权）本文标题：《个人免费博客花式搭建指南 FTP 篇》本文链接：https://lisz.me/tech/webmaster/start-blog-ftp.html

3.3K2 0

踩坑记录丨记Jekyll + Github Pages搭建个人博客时遇到的各种问题

CSDN@AXYZdong，CSDN首发，AXYZdong原创唯一博客更新的地址为： AXYZdong的博客 B站主页为：AXYZdong的个人主页文章目录踩坑之一：Windows下搭建失败...从头说起：为什么想起来搭建个人博客？其实这个想法自己很久之前就有了，04-08那天16:34的那篇文章算是导火索，因为最近一直再用Obsidian，然后找一些有关文档，发现了这一篇博客。...▲ Bend Blog 的个人主页准备搭建：前期准备其实在准备搭建之前，我还花了一点时间找 Jekyll主题，最终还是选了这个主题。它里面也有相关使用介绍。...▲ 主题首页搭建过程参考了下面搭建的文章： Github+jekyll：建立你自己的博客网站 github + jekyll 建自己的博客 GitHub | 个人静态博客搭建 Jekyll 主要步骤总结...找到下面文章：使用jekyll本地调试可以访问静态资源，但是上传至GitHub无法访问的问题它里面写的看似对我也没什么用，到这里，已经开始绝望，准备推倒重来。

9682 0

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

以下是一种无需服务器和域名的方法，利用GitHub Pages和Jekyll搭建个人博客网站(http://m.bokequ.com/list/22-0.html)　　步骤一：准备 GitHub 账户...步骤三：下载 Jekyll 主题　　Jekyll 是一个简单易用的静态网站生成器，GitHub Pages 支持使用 Jekyll 搭建个人网站。...你可以使用 GitHub Desktop、Git 命令行或者直接通过 GitHub 网站上传文件。　　...步骤六：定制你的博客　　编辑 Jekyll 主题文件夹中的配置文件和内容文件，定制你的个人博客。你可以修改页面布局、添加新的页面和文章，以及调整样式和颜色。　　...通过 GitHub Pages 和 Jekyll，你可以免费搭建个人博客网站，无需购买服务器和域名。这是一个简单且经济高效的方式，让你能够开始你的博客之旅，并与世界分享你的想法和创作。

1491 0

使用Jekyll显示Jupyter笔记本

安装Ruby： rvm install ruby 使用gem下载jekyll和Bundler： gem install jekyll bundler 创建一个新博客创建一个新博客。...使用浏览器导航到Linode的公共IP地址（端口4000）来预览站点。网站上应该有一篇默认的文章。...本节中的步骤可以从本地计算机或使用Jekyll博客的Linode完成。如果您使用Linode，则可以使用ngrok查看笔记本。...笔记本： jupyter notebook 将Jupyter笔记本导出为Markdown 本节演示了Jupyter笔记本的一些常见功能，可以在Jekyll博客上显示HTML。...文件如果您在浏览器中导航到Jekyll博客，您应该会看到指向新帖子的标题链接（示例中为“超赞的数据可视化”）。

3.9K2 0

Allens Blogs 创建历程（1）

到最近，无意中看到一篇译文，似乎是《像黑客一样写博客》，瞬间就被带上车了，开始使用 Jekyll 和 GitHub Pages 架设我的静态博客。...，请使用下面的命令$ sudo gem install jekyll -n /usr/local/bin OK，这样 Jekyll 环境就安装完成了，接下来导入 Jekyll 后，就可以开始写作了。...开始写作 Jekyll 博客的配置全在 Blogs 根目录的_config.yml文件中，一般来说，只要没有什么特殊的需求，只需要修改诸如：博客名、所有者名字、email等信息即可，如果有更多的需求，请参考所用主题的说明和...---layout: posttitle: "在多线程构建场景下Powermockito无法在不同类中Mock同一个静态方法"date: 2015-10-14 13:50:39comments:...$ git add .$ git commit -m 'xxxxx'$ git push origin master 总结总的来说，使用 GitHub Pages + Jekyll 搭建简单的静态博客是非常容易上手的

7371 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭