css - Blogdown::build_site 看不到自定义 css 文件
问题描述
我希望有一个使用可反应表的博客文章,该表的列仅包含阴影方块。
下面是演示此问题的 .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 文件应放在文件夹中/themes/<theme_name>/static/css
:在 rmarkdown 将您的帖子呈现为 HTML 之后,blogdown 会生成站点并创建一个文件夹结构,其中包含最终网站所需的所有文件。这些文件位于项目目录/public
中。在这里您将找到您的 CSS 文件 ( /public/css
)。
如果博客文章是用 来创建的html_document()
,那么最终的 HTML 文档中会缺少 CSS 文件的路径。因此,您应该通过以下方式使用 blogdown 的默认模板blogdown::html_page()
:place
output:
blogdown::html_page:
css: "/css/square-highlight.css"
在您的 YAML 标头中。
推荐阅读
- algorithm - 对于 T(n) = a2^(kn) 的算法,求解 n=20 的问题需要多长时间
- html - 字体样式文本区域
- visual-web-developer-2010 - 从 SQL 获取数据并显示在 Web 上的交互式图表中
- c++ - 如何让#include<> 查看标准系统目录的子文件夹?
- node.js - API 返回一个旧值,是否可以改进此过程?
- python - 执行代码时收到以下错误 - EOFError: EOF when reading a line
- bash - 用于参数检查的 getopts bash 查询
- mysql - 如何在 Laravel 中优化这个数据库查询?
- liquid - 如果未设置参数,则在液体中失败
- json - JMeter: JSON Extractor - 使用多个条件进行提取