mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
34 lines
16 KiB
JavaScript
34 lines
16 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-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/en/guide/components/image-card/","title":"Image Card | Guide","lang":"en-US","frontmatter":{"title":"Image Card","icon":"fa:photo","createTime":"2025/10/08 23:35:51","permalink":"/en/guide/components/image-card/","description":"Overview Use the <ImageCard> component to display image cards on a page. The Image Card differs from markdown's standard image insertion method by presenting more informat...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Image Card\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2026-03-08T13:55:27.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/components/image-card/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Image Card"}],["meta",{"property":"og:description","content":"Overview Use the <ImageCard> component to display image cards on a page. The Image Card differs from markdown's standard image insertion method by presenting more informat..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2026-03-08T13:55:27.000Z"}],["meta",{"property":"article:modified_time","content":"2026-03-08T13:55:27.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/components/image-card/"}]]},"readingTime":{"minutes":2.15,"words":646},"git":{"createdTime":1759995965000,"updatedTime":1772978127000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"97a5ba20c3eb976864d8a9ec7342a061bb73c03b","time":1772978127000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: fix typo"},{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/components/image-card.md","headers":[],"bulletin":false}`),u={name:`image-card.md`},d={class:`vp-field-group`};function f(c,l,u,f,p,m){let h=t(`VPField`),g=t(`ImageCard`,!0),_=t(`CardGrid`),v=t(`VPLink`);return n(),i(`div`,null,[l[9]||=s(`h2`,{id:`overview`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#overview`},[s(`span`,null,`Overview`)])],-1),l[10]||=s(`p`,null,[a(`Use the `),s(`code`,null,`<ImageCard>`),a(` component to display image cards on a page.`)],-1),l[11]||=s(`p`,null,`The Image Card differs from markdown's standard image insertion method by presenting more information related to the image, including title, description, author, link, etc. It is suitable for scenarios such as photography works, design works, promotional posters, and more.`,-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:`image`,required:``,type:`string`},{default:e(()=>[...l[0]||=[s(`p`,null,[a(`The image URL. Local images must use an absolute path, i.e., a path starting with `),s(`code`,null,`/`),a(`, pointing to the `),s(`code`,null,`/public`),a(` directory.`)],-1)]]),_:1}),r(h,{name:`title`,optional:``,type:`string`},{default:e(()=>[...l[1]||=[s(`p`,null,`The image title.`,-1)]]),_:1}),r(h,{name:`description`,optional:``,type:`string`},{default:e(()=>[...l[2]||=[s(`p`,null,`The image description.`,-1)]]),_:1}),r(h,{name:`author`,optional:``,type:`string`},{default:e(()=>[...l[3]||=[s(`p`,null,`The image author.`,-1)]]),_:1}),r(h,{name:`href`,optional:``,type:`string`},{default:e(()=>[...l[4]||=[s(`p`,null,`The link to navigate to when the image title is clicked.`,-1)]]),_:1}),r(h,{name:`date`,optional:``,type:`string | Date | number`},{default:e(()=>[...l[5]||=[s(`p`,null,`The image creation date.`,-1)]]),_:1}),r(h,{name:`width`,optional:``,type:`string | number`},{default:e(()=>[...l[6]||=[s(`p`,null,`The image width.`,-1)]]),_:1}),r(h,{name:`center`,optional:``,type:`boolean`},{default:e(()=>[...l[7]||=[s(`p`,null,`Whether to center the image when its width is less than the screen width.`,-1)]]),_:1})]),l[13]||=o(`<h2 id="examples" tabindex="-1"><a class="header-anchor" href="#examples"><span>Examples</span></a></h2><p><strong>Input:</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;">ImageCard</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> image</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;">https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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;">Alfanzina Lighthouse, Algarve, Portugal</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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;">The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of southern Portugal. The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit.</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> author</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;">Andreas Kunz</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> date</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;">2024/08/16</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">/></span></span></code></pre></div><p><strong>Output:</strong></p>`,4),r(g,{image:`https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp`,title:`Alfanzina Lighthouse, Algarve, Portugal`,description:`The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of
|
|
southern Portugal.The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the
|
|
treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the
|
|
region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit.`,href:`/`,author:`Andreas Kunz`,date:`2024/08/16`}),l[14]||=o(`<p>It can also be placed within a <code><CardGrid></code> component.</p><p><strong>Input:</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;">CardGrid</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;">ImageCard</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> image</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;">https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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;">Alfanzina Lighthouse, Algarve, Portugal</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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>
|
|
<span class="line"><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>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> author</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;">Andreas Kunz</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> date</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;">2024/08/16</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</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 style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ImageCard</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> image</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;">https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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;">Alfanzina Lighthouse, Algarve, Portugal</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><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>
|
|
<span class="line"><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>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> author</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;">Andreas Kunz</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
|
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> date</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;">2024/08/16</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</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 style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">CardGrid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre></div><p><strong>Output:</strong></p>`,4),r(_,null,{default:e(()=>[r(g,{image:`https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp`,title:`Alfanzina Lighthouse, Algarve, Portugal`,description:`The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of
|
|
southern Portugal.The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the
|
|
treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the
|
|
region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit.`,href:`/`,author:`Andreas Kunz`,date:`2024/08/16`}),r(g,{image:`https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp`,title:`Alfanzina Lighthouse, Algarve, Portugal`,description:`The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of
|
|
southern Portugal.The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the
|
|
treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the
|
|
region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit.`,href:`/`,author:`Andreas Kunz`,date:`2024/08/16`})]),_:1}),s(`p`,null,[r(v,{href:`/en/demos/`},{default:e(()=>[...l[8]||=[a(`View Photography Works Example`,-1)]]),_:1})])])}var p=c(u,[[`render`,f]]);export{l as _pageData,p as default}; |