gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/timeline-CldJTooe.js

209 lines
61 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/markdown/timeline/","title":"时间线 | 指南","lang":"zh-CN","frontmatter":{"title":"时间线","icon":"mdi:timeline-text-outline","createTime":"2025/03/20 18:05:29","permalink":"/guide/markdown/timeline/","description":"概述 在 markdown 中，使用 ::: timeline 容器，包含 markdown 无序列表语法，即可实现 时间线 的 渲染效果。 支持 水平方向 和 垂直方向 垂直方向支持 左对齐，右对齐 和 两端对齐 支持 图标 和 线条样式 支持 通过预设 类型 设置 颜色，支持自定义颜色 启用 该功能默认不启用，你需要在 theme 配置中启用。 ....","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"时间线\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/timeline/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"时间线"}],["meta",{"property":"og:description","content":"概述 在 markdown 中，使用 ::: timeline 容器，包含 markdown 无序列表语法，即可实现 时间线 的 渲染效果。 支持 水平方向 和 垂直方向 垂直方向支持 左对齐，右对齐 和 两端对齐 支持 图标 和 线条样式 支持 通过预设 类型 设置 颜色，支持自定义颜色 启用 该功能默认不启用，你需要在 theme 配置中启用。 ...."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/timeline/"}]]},"readingTime":{"minutes":8.41,"words":2524},"git":{"createdTime":1742573255000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":5,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"d14961d038bc1a13318ce14ee9fe25a8b2c9ac99","time":1746023641000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"},{"hash":"73ed8dc9c544be19318db4e36379f08c4a91a39b","time":1745034035000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add badge support for navbar and sidebar (#559)"},{"hash":"dd5c984578b200ac9258b5cd09de1d9aebe18406","time":1742661634000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(plugin-md-power): improve timeline syntax parsing (#534)"},{"hash":"5173e7f2ede197ff64aad04c182bfbf9beb32c83","time":1742573255000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add <code>timeline</code> syntax support (#529)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/timeline.md","headers":[],"bulletin":false}`),u={name:`timeline.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`code-block-title`,"data-title":`timeline.md`},h={class:`code-block-title-bar`},g={class:`title`},_={class:`vp-field-group`},v={class:`vp-field-group`},y={class:`code-block-title`,"data-title":`.vuepress/styles/index.css`},b={class:`code-block-title-bar`},x={class:`title`};function S(c,l,u,S,C,w){let T=t(`VPIcon`),E=t(`VPTimelineItem`),D=t(`VPTimeline`),O=t(`VPField`),k=t(`VPLink`);return n(),i(`div`,null,[l[88]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>在 markdown 中，使用 <code>::: timeline</code> 容器，包含 markdown 无序列表语法，即可实现 <mark>时间线</mark> 的 渲染效果。</p><ul><li>支持 <mark>水平方向</mark> 和 <mark>垂直方向</mark></li><li>垂直方向支持 <strong>左对齐</strong>，<strong>右对齐</strong> 和 <strong>两端对齐</strong></li><li>支持 <strong>图标</strong> 和 <strong>线条样式</strong></li><li>支持 通过预设 <strong>类型</strong> 设置 <strong>颜色</strong>，支持自定义颜色</li></ul><h2 id="启用" tabindex="-1"><a class="header-anchor" href="#启用"><span>启用</span></a></h2><p>该功能默认不启用，你需要在 <code>theme</code> 配置中启用。</p>`,5),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> timeline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[89]||=s(`h2`,{id:`使用`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#使用`},[s(`span`,null,`使用`)])],-1),l[90]||=s(`p`,null,[a(`在 `),s(`code`,null,`::: timeline`),a(` 容器中，使用 markdown 无序列表语法，列表的每一个项即 时间线上的每一个点。`)],-1),s(`div`,m,[s(`div`,h,[s(`span`,g,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-markdown`}),l[2]||=a(`timeline.md`,-1)])]),l[3]||=o(`<div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line highlighted"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline 配置</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 标题</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 配置</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 标题</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 配置</span></span>
<span class="line highlighted"><wbr></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]),l[91]||=o(`<p>对于列表的每一个项：</p><ul><li><p>从 <strong>首行开始</strong> 到 <strong>首个空行</strong>，均为 <strong>标题</strong> ，在标题后紧跟随的一行，用于 <strong>配置</strong> 当前项的行为</p></li><li><p><strong>首个空行之后</strong>: 正文内容</p></li></ul><div class="hint-container important"><p class="hint-container-title">请注意添加正确的缩进</p></div><p><strong>一个简单的例子：</strong></p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-02-21 type=warning</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,7),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,type:`success`,card:void 0},{title:e(()=>[...l[4]||=[a(`节点一`,-1)]]),default:e(()=>[l[5]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-02-21`,type:`warning`,card:void 0},{title:e(()=>[...l[6]||=[a(`节点二`,-1)]]),default:e(()=>[l[7]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[8]||=[a(`节点三`,-1)]]),default:e(()=>[l[9]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[92]||=o(`<div class="hint-container important"><p class="hint-container-title">时间线默认为垂直方向</p></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><p><strong>时间线</strong> 支持非常灵活且灵活的配置项，配置主要分为两个部分：</p><ul><li><p><strong>容器配置</strong>： 在 <code>::: timeline</code> 容器上的配置，配置项跟随在 <code>::: timeline</code> 之后，如：</p><p><code>::: timeline horizontal</code> 表示 渲染为 水平方向的时间线。</p></li><li><p><strong>列表项配置</strong>： 列表的每一个项的配置，紧跟随在标题之后的一行，如：</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 标题 </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--标题行--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 也是标题 </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--标题行--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 type=success </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--配置跟随在最后的标题行之后的单独一行，可选--&gt;</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!--空行，有正文时必须--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div></li></ul><h3 id="容器配置" tabindex="-1"><a class="header-anchor" href="#容器配置"><span>容器配置</span></a></h3>`,5),s(`div`,_,[r(O,{name:`horizontal`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[10]||=[s(`p`,null,`渲染为 水平方向 的时间线`,-1)]]),_:1}),r(O,{name:`card`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[11]||=[s(`p`,null,`每个时间节点默认渲染为卡片样式（可在列表项配置中覆盖）`,-1)]]),_:1}),r(O,{name:`placement`,optional:``,type:`'left' | 'right' | 'between'`,"default-value":`'left'`},{default:e(()=>[...l[12]||=[s(`p`,null,[a(`时间节点的对齐方式。`),s(`mark`,{class:`warning`},`仅在垂直方向时生效`)],-1),s(`ul`,null,[s(`li`,null,[s(`code`,null,`left`),a(` : 时间轴左侧对齐`)]),s(`li`,null,[s(`code`,null,`right`),a(` : 时间轴右侧对齐`)]),s(`li`,null,[s(`code`,null,`between`),a(` : 时间轴两端对齐 (通过列表项配置中的 `),s(`code`,null,`placement`),a(` 定义位置，默认为 `),s(`code`,null,`left`),a(`)`)])],-1)]]),_:1}),r(O,{name:`line`,optional:``,type:`'solid' | 'dashed' | 'dotted'`,"default-value":`'solid'`},{default:e(()=>[...l[13]||=[s(`p`,null,`线条样式（可在列表项配置中覆盖）`,-1)]]),_:1})]),l[93]||=s(`h3`,{id:`列表项配置`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#列表项配置`},[s(`span`,null,`列表项配置`)])],-1),s(`div`,v,[r(O,{name:`time`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[14]||=[s(`p`,null,[a(`时间点，可以是任何字符串，比如 `),s(`code`,null,`2025-03-20`),a(`， `),s(`code`,null,`Q1`),a(` 等。`)],-1)]]),_:1}),r(O,{name:`type`,optional:``,type:`'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'`,"default-value":`'info'`},{default:e(()=>[...l[15]||=[s(`p`,null,`时间节点的类型。`,-1)]]),_:1}),r(O,{name:`card`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[16]||=[s(`p`,null,[a(`当前 时间节点渲染为卡片样式。默认值从 容器配置 `),s(`code`,null,`card`),a(` 中继承`)],-1)]]),_:1}),r(O,{name:`line`,optional:``,type:`'solid' | 'dashed' | 'dotted'`,"default-value":`'solid'`},{default:e(()=>[...l[17]||=[s(`p`,null,[a(`线条样式。 默认值从 容器配置 `),s(`code`,null,`line`),a(` 中继承`)],-1)]]),_:1}),r(O,{name:`icon`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[18]||=[s(`p`,null,[a(`时间节点的图标，支持所有的 `),s(`a`,{href:`https://icon-sets.iconify.design/`,target:`_blank`,rel:`noopener noreferrer`},`iconify`),a(` 图标。`)],-1)]]),_:1}),r(O,{name:`placement`,optional:``,type:`'left' | 'right'`,"default-value":`'left'`},{default:e(()=>[...l[19]||=[s(`p`,null,[a(`当 容器配置 `),s(`code`,null,`placement`),a(` 为 `),s(`code`,null,`between`),a(` 时，定义当前时间节点的位置。`)],-1),s(`ul`,null,[s(`li`,null,[s(`code`,null,`left`),a(` : 在时间轴左侧`)]),s(`li`,null,[s(`code`,null,`right`),a(` : 在时间轴右侧`)])],-1)]]),_:1}),r(O,{name:`color`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[20]||=[s(`p`,null,`时间节点线条颜色，可以是任何有效的颜色值。`,-1)]]),_:1})]),l[94]||=o(`<h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><h3 id="水平方向" tabindex="-1"><a class="header-anchor" href="#水平方向"><span>水平方向</span></a></h3><p>在 <code>:::timeline</code> 后跟随声明 <code>horizontal</code> , 即可将时间线渲染为 水平方向。</p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">horizontal</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,6),r(D,{horizontal:``,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[21]||=[a(`节点一`,-1)]]),default:e(()=>[l[22]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[23]||=[a(`节点二`,-1)]]),default:e(()=>[l[24]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[25]||=[a(`节点三`,-1)]]),default:e(()=>[l[26]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[27]||=[a(`节点四`,-1)]]),default:e(()=>[l[28]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[95]||=o(`<h3 id="右对齐" tabindex="-1"><a class="header-anchor" href="#右对齐"><span>右对齐</span></a></h3><p>在 <code>:::timeline</code> 后跟随声明 <code>placement=&quot;right&quot;</code> , 即可将时间线渲染为 右对齐。</p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=&quot;right&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,5),r(D,{placement:`right`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[29]||=[a(`节点一`,-1)]]),default:e(()=>[l[30]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[31]||=[a(`节点二`,-1)]]),default:e(()=>[l[32]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[33]||=[a(`节点三`,-1)]]),default:e(()=>[l[34]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[35]||=[a(`节点四`,-1)]]),default:e(()=>[l[36]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[96]||=o(`<h3 id="两端对齐" tabindex="-1"><a class="header-anchor" href="#两端对齐"><span>两端对齐</span></a></h3><p>在 <code>:::timeline</code> 后跟随声明 <code>placement=&quot;between&quot;</code> , 即可将时间线渲染为 两端对齐。</p><p>列表项默认位于时间线的左侧，可以通过 <code>placement=&quot;right&quot;</code> 为列表项设置右侧位置。</p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=&quot;between&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=right</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=right</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,6),r(D,{placement:`between`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,placement:`right`,card:void 0},{title:e(()=>[...l[37]||=[a(`节点一`,-1)]]),default:e(()=>[l[38]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[39]||=[a(`节点二`,-1)]]),default:e(()=>[l[40]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,placement:`right`,card:void 0},{title:e(()=>[...l[41]||=[a(`节点三`,-1)]]),default:e(()=>[l[42]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[43]||=[a(`节点四`,-1)]]),default:e(()=>[l[44]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[97]||=o(`<h3 id="节点类型" tabindex="-1"><a class="header-anchor" href="#节点类型"><span>节点类型</span></a></h3><p>在列表项配置中，添加 <code>type=节点类型</code> 可以为当前节点设置节点类型。</p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=warning</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,5),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,type:`success`,card:void 0},{title:e(()=>[...l[45]||=[a(`节点一`,-1)]]),default:e(()=>[l[46]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`warning`,card:void 0},{title:e(()=>[...l[47]||=[a(`节点二`,-1)]]),default:e(()=>[l[48]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[49]||=[a(`节点三`,-1)]]),default:e(()=>[l[50]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[51]||=[a(`节点四`,-1)]]),default:e(()=>[l[52]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[98]||=o(`<h3 id="线条风格" tabindex="-1"><a class="header-anchor" href="#线条风格"><span>线条风格</span></a></h3><ul><li>在容器配置中添加 <code>line=线条风格</code> 可以为所有节点设置默认线条风格。</li><li>在列表项配置中，添加 <code>line=线条风格</code> 可以为节点设置线条风格。</li></ul><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=&quot;dotted&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=dashed</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=solid</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,5),r(D,{line:`dotted`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[53]||=[a(`节点一`,-1)]]),default:e(()=>[l[54]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[55]||=[a(`节点二`,-1)]]),default:e(()=>[l[56]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,line:`dashed`,card:void 0},{title:e(()=>[...l[57]||=[a(`节点三`,-1)]]),default:e(()=>[l[58]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,line:`solid`,card:void 0},{title:e(()=>[...l[59]||=[a(`节点四`,-1)]]),default:e(()=>[l[60]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[99]||=o(`<h3 id="带图标的节点" tabindex="-1"><a class="header-anchor" href="#带图标的节点"><span>带图标的节点</span></a></h3><p>在列表项配置中，添加 <code>icon=图标名称</code> 可以为节点添加图标。</p><p>图标名称支持 <a href="https://icon-sets.iconify.design/" target="_blank" rel="noopener noreferrer">iconify</a> 的图标名称。</p><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline placement=&quot;between&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 placement=right </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">icon=mdi:balloon</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">icon=mdi:bookmark</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger placement=right icon=mdi:bullhorn-variant-outline</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important card=true icon=&quot;mdi:cake-variant-outline&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,6),r(D,{placement:`between`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,placement:`right`,icon:`mdi:balloon`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:balloon`})]),title:e(()=>[...l[61]||=[a(`节点一`,-1)]]),default:e(()=>[l[62]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,icon:`mdi:bookmark`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:bookmark`})]),title:e(()=>[...l[63]||=[a(`节点二`,-1)]]),default:e(()=>[l[64]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,placement:`right`,icon:`mdi:bullhorn-variant-outline`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:bullhorn-variant-outline`})]),title:e(()=>[...l[65]||=[a(`节点三`,-1)]]),default:e(()=>[l[66]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:``,icon:`mdi:cake-variant-outline`},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:cake-variant-outline`})]),title:e(()=>[...l[67]||=[a(`节点四`,-1)]]),default:e(()=>[l[68]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[100]||=o(`<h3 id="卡片节点" tabindex="-1"><a class="header-anchor" href="#卡片节点"><span>卡片节点</span></a></h3><p>卡片节点可以很灵活的进行控制：</p><ul><li>在 容器配置中添加 <code>card</code> 即可使每个列表项都是卡片节点。</li><li>在列表项配置中，添加 <code>card=true</code> 即可为节点设置为卡片节点。</li><li>在列表项配置中，添加 <code>card=false</code> 即可为节点设置为非卡片节点。</li></ul><p>卡片节点的样式会受到 <code>type</code> 配置的影响。</p><div class="hint-container tip"><p class="hint-container-title">在列表项配置中添加 <code>card=true</code> / <code>card=false</code> 可以覆盖容器节点的 <code>card</code> 配置</p></div><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line highlighted"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline card</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">card=false</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点四</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p>`,8),r(D,{card:``},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[69]||=[a(`节点一`,-1)]]),default:e(()=>[l[70]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`},{title:e(()=>[...l[71]||=[a(`节点二`,-1)]]),default:e(()=>[l[72]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[73]||=[a(`节点三`,-1)]]),default:e(()=>[l[74]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[75]||=[a(`节点四`,-1)]]),default:e(()=>[l[76]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1}),l[101]||=o(`<h2 id="自定义节点类型" tabindex="-1"><a class="header-anchor" href="#自定义节点类型"><span>自定义节点类型</span></a></h2><p>时间轴的节点类型是通过 CSS Variables 控制的，主题提供了以下的 CSS 变量：</p><div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">root</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 线条颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 点颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 标题文本颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 正文文本颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-time</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 时间文本颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-bg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 图标颜色 */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-bg-soft</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* 卡片节点的背景颜色 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div><p>比如主题内置的节点类型 <code>tip</code>:</p><div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">vp-timeline-item</span><span class="highlighted-word"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">tip</span></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-soft</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div>`,5),s(`p`,null,[l[78]||=a(`可以在 `,-1),r(k,{href:`../custom/style.md`},{default:e(()=>[...l[77]||=[a(`自定义样式`,-1)]]),_:1}),l[79]||=a(` 中，覆盖内置的类型，或者添加新的类型。`,-1)]),l[102]||=s(`p`,null,[s(`strong`,null,`示例：`)],-1),s(`div`,y,[s(`div`,b,[s(`span`,x,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-css`}),l[80]||=a(`.vuepress/styles/index.css`,-1)])]),l[81]||=o(`<div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">vp-timeline-item</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">your-type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">3cf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">3cf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> rgba</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">60</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 252</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 255</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.314</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div>`,1)]),l[103]||=o(`<div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点一</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点二</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=your-type</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> card=true</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 节点三</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 正文内容</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[82]||=[a(`节点一`,-1)]]),default:e(()=>[l[83]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`your-type`,card:``},{title:e(()=>[...l[84]||=[a(`节点二`,-1)]]),default:e(()=>[l[85]||=s(`p`,null,`正文内容`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[86]||=[a(`节点三`,-1)]]),default:e(()=>[l[87]||=s(`p`,null,`正文内容`,-1)]),_:1})]),_:1})])}var C=c(u,[[`render`,S]]);export{l as _pageData,C as default};
Reference in New Issue View Git Blame Copy Permalink