Вставьте логотип в правом верхнем углу html-документа R markdown
Я пытаюсь поместить логотип моей компании в правом углу моего html-документа
Вот мой код:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<div class="knitr source"><img src="logo.png" width="220px" align="right" ></div>')
});
</script>
---
title: "Title"
author: "Author"
date: "Date"
theme: bootstrap
output: html_document
keep_md: true
---
```{r echo=FALSE, include=FALSE}
knitr::include_graphics('./logo.png')
```
<br>
## 1) Header
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Однако, потому что логотип.png-это локальный файл, когда люди не могут видеть его при совместном использовании html-документа.
Кроме того, я попробовал следующий подход
---
title: "Title"
author: "Author"
date: "Date"
output:
html_document:
css: markdown.css
includes:
in_header: extLogo.html
---
Где extLogo.html
<div class="logos"><img src="logo.png" width="220px" align="right"></div>
Но он создает div вне div, где Заголовок (<div class="container-fluid main-container">). Кто-нибудь может помочь в этом?
2 ответов:
Вы можете использовать
htmltools::imgс небольшим встроенным CSS для позиционирования.srcможет принимать путь непосредственно, но когда изображения не просто обрабатываются как графики, иногда вязание не может должным образом преобразовать изображения в URI, что, в свою очередь, приводит к тому, что они не визуализируются. Использованиеself_contained: falseв ЯМЛ-это быстрое решение, но не намного сложнее использоватьknitr::image_uriдля ручного преобразования изображения:--- title: "Title" author: "Author" output: html_document --- ```{r, echo=FALSE} htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), alt = 'logo', style = 'position:absolute; top:0; right:0; padding:10px;') ``` --- # 1. Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Принятый ответ работает, если вы используете классический html-вывод. Если вы, как и я, также работаете с
bookdown, Логотип должен появляться на каждой странице. Итак, в случае, если кто-то найдет этот ответ, но захочет добавить логотип с bookdown, я даю свое предложение:
- нам нужно создать внешний файл со скриптом, который будет вызываться в заголовке, к счастью, мы можем создать его непосредственно в скрипте rmarkdown.
- мы также используем
htmltools::img, чтобы разрешить включение изображения без внешнего файла изображения.Вот мой сценарий rmarkdown, который будет использоваться в качестве примера:
--- title: "Logo with Bookdown" author: "Author" date: '`r format(Sys.time(), "%d %B, %Y")`' output: bookdown::gitbook: includes: in_header: header.html --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) ``` ```{r htmlTemplate, echo=FALSE} # Create the external file img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), alt = 'logo', style = 'position:absolute; top:50px; right:1%; padding:10px;z-index:200;') htmlhead <- paste0(' <script> document.write(\'<div class="logos">',img,'</div>\') </script> ') readr::write_lines(htmlhead, path = "header.html") ``` # Page 1 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>. When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this: ```{r cars} summary(cars) ``` # Page 2 You can also embed plots, for example: ```{r pressure, echo=FALSE} plot(pressure) ``` Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
Comments