将英雄图像插入 rmarkdown 标头

Question

我正在尝试在使用 rmarkdown 生成的 HTML 文档的标题中插入带有一些文本的横幅图像。我是 HTML 的新手，但我已经编写了一个基本的网页（见下文），现在我想将它插入 HTML 文档的标题中。

现在我只是想让它工作，所以我一直在使用这个名为melon.png：

我已更新 rmarkdown 中的样板示例以使用in_headerYAML 字段，如下所示：

---
title: "header_test"
author: "Dos"
date: "20 December 2018"
output: 
  html_document:
    includes:
      in_header: C:/Users/Dos/Documents/html/CSS Backgrounds.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

in_header 中引用的CSS 背景HTML 文件和随附的 CSS 文件如下：

---
title: "header_test"
author: "Dos"
date: "20 December 2018"
output: 
  html_document:
    includes:
      in_header: C:/Users/Dos/Documents/html/CSS Backgrounds.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

div {
  height: 220px;
  width: 40cm;
  background-image: url('file:///C:/Users/Dos/Pictures/melon.png');
  background-repeat: no-repeat;
  background-size: 40cm 12cm;
}
.center {
   margin: auto;
   padding: 12px;
}

当我去编织文件时，我收到一条错误消息：

pandoc.exe: 无法获取 file:///C:/Users/Dos/Documents/html/CSS 背景 css.CSS InvalidUrlException "file:///C:/Users/Dos/Documents/html/CSS%20Backgrounds% 20css.CSS" "无效方案" 错误：pandoc 文档转换失败，错误 67 执行暂停

关于我如何做到这一点的任何观点都会很棒。

Answer 1

您似乎正在尝试将 HTML 插入标头中。你想要做的是修改 RMarkdown本身的 CSS。

使用您自己的示例，我将 YAML 字段修改为：

---
title: "header_test"
author: "Dos"
date: "20 December 2018"
output:
  html_document:
    css: "style.css"
---

这是我的style.css文件：

body {
     color: white;
     background: url('/path/to/file') no-repeat top center;
}

我没有足够的声誉来添加图像，但输出具有您发布的图像作为背景。我不太熟悉“英雄”横幅配置，但我认为它是通过 CSS 完成的，因此您应该能够根据自己的喜好修改它。