如何在R Markdown的YAML中配置实现页面顶部添加Logo

核心前提 #

所有文件（主Rmd、logo.html、logo.png）均存放在同一工作目录下，无需在正文/代码块中添加任何代码，仅通过YAML配置+外部HTML文件实现。

失败原因说明 #

你之前两次尝试失败的核心问题：

• 第一次的logo.html使用了转义后的HTML字符（</"），浏览器无法识别为有效图片标签
• 第二次将PNG转为HTML的方案存在编码/路径适配问题，无需使用该方案

步骤1：编写logo.html文件 #

直接创建纯文本格式的logo.html，写入以下原生HTML代码，无需转义：

<div style="width: 100%; max-width: 940px; margin: 20px auto 0 auto;">
  <img src="logo.png" alt="Logo" style="height: 60px; display: block;">
</div>

可自定义参数：

• height: 60px：调整Logo显示高度，根据实际需求修改即可
• margin: 20px auto 0 auto：第一个数值为Logo顶部外边距，可调整Logo和页面顶部的间距

步骤2：配置主R Markdown文件的YAML #

直接使用如下YAML配置即可，和你之前的配置逻辑一致，无需额外修改：

---
title: "test_knit"
output: 
  html_document:
    includes:
      before_body: logo.html
---

如果需要生成单文件HTML（所有资源打包到一个.html中），可以添加self_contained: true参数，默认状态下该参数已开启，无需额外配置。

效果说明 #

• 采用普通文档流布局，未使用position: absolute，不会遮挡标题，适配所有尺寸的显示器
• Logo容器宽度和R Markdown默认正文宽度保持一致，左右自动对齐，存在横向滚动条时Logo会和正文一起滚动，不会固定遮挡内容
• 所有逻辑均通过YAML引用外部HTML实现，未在正文/代码块/标题中添加任何相关代码

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