问题描述
我希望有一个reactable表的Blogdown帖子,该表的一列仅包含阴影正方形。
下面是.Rmd和CSS文件,以演示此问题。 在RStudio中,如果我单击“编织”,则该表将显示带有阴影的绿色正方形。
如果再运行,请再次在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文件应该放在文件夹/themes/<theme_name>/static/css
中:rmarkdown将您的帖子呈现为HTML之后,blogdown会生成站点并创建一个文件夹结构,其中包含最终网站所需的所有文件。这些文件位于项目目录/public
中。在这里您将找到CSS文件(/public/css
)。
如果博客文章是使用html_document()
创建的,则最终HTML文档中缺少CSS文件的路径。因此,您应该通过blogdown::html_page()
使用Blogdown的default template:地方
output:
blogdown::html_page:
css: "/css/square-highlight.css"
在您的YAML标头中。