Rmarkdown的TOC图像标志

时间:2017-08-23 08:28:37

标签: html r knitr r-markdown

我知道我可以使用带有 in_header / before_body 选项的knitr在HTML报告的顶部插入徽标或图像

output:
  html_document:
    includes:
      before_body: header.Rhtml

我的猜测是:如何在浮动TOC上渲染徽标?

output:
  html_document:
    toc: true
    toc_float: true
    collapsed: false
    ??????

1 个答案:

答案 0 :(得分:9)

你在这里有几个选项,我将概述其中两个

<强> 1。使用CSS伪元素before

以下代码段将在第一个TOC元素上方和TOC框中添加stackoverflow徽标:

<style>
#TOC {
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
  background-size: contain;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>

您必须根据自己的徽标调整padding-top定义。结果看起来或多或少像这样:

enter image description here

<强> 2。在TOC列中添加新的DOM元素

另一种方法是首先使用jQuery来添加一个包含图像的新DOM元素:

<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a\"></div>');
  });
</script>

这里,当文档加载完毕后,我们选择标识为TOC的元素,然后向上移动到其父元素(列div),然后添加一个新的{{1} }包含图像的标识div。听起来比实际更复杂。 现在我们只需要再次使用一些CSS编辑这个新div的样式:

nav_logo

此处生成的文档如下所示:

enter image description here

有关CSS的详细信息,我会将您推荐给大型搜索引擎,而这些搜索引擎很可能会将您推荐给https://www.w3schools.com

如果我必须选择,我会第二次尝试。伪元素在浏览器中并不总是可靠的。它看起来也更好:)