R Shiny 中的可點擊目錄

Question

我目前有一個故事作為我閃亮應用程序中的選項卡之一。 我正在嘗試創建一個可點擊的目錄（類似於可以在 Microsoft Word 中執行的操作），將該目錄中的各個部分鏈接到故事中的實際文本（例如單擊“第一章”目錄會將我帶到故事中的第一章。可點擊的目錄應該出現在同一選項卡中，在文本的最頂部。

雖然我已成功創建（故事的）文本，但我不熟悉創建上述可點擊目錄的方法。 您的指導將不勝感激。

我目前擁有的故事文本如下所示。

tabPanel("Story",
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Introduction"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h4(p("This is a short story about nature")),
                    width=6,offset=1,
                    style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Chapter I"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         
         fluidRow(column(width=2),
                  column(
                    h4(p("In this chapter we present the background of the story")),
                    width=6,offset=1,
                    style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Chapter II"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h4(p("This chapter is about the main protagonists")),
                       width=6,offset=1,
                       style="background-color:white;border-radius: 10px"))
)

Answer 1

好吧，這是一個 HTML 問題。 這是一個簡單的目錄：

library(shiny)
lipsum <- function(){
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

css <- "
.chapter {
  color: black;
  text-align: left;
  font-family: Georgia;
  font-size: 20px;
}

.chapter-container {
  background-color: white;
  border-radius: 10px;
}

#toc_container {
  position: fixed;
  top: 0;
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #aaa;
  display: table;
  font-size: 95%;
  margin-bottom: 1em;
  padding: 20px;
  width: auto;
}

.toc_title {
  font-weight: 700;
  text-align: center;
}

#toc_container li,
#toc_container ul,
#toc_container ul li {
  list-style: outside none none !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(css))),
  
  fluidRow(
    column(
      width = 12,
      tags$div(
        id = "toc_container",
        tags$p(
          class = "toc_title",
          "Contents"
        ),
        tags$ul(
          class = "toc_list",
          tags$li(
            tags$a(
              href = "#introduction",
              "Introduction"
            ),
          ),
          tags$li(
            tags$a(
              href = "#chapterI",
              "Chapter I"
            )
          ),
          tags$li(
            tags$a(
              href = "#chapterII",
              "Chapter II"
            )
          )
        )
      )
    )
  ),
  
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "introduction",
        p(
          tags$em("Introduction"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "This is a short story about nature."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "chapterI",
        p(
          tags$em("Chapter I"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "In this chapter we present the background of the story."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "chapterII",
        p(
          tags$em("Chapter II"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "This chapter is about the main protagonists."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  )
)


server <- function(input, output) {
  
}

shinyApp(ui, server)