19 RevealJs
19.1 Yaml设置
---
title: "研究方案常见缺陷"
description: "看见，改变"
author: "胡林辉"
date: today
format:
revealjs:
logo: img/mmph-logo.png
theme: [moon, custom.scss]
footer: 研究方案常见缺陷
preview-links: auto
embed-resources: false # 准备发布时再设置为true
crossref:
fig-title: 图
tbl-title: 表
title-delim: —
tbl-prefix: 表
fig-prefix: 图
categories: [培训, 临床研究]
image: 'https://pic3.zhimg.com/v2-98fae389b1784e4d46c41da3a6eb7a2b_b.jpg'
---19.2 播放设置
| 功能 | 设置 |
|---|---|
| 幻灯片中打开网页 | 1. preview-links: auto 2. - [知网使用手册](https://piccache.cnki.net/2022/kdn/index/helper/manual.html#frame2-1-3){preview-link="true"} |
19.3 自定义样式
19.3.1 巧用:::符号
在quarto中，两个:::符号之间的内容为一个div，可以将样式直接写在第一个:::后面。
19.3.2 mermaid
/*-- scss:defaults --*/
// $body-bg: #191919;
// $body-color: #fff;
// $link-color: #42affa;
/*-- scss:rules --*/
#mermaid-1 .cluster rect {
fill: #eee8d5!important;
stroke: #aaaa33;
stroke-width: 1px;
}
#mermaid-1 .nodeLabel {
color: #eee8d5!important; /*-- 节点边框字体的颜色 --*/
}
.reveal {
color: #eee8d5!important; /*-- 幻灯字体的颜色 --*/
}
:root {
--mermaid-label-bg-color: #ccc!important; /*-- 箭头中间标签的背景色 --*/
--mermaid-edge-color: #999; /*-- 箭头的颜色 --*/
--mermaid-node-fg-color: --r-background-color; /*-- 节点边框边缘框线的颜色 --*/
--mermaid-node-bg-color: #1f4d52ff!important; /*-- 节点边框的填充色，最后一个参数代表透明度 --*/
}
19.3.3 slide
19.3.3.1 用scss
/*-- scss:defaults --*/
// $body-bg: #191919;
// $body-color: #fff;
// $link-color: #42affa;
/*-- scss:rules --*/
aside {
margin-bottom: -15%; /*-- 使引文位置向下移一点距离，这样可以避免与下文重合 --*/
}
.aside-footnotes {
font-size: 16px !important;
color: #007acc;
margin-top: 20px !important;
}
.right-column {
margin-left: 50px;
}
figcaption {
font-size: 20px !important;
text-align: center !important;
}
p.caption {
font-size: 100px!important;
text-align: center;
}
.slides {
inset: 40% auto auto 50% !important; // 调整slide的上边距
}
#title-slide {
top: 40% !important; // 调整标题幻灯页的垂直位置
}
19.3.3.2 在slide里设定
## 选题依据 {style="text-align: center"}
::: {style="font-size: 1.0em; text-align: center"}
背景
:::
::: columns
::: {.column style="width: 50%; "}
Sepsis is the most common contributing factor for the development of AKI.
:::
::: {.column style="width: 50%; "}
The severity of injury and poor outcomes associated with SA-AKI worsen with delayed recognition of injury.
:::
::: 注意： style="width: 50%; "不能有空格，写成style = "width: 50%; "则不能正确渲染。
19.3.4 column
19.3.4.1 用{style='font-size: 24px;'}
::: columns
::: column
{#fig-soot}
:::
::: column
::: {style='font-size: 24px;'}
检索域|含义
-|-
主题|-
篇关摘|-
篇名|-
关键词|-
摘要|-
全文|-
作者|-
第一作者|-
作者单位|-
基金|-
参考文献|-
:::
:::
:::19.3.4.2 用scss
::: columns
::: column
{#fig-soot}
:::
::: column
::: table
检索域|含义
-|-
主题|-
篇关摘|-
篇名|-
关键词|-
摘要|-
全文|-
作者|-
第一作者|-
作者单位|-
基金|-
参考文献|-
:::
:::
:::.table {
font-size: 24px;
}19.3.4.3 实战
- 使右列表格宽度增加，充分显示内容而不用换行：
margin-right: -350px。整张幻灯的Markdown代码如下：
## 一框式检索
::: columns
::: column
{#fig-soot}
:::
::: column
::: {style='font-size: 24px; margin-right: -350px'}
检索域|含义|-特点
-|-|-
主题|所有字段|关键词含义外延，截断不相关内容
篇关摘|-
篇名|-
关键词|-
摘要|-
全文|-
作者|-
第一作者|-
作者单位|-
基金|-
参考文献|-
: 检索域的含义 {#tbl-dfaeata}
:::
:::
:::19.4 动画
19.4.1 动画显示图片
::: {.r-stack}
::: {.fragment .fade-in-then-out}
:::
::: {.fragment .fade-in style=""}
:::
:::::: {.r-stack}使图片处于层叠状态。
待搬到服务器即可显示演示页面。