更新的答案(对应于 OP 的第二次编辑)
这个概念保持不变。在这里,我们只是用创建的按钮替换工具下的那些菜单项索引.qmd使用 javascript 的文件。
如果需要添加更多csv或xlsx数据,只需在.download_btnpandoc div中添加相应的创建按钮的代码,并在_quarto.yml文件中添加更多- text: ""和url: "#"即可。
_四开本.yml
project:
type: book
book:
title: "Quarto Book"
author: "Jane Doe"
date: "9/29/2022"
chapters:
- index.qmd
- intro.qmd
downloads: [pdf, epub]
sidebar:
pinned: true
tools:
- icon: save
menu:
- text: ""
url: "#"
- text: ""
url: "#"
- text: ""
url: "#"
repo-url: https://www.rstudio.com/
search:
location: sidebar
type: textbox
format:
html:
include-after-body: custom.html
theme: cosmo
索引.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 20px;
color: black;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: grey;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "mtcars.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
iris %>%
download_this(
output_name = "Iris data set",
output_extension = ".csv",
button_label = "iris.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
palmerpenguins::penguins %>%
download_this(
output_name = "penguins data set",
output_extension = ".csv",
button_label = "penguins.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
自定义.html
<script>
var all_btns = document.querySelectorAll(".download_btn a");
var data_nav = document.querySelectorAll('[aria-labelledby="sidebar-tool-dropdown-0"] li')
for (let i = 0; i < data_nav.length; i++) {
let li = document.createElement("li");
li.appendChild(all_btns[i]);
data_nav[i].parentElement.replaceChild(li, data_nav[i])
}
</script>
旧答案
由于到目前为止,Quarto 没有默认选项来添加用于下载csv 数据的按钮,作为解决方法,我们可以在{downloadthis} R 包的帮助下并使用几行 javascript 代码在 Book 导航栏中添加一个下载按钮.
所以首先,在索引.qmd用echo: false 归档。
索引.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 24px;
padding: 0px;
margin-top: -5px;
color: white;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: whitesmoke;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
现在默认情况下,该按钮将在索引页的书体中创建。但是我们希望在书的导航栏中有这个。为此,我们可以在导航栏的右侧添加一个 save icon 和 href: "#" 作为占位符,然后使用 javascript 我们可以用我们创建的下载按钮替换这个保存图标。
现在添加js代码,创建一个html文件自定义.html并将这些代码行放入该文件中,然后添加自定义.html在_quarto.yml 中用include-after-body: custom.html 归档。
自定义.html
<script>
var btn = document.querySelector(".download_btn");
var nav = document.querySelector(".navbar-nav .bi-save");
nav.parentElement.replaceChild(btn, nav);
</script>
_四开本.yml
project:
type: book
book:
title: "Quarto Book"
chapters:
- index.qmd
- intro.qmd
navbar:
right:
- icon: save
href: "#"
format:
html:
include-after-body: custom.html
theme: cosmo
现在呈现的书籍导航栏看起来像,
请参阅 downloadthis package documentation 以了解添加按钮以下载 csv 或 xlsx 文件或任何 R 对象作为 rds 文件的各种选项,并了解如何设置按钮样式。
免责声明:我只是一个 R 用户,只知道一点点 javascript。所以任何人,请随时使用更高效的 js 代码编辑此答案。:-)