如何在 flexdashboard 中添加徽标？

Posted 2023-03-24

【中文标题】如何在 flexdashboard 中添加徽标？

【英文标题】：How to add logo in flexdashboard?

【发布时间】：2018-11-15 08:37:52

【问题描述】：

我正在尝试在 flexdashboard 中添加公司徽标。如官方页面所述，我们需要提供图像路径，我正在做与下面给出的相同的操作，但无法将徽标带入仪表板。想知道，如何在 flexdashboard 中引入 logo 以及如何在仪表板的顶部栏中添加自定义颜色。

---
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 给出的是仪表板的屏幕截图，突出显示的是无法正常工作的徽标。

【参考方案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 选项包含它。

使用添加自定义css custom.css

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

在 yaml 头文件中包含这个 css 文件

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

【讨论】：

你有一些上下文代码吗？你能准确地说出这个问题吗？带有代码的公共仓库？

由于一些限制，无法公开。但我需要的只是要工作的徽标，并且给出了有问题的徽标代码。我将尝试制作示例仪表板。

您在问题的示例代码中使用非相对路径添加徽标。正如我链接的文档中所解释的，对于任何网站，您都需要添加相对于您的页面的图像。在当前 yaml 标头中使用它的唯一方法是使用 self_contained = TRUE 进行渲染，以便图像包含在 html（base64 编码）中，而不考虑外部。目前，在呈现的 html 中，您应该有一个 html 标记指向您计算机上网页无法加载的文件。这是对您的问题的一种可能解释..

【参考方案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()。

【参考方案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"