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/card-DrDev7sr.js

33 lines
10 KiB
JavaScript
Raw Blame History

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/card/","title":"卡片 | 指南","lang":"zh-CN","frontmatter":{"title":"卡片","createTime":"2024/09/30 14:37:40","icon":"solar:card-broken","permalink":"/guide/markdown/card/","description":"概述 对于想要突出显示的内容，可以将其放在 卡片容器 ::: card 中。 当需要在空间足够时并排显示多个卡片，可以使用 card-grid 容器，包裹 多个卡片。 语法 Props 示例 输入： 输出： 输入： 输出： 相关信息 如果你更喜欢通过组件的方式使用 卡片，你可以查看 。","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/card/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"卡片"}],["meta",{"property":"og:description","content":"概述 对于想要突出显示的内容，可以将其放在 卡片容器 ::: card 中。 当需要在空间足够时并排显示多个卡片，可以使用 card-grid 容器，包裹 多个卡片。 语法 Props 示例 输入： 输出： 输入： 输出： 相关信息 如果你更喜欢通过组件的方式使用 卡片，你可以查看 。"}],["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/card/"}]]},"readingTime":{"minutes":1.1,"words":329},"git":{"createdTime":1727717214000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"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":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"c177fd6917e42218f71845b91dbc397972334405","time":1727717214000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#240)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/card.md","headers":[],"bulletin":false}`),u={name:`card.md`},d={class:`vp-field-group`},f={class:`hint-container info`};function p(c,l,u,p,m,h){let g=t(`VPField`),_=t(`VPCard`),v=t(`VPCardGrid`),y=t(`VPLink`);return n(),i(`div`,null,[l[9]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>对于想要突出显示的内容，可以将其放在 卡片容器 <code>::: card</code> 中。</p><p>当需要在空间足够时并排显示多个卡片，可以使用 <code>card-grid</code> 容器，包裹 多个卡片。</p><h2 id="语法" tabindex="-1"><a class="header-anchor" href="#语法"><span>语法</span></a></h2><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:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 单个卡片 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: card title=&quot;标题&quot; icon=&quot;twemoji:astonished-face&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>
<span class="line"></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;">:::: card-grid</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: card title=&quot;卡片标题 1&quot; icon=&quot;twemoji:astonished-face&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>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: card title=&quot;卡片标题 2&quot; icon=&quot;twemoji:astonished-face&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>
<span class="line"></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></div><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span>Props</span></a></h2>`,6),s(`div`,d,[r(g,{name:`title`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[0]||=[s(`p`,null,`卡片标题`,-1)]]),_:1}),r(g,{name:`icon`,optional:``,type:`string`},{default:e(()=>[...l[1]||=[s(`p`,null,[a(`卡片图标 支持传入图片链接，还可以传入 `),s(`a`,{href:`https://icon-sets.iconify.design/`,target:`_blank`,rel:`noopener noreferrer`},`iconify`),a(` 图标名。`)],-1)]]),_:1})]),l[10]||=o(`<h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><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;">::: card title=&quot;卡片标题&quot; icon=&quot;twemoji:astonished-face&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><p><strong>输出：</strong></p>`,4),r(_,{title:`卡片标题`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[2]||=[s(`p`,null,`这里是卡片内容。`,-1)]]),_:1}),l[11]||=o(`<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;">:::: card-grid</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: card title=&quot;卡片标题 1&quot; icon=&quot;twemoji:astonished-face&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>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: card title=&quot;卡片标题 2&quot; icon=&quot;twemoji:astonished-face&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>
<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><p><strong>输出：</strong></p>`,3),r(v,null,{default:e(()=>[r(_,{title:`卡片标题 1`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[3]||=[s(`p`,null,`这里是卡片内容。`,-1)]]),_:1}),r(_,{title:`卡片标题 2`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[4]||=[s(`p`,null,`这里是卡片内容。`,-1)]]),_:1})]),_:1}),s(`div`,f,[l[8]||=s(`p`,{class:`hint-container-title`},`相关信息`,-1),s(`p`,null,[l[6]||=a(`如果你更喜欢通过组件的方式使用 卡片，你可以查看 `,-1),r(y,{href:`/guide/features/component/#card`},{default:e(()=>[...l[5]||=[a(`卡片组件`,-1)]]),_:1}),l[7]||=a(` 。`,-1)])])])}var m=c(u,[[`render`,p]]);export{l as _pageData,m as default};
Reference in New Issue View Git Blame Copy Permalink