把英雄图片插入到rmarkdown标题中

Question

把英雄图片插入到rmarkdown标题中

htmlcssrr-markdownknitr

6

我想在使用rmarkdown生成的HTML文档的页头中插入一个横幅图像，并叠加一些文本。我对HTML完全不熟悉，但我已经编写了一个基本的网页（如下所示），现在我想将其插入到HTML文档的页头中。

现在我只是试图让它正常工作，所以我一直在使用这个名为“melon.png”的图像：

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

---
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 文件如下所示：

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;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Economic Note</title>
    <link rel="stylesheet" href="file:///C:/Users/Dos/Documents/html/CSS Backgrounds css.CSS">
  </head>
<div class="center">

当我尝试编织文件时，出现错误信息：

pandoc.exe: 无法获取 file:///C:/Users/Dos/Documents/html/CSS Backgrounds css.CSS 的文件。InvalidUrlException "file:///C:/Users/Dos/Documents/html/CSS%20Backgrounds%20css.CSS" "Invalid scheme"。错误：pandoc 文档转换失败，错误代码为 67。执行已停止。

请问如何解决这个问题？谢谢。

- Dom

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pymk · Accepted Answer

似乎您正在尝试将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;
}

我没有足够的声望来添加图像，但输出具有您发布的图像作为背景。我对“hero”横幅配置不太熟悉，但我认为它是通过CSS完成的，因此您应该能够根据需要进行修改。