R Markdown: Помещение изображения в верхнем правом углу HTML и перемещение заголовка вниз

Я хотел бы поместить изображение логотипа компании в верхнюю правую часть отчета R markdown, а затем переместить заголовок вниз, скажем, на 3 или 4 см ниже, чем позиция по умолчанию. Идея состоит в том, что она выглядит как фирменный бланк.

Может ли кто-нибудь предложить, как я мог бы закодировать это в моем файле .Rmd?

Спасибо за любую помощь!

Ответ 1

Вариант 1:

Добавьте этот script в начало (или в другое место) вашего документа RMarkdown:

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
   });
</script>

Это будет выглядеть как

Для работы script изображение должно находиться в той же папке, что и документ .Rmd. Вы также можете дать тегу <img> определенный id и добавить более точный стиль CSS с помощью

<style>
  #myLogo {
    float: right;
    width: 120px;
    ...
</style>

Вариант 2:

Создайте дополнительный HTML файл (например, extLogo.html), который содержит логотип:

<div><img src="logo.jpg" width="200px" align="right"></div>

Затем измените заголовок YAML следующим образом:

---
title: "Test"
author: "Martin Schmelzer"
date: "13 Juli 2016"
output: 
  html_document:
    includes:
      in_header: extLogo.html
---

Это выглядит как

и может потребоваться несколько дополнительных параметров запаса/запаса...

Ответ 2

если вы измените img src на код base 64 (действительно грязный, как большой размер), то изображение больше не зависит от вашего локального каталога и, например, Вы можете отправить кому-нибудь html файл, чтобы использовать интерактивный отчет.

кодировщик base64:https://www.base64decode.org/

Ответ 3

Любая идея, как мы могли бы вставить логотип в правом нижнем углу с помощью сценария CSS?

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
   });
</script>