如何向 Quarto 网站添加 HTML 代码？

Question

基本上，应该可以将 html 代码直接复制到 Quarto 文档 (.qmd) 中，然后将其呈现到 html 网站。

我尝试这样做，并将以下代码从Simplex 主题复制到四开网站：

<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

然而，结果仅部分有效：

我做错了什么吗？

Answer 1

您可以通过让 quarto（实际上是 pandoc！）知道您正在添加原始内容并像使用{=html}.

---
title: "RAW HTML CONTENT"
format: html
css: bootstrap.min.css
---


```{=html}
<div class="card border-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
```