web-dev-qa-db-ja.com

RマークダウンHTMLドキュメントの右上隅にロゴを挿入します

会社のロゴを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.

ただし、htmlドキュメントを共有する場合、logo.pngはローカルファイルであるため、他の人は見ることができません。

さらに、私は次のアプローチを試しました

---
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 class="container-fluid main-container">）。誰でもこれを助けることができますか？

htmlrknitrr-markdown
18
Bruno Silva

位置決めには、htmltools::imgを少しインラインCSSとともに使用できます。 srcはパスを直接取ることができますが、画像がプロットのように処理されない場合、編み物が画像をURIに適切に変換できず、レンダリングに失敗することがあります。 YAMLで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.

page with logo

27
alistaire

古典的なhtml出力を使用している場合、受け入れられた答えは機能します。私のように、あなたも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.
5
Sébastien Rochette