mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
17 lines
14 KiB
JavaScript
17 lines
14 KiB
JavaScript
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-TY2dTQsQ.js";import{t as c}from"./plugin-vue_export-helper-PrwMxFSs.js";var l=JSON.parse('{"path":"/guide/components/link-card/","title":"链接卡片 | 指南","lang":"zh-CN","frontmatter":{"title":"链接卡片","icon":"solar:card-send-linear","createTime":"2024/08/18 23:14:00","permalink":"/guide/components/link-card/","description":"概述 使用 <LinkCard> 组件在页面中显示链接卡片。 Props 插槽 示例 输入： 输出： 使用组件插槽，可以实现更丰富的表现。 输入： 输出： 相关信息 在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。 否则将被识别为普通文本。","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/components/link-card/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"链接卡片"}],["meta",{"property":"og:description","content":"概述 使用 <LinkCard> 组件在页面中显示链接卡片。 Props 插槽 示例 输入： 输出： 使用组件插槽，可以实现更丰富的表现。 输入： 输出： 相关信息 在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。 否则将被识别为普通文本。"}],["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/components/link-card/"}]]},"readingTime":{"minutes":1.38,"words":413},"git":{"createdTime":1724002416000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":7,"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":"149732520a02b2a2042b466869f342e019cb6e88","time":1747364621000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat: add multiple provider support for icon, close #568 (#596)"},{"hash":"d14961d038bc1a13318ce14ee9fe25a8b2c9ac99","time":1746023641000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"},{"hash":"a0de3c660a60dd24bd4f6d3663e144a4a3c1aa39","time":1744723610000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add <code>target/rel</code> props support for <code>LinkCard</code> (#556)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"220940b2a574761d69269d0c76c6db1a4d33af01","time":1725025151000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"perf(theme): optimize ` ui"},{"hash":"e3b1c3cc531ac9e163ec809c2a3ccdc35b12a4bb","time":1724002416000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs"}]},"autoDesc":true,"filePathRelative":"guide/components/link-card.md","headers":[],"bulletin":false}'),u={name:`link-card.md`},d={class:`vp-field-group`};function f(c,l,u,f,p,m){let h=t(`VPField`),g=t(`VPLink`),_=t(`LinkCard`,!0);return n(),i(`div`,null,[l[10]||=s(`h2`,{id:`概述`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#概述`},[s(`span`,null,`概述`)])],-1),l[11]||=s(`p`,null,[a(`使用 `),s(`code`,null,`<LinkCard>`),a(` 组件在页面中显示链接卡片。`)],-1),l[12]||=s(`h2`,{id:`props`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#props`},[s(`span`,null,`Props`)])],-1),s(`div`,d,[r(h,{name:`title`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[0]||=[s(`p`,null,`链接卡片标题`,-1)]]),_:1}),r(h,{name:`icon`,optional:``,type:`string | { svg: string }`,"default-value":``},{default:e(()=>[s(`p`,null,[l[2]||=a(`显示在标题左侧的图标，支持 `,-1),r(g,{href:`../features/icon.md`},{default:e(()=>[...l[1]||=[a(`markdown.icon`,-1)]]),_:1}),l[3]||=a(` 配置的提供商的图标，也可以使用 图片链接`,-1)])]),_:1}),r(h,{name:`href`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[4]||=[s(`p`,null,`链接卡片跳转地址`,-1)]]),_:1}),r(h,{name:`description`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[5]||=[s(`p`,null,`链接卡片描述，建议使用组件默认插槽添加描述内容`,-1)]]),_:1}),r(h,{name:`target`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[6]||=[s(`p`,null,`链接跳转方式`,-1)]]),_:1})]),l[13]||=o(`<h2 id="插槽" tabindex="-1"><a class="header-anchor" href="#插槽"><span>插槽</span></a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>卡片详情内容</td></tr><tr><td>title</td><td>自定义标题</td></tr></tbody></table><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:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> description</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">这里是卡片内容</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">twemoji:astonished-face</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /></span></span></code></pre></div><p><strong>输出：</strong></p>`,6),r(_,{title:`卡片标题`,href:`/`,description:`这里是卡片内容`}),r(_,{icon:`twemoji:astonished-face`,title:`卡片标题`,href:`/`}),l[14]||=o(`<p>使用组件插槽，可以实现更丰富的表现。</p><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:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></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:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> #title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">color: red</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">卡片标题</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></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:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre></div><p><strong>输出：</strong></p>`,4),r(_,{title:`卡片标题`,href:`/`},{default:e(()=>[...l[7]||=[s(`ul`,null,[s(`li`,null,`这里是卡片内容`),s(`li`,null,`这里是卡片内容`)],-1)]]),_:1}),r(_,{href:`/`},{title:e(()=>[...l[8]||=[s(`span`,{style:{color:`red`}},`卡片标题`,-1)]]),default:e(()=>[l[9]||=s(`ul`,null,[s(`li`,null,`这里是卡片内容`),s(`li`,null,`这里是卡片内容`)],-1)]),_:1}),l[15]||=s(`div`,{class:`hint-container info`},[s(`p`,{class:`hint-container-title`},`相关信息`),s(`p`,null,`在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。 否则将被识别为普通文本。`)],-1)])}var p=c(u,[[`render`,f]]);export{l as _pageData,p as default}; |