在 R Markdown 网站页面上包含横幅图片答案

【问题标题】：Including banner images on R markdown website pages在 R Markdown 网站页面上包含横幅图片
【发布时间】：2020-12-30 08:02:05
【问题描述】：

我正在开发一个包含多个页面的简单 R-markdown 网站。除首页外，每个页面都有相应的目录和内容。

这样一个页面的yaml如下

---
title: "Page Title"
output:
  html_document:
    toc: true
    toc_float: true
    number_sections: false
---

输出的 HTML 将在左侧显示目录，在右侧显示内容，标题 - “页面标题”打印在内容的顶部。

我现在想在每页内容的开头添加一个横幅，作为标题的背景。换句话说，我希望在每个页面上都有一个由页面标题覆盖的横幅图像。图像存储在本地的文件结构中。

我遵循了这种方法https://rpubs.com/thaufas/555157，但这仅适用于具有指定横幅图像的单个页面。但我想要一种更通用的方法，我可以在每个页面上包含不同的图像作为横幅。

【问题讨论】：

更合适的标签是blogdown 和hugo。这与 R 没有什么特别的关系。另外，如果你分享到Discourse for Hugo community，你可能会得到更快的答复
@Aman （免责声明：我是blogdown 的主要作者和rmarkdown 的维护者） OP 说它是“一个简单的R-markdown 网站”，这意味着它与@ 无关987654329@ 或hugo。简单站点是指bookdown.org/yihui/rmarkdown/rmarkdown-site.html，它不是基于blogdown 或hugo。 @zstar：我相信这是可以通过 CSS 实现的，但是如果您可以先提供一个可重现的示例，我们会更容易回答这个问题，因此我们可以使用您的示例作为基础。我可以在下面提供一个简短的提示，我不确定你是否能够适应它。
@YihuiXie，对不起！那是我的一个错误。下次我会记住这一点。
不用担心。正如我所说，我可以在没有完整示例的情况下回答这个问题。我唯一关心的是您是否能够将解决方案应用于您的问题（如果可以，我当然会非常高兴）。

标签： html css r r-markdown

【解决方案1】：

首先，找到页面标题的class 或id。通常，它应该有 id header。然后为header 元素定义背景图像。最后，在您的 Rmd 文档中包含 CSS，例如，

```{css, echo=FALSE}
#header {
  background: url(https://linesteppers.com/tutorials/RMarkdown/img/BannerImage_TreeBlossoms_4470x3024.jpg);
  padding: .5em;
}
```

您还可以通过html_document 的css 选项包含CSS，但您必须为每个.Rmd 文档创建一个.css 文件。我使用了上面的css 代码块，所以你不需要创建外部的css 文件。

【讨论】：