闪亮的Flexdashboard R中的Bootswatch主题

Question

我从bootswatch (https://bootswatch.com)下载了一个css，并保存了我的flexdashboard文件所在的文件(bootstrap.css)。因此，我尝试用以下代码加载css：

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

```{r setup, include=FALSE}

图书馆(柔性仪表板)

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

### Chart A

```{r}

但是css不加载。我想使用Bootswatch中的“薄荷”主题。拜托，你知道解决这个问题的办法吗？如能提供任何帮助，我们将不胜感激。

Answer 1

我下载了Bootswatch的薄荷主题。

我的第一个观察是，:root css没有采用RStudio/flexdashboard：missing R_BRACE识别的格式。

由于这个:root部分主要定义了颜色名称，所以我删除了它，因为颜色是由它们的#HEX代码直接定义的。在此之后，css文件似乎是有效的，只有警告。

然后我将这个css文件与默认的柔性面板css文件进行了比较。

例如：theme-bootstrap.css

我看到的主要区别是，flexdashboard使用自定义标记，这在bootstrap.css中找不到，因为它是针对flexdashboard格式的，而不是专门针对flexdashboard格式的。

flexdashboard特定标记的示例：

-.section.sidebar

-.value-box

-.chart-title

-...

这就是为什么您没有看到任何更改的原因：css文件已正确加载，但不幸的是，它的大多数HTML标记并不适用于flexdashboard。

正如在css样式中解释的那样，用于柔性仪表板的导航栏对其每个主题都使用navbar-inverse类，因此如果您想要创建自己的主题，就必须修改它。

要检查这一点，请创建一个非常简单的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头或其他类似的柔性面板主题 (如yeti、journal、spacelab )。

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

```{r setup, include=FALSE}

图书馆(柔性仪表板)

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

### Chart A

```{r}

这给了你一些预设的主题，然后你可以微调.css。但是我有同样的问题，我在同一个目录中有.css，但是没有添加样式，我们肯定做错了什么，但是主题至少会让您在同一时间使用少量不同的颜色。