将公司徽标添加到 ShinyDashboard 标题

Posted 2023-03-13

【中文标题】将公司徽标添加到 ShinyDashboard 标题

【英文标题】：Adding a company Logo to ShinyDashboard header

【发布时间】：2015-10-05 02:14:44

【问题描述】：

很好奇，有没有办法在 ShinyDashboard 的标题中添加公司徽标？当我查看documentation 时，它描述了更改 CSS 中的“徽标”，这只是配置左上角的内容，但据我所知，我想保留我的标题。

我没有使用下拉菜单，所以我想在右上角红色框所在的位置添加我的公司徽标。

有没有人知道如何使用 Shinydashboard 做到这一点？谢谢。

2020 年 10 月 27 日更新

对于熟悉 html 或希望用户界面具有更大灵活性并可以访问前端开发人员的用户，我最近发现您可以使用 HTML 来构建整个用户界面。有一篇关于它的闪亮文章here。如果需要，这将允许以符合您公司标准的方式完成整个品牌和布局。希望这会有所帮助。

【问题讨论】：

这可能会有所帮助。 ***.com/questions/21996887/…

对于未来的读者：Here 是另一种使用htmltools::tagQuery 居中图像的方法。

【参考方案1】：

为此，我一直在研究一些技巧，（我知道您并没有要求这样做，但这是一个可点击的徽标，而我们正在使用它）：

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader()
dbHeader$children[[2]]$children <-  tags$a(href='http://mycompanyishere.com',
                                           tags$img(src='logo.png',height='60',width='200'))

dashboardPage(
       dbHeader,
       dashboardSidebar(),
       dashboardBody()
)

所以这在标题中嵌套了一个 shiny.tag。这个特殊闪亮对象中的第二个插槽是徽标插槽（您需要在应用目录的 /www/ 文件夹中添加一个“logo.png”）

编辑：

我刚刚检查过，从现在开始，这个 hack 应该不再需要了，您可以通过 title= 参数直接从 dashboardHeader 函数插入 html，（之前，该参数仅强制文本），

我认为答案可能仍然是一种有用的方法来修改现有的闪亮功能，其中的东西 ARE 硬编码。

现在方法如下：

dashboardPage(
    dashboardHeader(title = tags$a(href='http://mycompanyishere.com',
                                    tags$img(src='logo.png')))

或者，为徽标添加更多魔力（我还使用我的徽标作为加载栏）：

# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc'
# height, width and alt text, and produces a loading logo that activates while
# Shiny is busy
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) 
  tagList(
    tags$head(
      tags$script(
        "setInterval(function()
                     if ($('html').attr('class')=='shiny-busy') 
                     $('div.busy').show();
                     $('div.notbusy').hide();
                      else 
                     $('div.busy').hide();
                     $('div.notbusy').show();
           
         ,100)")
  ),
  tags$a(href=href,
         div(class = "busy",  
             img(src=loadingsrc,height = height, width = width, alt = alt)),
         div(class = 'notbusy',
             img(src = src, height = height, width = width, alt = alt))
   )
  )


dashboardBody(
  dashboardHeader(title = loadingLogo('http://mycompanyishere.com',
                                      'logo.png',
                                      'loader.gif'),
  dashboardSidebar(),
  dashboardBody()
)

【讨论】：

如何更改徽标的对齐方式？

这都是css样式。有两种方法可以做到这一点，一种是将孩子包装在 tags$style(..) 中。另一种（可能是首选方法）是创建一个 custom.css 文件并将其放在您的 /www/ 文件夹中。然后用 tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css") 调用它。在样式表中只需添加.logo ALIGNMENTPARAMS: VALUE;，您可以在其中通过 google 找到参数和值的名称。

@Shape with shiny 0.13.2 和 shinydashboard 0.5.1 解决方案似乎不起作用：我得到the server responded with a status of 404 (Not Found)

@Enzo 这些是我拥有的版本，它仍然适用于我，确保链接正确且 logo.png 在您的 www 文件夹中

我发现了这个问题：你需要有单独的 ui.R 和 server.R 文件，否则如果你在一个带有 shinyApp(ui, server) 的 app.R 文件中使用所有文件，它确实没有在 www 文件夹中“找到” logo.png 文件（但它确实找到了我的 favicon.ico - boh？）。

【参考方案2】：

这是我的技巧（如前所述，将您的徽标放入应用目录的 www 子目录中）。 因为dashboardHeader() 需要li 类型和dropdown 类的标签元素，所以我们可以传递这些元素而不是dropdownMenus：

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",
                            tags$li(a(href = 'http://shinyapps.company.com',
                                      icon("power-off"),
                                      title = "Back to Apps Home"),
                                    class = "dropdown"),
                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) 

shinyApp(
    ui = dashboardPage(
        dbHeader,
        dashboardSidebar(),
        dashboardBody()
    ),
    server = server
)

【讨论】：

如果有人不需要它可点击 - 我建议将 a() 更改为 div() 并将 margin-right:10px; 添加到样式参数。

由于最近浏览器处理规则的变化，需要对img进行细微的更改。将img(src=...) 更改为tags$img(src=...)。

图片的大小和它有关系吗？