Question

我正在尝试在flexdashboard中添加公司徽标。正如在官方页面中所提到的，我们需要提供一个图像路径，我正如下面给出的那样，但是无法在仪表板中添加徽标。想知道如何在flexdashboard中添加徽标，以及如何在仪表板的顶栏添加自定义颜色。

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/Gaurav/Desktop/Test/www/BoA1.png
    vertical_layout: scroll
    orientation: rows
    theme: cosmo
    runtime: shiny
---

flexdashboard 给出了仪表板的屏幕截图，并突出显示了无法正常工作的徽标。

Answer 1

对于徽标，您可能需要调整图像大小（magick包可以提供帮助），以便它是正确的尺寸：

没有对徽标图像执行缩放，因此它应该完全适合导航栏的尺寸（默认“cosmo”主题高48像素，其他主题可能略有不同的导航栏高度）

https://rmarkdown.rstudio.com/flexdashboard/using.html#logo__favicon

对于导航栏颜色，您需要使用css文件自定义外观。见https://rmarkdown.rstudio.com/flexdashboard/using.html#css_styles

如果要自定义这些颜色，您应该使用必需的navbar-inverse条目创建一个CSS样式表，并使用flex_dashboard格式的css选项包含它。

使用

custom.css

.navbar-inverse {
   background-color: <your color>;
}

在yaml标题中包含此css文件

title: "Custom CSS"
output: 
  flexdashboard::flex_dashboard:
    css: custom.css

Answer 2

在我看来，您需要包括相对路径而不是绝对路径。出于某种原因，R不能与绝对路径配合使用。

在我的设置中：

这将导致图像损坏

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/thatsme/MYPROJECT/www/myimage.png
---

此图片将正确显示

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: www/myimage.png
---

该路径必须相对于项目的工作目录（通常是.proj文件所在的目录）。如果您不知道工作目录是什么，请将getwd()放入控制台。

Answer 3

@cderv 提到的指向 flexdashboard 文档的链接已损坏。我遇到了同样类型的问题：想向 flexdashboard 添加徽标和收藏夹图标（浏览器选项卡图标）。

我在这里选择了一个图标：https://favicon.io
我在 .Rmd 所在的文件夹中复制了 16x16 和 32x32 图标 png
我喜欢@j_5chneider 的标志：

flexdashboard::flex_dashboard:
    logo: "favicon-32x32.png"

对于图标，我在 yaml 之后（在第一个 R 块之前）添加了这个链接标签

<link rel="shortcut icon" href="favicon-16x16.png">

标志没有垂直对齐，所以我还创建了一个 custom_style.css ：

.navbar-logo.pull-left {
  padding-top:8px;
}

并像这样将它包含在 Rmd 中：

  flexdashboard::flex_dashboard:
    css: "custom_style.css"

如何在flexdashboard中添加徽标？

3 个答案: