R Markdown：将图像放在HTML的右上角并向下移动标题 [英] R Markdown: Putting an image in the top right hand corner of HTML and moving title down

问题描述

我想在我的R降价报告的右上角放置公司徽标图像，然后将标题向下移动，比默认位置低3或4厘米。这个想法是它看起来像公司的信头。

任何人都可以建议我如何在我的.Rmd文件中编写代码？

感谢您的帮助！ 选项1 ：

在您的RMarkdown文档的开头（或其他地方）添加以下脚本：

 <脚本> 
 $（document）.ready（function（）{
 $ head = $（'＃header'）; 
 $ head.prepend（'< img src = \logo。 jpg \style = \float：right; width：150px; \/>'）
}）; 
< / script> 
  

这看起来像

为使脚本正常工作，图像必须与.Rmd文档位于同一文件夹中。您还可以为< img> 标签添加一个 id ，并使用

添加更精确的CSS样式

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

选项2：

创建包含徽标的额外HTML文件（例如extLogo.html），如下所示：

 < div><< ; img src =logo.jpgwidth =200pxalign =right>< / div> 
  

然后像这样修改YAML头文件：

  --- 
标题：Test
作者：Martin Schmelzer
日期：2016年7月13日
输出： 
 html_document：
包含：
 in_header：extLogo.html 
 --- 
  

这看起来像

并可能需要一些更多的保证金/填充选项...

I would like to put a company logo image in the top right hand side of my R markdown report, and then move the title down, say 3 or 4 cm lower than the default position. The idea being that it looks like company letterhead.

Could anyone suggest how I could code this in my .Rmd file?

Thanks for any help!

解决方案

Option 1:

Add this script at the beginning (or somewhere else) of your RMarkdown document:

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

This will look like

For the script to work, the image has to be in the same folder as the .Rmd document. You could also give the <img>tag a certain id and add more precise CSS styling with

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

Option 2:

Create an extra HTML file (e.g. extLogo.html) that contains the logo like:

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

Then modify the YAML header like this:

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

This looks like

and might need some further margin/padding options...

这篇关于R Markdown：将图像放在HTML的右上角并向下移动标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！