import{_ as l}from"./plugin-vue_export-helper-c27b6911.js";import{r as i,o as d,c as o,b as a,a as e,d as n,e as r,f as t}from"./app-89848b6d.js";const c="/logo.svg",h={},u=e("p",null,"@slidestart",-1),_=e("h2",{id:"幻灯片演示",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#幻灯片演示","aria-hidden":"true"},"#"),n(" 幻灯片演示")],-1),p=e("p",null,"一个简单的幻灯片演示与各种小贴士。",-1),m=e("blockquote",null,[e("p",null,"作者 Mr.Hope. 请滚动鼠标滚轮进入下一页")],-1),f=e("hr",null,null,-1),g=e("h2",{id:"标注幻灯片",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#标注幻灯片","aria-hidden":"true"},"#"),n(" 标注幻灯片")],-1),k=e("p",null,[e("a",{href:"#/1/1"},"👇")],-1),x=e("p",null,"--",-1),b=e("h2",{id:"标注幻灯片-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#标注幻灯片-1","aria-hidden":"true"},"#"),n(" 标注幻灯片")],-1),w=e("p",null,[n("使用 "),e("code",null,"---"),n(" 标注水平幻灯片")],-1),v=e("p",null,[n("在水平幻灯片中使用 "),e("code",null,"--"),n(" 分割垂直幻灯片")],-1),M=e("p",null,[n("使用 "),e("code",null,"<!-- .slide: ... -->"),n(" 在幻灯片上添加属性")],-1),L=e("p",null,[n("使用 "),e("code",null,"<!-- .element: ... -->"),n(" 在前一个 HTML 元素上添加属性")],-1),j=e("hr",null,null,-1),T=e("h2",{id:"markdown",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown","aria-hidden":"true"},"#"),n(" Markdown")],-1),y=e("p",null,"你可以在幻灯片中使用 Markdown 语法的各种标记.",-1),E=e("p",null,"--",-1),H=e("h2",{id:"markdown-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-1","aria-hidden":"true"},"#"),n(" Markdown")],-1),N=e("p",null,"你可以在幻灯片中使用 Markdown 语法的各种标记.",-1),V=e("h3",{id:"这是一个-h3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#这是一个-h3","aria-hidden":"true"},"#"),n(" 这是一个 H3")],-1),$=e("p",null,"标题默认会自动转换为大写。",-1),B=e("strong",null,"粗体",-1),D=e("em",null,"斜体",-1),z=e("s",null,"删除线",-1),C={href:"https://mister-hope.com",target:"_blank",rel:"noopener noreferrer"},F=e("p",null,"--",-1),I=t('<h2 id="markdown-2" tabindex="-1"><a class="header-anchor" href="#markdown-2" aria-hidden="true">#</a> Markdown</h2><p>你可以在幻灯片中使用 Markdown 语法的各种标记.</p><p>列表默认为 <code>inline-block</code></p><ul><li>项目</li><li>项目</li><li>项目</li></ul><ol><li>项目 1</li><li>项目 2</li><li>项目 3</li></ol><p>--</p>',6),q=t(`<h2 id="markdown-3" tabindex="-1"><a class="header-anchor" href="#markdown-3" aria-hidden="true">#</a> Markdown</h2><p>你可以在幻灯片中使用 Markdown 语法的各种标记.</p><p>在你启用 <code>highlight</code> 插件后，代码块会自动高亮。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>--</p>`,5),J=e("h2",{id:"markdown-4",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-4","aria-hidden":"true"},"#"),n(" Markdown")],-1),O=e("p",null,"你可以在幻灯片中使用 Markdown 语法的各种标记.",-1),S=e("p",null,[n("在你启用 "),e("code",null,"math"),n(" 插件后，你也可以使用 TEX 格式使用数学公式。")],-1),X=e("p",null,"$$ J(\\theta_0,\\theta_1) = \\sum_{i=0} $$",-1),A=e("p",null,"--",-1),G=e("h2",{id:"markdown-5",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-5","aria-hidden":"true"},"#"),n(" Markdown")],-1),K=e("p",null,"你可以在幻灯片中使用 Markdown 语法的各种标记.",-1),P=e("p",null,[n("⚠"),e("strong",null,"请注意"),n(": 表格和分割线，以及所有不在 Markdown 标准语法中的内容均不受支持。")],-1),Q=e("hr",null,null,-1),R=e("h2",{id:"布局",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#布局","aria-hidden":"true"},"#"),n(" 布局")],-1),U=e("p",null,"--",-1),W=e("h2",{id:"布局-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#布局-1","aria-hidden":"true"},"#"),n(" 布局")],-1),Y=e("p",null,[n("👆 "),e("code",null,"r-fit-text"),n(" class 会让文字在不超出幻灯片范围的情况下尽可能大。")],-1),Z=e("p",null,"--",-1),ee=e("h2",{id:"布局-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#布局-2","aria-hidden":"true"},"#"),n(" 布局")],-1),ae=e("figure",null,[e("img",{src:c,alt:"Logo",tabindex:"0",loading:"lazy"}),e("figcaption",null,"Logo")],-1),ne=e("p",null,[n("👆 "),e("code",null,"r-stretch"),n(" class 帮助你控制注入图片或视频的大小，使它们填充满幻灯片垂直方向上的剩余空间。")],-1),te=e("p",null,"--",-1),se=e("h2",{id:"布局-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#布局-3","aria-hidden":"true"},"#"),n(" 布局")],-1),le=e("h3",{id:"背景",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#背景","aria-hidden":"true"},"#"),n(" 背景")],-1),ie=e("p",null,[n("你可以通过向特定幻灯片添加 "),e("code",null,"data-background"),n(" 属性自定义幻灯片背景.")],-1),de=e("hr",null,null,-1),oe=e("h2",{id:"动画片段",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画片段","aria-hidden":"true"},"#"),n(" 动画片段")],-1),re=e("p",null,"--",-1),ce=e("h2",{id:"动画片段-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画片段-1","aria-hidden":"true"},"#"),n(" 动画片段")],-1),he=e("p",null,"动画片段用于高亮或显隐幻灯片中的元素。",-1),ue=e("p",null,[n("你需要在元素上添加 "),e("code",null,"fragment"),n(" 和动画 class。")],-1),_e=e("p",null,"--",-1),pe=e("h2",{id:"动画片段-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画片段-2","aria-hidden":"true"},"#"),n(" 动画片段")],-1),me=e("h3",{id:"动画-class",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画-class","aria-hidden":"true"},"#"),n(" 动画 class")],-1),fe=e("ul",null,[e("li",null,[e("code",null,"fade-in")])],-1),ge=e("ul",null,[e("li",null,[e("code",null,"fade-out")])],-1),ke=e("ul",null,[e("li",null,[e("code",null,"fade-up")])],-1),xe=e("ul",null,[e("li",null,[e("code",null,"fade-down")])],-1),be=e("ul",null,[e("li",null,[e("code",null,"fade-left")])],-1),we=e("ul",null,[e("li",null,[e("code",null,"fade-right")])],-1),ve=e("ul",null,[e("li",null,[e("code",null,"fade-in-then-out")])],-1),Me=e("ul",null,[e("li",null,[e("code",null,"fade-in-then-semi-out")])],-1),Le=e("p",null,"--",-1),je=e("h2",{id:"动画片段-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画片段-3","aria-hidden":"true"},"#"),n(" 动画片段")],-1),Te=e("h3",{id:"动画-class-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画-class-1","aria-hidden":"true"},"#"),n(" 动画 class")],-1),ye=e("ul",null,[e("li",null,[e("code",null,"grow")])],-1),Ee=e("ul",null,[e("li",null,[e("code",null,"shrink")])],-1),He=e("ul",null,[e("li",null,[e("code",null,"strike")])],-1),Ne=e("ul",null,[e("li",null,[e("code",null,"highlight-red")])],-1),Ve=e("ul",null,[e("li",null,[e("code",null,"highlight-green")])],-1),$e=e("ul",null,[e("li",null,[e("code",null,"highlight-blue")])],-1),Be=e("ul",null,[e("li",null,[e("code",null,"highlight-current-red")])],-1),De=e("ul",null,[e("li",null,[e("code",null,"highlight-current-green")])],-1),ze=e("ul",null,[e("li",null,[e("code",null,"highlight-current-blue")])],-1),Ce=e("p",null,"--",-1),Fe=t('<h2 id="动画片段-4" tabindex="-1"><a class="header-anchor" href="#动画片段-4" aria-hidden="true">#</a> 动画片段</h2><h3 id="多个动画片段" tabindex="-1"><a class="header-anchor" href="#多个动画片段" aria-hidden="true">#</a> 多个动画片段</h3><p>你可以按照顺序包裹一个 HTML 元素使其拥有多个动画片段</p><span class="fragment fade-in"><span class="fragment highlight-red"><span class="fragment fade-out"> 渐入 &gt; 变红 &gt; 渐出 </span></span></span><p>--</p>',5),Ie=e("h2",{id:"动画片段-5",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#动画片段-5","aria-hidden":"true"},"#"),n(" 动画片段")],-1),qe=e("h3",{id:"顺序",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#顺序","aria-hidden":"true"},"#"),n(" 顺序")],-1),Je=e("p",null,[n("你可以使用 "),e("code",null,"data-fragment-index"),n(" 属性改变元素的动画顺序。")],-1),Oe=e("p",null,"不同元素可以有相同的动画顺序。",-1),Se=e("ul",null,[e("li",null,"最后显示")],-1),Xe=e("ul",null,[e("li",null,"第二个显示")],-1),Ae=e("ul",null,[e("li",null,"第一个显示")],-1),Ge=e("ul",null,[e("li",null,"第二个显示")],-1),Ke=e("hr",null,null,-1),Pe=e("h2",{id:"渐变",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#渐变","aria-hidden":"true"},"#"),n(" 渐变")],-1),Qe=e("p",null,"--",-1),Re=e("h2",{id:"渐变-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#渐变-1","aria-hidden":"true"},"#"),n(" 渐变")],-1),Ue=e("p",null,[n("Transition 可以通过配置中的 "),e("code",null,"transition"),n(" 选项全局设置，也可以通过在特定幻灯片添加 "),e("code",null,"data-transition"),n(" 属性局部设置.")],-1),We=e("p",null,"可能的值:",-1),Ye=e("ul",null,[e("li",null,"none"),e("li",null,"fade"),e("li",null,"slide")],-1),Ze=e("ul",null,[e("li",null,"convex"),e("li",null,"concave"),e("li",null,"zoom")],-1),ea=e("p",null,"--",-1),aa=e("h2",{id:"渐变-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#渐变-2","aria-hidden":"true"},"#"),n(" 渐变")],-1),na=e("h3",{id:"过渡动画",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#过渡动画","aria-hidden":"true"},"#"),n(" 过渡动画")],-1),ta=e("p",null,[n("你可以在相邻的幻灯片上添加 "),e("code",null,"data-auto-animate"),n(" 使相同的 HTML 元素产生过渡动画效果。")],-1),sa=e("hr",null,null,-1),la=e("h2",{id:"功能",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#功能","aria-hidden":"true"},"#"),n(" 功能")],-1),ia=e("p",null,"--",-1),da=e("h2",{id:"功能-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#功能-1","aria-hidden":"true"},"#"),n(" 功能")],-1),oa=t(`<h3 id="代码" tabindex="-1"><a class="header-anchor" href="#代码" aria-hidden="true">#</a> 代码</h3><p>通过启用 <code>highlight</code> 插件，你可以对代码块进行高亮。</p><p>你可以使用 <code>[a-b|c-d]</code> 语法来分布高亮特定行。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token function-variable function">c</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> x<span class="token punctuation">;</span>
<span class="token function">c</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>--</p>`,5),ra=e("h2",{id:"功能-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#功能-2","aria-hidden":"true"},"#"),n(" 功能")],-1),ca=e("h3",{id:"预览模式",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#预览模式","aria-hidden":"true"},"#"),n(" 预览模式")],-1),ha=e("p",null,[n("按下 "),e("code",null,"Esc"),n(" 或 "),e("code",null,"O"),n(" 即可在幻灯片获得焦点时进入预览模式。")],-1),ua=e("p",null,"--",-1),_a=e("h2",{id:"功能-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#功能-3","aria-hidden":"true"},"#"),n(" 功能")],-1),pa=e("h3",{id:"全屏模式",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#全屏模式","aria-hidden":"true"},"#"),n(" 全屏模式")],-1),ma=e("p",null,[n("按下 "),e("code",null,"F"),n(" 或 "),e("code",null,"F11"),n(" 即可在幻灯片获得焦点时进入全屏模式。")],-1),fa=e("p",null,"--",-1),ga=e("h2",{id:"功能-4",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#功能-4","aria-hidden":"true"},"#"),n(" 功能")],-1),ka=e("h3",{id:"缩放",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#缩放","aria-hidden":"true"},"#"),n(" 缩放")],-1),xa=e("p",null,[n("按下 "),e("code",null,"alt"),n(" (Linux 上使用 "),e("code",null,"ctrl"),n(") 的同时点击幻灯片的任何元素，即可以向此元素进行放大。")],-1),ba=e("p",null,"再次点击即可缩小。",-1),wa=e("hr",null,null,-1),va=e("h2",{id:"结束",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#结束","aria-hidden":"true"},"#"),n(" 结束")],-1),Ma=e("p",null,"@slideend",-1);function La(ja,Ta){const s=i("ExternalLinkIcon");return d(),o("div",null,[a(" markdownlint-disable MD024 MD033 MD051 "),u,a(' .slide: data-transition="slide" '),_,a(' .element: class="r-fit-text" '),p,a(' .element: class="r-fit-text" '),m,f,g,a(' .element: class="r-fit-text" '),k,x,b,a(' .element: class="r-fit-text" '),w,a(' .element: class="fragment fade-in" '),v,a(' .element: class="fragment fade-in" '),M,a(' .element: class="fragment fade-in" '),L,a(' .element: class="fragment fade-in" '),j,a(' .slide: data-transition="slide" data-auto-animate '),T,a(' .element: class="r-fit-text" '),y,a(' .element: class="r-fit-text" '),E,a(" .slide: data-auto-animate "),H,N,V,$,e("p",null,[n("这是一个有着 "),B,n(", "),D,n(", "),z,n(" 文字并包含 "),e("a",C,[n("一个链接"),r(s)]),n(" 的段落，并且它会自动换行。所以你无需担心它的长度。")]),F,a(" .slide: data-auto-animate "),I,a(" .slide: data-auto-animate "),q,a(" .slide: data-auto-animate "),J,O,S,X,A,a(" .slide: data-auto-animate "),G,K,P,Q,a(' .slide: data-transition="slide" data-auto-animate '),R,a(' .element: class="r-fit-text" '),U,a(" .slide: data-auto-animate  "),W,a(' .element: class="r-fit-text" '),Y,Z,a(" .slide: data-auto-animate  "),ee,ae,a(' .element: class="r-stretch" '),ne,te,a(' .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" '),se,le,ie,de,a(" .slide: data-auto-animate "),oe,a(' .element: class="r-fit-text" '),re,a(" .slide: data-auto-animate "),ce,a(' .element: class="r-fit-text" '),he,ue,_e,a(" .slide: data-auto-animate "),pe,me,fe,a(' .element: class="fragment fade-in" '),ge,a(' .element: class="fragment fade-out" '),ke,a(' .element: class="fragment fade-up" '),a(" list break "),xe,a(' .element: class="fragment fade-down" '),be,a(' .element: class="fragment fade-left" '),we,a(' .element: class="fragment fade-right" '),a(" list break "),ve,a(' .element: class="fragment fade-in-then-out" '),Me,a(' .element: class="fragment fade-in-then-semi-out" '),Le,a(" .slide: data-auto-animate "),je,Te,ye,a(' .element: class="fragment grow" '),Ee,a(' .element: class="fragment shrink" '),He,a(' .element: class="fragment strike" '),a(" list break "),Ne,a(' .element: class="fragment highlight-red" '),Ve,a(' .element: class="fragment highlight-green" '),$e,a(' .element: class="fragment highlight-blue" '),a(" list break "),Be,a(' .element: class="fragment highlight-current-red" '),De,a(' .element: class="fragment highlight-current-green" '),ze,a(' .element: class="fragment highlight-current-blue" '),Ce,a(" .slide: data-auto-animate "),Fe,a(" .slide: data-auto-animate "),Ie,qe,Je,Oe,Se,a(' .element: class="fragment" data-fragment-index="3"'),Xe,a(' .element: class="fragment" data-fragment-index="2"'),a(" list break "),Ae,a(' .element: class="fragment" data-fragment-index="1"'),Ge,a(' .element: class="fragment" data-fragment-index="2"'),Ke,a(' .slide: data-transition="slide" data-auto-animate '),Pe,a(' .element: class="r-fit-text" '),Qe,a(' .slide: data-transition="slide" data-auto-animate '),Re,a(' .element: class="r-fit-text" '),Ue,We,Ye,a(" list break "),Ze,ea,a(" .slide: data-auto-animate "),aa,a(' .element: class="r-fit-text" '),na,ta,sa,a(' .slide: data-transition="slide" data-auto-animate '),la,a(' .element: class="r-fit-text" '),ia,a(' .slide: data-transition="slide" data-auto-animate '),da,a(' .element: class="r-fit-text" '),oa,a(' .slide: data-transition="slide" data-auto-animate '),ra,a(' .element: class="r-fit-text" '),ca,ha,ua,a(' .slide: data-transition="slide" data-auto-animate '),_a,a(' .element: class="r-fit-text" '),pa,ma,fa,a(' .slide: data-transition="slide" data-auto-animate '),ga,a(' .element: class="r-fit-text" '),ka,xa,ba,wa,a(' .element: class="r-fit-text" '),va,Ma])}const Ha=l(h,[["render",La],["__file","slides.html.vue"]]);export{Ha as default};