Shiny Flexdashboard R 中的 Bootswatch 主題

Question

我從 bootswatch ( https://bootswatch.com ) 下載了 css 並保存了文件 (bootstrap.css) 我的 flexdashboard 是所以我嘗試使用以下代碼加載 css：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: bootstrap.css
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

但是 css 沒有加載。 我想使用 Bootswatch 中的“Mint”主題。 請問，你知道這個問題的解決方案嗎？ 提供的任何幫助將不勝感激。

Answer 1

我從 Bootswatch 下載了 Minty 主題。

我的第一個觀察是:root css 不是 RStudio/flexdashboard 識別的格式： missing R_BRACE 由於此:root部分主要定義顏色名稱，因此我將其刪除，因為 colors 位於由其#HEX 代碼直接定義的其他部分中。 在此之后，css 文件似乎有效，只有警告。

然后我將這個css文件與默認的 flexdashboard css 文件進行了比較。
例如： 主題-bootstrap.css

我看到的主要區別是flexdashboard使用了您在bootstrap.css 8CBA22E28EB17B5F5C6AE2A266AZ 中找不到的自定義標簽，因為它針對的是 HTML 格式，而不是專門針對flexdashboard格式。

flexdashboard特定標簽的示例：
- .section.sidebar
- .value-box
- .chart-title
-...

這就是您看不到任何變化的原因： css文件已正確加載，但不幸的是，它的大多數 HTML 標簽不適用於flexdashboard 。

正如css styles中解釋的那樣，flexdashboard 的導航欄使用navbar-inverse class 為其每個主題，所以如果你想修改這個，你有自己的主題

要檢查這一點，請創建一個非常簡單的樣式。 style.css ：

.navbar-inverse {
  background-color: #fd7e14;
  border-color: #1967be;
}

.chart-title {
    font-size: 50px;
    color: #fd7e14;
}

現在您可以在以下Markdown文件中使用此自定義 css：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    css: style.css
---

Column {data-width=650}
-----------------------------------------------------------------------

### My Gauge

`r flexdashboard::gauge(15, min = 0, max = 50, href="#details")`

Answer 2

同時，您可以使用theme: yaml header 或其他類似的 flexdashboard 主題，如yeti 、 journal 、 spacelab

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: lumen
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

其中給你一些預設的主題，然后你可以微調.css。 但是我遇到了同樣的問題，我在同一目錄中有.css，但是沒有添加樣式，我們一定做錯了，但是主題至少可以讓您在與此同時。