You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Quarto能否通过YAML配置使所有图片默认显示在侧边栏?

让Quarto所有图片默认显示在侧边栏的方法

Quarto没有直接的全局YAML配置项能一键让所有图片都显示在侧边栏,但可以通过以下两种批量方法实现,不用逐个修改图片代码:

方法一:使用Lua过滤器

这是最灵活的方案,能自动给所有图片包裹侧边栏容器:

  1. 在你的Quarto项目目录下创建一个名为figure-sidebar.lua的文件,写入以下代码:
function Image(img)
  -- 给图片包裹.column-margin容器
  local div = pandoc.Div({}, pandoc.Attr("", {"column-margin"}))
  div.content:insert(img)
  return div
end
  1. 在Quarto文档的YAML头部添加过滤器引用:
filters:
  - figure-sidebar.lua

这样所有图片都会自动被放到侧边栏里。如果个别图片不需要侧边栏显示,给它加个.no-sidebar类即可:

![正常显示的图片](images/normal.jpg){.no-sidebar}

对应的,你需要修改Lua过滤器,添加排除逻辑:

function Image(img)
  -- 跳过带no-sidebar类的图片
  if img.classes:includes("no-sidebar") then
    return img
  end
  local div = pandoc.Div({}, pandoc.Attr("", {"column-margin"}))
  div.content:insert(img)
  return div
end

方法二:全局CSS样式(仅针对HTML输出)

如果你的输出格式是HTML,也可以通过自定义CSS来强制图片布局到侧边栏,但这种方法可能会影响所有图片的布局,灵活性不如Lua过滤器:

在YAML里引入自定义CSS文件:

format:
  html:
    css: custom.css

然后在custom.css里添加:

/* 让所有图片容器默认显示在侧边栏 */
.quarto-figure {
  float: right;
  width: 30%; /* 调整侧边栏宽度 */
  margin-left: 1em;
}

不过这种方法和.column-margin的原生侧边栏布局可能有差异,需要根据需求调整样式细节。

内容的提问来源于stack exchange,提问作者itsMeInMiami

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 17:52:07