试图在Golem Shiny应用中添加徽标的问题

Question

我在golem arhitecture中添加徽标有问题。这比我想象的要复杂得多。

我正在尝试为部署Golem的应用重构代码。因此，原始代码（我不会添加完整代码，因为它很大）看起来像这样：

shinyUI(
  navbarPage(
    windowTitle = "Page",
    title = div(img(src = "bare.png", height = "30px"), "Oncology  Toolbox"),
    theme = shinytheme("cerulean"),
    tabPanel(
      "Toolbox", icon = icon("wrench"),
      dashboardPage(
        dashboardHeader(title = "Tools", titleWidth = 300),
        dashboardSidebar(
          width = 300,
          tags$head(HTML(
           
          )),
          br(),
          br(),
          sidebarMenu(
            id = "",
            menuItem("Pathways",
                     tabName = "geneapp", icon = icon("line-chart"),
                     selected = TRUE),
            menuItem("Genomic", tabName = "mutapp",
                     icon = icon("universal-access")),
        dashboardBody(
          tabItems(
            ## Group 1: Pathways
            tabItem(
              tabName = "geneapp",
              fluidRow(
                headerPanel(h3("Analysis")),
                br(),
                column(
                  3,
                  thumbnail_label(
                    url = "RStudio_FLAT/",
                    image = "FluidigmAnalysisToolkit.v2.png",
                    tool = "Fludigm_Browser",
                    label = "Fludigm Browser",
                    content = "Perform Fluidigm data analysis"
                  )
                ),
                column(
                  3,
                  thumbnail_label(
                    url = "home",
                    image = "gtex.png",
                    tool = "GTEx",
                    label = "GTEx Portal",
                    content = "Gene expression in normal tissue"
                  )
                ),
                br(),
                
           etc.... etc... 

但是，使用Golem My Code UI（我想保持这种方式），看起来像这样：

app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # Your application UI logic
    shinyUI(
      navbarPage(
        windowTitle = "Page",
        title = div(img(src = ".png", height = "30px"), " Toolbox"),
        theme = shinythemes::shinytheme("cerulean"),
        tabPanel("Toolbox", icon = icon("wrench"),
                 shinydashboard::dashboardPage(
                   header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300),
                   shinydashboard::dashboardSidebar(
                     width = 300 ,
                     shinydashboard::sidebarMenu(
                       shinydashboard::menuItem(
                         "Tools",
                         tabName = "tools_app",
                         icon = icon("wrench"),
                         shinydashboard::menuSubItem(
                           "Pathways",
                           tabName = "gene_app",
                           icon = icon("chart-line")
                         ),
                         shinydashboard::menuSubItem(
                           "Genomic",
                           tabName = "genomic_app",
                           icon = icon("universal-access")
                         )),
                       shinydashboard::tabItem("gene_app",mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui_1")),
                       shinydashboard::tabItem("genomic_app", mod_genomic_ui("genomic_ui_1")),

        tabPanel(
          "Tutorials", icon = icon("graduation-cap")),
        tabPanel("Worflows", icon = icon("list"))
      )))
}

您应该查看的唯一代码/模块IN IS

SHINYDASHBOARD :: TABITEM（“ Gene_app”，mod_gene_expressions_sign_sign_ui（“ gene_expression_sign_sign_path_ui_1”））

但是，如您所见，在上面的代码中添加了thumbnail_label函数，将其添加到logo中。这是功能：

label <- function(url, image, label="", content="", tool="misc",
                            category = "tool") {
  tags$a(
    href = url,
    onclick = paste0("gtag('event', 'click', { 'event_category': '", category,
                     "', 'event_label': '", tool, "'});"),
    target = "_blank",
    div(class = "row",
      div(class = "col-sm-14 col-md-12",
        div(class = "thumbnail",
          img(src = image, alt = "...",
            div(class = "caption", h3(label), p(content))
          )
        )
      )
    )
  )
}

现在，在Dev文件夹中的02_DEV文件中添加了带有魔像基础结构的Thumbnail_label函数。

我在上述代码中需要的所有徽标都在简单仪表板应用基础结构中的www文件夹中。我想将所有徽标保留在此文件夹Ins/app/www中

，但不知道如何在Thumbnail_label中添加徽标，但是使用Golem Shiny Shiny App基础架构。

有人可以帮忙吗？

Answer 1

tl; dr：您已经定义了两次缩略图功能，第二个功能是不正确的。

---

请查看应用程序的HTML代码：

[！[Enter Image Description在此处] [1]] [1]

如您所见，未正确创建＆lt; img＆gt; html标签。

您可以通过运行以下代码来看到它：

> pkgload::load_all()
ℹ Loading bftb
> thumbnail_label(
+             url = "https:///RStudio_FLAT/",
+             image = "www/FluidigmAnalysisToolkit.v2.png",
+             tool = "Fludigm_Browser",
+             label = "Fludigm Browser",
+             content = "Perform Fluidigm data analysis"
+           )
<a href="https:RStudio_FLAT/" onclick="gtag('event', 'click', { 'event_category': 'tool', 'event_label': 'Fludigm_Browser'});" target="_blank">
  <div class="row">
    <div class="col-sm-14 col-md-12">
      <div class="thumbnail">
        <img src="www" alt="...">
          www/FluidigmAnalysisToolkit.v2.png
          <div class="caption">
            <h3>Fludigm Browser</h3>
            <p>Perform Fluidigm data analysis</p>
          </div>
        </img>
      </div>
    </div>
  </div>
</a>

问题是：

        <img src="www" alt="...">
          www/FluidigmAnalysisToolkit.v2.png

此函数在

但是，您已经在 https://github.com/gabrielburcea/bftb/blob/gene_expr_sign_path/r/thumbnail_label.r ，第二个是错误的。

因此，如果删除第二个文件，您将获得所需的内容。

> unlink("R/thumbnail_label.R")
> pkgload::load_all()
ℹ Loading bftb
> thumbnail_label(
+             url = "https:///RStudio_FLAT/",
+             image = "www/FluidigmAnalysisToolkit.v2.png",
+             tool = "Fludigm_Browser",
+             label = "Fludigm Browser",
+             content = "Perform Fluidigm data analysis"
+           )
<a href="https://RStudio_FLAT/" onclick="gtag('event', 'click', { 'event_category': 'tool', 'event_label': 'Fludigm_Browser'});" target="_blank">
  <div class="row">
    <div class="col-sm-14 col-md-12">
      <div class="thumbnail">
        <img src="www/FluidigmAnalysisToolkit.v2.png" alt="...">
          <div class="caption">
            <h3>Fludigm Browser</h3>
            <p>Perform Fluidigm data analysis</p>
          </div>
        </img>
      </div>
    </div>
  </div>
</a>