我知道我可以在使用带有 in_header/before_body 选项的 knitr 呈现的 HTML 报告顶部插入 Logo 或图像
output:
html_document:
includes:
before_body: header.Rhtml
我的猜测是:如何在 float 目录上呈现 Logo ?
output:
html_document:
toc: true
toc_float: true
collapsed: false
??????
最佳答案
这里有几个选项,我将概述其中两个
<强>1。使用 CSS 伪元素 before
以下代码片段将在第一个 TOC 元素上方和 TOC 框中添加 stackoverflow Logo :
<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>
在这里,您必须根据您的 Logo 调整 padding-top
定义。结果看起来大致像这样:
<强>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>
这里,当文档加载完成后,我们选择id为TOC
的元素,然后向上移动到它的父元素(列div
),然后在前面加上一个新的 div
,其 id nav_logo
包含图像。听起来比实际更复杂。
现在我们只需再次使用一些 CSS 为这个新的 div 编辑样式:
<style>
#nav_logo {
width: 100%;
margin-top: 20px;
}
</style>
这里生成的文档如下所示:
有关 CSS 的详细信息,我会向您推荐大型搜索引擎,而这些搜索引擎很可能会将您推荐给 https://www.w3schools.com .
如果我必须选择,我会选择第二次尝试。伪元素在浏览器中并不总是可靠的。而且它看起来也更好:)
关于html - Rmarkdown 中 TOC 上的图像 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45834524/