使用 R Markdown 的 YAML 编写的代码添加徽标图像答案

【问题标题】：Adding a logo image with code written in R Markdown's YAML使用 R Markdown 的 YAML 编写的代码添加徽标图像
【发布时间】：2021-12-19 03:18:54
【问题描述】：

我有一个 R Markdown 文件（又名主文件）。我想通过仅在主文件的 YAML 中编写代码或在 YAML 中引用第二个文件来在页面顶部添加一个徽标（例如，“logo.html”是在主文件的 YAML）。我不想要块或正文中的任何解决方案。通过将代码放在标题中，徽标代码不能成为黑客解决方案。我更喜欢用 R、HTML 和 CSS 编码的解决方案。标志不能掩盖标题。徽标将在多个尺寸的显示器上查看，因此请避免位置：绝对。由于数据表中有大量列，可能会有很多横向滚动。假设所有文件都在 1 个文件夹工作目录中。

这是我迄今为止尝试过的。

第一次尝试：

Main file contains this YAML --
---
title: "test_knit"
output: 
  html_document:
    includes:
      before_body: logo.html
---

Second file named logo.html contains --
<img src="logo.png" style="position:relative;top:50%"/>

Third file is the logo in PNG format.

我的第二次尝试：

Main file contains this YAML --
---
title: "test_knit"
output: 
  html_document:
    includes:
      before_body: logo.html
---

Second file named logo.html is an html file that was converted from a PNG.

我的尝试渲染 R Markdown 文件并能够成功编织，但它们不显示徽标。我可以看到表格、cmets 和图表，但没有出现徽标。

【问题讨论】：

我看到你写的是includes，而我写的是include。

标签： html css r r-markdown

【解决方案1】：

以下内容适用于我，无论是在 Windows 上还是在 Linux 上（类似）。我还遇到了找不到带有徽标的文件的问题，因此我将 html 页眉、页脚和图像放在绝对路径（在 Windows 上）和 Linux 上 Webserver 文档根目录的绝对路径中：

---
pagetitle: My page title
lang: en
output:
  html_document:
    include:
      before_body: /resources/header.html
      after_body:  /resources/footer.html
runtime: shiny
---

我必须补充一点，这适用于闪亮的运行时。

编辑

刚刚测试：没有闪亮的服务器，所有部分都可以在工作文件夹中，include 和 includes 工作：

---
pagetitle: My page title
lang: en
output:
  html_document:
    include:
      before_body: header.html
      after_body:  footer.html
---

这里有一个例子header.html文件：

<body>
    <p style="background-color: #002557; height: 80px;">
      <a href="https://foo.de/">
        <img src="left_logo.png" alt="Left Logo"
          title="Left Logo" style="width: 125px; height: 36px;  margin-top: 22px; margin-left: 4%;">
      </a>
      
       <a href="https://foo.de/bar/">
        <img src="right_logo.png" alt="Right Logo"
          title="Right Logo" style="height: 48px;  margin-top: 16px; float: right; margin-right: 4%;">
      </a>
    </p>
</body>

欢迎改进。

【讨论】：