在Quarto中使用HTML构建双栏页面的问题求助

DevOps 小满

2026-7-3

解决Quarto中实现分栏GIF背景页面的问题

原代码的问题

YAML元数据被拆成两个独立的---块，Quarto无法正确解析格式配置
手动添加<body>标签会和Quarto自动生成的HTML结构冲突，导致布局样式失效
普通按钮没有链接功能，需调整为可跳转的链接元素

修正后的完整代码

---
title: ""
format: html
toc: false
page-layout: full
---

<div style="margin: 0; padding: 0; display: flex; height: 100vh; width: 100vw;">
  <!-- 左侧GIF背景栏 -->
  <div style="flex: 1; background: url('gif_example.gif') no-repeat center center; background-size: cover;">
  </div>
  
  <!-- 右侧文本与按钮栏 -->
  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem;">
    <p>To jest napis na prawej stronie</p>
    <!-- 带链接的按钮样式 -->
    <a href="你的目标链接地址" style="
      background-color: #007bff;
      color: white;
      padding: 0.8rem 1.5rem;
      border-radius: 4px;
      text-decoration: none;
      font-size: 1rem;
      margin-top: 1rem;
    ">Przycisk</a>
  </div>
</div>

关键调整说明

合并YAML元数据：把所有配置放在同一个---包裹的块内，添加toc: false关闭默认目录，page-layout: full让页面占满整个视口，避免默认边距。
移除手动标签：用顶层<div>实现全屏flex布局，设置height: 100vh和width: 100vw确保占满整个浏览器窗口。
按钮转链接：用<a>标签替代<button>，通过内联样式模拟按钮外观，设置href属性指定跳转地址，同时添加text-decoration: none去掉链接下划线。