在顶级标题之前将图像添加到 Rmarkdown Bookdown 输出 [英] Add an image to Rmarkdown Bookdown output before top level heading
问题描述
下面的示例(即保存为文件 index.rmd )具有相同的代码块来显示顶部标题上方和下方的图像，但图像没有出现在顶部上方水平标题.如果在同一目录中有一个文件 _output.yml 只有这个条目 bookdown::gitbook: ，就会发生这种情况.
该行似乎强制执行目录(我想要的)并且默认情况下似乎在第一个顶级标题之前删除任何内容(图像或文本)(我不想要) - 这种行为也可以被修改?
---网站:bookdown::bookdown_site---```{r 回声=假，消息=假，警告=假}图书馆(成像器)im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))情节(IM，轴=假)``# R 降价```{r 回声=假，消息=假，警告=假}图书馆(成像器)im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))情节(IM，轴=假)``以下是选项 2 和选项 3 的解决方法，使用 Markdown 和 CSS 来设置图像样式，使用 HTML+CSS 来设置文本样式；此外，使用 base64 图像(透明 gif)生成器作为元素之间的空格分隔符.
小心空格！(在每行的末尾 - 放置两个空格并按 ENTER)
这些方法/技巧之一对您有用吗?如果不是，最好把答案删掉，可能会误导别人.
---标题: |{width=300px}||:-:|{width=300px style="display: block; margin:0 auto"}{width=300px height=90px align=left}{width=300px height=90px align=center}{width=300px height=90px align=right}{width=150px}R Markdown 标题<center>R Markdown 标题</center><p style="text-align: right;">R Markdown Title</p>{width=150px}作者:作者姓名"日期:08/03/2020"---使用 Markdown 表格来样式化"图像 |-|(左对齐), |:-:|(居中)和 |-:|(右对齐) 适用于简单的 RMarkdown 输出.
我意识到您在 # top level heading 下有一个位于页面最顶部的图像 - 带有 top:0px.导致图像重复，并可能导致悬停问题:
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;"/>替换为:
{width=50px style="display: block; margin:0 auto;"}看看会发生什么.
---标题: |{width=300px style="display: block; margin:0 auto;"}{width=50px}R Markdown 标题{width=50px}输出:html_document: 默认---# 我是顶级标题 {-}{width=50px style="display: block; margin:0 auto;"}请注意，如果要在 rstudio 查看器中显示图像，则需要将图像替换为本地图像.如果您在连接到 Internet 的浏览器中打开，则该图像将在您编织时创建的 html 文件中可见.```{r 回声=假，消息=假，警告=假}情节(汽车)``编辑:
让我们试着找到一个共同点，
在章节:介绍(01-intro.Rmd)中进行的调整:
# 介绍 {#intro}{height=240px}<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;"/>您可以在章节和章节标题后使用 `{#label}` 来标记它们，例如，我们可以引用 Chapter \@ref(intro).如果您不手动标记它们，无论如何都会有自动标记，例如，Chapter \@ref(methods).01-intro.Rmd 输出:
使用此解决方案，我们使用 .png 图像屏蔽"顶级标题(# Introduction)，该图像将作为文本出现在目录中.
缺点:除了明显的hack外，图片width必须至少等于或宽于顶级标题标题.
The example below (i.e. saved as a file index.rmd ) has the same code chunk to display an image above and below the top level heading, but the image doesn't appear above the top level heading. This occurs if there is a file _output.yml with only this entry bookdown::gitbook: in the same directory.
That line seems to enforce a table of contents (which I want) and that appears to strip out anything (image or text) before the first top level heading by default (which I don't want) - so can this behaviour be modified?
---
site: bookdown::bookdown_site
---
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
# R Markdown
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
What follows is workaround to your Options 2 and 3, using Markdown and CSS to style images and HTML+CSS to style text; also, using base64 image (transparent gif) generator as an space separator between elements.
Beware of whitespaces! (at the end of each line - place two white spaces and hit ENTER)
Does one of these approaches/hacks work for you? If not, it would be better to delete the answer, it may be misleading to others.
---
title: |
{width=300px}|
|:-:|
{width=300px style="display: block; margin:0 auto"}
{width=300px height=90px align=left}
{width=300px height=90px align=center}
{width=300px height=90px align=right}
{width=150px}
R Markdown Title
<center>R Markdown Title</center>
<p style="text-align: right;">R Markdown Title</p>
{width=150px}
author: "Author Name"
date: "08/03/2020"
---
Using Markdown table to "style" images |-| (left-aligned), |:-:| (centered) and |-:| (right-aligned) will work well with simple RMarkdown outputs.
I realised that you have an image under # top level heading positioned at the very top of the page - with top:0px. causing image duplication and, possibly, hover problem:
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />
replace with:
{width=50px style="display: block; margin:0 auto;"}
and see what will happen.
---
title: |
{width=300px style="display: block; margin:0 auto;"}
{width=50px}
R Markdown Title
{width=50px}
output:
html_document: default
---
# I'm a top level heading {-}
{width=50px style="display: block; margin:0 auto;"}
Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.
```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```
EDIT:
Let's try to find a common ground, A Minimal Book Example, github here.
Adjustments made in index.Rmd:
---
title: |
{height=300px}
author: "Author Name"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
---
# Prerequisites
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
This is a _sample_ book written in **Markdown**. You can use anything that Pandoc's Markdown supports, e.g., a math equation $a^2 + b^2 = c^2$.
index.Rmd output:
Adjustments made in Chapter: Introduction (01-intro.Rmd):
# Introduction {#intro}
{height=240px}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
You can label chapter and section titles using `{#label}` after them, e.g., we can reference Chapter \@ref(intro). If you do not manually label them, there will be automatic labels anyway, e.g., Chapter \@ref(methods).
01-intro.Rmd output:
With this solution we are "masking" a top level heading (# Introduction) with .png image, which will appear in the Table of Content as text.
Disadvantage: besides the obvious hack, image width must be at least equal or wider than top level heading title.
这篇关于在顶级标题之前将图像添加到 Rmarkdown Bookdown 输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
