Quarto图书下载按钮

Question

使用bookdown，我们可以从下载按钮下载不同的文件格式。

---
bookdown::gitbook:
   download:
      - ["test.pdf", "PDF File"]
      - ["test.html", "HTML File"]
      - ["test.csv", "Data test.csv"]
---

在quarto中，我们只有用于下载的选项：(一个或多个pdf、epub和docx)。是否有人知道如何通过下载按钮将数据(例如.csv或.qs)包含在导航栏或更好的侧栏中？

编辑1：在@shafee这个伟大的答案之后，下面是我的书现在的样子，我想在哪里添加下载数据的选项。

​

​

通过单击向下箭头，将打开一个下拉菜单，并在那里添加该选项(最佳选择是多个数据集，即多个数据集)“下载数据”。下面是一个示例.yml

---
project:
  type: book
  
book:
  title: "Quarto Book"
  chapters:
    - index.qmd
    - intro.qmd
       
  sidebar:
    pinned: true
    
  repo-url: https://www.rstudio.com/   
  search: 
    location: sidebar
    type: textbox
  downloads: [pdf, epub]
    
format:
  html:
   # include-after-body: custom.html
    theme: cosmo
---

编辑2：可以在sidebar中使用tools选项。也许有人知道如何正确地为数据生成URL，这样就可以直接下载它。

  sidebar:
    pinned: true
    tools:
      - icon: save
        menu:
          - text: Data XLSX
            url:  ymlthis::yml_params_code(browseURL('data/mtcars.xlsx'))
          - text: Data CSV
            url:  ymlthis::yml_params_code(browseURL('data/mtcars.csv'))

​

​

Answer 1

更新的答案(对应于OP的第二版)

这一概念保持不变。在这里，我们只是用使用javascript从index.qmd文件创建的按钮替换工具下的菜单项。

如果需要添加更多的csv xlsx 数据，只需在< code >E 226 _quarto.yml 文件中添加相应的代码，以便在 .download_btn pandoc div中创建按钮，并添加更多 - text: "" 和E 221 url: "#" E 125。

_quarto.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

index.qmd

# Preface {.unnumbered}

This is a Quarto book.


::: {.download_btn}

```{css}

#\\ echo:假

.b万亿-违约，

..btn默认:悬停，

..btn默认值:active{

字体大小:20；

颜色:黑色；

背景色:透明；

边界颜色:透明；

}

..btn默认:悬停{

颜色:灰色；

转变: 0.2s；

}

```{r}

#\\ echo:假

图书馆(下载本)

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:假

虹膜%>%

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:假

企鹅：：企鹅%>%

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"

)

:::

custom.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数据的按钮，因此我们可以在Book中添加一个下载按钮，使用{downloadthis} R包并使用几行javascript代码。

因此，首先，添加创建按钮的代码和位css，以便使用echo: false在index.qmd文件中对按钮的外观进行样式化。

index.qmd

# Preface {.unnumbered}

This is a Quarto book.

::: {.download_btn}

```{css}

#\\ echo:假

.b万亿-违约，

..btn默认:悬停，

..btn默认值:active{

字体大小:24；

填充物:0 0px；

边缘-顶部：-5 5px；

颜色:白色；

背景色:透明；

边界颜色:透明；

}

..btn默认:悬停{

颜色:白烟；

转变: 0.2s；

}

```{r}

#\\ echo:假

图书馆(下载本)

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文件custom.html，并将这些代码行放在该文件中，然后在_quarto.yml中添加这个带有include-after-body: custom.html的custom.html文件。

custom.html

<script>

var btn = document.querySelector(".download_btn");
var nav = document.querySelector(".navbar-nav .bi-save");
nav.parentElement.replaceChild(btn, nav);

</script>

_quarto.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代码编辑这个答案。 :-)