Quarto笔记

Quarto notes

发布于

2024年5月23日

提示

简洁而不僵化，精致而不复杂。

1 文本格式

择其易者而用之
HTML标签	Markdown语法	效果
`<b>Bold<b>`	`~Bold~`	Bold
`<strong>Important<strong>`	`Important`	Important
`<i>Italic<i>`	`Italic`	Italic
`<em>Emphasized<em>`	`Emphasized`	Emphasize
`<del>Deleted<del>`	`~~Deleted~~`	~~Deleted~~
`H<sub>2<sub>O`	`H~2~O`	H₂O
`s<sup>2<sup>`	`s^2^`	s²
`<ins>Inserted<ins>`	`[Inserted]{.underline}`	Inserted
`<mark>Marked<mark>`	`[Marked]{.mark}`	Marked
`<small>Smaller<small>`	无	Smaller

2 等宽字体

使用bootstrap内置的类.font-monospace。

[iiiii]{.text-primary}  
[MMMMM]{.text-primary}  
[iiiii]{.font-monospace}  
[MMMMM]{.font-monospace}

效果：

iiiii
MMMMM
iiiii
MMMMM

3 超链接格式

3.1 去掉下划线

使用bootstrap内置的类.text-decoration-none

[PSYCH.PUB](https://www.psych.pub){.text-decoration-none}
使用HTML style

[PSYCH.PUB](https://www.psych.pub){style="text-decoration:none;"}

效果：PSYCH.PUB

3.2 重置颜色

使用bootstrap内置的类.text-reset，[PSYCH.PUB](https://www.psych.pub){.text-reset}的效果：PSYCH.PUB

4 图片的lightbox效果

yml文件中的全局lightbox: false会覆盖单个图片的.lightbox设置，故不要使用全局lightbox参数。

5 修改导航、页脚、侧边导航的颜色

当同时使用明、暗主题时，通过background设置的颜色会同时应用于明、暗主题，这会导致不和谐的搭配。最好的方法是不要修改background，次之则是通过scss文件为明、暗两种主题分别设置颜色，可参考文档。

6 用`text`替代 `icon`

Quarto在导航栏（导航与工具）、页脚、about页可以使用icon。Quarto默认使用bootstrap图标，也可以使用Quarto的拓展，例如：fontawesome，quarto-iconify。

但既有的icon的种类是有限的，如果既有的icon集中没有自己需要的icon，可以在- text:参数中使用外链图片（注意：要使用完整路径），从而达到与- icon:类似的效果，例如：

website:
  navbar:
    right: 
      - text: '![](https://api.iconify.design/academicons/researchgate.svg){height=20px}' 
        href: https://www.researchgate.net/

注意：

如果href链接到站内qmd文档，该导航项（nav item）的text将自动取用qmd文档的title，若在呈现图标的同时不想在图标旁边呈现text，可以外链形式（https：//）指定href。
对导航栏的工具（tools）而言，其text参数指定的文本将在鼠标悬停时呈现，不会出现在icon旁。
须关闭lightbox，否则图片超链接可能无效。

7 颜色

使用Div或Span，充分利用HTML的功能。使用Div时，:::不可缩进，即，其左侧不可有空格。

7.1 使用bootstrap主题内置的类

注意

不同版本的bootstrap所内置的类不同，有些与Quarto不兼容。从_site/site_libs/bootstrap/bootstrap.min.css可以查Quarto使用的bootswatch版本，从https://getbootstrap.com/docs/可以查bootstrap相应版本内置的类。

可使用bootstrap主题内置的关于颜色或背景的类：

字体色
.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-light
.text-dark
.text-body
.text-white
.text-muted

背景色
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent

字体背景色
.text-bg-primary
.text-bg-secondary
.text-bg-success
.text-bg-info
.text-bg-warning
.text-bg-danger
.text-bg-light
.text-bg-dark
.text-bg-body
.text-bg-white
.text-bg-transparent

背景渐变色
.bg-primary .bg-gradient
.bg-secondary .bg-gradient
.bg-success .bg-gradient
.bg-info .bg-gradient
.bg-warning .bg-gradient
.bg-danger .bg-gradient
.bg-light .bg-gradient
.bg-dark .bg-gradient

字体背景透明度
.opacity-100
.opacity-75
.opacity-50
.opacity-25
.opacity-0
style=“opacity: .25;”
style=“opacity: .5;”
style=“opacity: .75;”
style=“opacity: 1;”

背景透明度 .bg-opacity-100
.bg-opacity-75
.bg-opacity-50
.bg-opacity-25
style=“--bs-bg-opacity: 0;”
style=“--bs-bg-opacity: .25;”
style=“--bs-bg-opacity: .5;”
style=“--bs-bg-opacity: .75;”
style=“--bs-bg-opacity: 1;”

字体透明度
.text-opacity-100
.text-opacity-75
.text-opacity-50
.text-opacity-25
style=“--bs-text-opacity: 0;”
style=“--bs-text-opacity: .25;”
style=“--bs-text-opacity: .5;”
style=“--bs-text-opacity: .75;”
style=“--bs-text-opacity: 1;”

与opacity相比，--bs-text-opacity与--bs-bg-opacity可单独控制字体与背景色的透明度。

7.2 使用style

例如：[使用style]{style="color:#A7535A;"}

7.3 使用styles.css

在styles.css中定义的类可以复用。

format:
  html: 
    css: styles.css

可以在yml文件中设置全局调用css，也可以在qmd文档YAML中单独调用某个css。

我在styles.css中定义了.jinzhanhuang来表示金盏黄，然后：[使用styles.css]{.jinzhanhuang}。

注意：在qmd中单独调用css时有bug。Quarto默认会把根路径重写为相对路径，但::after伪类的content:url()不能正确重写。须使用相对路径，即父级路径`url(../)，这样一来就避免了重写，也避免了出错。

7.4 使用knitr的css code chunk

要使用该方法，YAML中必须指定engine: knitr，因为qmd默认不执行css code。

尝试在文档中写入下方code chunk：

```{css}
#| echo: TRUE
p {
color:skyblue;
}
```

该方法创建的类可以在本文档使用。

```{css}
#| echo: TRUE
.sky {
color:skyblue;
}
```

[天色]{.sky}效果：天色。

8 类名不需要加`.`

如果不用大括号，类名不需要加.，如果在大括号内，类名需要加.，下面两种写法效果一样

:::jinzhanhuang
金盏黄
:::
:::{.jinzhanhuang}
金盏黄
:::

9 在标题中使用类

某些类可以应用在标题中，以对该标题对应的div施加效果。例如：

## 在标题中使用类 {.mark}

10 调用bootstrap根变量

bootstrap提供的根变量见https://getbootstrap.com/docs/5.2/customize/css-variables/，注意匹配bootstrap的版本。

10.1 在style中调用`--bs-blue`

例如：[在style中调用`--bs-blue`]{style="color:var(--bs-blue);"}

10.2 在styles.css中调用`--bs-dark`

.kw1 {
  padding-inline: 3px;
  border-radius: 3px;
  margin-inline: 3px;
  border: 1px solid var(--bs-dark);
}

11 隐藏文本内容

使用bootstrap内置的.hidden。
使用bootstrap内置的 .visible 或 .invisible。
在style.css中自定义一个叫.touming的类。
```
.touming {
  color: transparent;
}
```
使用bootstrap内置的.opacity-0。

:::{.bg-warning .w-25}
醉[梦]{.hidden}发于真性，  
醒狂[或]{.invisible}者矫情。  
左相饮[如]{.touming}川吸，  
龙图笑比[河]{.opacity-0}清。
:::

效果：

醉梦发于真性，
醒狂或者矫情。
左相饮如川吸，
龙图笑比河清。

寻找彩蛋：用鼠标选中上面的四句诗。

12 文件路径

当使用[]()或![]()时，须使用根路径。相对路径从当前目录找文件，可能会出错。
在yml文件navbar或page-footer中链接文件时一般使用相对路径，使用绝对路径可能会报错。
注意观察报错信息，可使用https://www.brokenlinkcheck.com/检查坏链，之后调整使用相对路径或绝对路径。

13 图片

13.1 图片大小

根据Google Search的建议使用webp格式的图片，可使用GIMP转换。

13.2 为图片设置多个属性或参数

()内没有title=，多个属性用空格分隔，=两侧不能有空格。

![caption](images/home.jpg "title"){fig-alt="alt" width=50% fig-align="center"}

14 使用动态时间

在yml文件中设置如下，一劳永逸输入时间：

format:
  html:
    date: last-modified

15 规避版权问题

仅使用自己的图文。

17 避免网页上中英混用

在_quarto.yml的format后面的html后面指定lang: zh

18 在页脚添加多行信息

在_quarto.yml文件中添加以下代码。center:后面输入|（center:与|之间需要有空格），表示后续有多行文本。后续多行须缩进。第一行后用两个空格表示换行不换段。

website:
  page-footer: 
    center: |
     Copyright 2023 name
     鲁ICP备##号

19 在混合导航父级导航中指定页面

父级导航中指定的页面tools/index.qmd必须隶属于侧边导航tools，不论是用文件夹自动实现，还是用-手动指定。否则，父级导航指定的页面实际上不隶属于侧边导航，侧边导航不会显示。

website:
  navbar:
    left:
      - text: "工具"
        file: tools/index.qmd

20 使用列表页

如果一个文件夹包含子文件夹，不要使用列表页（listing page），否则一个列表包含多个文件夹的文档，且顺序是乱的。只在最低一级文件夹使用列表页，这样列表不会乱。

当文件夹内无文档时，Quarto可能报错。

21 写人物简历

使用about页面及其模板。about使用的图片须与qmd文件位于同一级目录(同一个文件夹)。about页面有bug：须关闭sidebar与toc，否则左右页面导航出现在页面顶端。

23 Quarto中的类

23.1 各种

.panel-tabset
.aside
.lightbox，.no-lightbox
.content-visible, when-format=“html”，用于PPT标题
.content-hidden, unless-format=“pdf”，用于PPT标题
.notes，用于ppt
.footer，用于ppt
.unnumbered
.unlisted, 须配合.unnumbered使用
.smaller，用于ppt标题
.scrollable，用于ppt标题
.incremental，用于ppt标题
.nonincremental，用于ppt标题

23.2 callout

.callout-tip
.callout-note
.callout-caution
.callout-warning
.callout-important

::: {.callout-important collapse="true"}
## 标题可省略
内容
:::

效果：

标题可省略

内容

23.3 多列

:::: {.columns}
::: {.column width="40%" .bg-info}
contents...
:::
::: {.column width="60%" .bg-warning}
contents...
:::
::::

效果：

contents…

当同时使用style与width时，style中的width:50%会覆盖{}中的width=30%参数。

可用.d-flex与div达到类似效果：

:::: {.d-flex}
::: {.w-50 .bg-info}
contents...
:::
::: {.w-50 .bg-warning}
contents...
:::
::::

效果：

contents…

23.4 边框

23.4.1 边框加法

.border
.border-top
.border-end
.border-bottom
.border-start

23.4.2 边框减法

.border .border-0
.border .border-top-0
.border .border-end-0
.border .border-end-0
.border .border-start-0

23.4.3 边框颜色

.border .border-primary
.border .border-secondary
.border .border-success
.border .border-danger
.border .border-warning
.border .border-info
.border .border-light
.border .border-dark
.border .border-white

23.4.4 边框透明色

.border .border-primary .border-opacity-50
.border .border-primary style=“–bs-border-opacity: 1;”
.border .border-primary style=“–bs-border-opacity: .9;”
.border .border-primary style=“–bs-border-opacity: .8;”
.border .border-primary style=“–bs-border-opacity: .7;”
.border .border-primary style=“–bs-border-opacity: .6;”
.border .border-primary style=“–bs-border-opacity: .5;”
.border .border-primary style=“–bs-border-opacity: .4;”
.border .border-primary style=“–bs-border-opacity: .3;”
.border .border-primary style=“–bs-border-opacity: .2;”
.border .border-primary style=“–bs-border-opacity: .1;”
.border .border-primary style=“–bs-border-opacity: 0;”

23.4.5 边框圆角

.border .border-primary .rounded
.border .border-primary .rounded-top
.border .border-primary .rounded-bottom
.border .border-primary .rounded-start
.border .border-primary .rounded-circle
.border .border-primary .rounded-pill

23.4.6 圆角大小

.border .border-primary .rounded-0
.border .border-primary .rounded-1
.border .border-primary .rounded-2
.border .border-primary .rounded-3
.border .border-primary .rounded-4
.border .border-primary .rounded-5

23.5 表格

条纹：.striped
鼠标悬停：.hover
小字体：.sm
条纹颜色，须配合.striped使用：.primary, .secondary, .success, .danger, .warning, .info, .light, .dark, .active
边框：.bordered, .borderless
自适应：.responsive, .responsive-sm, .responsive-md, .responsive-lg, .responsive-xl, .responsive-xxl
列宽（没有.）：tbl-colwidths

示例：

Fruit|Price
|-|-|
apple | 2.05
pear | 1.37
orange | 3.09

: Fruit prices {.striped .primary .hover .sm tbl-colwidths="[25,75]"}

效果：

Fruit prices
Fruit	Price
apple	2.05
pear	1.37
orange	3.09

23.6 页面宽度

.column-margin

.column-body

.column-body-outset-left

.column-page-inset-left

.column-page-left

.column-screen-inset-left

.column-screen-left

.column-body-outset-right

.column-page-inset-right

.column-page-right

.column-screen-inset-right

.column-screen-right

.column-body-outset

.column-page

.column-screen-inset

.column-screen

.column-screen-inset-shaded

24 bootstrap内置的类

24.1 `.d-flex`与`.d-inline-flex`

.d-flex这个类使div更灵活。例如：.d-flex可以使用.flex-row（内容横向排列）与.flex-column（内容将纵向排列）调整其内容的排列方向。.flex-row``.d-flex的默认设置。是div中的内容为纵向排列。

:::: {.d-flex .bg-light .flex-row}
:::{.d-flex .bg-primary}
.d-flex 1
:::
:::{.d-flex .bg-secondary}
.d-flex 2
:::
:::{.d-flex .bg-info}
.d-flex 3
:::
::::

效果：

.d-flex 1

.d-flex 2

.d-flex 3

.d-flex宽度默认为整行宽度。.d-inline-flex宽度默认为文本宽度。

:::{.d-flex .bg-primary}
.d-flex
:::
:::{.d-inline-flex .bg-secondary}
.d-inline-flex
:::

效果：

.d-flex

.d-inline-flex

.d-inline-flex的宽与高可以修改。

:::{.d-inline-flex .align-items-center .justify-content-center .bg-dark style="width:200px;height:100px;"}
.d-inline-flex
:::

效果：

.d-inline-flex

24.2 Align

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

::::{.d-flex style="background:lightgray;height:200px" .align-items-end}
:::{.d-flex style="width:50px;height:50px;background:wheat;"}
:::
:::{.d-flex style="width:100px;height:100px;background:indigo;"}
:::
:::{.d-flex style="width:150px;height:150px;background:tomato;"}
:::
::::

效果：

24.3 Justify

居中.justify-content-center

:::: {.d-flex .border .justify-content-center}
:::{.d-flex .bg-primary}
justify-content-center
:::
:::{.d-flex .bg-secondary}
justify-content-center
:::
:::{.d-flex .bg-success}
justify-content-center
:::
::::

justify-content-center

.justify-content-start

justify-content-start

.justify-content-end

justify-content-end

.justify-content-between

justify-content-between

.justify-content-around

justify-content-around

.justify-content-evenly

justify-content-evenly

.flex-fill作为flex的内容会撑满整行：

.flex-fill

24.4 宽与高

.w是相对宽度，适用于.d-inline-flex与被嵌套的div、.d-flex，不适用于span（宽度固定为文本宽度）。：

.w-auto .d-inline-flex
.w-50 .d-inline-flex
.w-75 .d-inline-flex
.w-100 .d-inline-flex

.h是相对高度，适用于被嵌套的div、.d-flex、.d-inline-flex，不适用于span（高度固定为行高）。

.h-25 .w-50

.h-50 .w-50

.h-75 .w-50

.h-100 .w-50

24.5 阴影

.shadow-sm .shadow .shadow-lg

24.6 外边距与内边距

24.6.1 外边距Margin

default

.m-auto

.m-1

default

.m-2

.m-3

default

.m-4

.m-5

24.6.2 内边距Padding

default

.p-auto

.p-1

default

.p-2

.p-3

default

.p-4

.p-5

注意：.m与.p不适用于span（其高是固定的）。

24.7 字体大小

.fs-1 .fs-2 .fs-3 .fs-4 .fs-5 .fs-6

24.8 Div文本靠左、居中、靠右

.text-start

.text-center

.text-end

注意：.d-flex与.d-inline-flex须使用align与justify。

1 文本格式

2 等宽字体

3 超链接格式

3.1 去掉下划线

3.2 重置颜色

4 图片的lightbox效果

5 修改导航、页脚、侧边导航的颜色

6 用text替代 icon

7 颜色

7.1 使用bootstrap主题内置的类

7.2 使用style

7.3 使用styles.css

7.4 使用knitr的css code chunk

8 类名不需要加.

9 在标题中使用类

10 调用bootstrap根变量

10.1 在style中调用--bs-blue

10.2 在styles.css中调用--bs-dark

11 隐藏文本内容

12 文件路径

13 图片

13.1 图片大小

13.2 为图片设置多个属性或参数

14 使用动态时间

15 规避版权问题

16 使用title-block-banner

17 避免网页上中英混用

18 在页脚添加多行信息

19 在混合导航父级导航中指定页面

20 使用列表页

21 写人物简历

22 侧边导航（sidebar）莫名其妙出现了

23 Quarto中的类

23.1 各种

23.2 callout

23.3 多列

23.4 边框

23.4.1 边框加法

23.4.2 边框减法

23.4.3 边框颜色

23.4.4 边框透明色

23.4.5 边框圆角

23.4.6 圆角大小

23.5 表格

23.6 页面宽度

24 bootstrap内置的类

24.1 .d-flex与.d-inline-flex

24.2 Align

24.3 Justify

24.4 宽与高

24.5 阴影

24.6 外边距与内边距

24.6.1 外边距Margin

24.6.2 内边距Padding

24.7 字体大小

24.8 Div文本靠左、居中、靠右

6 用`text`替代 `icon`

8 类名不需要加`.`

10.1 在style中调用`--bs-blue`

10.2 在styles.css中调用`--bs-dark`

16 使用`title-block-banner`

24.1 `.d-flex`与`.d-inline-flex`