四开本书籍下载按钮

Question

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

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

在四开本中，我们只有下载选项：（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：可能有一种方法可以tools使用sidebar. 也许有人知道如何正确生成数据的 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数据，只需在 pandoc div 内添加用于创建按钮的相应代码，然后在文件中.download_btn添加 more- text: ""和即可。url: "#"_quarto.yml

_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

索引.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 代码在图书导航栏中添加下载按钮。

因此，首先，添加用于创建按钮的代码，并在index.qmd文件中添加一些css按钮外观的样式。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 iconwith作为占位符，然后使用 javascript 我们可以用我们创建的下载按钮替换此保存图标。href: "#"

现在要添加js代码，创建一个html文件custom.html并将这些代码行放入该文件中，然后添加此custom.html文件include-after-body: custom.htmlin _quarto.yml。

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