如何在Quarto的for循环中同时显示标题与Plotly图表？

问题原因 #

你用paste0编写的Markdown标题（####Zone ）无法被tagList解析，因为tagList仅识别HTML元素，不直接渲染Markdown语法。另外要生成可跳转的目录，需要给每个标题设置唯一ID，再构建对应的跳转链接。

修正后的代码 #

library(plotly)
library(htmltools)

# 初始化内容容器
content_list <- tagList()

# 循环生成带标题的图表区块
for(i in 1:3) {
  # 创建带ID的四级标题（用于目录跳转锚点）
  section_title <- tags$h4(paste0("Zone ", i), id = paste0("zone-", i))
  # 生成Plotly图表
  section_plot <- plot_ly(x = rnorm(10), type = "histogram") %>%
    layout(title = paste0("Zone ", i, " 直方图")) # 可选：给图表本身添加标题
  
  # 将标题和图表加入内容列表
  content_list[[i]] <- tagList(section_title, section_plot)
}

# 构建可跳转的目录
toc <- tags$div(
  tags$h3("目录"),
  tags$ul(
    lapply(1:3, function(i) {
      tags$li(tags$a(href = paste0("#zone-", i), paste0("Zone ", i)))
    })
  ),
  style = "border:1px solid #eee; padding:12px; margin-bottom:24px; border-radius:4px;"
)

# 组合目录与所有图表内容
full_page <- tagList(toc, content_list)

# 保存为HTML文件
save_html(full_page, "zone_charts.html")

关键改动说明 #

1. 标题渲染：用tags$h4直接生成HTML四级标题，替代原Markdown语法，确保标题能正常显示；同时给标题设置id属性，为目录跳转提供锚点。
2. 目录构建：用tags$ul和tags$li生成目录列表，每个列表项是指向对应标题ID的跳转链接，实现点击目录跳转到对应图表区块的功能。
3. 样式优化：给目录添加简单的CSS样式，提升页面可读性（可根据需求自行调整）。
4. 文件导出：通过save_html将最终内容导出为HTML文件，打开后就能看到完整的目录和带标题的图表。

内容的提问来源于stack exchange，提问作者DouxValkyn