Blogdown::build_site 看不到自定义 css 文件答案

【问题标题】：Blogdown::build_site Doesn't See Custom css FileBlogdown::build_site 看不到自定义 css 文件
【发布时间】：2020-09-06 01:02:08
【问题描述】：

我希望有一个使用 reactable 表的 blogdown 帖子，该表的列仅包含阴影方块。

以下是演示此问题的 .Rmd 和 css 文件。在 RStudio 中，如果我点击“Knit”，表格会出现带有阴影的绿色方块。

再次在 RStudio 中运行，如果我运行

blogdown::build_site(local = FALSE, method = c("html", "custom"), run_hugo = TRUE)

网站已建立，但带有表格的帖子有一个空白的“状态”列。没有阴影方块。

如何构建网站并显示阴影方块？

.Rmd

---
title: Test Colored Squares
author: ''
date: '2020-09-05'
slug: test-colored-squares
categories: []
tags: []
output: 
  html_document:
    css: "~/R/whatbank_hugo/src/square-highlight.css"
---

```{r, echo=FALSE, message=FALSE, warning=FALSE}
# From: https://glin.github.io/reactable/articles/cookbook/cookbook.html

library("tidyverse")
library("reactable")

orders <- data.frame(
  Order = 2300:2304,
  Created = seq(as.Date("2019-04-01"), by = "day", length.out = 5),
  Customer = sample(rownames(MASS::painters), 5),
  Status = c("", "", "", "", "")
)

reactable(orders, columns = list(
  Status = colDef(cell = function(value) {
    class <- paste0("tag box green", tolower(value))
    htmltools::div(class = class, value)
  })
  
))
```

square-highlight.css

.row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.box {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  margin-right: 5px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

【问题讨论】：

标签： css r knitr blogdown

【解决方案1】：

CSS 文件应放在文件夹/themes/<theme_name>/static/css 中：在 rmarkdown 将您的帖子呈现为 HTML 后，blogdown 会生成站点并创建一个文件夹结构，其中包含最终网站所需的所有文件。这些文件位于项目目录/public 中。在这里您可以找到您的 CSS 文件 (/public/css)。

如果博客文章是使用 html_document() 创建的，则最终 HTML 文档中缺少 CSS 文件的路径。因此，您应该通过 blogdown::html_page() 使用 blogdown 的 default template：place

output: 
  blogdown::html_page:
    css: "/css/square-highlight.css"

在您的 YAML 标头中。

【讨论】：