class: center, middle # 这是一个测试题目 ### 黄凤 @ 华为技术有限公司 ### 2024-06-15 --- ## 如何使用 1. 编辑 index.html，使用 markdown 书写幻灯内容。  1. 双击 index.html，预览幻灯效果。 <small>演示模式、计时器、快捷键等请参考 [remarkjs官方文档](https://github.com/gnab/remark/wiki)。</small> --- ## Introduction .block-middle.height-1[<div class="mermaid"> flowchart TD classDef main fill:#4361EE,stroke:#3046C5,color:white,stroke-width:2px,rounded:true classDef bone fill:#4CC9F0,stroke:#2E9DC0,color:white,stroke-width:2px,rounded:true classDef slot fill:#7209B7,stroke:#5B0794,color:white,stroke-width:2px,rounded:true classDef skin fill:#F72585,stroke:#CE1F6F,color:white,stroke-width:2px,rounded:true classDef attachment fill:#F3722C,stroke:#D75E18,color:white,stroke-width:2px,rounded:true SkeletonData("📦 SkeletonData\n骨骼数据容器"):::main Skeleton("🏃 Skeleton\n运行时实例"):::main Bone("🦴 骨骼 (Bone)"):::bone Slot("🔌 槽位 (Slot)"):::slot Skin("👕 皮肤 (Skin)"):::skin Attachment("🖼️ 附件 (Attachment)"):::attachment SkeletonData -->|"创建"| Skeleton Skeleton -->|"拥有多个"| Bone Skeleton -->|"拥有多个"| Slot Skeleton -->|"使用"| Skin Bone -->|"父子层级"| Bone Slot -->|"附着于"| Bone Slot -->|"展示"| Attachment Skin -.->|"映射\n(槽位+占位符→附件)"| Attachment </div> ] This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website! --- # demo 睿 .border-layout.height-87[ .mermaid[ graph LR; 　　Portal-->|发布/更新配置|Apollo配置中心; 　　Apollo配置中心-->|实时推送|App; 　　App-->|实时查询|Apollo配置中心; ] ] --- ## 测试1 This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website! --- ## 测试2 This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website!  --- ## 测试3 This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website! https://gohugo.io --- ## 测试4 This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website! This is **bold** text, and this is *emphasized* text. > ## 要得到你想要的某样东西，最可靠的办法是让你自己配得起它。 > ### ——芒格《穷查理宝典》 --- ## 中文排版示例 ### 论语学而篇第一 <small>作者：<abbr title="名丘，字仲尼">孔子</abbr>（前551年9月28日－前479年4月11日）</small> #### 本篇引语 《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以 `第一章` 的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中**重点**是<mark>「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」</mark>以及仁、孝、信等道德范畴。 > 此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？ --- ## 英文排版示例 > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna > aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #### The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. --- class: pangujs ## 自动中英文混排 在页面的`class`配置中增加`pangujs`选项即可启用基于[pangu.js](https://github.com/vinta/pangu.js)的自动中英文混排支持，它可以在英文单词左右自动增加空格。 ```markdown class: pangujs ``` 下面是效果示例： 如果你跟我一样，每次看到网页上的中文字和英文、数字、符号挤在一块，就会坐立难安，忍不住想在它们之间加个空格。这个外挂（支持Chrome和Firefox）正是你在网路世界走跳所需要的东西，它会自动替你在网页中所有的中文字和半形的英文、数字、符号之间插入空白。 汉学家称这个空白字元为“盘古之白”，因为它劈开了全形字和半形字之间的混沌。另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在34岁的时候跟自己不爱的人结婚，而其馀三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。 --- class: nord-dark, center, middle # .letter-spacing-20[深色主题] <small>.letter-spacing-50[做章节页感觉比较酷]</small> 会有闪的问题， 暂不使用 --- class: nord-light, center, middle # .letter-spacing-20[浅色主题] <small>.letter-spacing-50[做章节页有点文艺范儿]</small> --- ## 代码 ```ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { * isCollapsed = false; // 行首加 * 号显亮 } ``` ```cpp #include <iostream> using namespace std; int main() { cout << "Hello World!" << endl; return 0; } ``` --- ## 表格1 .st.noborder.st-hline.font-sm.mb-xs[ | 名称 | 价格 | 数量 | | ---- | ---- | ----: | | 香蕉 | $1 | 5 | | 苹果 | $1 | 6 | | 草莓 | $1 | 7 | ] .st.st-hline.font-sm.mb-xs[ | 名称 | 价格 | 数量 | | ---- | ---- | ----: | | 香蕉 | $1 | 5 | | 苹果 | $1 | 6 | | 草莓 | $1 | 7 | ] --- ## 表格2 .column-2.column-norule[ .st.st-allline.font-sm.mb-xs[ | 名称 | 价格 | 数量 | | ---- | ---- | ----: | | 香蕉 | $1 | 5 | | 苹果 | $1 | 6 | | .nord11[草莓] | .nord11[$1] | .nord11[7] | ] .st.st-vline.font-sm.mb-xs[ | 名称 | 价格 | 数量 | | ---- | ---- | ----: | | 香蕉 | $1 | 5 | | 苹果 | $1 | 6 | | 草莓 | $1 | 7 | ] ] --- ## 文本对齐 .left[Left-aligned text] .center[Centered text] .right[Right-aligned text] --- background-image: url(image.png) ## 图片 .float-left.width-33.pt-xxs.pr-xs[] 图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。 .block-middle.width-33[] .float-right.width-27.pt-xxs.pl-xs[] 图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。图片比较常见的布局是浮动在文字左侧、右侧或居中。 --- ## iframe <iframe width="100%" height="70%" src="https://example.org/" allowfullscreen frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe> --- class: center, middle ## 视频播放 <video width="100%" height="420" controls> <source src="3.mp4" type="video/mp4"> </video> <small>一图胜千言；一个视频能代替你演讲。</small> --- ## 增量内容 - 虽然实现增量内容很容易 - 好像还挺有动感 -- - 但还是要慎用 --- name: other-slide # 使用 name 命名此幻灯片 Some content. --- template: other-slide ### 通过 template 可引用之前的幻灯片 Content appended to other-slide's content. --- ## 布局 · 分栏 有时候需要展示大段的文字，分成 2 栏或 3 栏会更易读，空间利用率也更高。 .column-2.font-sm.mb-xs[ 《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以 第一章 的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以 第一章 的前二三个字作为该篇的篇名。 ] .column-3.font-sm.mb-xs[ 《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以 第一章 的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以 第一章 的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。 ] --- ## 布局 · 分栏2 `上一张幻灯片里面的左右两栏对比效果也可以用分栏来实现：` .column-2.column-norule.font-xs[ Example of what's not supported: ```html {{ dir.dirName }} <div dir #myDir="dir" [dirName]="name" ></div> ``` Instead: ```html <div dir [dirName]="name"></div> ``` ] --- class: border-layout .north.height-20.oc-bg-blue-2[ .north ] .west.height-60.width-20.oc-bg-cyan-2[ .west ] .east.height-60.width-20.oc-bg-green-2[ .east ] .b-center.oc-bg-orange-2[ .b-center .font-xl[Border 布局] Border 布局是一种简洁的布局模式。它将页面划分为 5 个区域，分别是：north、west、east、center 和 south。很多常见的布局形式都可以用 border 布局轻松实现。 ] .south.height-20.oc-bg-pink-2[ .south ] --- ## Mermaid <div class="mermaid"> graph TD; A[开始] --> B{决策点}; B -->|是| C[选项1]; B -->|否| D[选项2]; </div>