Golem框架添加UI/Server模块后无法显示目标启动页求助

使用Golem开发Shiny应用，尝试将自定义模块整合到app_ui和app_server中，但未能成功显示预期的带Start按钮和logo的启动页，需要实现仅包含该启动页的效果。

现有代码 #

app_ui 代码 #

#' The application User-Interface
#'
#' @param request Internal parameter for `{shiny}`.
#'     DO NOT REMOVE.
#' @import shiny
#' @noRd
app_ui <- function(request) {

  tagList(
    golem_add_external_resources(),
    fluidPage(
        first_page_module1_ui("first_page_module1_ui_1")
    )
  )

}


#' Add external Resources to the Application
#'
#' This function is internally used to add external
#' resources inside the Shiny application.
#'
#' @import shiny
#' @importFrom golem add_resource_path activate_js favicon bundle_resources
#' @noRd
golem_add_external_resources <- function() {
  add_resource_path(
    "www",
    app_sys("app/www")
  )

  tags$head(
    favicon(),
    bundle_resources(
      path = app_sys("app/www"),
      app_title = "fec"
    )
    # Add here other external resources
    # for example, you can add shinyalert::useShinyalert()
  )
}

app_server 代码 #

#' The application server-side
#'
#' @param input,output,session Internal parameters for {shiny}.
#'     DO NOT REMOVE.
#' @import shiny
#' @noRd
app_server <- function(input, output, session) {

  # Load the modules
  first_page_module1_server("first_page_module1_server_1")

}

first_page 模块代码 #

#' first_page_module1_ui UI Function
#'
#' @description A shiny Module.
#'
#' @param id,input,output,session Internal parameters for {shiny}.
#'
#' @noRd
#'
#' @importFrom shiny NS tagList
first_page_module1_ui <- function(id) {

  ns <- NS(id)
  tagList(
    fluidPage(
      tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")),
      titlePanel(" "),
      uiOutput("page")))

}

#' first_page_module1_server Functions
#'
#' @noRd
first_page_module1_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    output$page <- renderUI({
      if (is.null(input$currentPage)) {
        tagList(
          div(class = "input-container",
              actionButton("startButton", "Start", style = "font-size: 50px; color: navy")),
          tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
        )
      }
    })
  })
}

CSS 文件内容 #

/* styles.css */
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  margin: 5px 0;
  background-color: navy; /* Set background color for the body */
  position: relative; /* Add position relative for the logo */
}
.input-container {
  width: 100%;
  text-align: center;
  background-color: navy; /* Set background color for the input container */
  padding: 20px; /* Add padding for better visibility */

}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
  width: 100%;
  padding: 15px;
  margin: 5px 0;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  color: navy; /* Text color navy */

}
.input-container .btn {
  margin-top: 20px;
  color: white;

}
/* Style for Your Details text */
.details-container {
  text-align: center;

}
.details-text {
  color: white;
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
  display: inline-block;

}
.logo {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px; /* Adjust the width of the logo */
  height: auto; /* Maintain aspect ratio */

}
div#corner-triangle {
  display: block;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #ffffff transparent transparent transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  color: white;
  text-shadow: 0 0 25px 9px #fff;
}

问题修正方案 #

1. 修复模块命名空间关联 #

Shiny模块中所有UI元素ID必须用ns()包裹，否则无法关联到模块session。修改first_page_module1_ui和first_page_module1_server：

first_page_module1_ui <- function(id) {
  ns <- NS(id)
  tagList(
    fluidPage(
      titlePanel(" "),
      uiOutput(ns("page")) # 给uiOutput添加命名空间
    )
  )
}

first_page_module1_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    output$page <- renderUI({
      # 移除不必要的页面判断，直接渲染启动页
      tagList(
        div(class = "input-container",
            actionButton(ns("startButton"), "Start", style = "font-size: 50px; color: navy")), # 按钮ID添加命名空间
        tags$img(src = "free_english_logo.png", class = "logo", width = "400px") # 修正图片路径
      )
    })
  })
}

2. 调整CSS加载逻辑 #

模块中无需单独加载CSS，将styles.css放在inst/app/www目录下，Golem的bundle_resources会自动处理资源打包，移除模块内的tags$link代码。

3. 修正图片路径 #

Golem已通过add_resource_path将app/www映射为www路径，图片直接使用"free_english_logo.png"即可，确保图片文件确实存在于inst/app/www目录。

4. 简化启动页渲染逻辑 #

因为仅需显示启动页，移除if (is.null(input$currentPage))判断，直接渲染目标内容。

验证步骤 #

1. 确认styles.css和free_english_logo.png都放置在inst/app/www目录
2. 重启Shiny应用，检查启动页是否正常显示Start按钮、logo及对应样式

内容的提问来源于stack exchange，提问作者GaB