链接卡片组件
引入组件
ts
import DefaultTheme from 'vitepress/theme'
import { BoxCube, Card, Links, Pill } from '@theojs/lumen'
export default {
extends: DefaultTheme,
enhanceApp: ({ app }) => {
app.component('Pill', Pill)
app.component('Links', Links)
app.component('Card', Card)
app.component('BoxCube', BoxCube)
}
}Pill
输入
template
<!-- iconify 图标 + 无链接 -->
<Pill :icon="{ icon: 'line-md:iconify2-static', color: '#1769AA' }" size="16" name="Iconify" />
<Pill icon="vscode-icons:file-type-vue" name="Vue" link="https://vuejs.org/" />
<!-- 深浅模式的 iconify 图标 -->
<Pill
:icon="{ light: 'ion:logo-vercel', dark: 'ion:logo-vercel', color: { light: '#000000', dark: '#FFFFFF' } }"
name="<p style='margin:0; font-style: italic;'>Vercel</p>"
link="https://vercel.com/"
/>
<Pill
:icon="{ light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' }"
name="Vite"
link="https://vitejs.dev/"
/>template
<!-- svg 图标 -->
<Pill
:icon="{
svg: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 250'><rect width='256' height='249.6' fill='#001e36' rx='42.5'/><path fill='#31a8ff' d='M57.644 175.035V65.297q0-1.201 1.031-1.202l1.087-.003l1.858-.02l2.582-.051l8.65-.183l9.275-.172q4.893-.085 9.702-.086q13.05 0 21.982 3.263a38.1 38.1 0 0 1 14.34 8.758a33.6 33.6 0 0 1 7.814 12.108a40.2 40.2 0 0 1 2.405 13.824q0 13.741-6.355 22.669a35.9 35.9 0 0 1-16.6 12.756l-.573.21c-6.973 2.601-14.695 3.541-23.164 3.6l-1.316.004l-1.953-.01l-.985-.014l-1.098-.026l-.662-.026l-.402-.021l-.989-.036l-1.209-.025l-1.82-.013l-.405-.001v34.263a1.366 1.366 0 0 1-1.546 1.546H58.847q-1.204.001-1.203-1.374M80.84 84.703v35.792q2.23.173 4.12.172h5.668a40.3 40.3 0 0 0 11.533-1.727l.746-.233a18.5 18.5 0 0 0 8.759-5.668q3.228-3.807 3.344-10.492l.005-.499c.09-3.322-.774-6.6-2.491-9.445a16 16 0 0 0-7.47-6.097a31.8 31.8 0 0 0-12.537-2.146l-2.178.006l-1.374.012l-1.311.017l-1.85.036l-1.35.038l-.701.026l-.937.044l-.798.049l-.455.036l-.393.038l-.173.02zm123.93 29.284a40.2 40.2 0 0 0-9.458-3.442l-.76-.164a54.3 54.3 0 0 0-11.009-1.363l-.926-.011a22.2 22.2 0 0 0-6.44.773a5.8 5.8 0 0 0-3.35 2.146a5.4 5.4 0 0 0-.858 2.92a4.56 4.56 0 0 0 1.03 2.747a11.7 11.7 0 0 0 3.235 2.637l.372.197a72 72 0 0 0 7.556 3.52a75 75 0 0 1 16.4 7.814a24.94 24.94 0 0 1 8.416 8.845a23.6 23.6 0 0 1 2.49 10.99a24.7 24.7 0 0 1-4.122 14.169a27.1 27.1 0 0 1-11.936 9.53q-7.556 3.32-18.557 3.432l-.762.004a70 70 0 0 1-13.556-1.188l-.956-.186a46.3 46.3 0 0 1-10.905-3.435a2.22 2.22 0 0 1-1.202-1.89v-18.718a1.01 1.01 0 0 1 .43-.945a.83.83 0 0 1 .944.086a45.9 45.9 0 0 0 13.223 5.238a54.5 54.5 0 0 0 12.537 1.632q6.009 0 8.844-1.546a4.86 4.86 0 0 0 2.834-4.465q0-2.23-2.576-4.293q-1.08-.864-3.097-1.88l-.643-.316l-.686-.323l-.36-.164l-.754-.334l-.393-.17l-.82-.344l-.427-.175l-.886-.355l-.46-.18l-.953-.367l-.997-.373a63 63 0 0 1-15.199-7.728a26.2 26.2 0 0 1-8.071-9.016a23.7 23.7 0 0 1-2.49-10.905a24.6 24.6 0 0 1 3.606-12.88c2.7-4.27 6.576-7.67 11.163-9.788q7.555-3.776 18.89-3.779a83.6 83.6 0 0 1 13.224.945a34.7 34.7 0 0 1 9.206 2.49c.473.136.854.485 1.03.945c.117.419.174.852.172 1.288v17.345c.025.41-.172.803-.515 1.03a1.66 1.66 0 0 1-1.478 0'/></svg>`
}"
name="Photoshop"
link="https://www.adobe.com/sg/products/photoshop.html"
/>
<!-- 深浅模式 svg 图标 -->
<Pill
:icon="{
svg: {
dark: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><g clip-path='url(#skillIconsPiniaLight4)'><path fill='#f4f2ed' d='M196 0H60C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h136c33.137 0 60-26.863 60-60V60c0-33.137-26.863-60-60-60'/><g clip-path='url(#skillIconsPiniaLight5)'><path fill='url(#skillIconsPiniaLight0)' fill-rule='evenodd' d='M121.463 124.778c15.178-14.442 10.55-32.3-3.192-53.939c-13.741-21.638-41.408-29.333-46.57-24.421c-5.163 4.912-6.312 40.025 7.43 61.664c13.74 21.638 27.153 31.138 42.332 16.696' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaLight1)' fill-rule='evenodd' d='M134.584 126.783c11.224 17.674 26.233 11.209 44.813-6.47s26.289-51.539 22.472-57.55s-32.835-5.706-51.415 11.973s-27.094 34.373-15.87 52.047' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaLight2)' fill-rule='evenodd' d='M128.444 117.059c18.636 2.283 25.968-14.919 29.39-42.722c3.421-27.803-10.661-57.187-17-57.963c-6.338-.777-27.638 24.272-31.059 52.076c-3.422 27.803.032 46.325 18.669 48.609' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaLight3)' fill-rule='evenodd' d='M123.756 240c39.084 0 70.78-11.339 70.78-62.76s-31.696-93.617-70.78-93.617S53 125.819 53 177.24S84.671 240 123.756 240' clip-rule='evenodd'/><path fill='#eaadcc' d='M159.505 166.742c5.583 0 10.109-2.102 10.109-4.696s-4.526-4.696-10.109-4.696s-10.11 2.103-10.11 4.696c0 2.594 4.526 4.696 10.11 4.696m-74.868-2.853c5.542.68 10.291-.856 10.607-3.43c.317-2.574-3.919-5.212-9.46-5.892c-5.543-.679-10.292.857-10.608 3.431s3.92 5.212 9.461 5.891'/><path stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='6' d='M130.232 160.383q-4.564 3.705-10.543 3.022q-5.98-.682-8.864-4.958'/><path fill='#000' fill-rule='evenodd' d='M91.079 135.944c2.79-.097 5.356.944 7.248 2.707a10.06 10.06 0 0 1 3.209 7.032a10.06 10.06 0 0 1-2.71 7.238a10.1 10.1 0 0 1-7.04 3.205a10.1 10.1 0 0 1-7.248-2.707a10.06 10.06 0 0 1-3.208-7.032a10.06 10.06 0 0 1 2.709-7.239a10.08 10.08 0 0 1 7.04-3.204' clip-rule='evenodd'/><path fill='#fff' fill-rule='evenodd' d='M91.61 144.384a3.291 3.291 0 0 0-6.579.229a3.29 3.29 0 0 0 3.405 3.171a3.29 3.29 0 0 0 3.174-3.4' clip-rule='evenodd'/><path fill='#000' fill-rule='evenodd' d='M152.335 138.507c2.79-.097 5.355.944 7.247 2.706a10.06 10.06 0 0 1 3.209 7.032a10.06 10.06 0 0 1-2.709 7.239a10.08 10.08 0 0 1-7.041 3.204a10.08 10.08 0 0 1-7.247-2.707a10.06 10.06 0 0 1-3.209-7.032a10.06 10.06 0 0 1 2.709-7.238a10.08 10.08 0 0 1 7.041-3.204' clip-rule='evenodd'/><path fill='#fff' stroke='#fff' stroke-width='3' d='M100.126 145.732c.168 4.796-3.588 8.819-8.39 8.986c-4.8.167-8.828-3.585-8.996-8.381s3.587-8.818 8.388-8.985s8.83 3.584 8.998 8.38Zm2.819-.098c-.222-6.351-5.557-11.32-11.916-11.098c-6.358.221-11.331 5.548-11.108 11.899s5.556 11.32 11.914 11.099c6.359-.221 11.333-5.549 11.11-11.9Zm58.436 2.661c.168 4.796-3.587 8.819-8.388 8.986s-8.83-3.585-8.998-8.381s3.588-8.819 8.389-8.986s8.829 3.585 8.997 8.381Zm2.82-.098c-.223-6.351-5.557-11.32-11.916-11.099c-6.358.222-11.332 5.549-11.109 11.9c.222 6.351 5.557 11.32 11.915 11.099c6.359-.222 11.332-5.549 11.11-11.9Z'/><path fill='#fff' fill-rule='evenodd' d='M152.865 146.947a3.29 3.29 0 0 0-3.404-3.171a3.288 3.288 0 1 0 .23 6.571a3.29 3.29 0 0 0 3.174-3.4' clip-rule='evenodd'/><path stroke='#ecb732' stroke-linecap='round' stroke-width='11' d='m70.163 182.004l34.796 36.159m-4.702-31.933l-22.1 23.481m98.746-27.707l-34.796 36.159m4.702-31.933l22.1 23.481'/><path stroke='#ffc73b' stroke-linecap='round' stroke-width='11' d='m137.875 102.172l-23.041 23.01m18.339 0l-23.041-23.01'/></g></g><defs><linearGradient id='skillIconsPiniaLight0' x1='7650.74' x2='13921.9' y1='-5867.43' y2='11695.8' gradientUnits='userSpaceOnUse'><stop stop-color='#52ce63'/><stop offset='1' stop-color='#51a256'/></linearGradient><linearGradient id='skillIconsPiniaLight1' x1='6131.59' x2='-11449.7' y1='7642.74' y2='13929.1' gradientUnits='userSpaceOnUse'><stop stop-color='#52ce63'/><stop offset='1' stop-color='#51a256'/></linearGradient><linearGradient id='skillIconsPiniaLight2' x1='7781.96' x2='4321.49' y1='952.47' y2='29199.5' gradientUnits='userSpaceOnUse'><stop stop-color='#8ae99c'/><stop offset='1' stop-color='#52ce63'/></linearGradient><linearGradient id='skillIconsPiniaLight3' x1='23250' x2='19508.6' y1='13116.7' y2='74634.6' gradientUnits='userSpaceOnUse'><stop stop-color='#ffe56c'/><stop offset='1' stop-color='#ffc63a'/></linearGradient><clipPath id='skillIconsPiniaLight4'><path fill='#fff' d='M0 0h256v256H0z'/></clipPath><clipPath id='skillIconsPiniaLight5'><path fill='#fff' d='M53 16h150v224H53z'/></clipPath></defs></g></svg>`,
light: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><g clip-path='url(#skillIconsPiniaDark4)'><path fill='#242938' d='M196 0H60C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h136c33.137 0 60-26.863 60-60V60c0-33.137-26.863-60-60-60'/><g clip-path='url(#skillIconsPiniaDark5)'><path fill='url(#skillIconsPiniaDark0)' fill-rule='evenodd' d='M121.463 124.778c15.178-14.442 10.55-32.3-3.192-53.939c-13.741-21.638-41.408-29.333-46.57-24.421c-5.163 4.912-6.312 40.025 7.43 61.664c13.74 21.638 27.153 31.138 42.332 16.696' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaDark1)' fill-rule='evenodd' d='M134.584 126.783c11.224 17.674 26.233 11.209 44.813-6.47s26.289-51.539 22.472-57.55s-32.835-5.706-51.415 11.973s-27.094 34.373-15.87 52.047' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaDark2)' fill-rule='evenodd' d='M128.444 117.059c18.636 2.283 25.968-14.919 29.39-42.722c3.421-27.803-10.661-57.187-17-57.963c-6.338-.777-27.638 24.272-31.059 52.076c-3.422 27.803.032 46.325 18.669 48.609' clip-rule='evenodd'/><path fill='url(#skillIconsPiniaDark3)' fill-rule='evenodd' d='M123.756 240c39.084 0 70.78-11.339 70.78-62.76s-31.696-93.617-70.78-93.617S53 125.819 53 177.24S84.671 240 123.756 240' clip-rule='evenodd'/><path fill='#eaadcc' d='M159.505 166.742c5.583 0 10.109-2.102 10.109-4.696s-4.526-4.696-10.109-4.696s-10.11 2.103-10.11 4.696c0 2.594 4.526 4.696 10.11 4.696m-74.868-2.853c5.542.68 10.291-.856 10.607-3.43c.317-2.574-3.919-5.212-9.46-5.892c-5.543-.679-10.292.857-10.608 3.431s3.92 5.212 9.461 5.891'/><path stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='6' d='M130.232 160.383q-4.564 3.705-10.543 3.022q-5.98-.682-8.864-4.958'/><path fill='#000' fill-rule='evenodd' d='M91.079 135.944c2.79-.097 5.356.944 7.248 2.707a10.06 10.06 0 0 1 3.209 7.032a10.06 10.06 0 0 1-2.71 7.238a10.1 10.1 0 0 1-7.04 3.205a10.1 10.1 0 0 1-7.248-2.707a10.06 10.06 0 0 1-3.208-7.032a10.06 10.06 0 0 1 2.709-7.239a10.08 10.08 0 0 1 7.04-3.204' clip-rule='evenodd'/><path fill='#fff' fill-rule='evenodd' d='M91.61 144.384a3.291 3.291 0 0 0-6.579.229a3.29 3.29 0 0 0 3.405 3.171a3.29 3.29 0 0 0 3.174-3.4' clip-rule='evenodd'/><path fill='#000' fill-rule='evenodd' d='M152.335 138.507c2.79-.097 5.355.944 7.247 2.706a10.06 10.06 0 0 1 3.209 7.032a10.06 10.06 0 0 1-2.709 7.239a10.08 10.08 0 0 1-7.041 3.204a10.08 10.08 0 0 1-7.247-2.707a10.06 10.06 0 0 1-3.209-7.032a10.06 10.06 0 0 1 2.709-7.238a10.08 10.08 0 0 1 7.041-3.204' clip-rule='evenodd'/><path fill='#fff' stroke='#fff' stroke-width='3' d='M100.126 145.732c.168 4.796-3.588 8.819-8.39 8.986c-4.8.167-8.828-3.585-8.996-8.381s3.587-8.818 8.388-8.985s8.83 3.584 8.998 8.38Zm2.819-.098c-.222-6.351-5.557-11.32-11.916-11.098c-6.358.221-11.331 5.548-11.108 11.899s5.556 11.32 11.914 11.099c6.359-.221 11.333-5.549 11.11-11.9Zm58.436 2.661c.168 4.796-3.587 8.819-8.388 8.986s-8.83-3.585-8.998-8.381s3.588-8.819 8.389-8.986s8.829 3.585 8.997 8.381Zm2.82-.098c-.223-6.351-5.557-11.32-11.916-11.099c-6.358.222-11.332 5.549-11.109 11.9c.222 6.351 5.557 11.32 11.915 11.099c6.359-.222 11.332-5.549 11.11-11.9Z'/><path fill='#fff' fill-rule='evenodd' d='M152.865 146.947a3.29 3.29 0 0 0-3.404-3.171a3.288 3.288 0 1 0 .23 6.571a3.29 3.29 0 0 0 3.174-3.4' clip-rule='evenodd'/><path stroke='#ecb732' stroke-linecap='round' stroke-width='11' d='m70.163 182.004l34.796 36.159m-4.702-31.933l-22.1 23.481m98.746-27.707l-34.796 36.159m4.702-31.933l22.1 23.481'/><path stroke='#ffc73b' stroke-linecap='round' stroke-width='11' d='m137.875 102.172l-23.041 23.01m18.339 0l-23.041-23.01'/></g></g><defs><linearGradient id='skillIconsPiniaDark0' x1='7650.74' x2='13921.9' y1='-5867.43' y2='11695.8' gradientUnits='userSpaceOnUse'><stop stop-color='#52ce63'/><stop offset='1' stop-color='#51a256'/></linearGradient><linearGradient id='skillIconsPiniaDark1' x1='6131.59' x2='-11449.7' y1='7642.74' y2='13929.1' gradientUnits='userSpaceOnUse'><stop stop-color='#52ce63'/><stop offset='1' stop-color='#51a256'/></linearGradient><linearGradient id='skillIconsPiniaDark2' x1='7781.96' x2='4321.49' y1='952.47' y2='29199.5' gradientUnits='userSpaceOnUse'><stop stop-color='#8ae99c'/><stop offset='1' stop-color='#52ce63'/></linearGradient><linearGradient id='skillIconsPiniaDark3' x1='23250' x2='19508.6' y1='13116.7' y2='74634.6' gradientUnits='userSpaceOnUse'><stop stop-color='#ffe56c'/><stop offset='1' stop-color='#ffc63a'/></linearGradient><clipPath id='skillIconsPiniaDark4'><path fill='#fff' d='M0 0h256v256H0z'/></clipPath><clipPath id='skillIconsPiniaDark5'><path fill='#fff' d='M53 16h150v224H53z'/></clipPath></defs></g></svg>`
}
}"
name="Pinia"
link="https://pinia.vuejs.org/"
/>template
<!-- 图片 -->
<Pill image="https://i.theojs.cn/logo/alipay.svg" name="支付宝" link="https://i.theojs.cn/alipay.webp" />
<!-- 深浅模式的图片 -->
<Pill
:image="{
light: 'https://i.theojs.cn/logo/github.svg',
dark: 'https://i.theojs.cn/logo/github-dark.svg',
crop: true
}"
name="GitHub"
link="https://github.com/"
/>输出
VueVercel
VitePhotoshopPinia支付宝GitHub
参数说明
| 字段 | 类型 | 描述 | 是否必填 |
|---|---|---|---|
name | string | 名称，作为显示文本。 | 必填 |
link | LinkType | 链接地址，可为外部 URL 或站内路径。 | 可选 |
rel | RelType | 链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。 | 可选 |
icon | IconType | 图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
image | ImageType | 图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType | 可选 |
size | SizeType | 控制图片或者图标的width和height 默认值为 14 | 可选 |
Links
输入
template
<!-- iconify 图标 + 无链接 -->
<Links
:items="[
{
icon: { icon: 'line-md:iconify2-static', color: '#1769AA' },
size: 48,
name: 'iconify',
desc: '开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。它允许开发者轻松地在项目中使用各种图标，并且支持深浅模式切换。'
}
]"
/>
<Links
:grid="3"
:items="[
// 深浅色模式的 iconify 图标 + v-html 渲染
{
icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel', color: { light: '#000000', dark: '#FFFFFF' } },
name: `<p style='margin:0; font-style: italic;'>Vercel</p>`,
desc: '适用于前端框架的无服务器部署平台，支持静态生成和即时预览。',
link: 'https://vercel.com/'
},
// 深浅模式 iconify 图标，无 color
{
icon: { light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' },
name: 'Vite',
desc: '极速的现代前端构建工具，支持热更新与按需加载。',
link: 'https://vitejs.dev/'
},
// 无图标
{
name: 'MDN Web Docs',
desc: '权威的 Web 技术文档库，涵盖 HTML、CSS 和 JavaScript。',
link: 'https://developer.mozilla.org/'
}
]"
/>template
<Links
:grid="2"
:items="[
// svg 图标
{
icon: {
svg: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 331'><defs><linearGradient id='logosPinia0' x1='55.342%' x2='42.817%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia1' x1='55.349%' x2='42.808%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia2' x1='50%' x2='50%' y1='0%' y2='58.811%'><stop offset='0%' stop-color='#8ae99c'/><stop offset='100%' stop-color='#52ce63'/></linearGradient><linearGradient id='logosPinia3' x1='51.378%' x2='44.585%' y1='17.473%' y2='100%'><stop offset='0%' stop-color='#ffe56c'/><stop offset='100%' stop-color='#ffc63a'/></linearGradient></defs><path fill='url(#logosPinia0)' d='M67.56 173.328c30.366-2.985 41.08-27.648 44.735-64.823c3.654-37.175-21.174-70.814-31.502-69.799s-43.15 40.322-46.805 77.497c-3.654 37.175 3.205 60.11 33.572 57.125' transform='rotate(-38 72.877 106.136)'/><path fill='url(#logosPinia1)' d='M184.454 186.277c30.367 2.986 36.394-20.032 32.74-57.207c-3.655-37.175-35.645-76.4-45.973-77.415s-35.989 32.542-32.334 69.717s15.201 61.92 45.567 64.905' transform='rotate(52 178.34 119.085)'/><path fill='url(#logosPinia2)' d='M129.232 151.601c27.341 0 34.878-26.184 34.878-67.013S138.531 3.745 129.232 3.745S93.605 43.758 93.605 84.588c0 40.829 8.286 67.013 35.627 67.013' transform='rotate(7 128.858 77.673)'/><path fill='url(#logosPinia3)' d='M113.386 330.307c56.896 0 103.038-16.528 103.038-91.482s-46.142-136.462-103.038-136.462c-56.897 0-103.002 61.507-103.002 136.462s46.105 91.482 103.002 91.482'/><ellipse cx='165.427' cy='216.677' fill='#eaadcc' rx='14.717' ry='6.845'/><ellipse cx='57.273' cy='212.57' fill='#eaadcc' rx='14.717' ry='6.845' transform='rotate(7 57.273 212.57)'/><path d='M96.266 210.285a2.054 2.054 0 1 0-3.406 2.295c3.151 4.676 7.997 7.39 14.373 8.119c6.348.725 12.016-.902 16.877-4.852a2.054 2.054 0 1 0-2.59-3.187c-3.999 3.249-8.563 4.559-13.82 3.958c-5.23-.598-8.986-2.7-11.434-6.333M65.818 178.63a14.67 14.67 0 0 1 10.551 3.945a14.67 14.67 0 0 1 4.672 10.25a14.67 14.67 0 0 1-3.945 10.55a14.67 14.67 0 0 1-10.25 4.672a14.67 14.67 0 0 1-10.551-3.945a14.67 14.67 0 0 1-4.67-10.25a14.67 14.67 0 0 1 3.944-10.55a14.67 14.67 0 0 1 10.249-4.672'/><path fill='#fff' d='M66.59 190.932a4.792 4.792 0 1 0-9.578.336a4.792 4.792 0 0 0 9.579-.336'/><path d='M154.99 182.366a14.67 14.67 0 0 1 10.552 3.944a14.67 14.67 0 0 1 4.67 10.25a14.67 14.67 0 0 1-3.944 10.551a14.67 14.67 0 0 1-10.25 4.671a14.67 14.67 0 0 1-10.55-3.945a14.67 14.67 0 0 1-4.672-10.25a14.67 14.67 0 0 1 3.945-10.55a14.67 14.67 0 0 1 10.25-4.671'/><path fill='#fff' d='M65.71 175.552c9.824-.343 18.066 7.342 18.409 17.165s-7.342 18.065-17.166 18.408s-18.064-7.342-18.407-17.166c-.343-9.823 7.341-18.064 17.164-18.407m12.252 17.38c-.224-6.423-5.613-11.448-12.037-11.223c-6.422.224-11.447 5.612-11.222 12.035c.224 6.424 5.612 11.448 12.035 11.224s11.448-5.612 11.224-12.036m76.921-13.645c9.824-.343 18.065 7.342 18.408 17.165s-7.342 18.065-17.165 18.408s-18.065-7.342-18.408-17.165s7.342-18.065 17.165-18.408m12.251 17.38c-.224-6.423-5.612-11.447-12.036-11.223s-11.448 5.613-11.223 12.036s5.612 11.448 12.035 11.224c6.424-.225 11.448-5.613 11.224-12.037'/><path fill='#fff' d='M155.763 194.668a4.792 4.792 0 1 0-9.578.335a4.792 4.792 0 0 0 9.578-.335'/><path fill='#ecb732' d='m38.083 243.16l22.33 23.235l16.022-17.044a3.765 3.765 0 0 1 5.486 5.157l-16.283 17.324l23.1 24.036a3.765 3.765 0 1 1-5.43 5.218l-22.834-23.761l-10.725 11.41a3.765 3.765 0 1 1-5.486-5.158l10.986-11.688l-22.595-23.511a3.765 3.765 0 1 1 5.43-5.218m149.956 0a3.765 3.765 0 1 1 5.429 5.218l-22.596 23.511l10.988 11.688a3.765 3.765 0 0 1-.042 5.201l-.123.121a3.765 3.765 0 0 1-5.322-.165l-10.725-11.41l-22.834 23.762a3.765 3.765 0 0 1-5.197.222l-.127-.116a3.765 3.765 0 0 1-.105-5.324l23.1-24.036l-16.284-17.324a3.765 3.765 0 0 1 .042-5.2l.123-.121a3.765 3.765 0 0 1 5.321.164l16.021 17.044z'/><path fill='#ffc73b' d='M136.602 126.74a3.765 3.765 0 0 1 0 5.323l-17.53 17.531l10.684 10.686a3.765 3.765 0 0 1 .12 5.2l-.12.125a3.765 3.765 0 0 1-5.324 0l-10.686-10.686l-10.686 10.686a3.765 3.765 0 1 1-5.324-5.325l10.685-10.686l-17.53-17.53a3.765 3.765 0 0 1-.12-5.2l.12-.125a3.765 3.765 0 0 1 5.324 0l17.531 17.53l17.531-17.53a3.765 3.765 0 0 1 5.325 0'/></svg>`
},
name: 'Pinia',
desc: 'Vue 3 的状态管理库，简洁且支持类型推导。',
link: 'https://pinia.vuejs.org/'
},
// 深浅模式 svg 图标
{
icon: {
svg: {
light: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#242938' rx='60'/><path fill='url(#skillIconsNetlifyDark0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyDark0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`,
dark: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#f4f2ed' rx='60'/><path fill='url(#skillIconsNetlifyLight0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyLight0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`
}
},
name: 'Netlify',
desc: '提供 CI/CD、自动构建和无服务器函数的前端部署平台。',
link: 'https://www.netlify.com/'
}
]"
/>template
<Links
:grid="2"
:items="[
// 普通图片
{
image: 'https://i.theojs.cn/logo/alipay.svg',
name: '支付宝',
desc: '移动支付平台，提供便捷的在线支付和转账服务',
link: 'https://i.theojs.cn/alipay.webp',
linkText: '立即查看'
},
// 深浅模式图片
{
image: {
light: 'https://i.theojs.cn/logo/github.svg',
dark: 'https://i.theojs.cn/logo/github-dark.svg',
crop: true
},
name: 'GitHub',
desc: '全球最大代码托管平台，支持版本控制和协作开发。',
link: 'https://github.com/',
linkText: '跳转链接'
}
]"
/>输出
Vercel
适用于前端框架的无服务器部署平台，支持静态生成和即时预览。
Vite极速的现代前端构建工具，支持热更新与按需加载。
MDN Web Docs权威的 Web 技术文档库，涵盖 HTML、CSS 和 JavaScript。
参数说明
| 字段 | 类型 | 描述 | 是否必填 |
|---|---|---|---|
grid | number | 网格列数。默认为单列，传入数字如 3、4 可指定多列。 | 可选 |
name | string | 名称，作为显示文本。 | 必填 |
desc | string | 描述文本，用于补充说明信息。 | 可选 |
link | LinkType | 链接地址，支持站内路径或外部 URL。 | 可选 |
linkText | string | 链接地址的描述文本 | 可选 |
rel | RelType | 链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。 | 可选 |
icon | IconType | 图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
image | ImageType | 图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType | 可选 |
size | SizeType | 控制图片或者图标的width和height 默认值为 32 | 可选 |
BoxCube
输入
template
<BoxCube
:grid="6"
:items="[
// 普通 iconify 图标 + 无链接
{
icon: { icon: 'line-md:iconify2-static', color: '#1769AA' },
name: 'iconify'
},
// 深浅色模式的 iconify 图标 + v-html 渲染
{
icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel', color: { light: '#000000', dark: '#FFFFFF' } },
name: `<p style='margin:0; font-style: italic;'>Vercel</p>`,
link: 'https://vercel.com/'
},
// 深浅色模式 iconify 图标（无 color）
{
icon: { light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' },
name: 'Vite',
link: 'https://vitejs.dev/'
}
]"
/>template
<BoxCube
:grid="6"
:items="[
// svg 图标
{
icon: {
svg: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 331'><defs><linearGradient id='logosPinia0' x1='55.342%' x2='42.817%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia1' x1='55.349%' x2='42.808%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia2' x1='50%' x2='50%' y1='0%' y2='58.811%'><stop offset='0%' stop-color='#8ae99c'/><stop offset='100%' stop-color='#52ce63'/></linearGradient><linearGradient id='logosPinia3' x1='51.378%' x2='44.585%' y1='17.473%' y2='100%'><stop offset='0%' stop-color='#ffe56c'/><stop offset='100%' stop-color='#ffc63a'/></linearGradient></defs><path fill='url(#logosPinia0)' d='M67.56 173.328c30.366-2.985 41.08-27.648 44.735-64.823c3.654-37.175-21.174-70.814-31.502-69.799s-43.15 40.322-46.805 77.497c-3.654 37.175 3.205 60.11 33.572 57.125' transform='rotate(-38 72.877 106.136)'/><path fill='url(#logosPinia1)' d='M184.454 186.277c30.367 2.986 36.394-20.032 32.74-57.207c-3.655-37.175-35.645-76.4-45.973-77.415s-35.989 32.542-32.334 69.717s15.201 61.92 45.567 64.905' transform='rotate(52 178.34 119.085)'/><path fill='url(#logosPinia2)' d='M129.232 151.601c27.341 0 34.878-26.184 34.878-67.013S138.531 3.745 129.232 3.745S93.605 43.758 93.605 84.588c0 40.829 8.286 67.013 35.627 67.013' transform='rotate(7 128.858 77.673)'/><path fill='url(#logosPinia3)' d='M113.386 330.307c56.896 0 103.038-16.528 103.038-91.482s-46.142-136.462-103.038-136.462c-56.897 0-103.002 61.507-103.002 136.462s46.105 91.482 103.002 91.482'/><ellipse cx='165.427' cy='216.677' fill='#eaadcc' rx='14.717' ry='6.845'/><ellipse cx='57.273' cy='212.57' fill='#eaadcc' rx='14.717' ry='6.845' transform='rotate(7 57.273 212.57)'/><path d='M96.266 210.285a2.054 2.054 0 1 0-3.406 2.295c3.151 4.676 7.997 7.39 14.373 8.119c6.348.725 12.016-.902 16.877-4.852a2.054 2.054 0 1 0-2.59-3.187c-3.999 3.249-8.563 4.559-13.82 3.958c-5.23-.598-8.986-2.7-11.434-6.333M65.818 178.63a14.67 14.67 0 0 1 10.551 3.945a14.67 14.67 0 0 1 4.672 10.25a14.67 14.67 0 0 1-3.945 10.55a14.67 14.67 0 0 1-10.25 4.672a14.67 14.67 0 0 1-10.551-3.945a14.67 14.67 0 0 1-4.67-10.25a14.67 14.67 0 0 1 3.944-10.55a14.67 14.67 0 0 1 10.249-4.672'/><path fill='#fff' d='M66.59 190.932a4.792 4.792 0 1 0-9.578.336a4.792 4.792 0 0 0 9.579-.336'/><path d='M154.99 182.366a14.67 14.67 0 0 1 10.552 3.944a14.67 14.67 0 0 1 4.67 10.25a14.67 14.67 0 0 1-3.944 10.551a14.67 14.67 0 0 1-10.25 4.671a14.67 14.67 0 0 1-10.55-3.945a14.67 14.67 0 0 1-4.672-10.25a14.67 14.67 0 0 1 3.945-10.55a14.67 14.67 0 0 1 10.25-4.671'/><path fill='#fff' d='M65.71 175.552c9.824-.343 18.066 7.342 18.409 17.165s-7.342 18.065-17.166 18.408s-18.064-7.342-18.407-17.166c-.343-9.823 7.341-18.064 17.164-18.407m12.252 17.38c-.224-6.423-5.613-11.448-12.037-11.223c-6.422.224-11.447 5.612-11.222 12.035c.224 6.424 5.612 11.448 12.035 11.224s11.448-5.612 11.224-12.036m76.921-13.645c9.824-.343 18.065 7.342 18.408 17.165s-7.342 18.065-17.165 18.408s-18.065-7.342-18.408-17.165s7.342-18.065 17.165-18.408m12.251 17.38c-.224-6.423-5.612-11.447-12.036-11.223s-11.448 5.613-11.223 12.036s5.612 11.448 12.035 11.224c6.424-.225 11.448-5.613 11.224-12.037'/><path fill='#fff' d='M155.763 194.668a4.792 4.792 0 1 0-9.578.335a4.792 4.792 0 0 0 9.578-.335'/><path fill='#ecb732' d='m38.083 243.16l22.33 23.235l16.022-17.044a3.765 3.765 0 0 1 5.486 5.157l-16.283 17.324l23.1 24.036a3.765 3.765 0 1 1-5.43 5.218l-22.834-23.761l-10.725 11.41a3.765 3.765 0 1 1-5.486-5.158l10.986-11.688l-22.595-23.511a3.765 3.765 0 1 1 5.43-5.218m149.956 0a3.765 3.765 0 1 1 5.429 5.218l-22.596 23.511l10.988 11.688a3.765 3.765 0 0 1-.042 5.201l-.123.121a3.765 3.765 0 0 1-5.322-.165l-10.725-11.41l-22.834 23.762a3.765 3.765 0 0 1-5.197.222l-.127-.116a3.765 3.765 0 0 1-.105-5.324l23.1-24.036l-16.284-17.324a3.765 3.765 0 0 1 .042-5.2l.123-.121a3.765 3.765 0 0 1 5.321.164l16.021 17.044z'/><path fill='#ffc73b' d='M136.602 126.74a3.765 3.765 0 0 1 0 5.323l-17.53 17.531l10.684 10.686a3.765 3.765 0 0 1 .12 5.2l-.12.125a3.765 3.765 0 0 1-5.324 0l-10.686-10.686l-10.686 10.686a3.765 3.765 0 1 1-5.324-5.325l10.685-10.686l-17.53-17.53a3.765 3.765 0 0 1-.12-5.2l.12-.125a3.765 3.765 0 0 1 5.324 0l17.531 17.53l17.531-17.53a3.765 3.765 0 0 1 5.325 0'/></svg>`
},
name: 'Pinia',
desc: 'Vue 3 的状态管理库，简洁且支持类型推导。',
link: 'https://pinia.vuejs.org/'
},
// 深浅模式 svg 图标
{
icon: {
svg: {
light: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#242938' rx='60'/><path fill='url(#skillIconsNetlifyDark0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyDark0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`,
dark: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#f4f2ed' rx='60'/><path fill='url(#skillIconsNetlifyLight0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyLight0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`
}
},
name: 'Netlify',
desc: '提供 CI/CD、自动构建和无服务器函数的前端部署平台。',
link: 'https://www.netlify.com/'
}
]"
/>template
<BoxCube
:grid="6"
:items="[
// 图片
{
image: 'https://i.theojs.cn/logo/alipay.svg',
name: '支付宝',
link: 'https://i.theojs.cn/alipay.webp'
},
// 深浅色模式图片
{
image: {
light: 'https://i.theojs.cn/logo/github.svg',
dark: 'https://i.theojs.cn/logo/github-dark.svg',
crop: true
},
size: 48,
name: 'GitHub',
link: 'https://github.com'
}
]"
/>输出
参数说明
| 字段 | 类型 | 描述 | 是否必填 |
|---|---|---|---|
grid | number | 网格列数。默认为 6 列，传入数字如 3、4 可指定多列。 | 可选 |
name | string | 名称，作为显示文本。 | 必填 |
link | LinkType | 链接地址，支持站内路径或外部 URL。 | 可选 |
rel | RelType | 链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。 | 可选 |
icon | IconType | 图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
image | ImageType | 图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType | 可选 |
size | SizeType | 控制图片或者图标的width和height 默认值为 32 | 可选 |
Card
输入
template
<Card
:items="[
// iconify 图标 + 无链接
{
icon: { icon: 'line-md:iconify2-static', color: '#1769AA' },
name: 'iconify',
desc: '开源的图标库，提供了数以万计的矢量图标，支持多种框架和平台。'
},
// 深浅色模式的 iconify 图标 + v-html 渲染
{
icon: { light: 'ion:logo-vercel', dark: 'ion:logo-vercel', color: { light: '#000000', dark: '#FFFFFF' } },
name: `<p style='margin:0; font-style: italic;'>Vercel</p>`,
desc: '适用于前端框架的无服务器部署平台，支持静态生成和即时预览。',
link: 'https://vercel.com/'
},
// 深浅色模式 iconify 图标（无 color）
{
icon: { light: 'skill-icons:vite-dark', dark: 'skill-icons:vite-light' },
name: 'Vite',
desc: '极速的现代前端构建工具，支持热更新与按需加载。',
link: 'https://vitejs.dev/'
}
]"
/>template
<Card
:items="[
// svg 图标
{
icon: {
svg: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 331'><defs><linearGradient id='logosPinia0' x1='55.342%' x2='42.817%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia1' x1='55.349%' x2='42.808%' y1='0%' y2='42.863%'><stop offset='0%' stop-color='#52ce63'/><stop offset='100%' stop-color='#51a256'/></linearGradient><linearGradient id='logosPinia2' x1='50%' x2='50%' y1='0%' y2='58.811%'><stop offset='0%' stop-color='#8ae99c'/><stop offset='100%' stop-color='#52ce63'/></linearGradient><linearGradient id='logosPinia3' x1='51.378%' x2='44.585%' y1='17.473%' y2='100%'><stop offset='0%' stop-color='#ffe56c'/><stop offset='100%' stop-color='#ffc63a'/></linearGradient></defs><path fill='url(#logosPinia0)' d='M67.56 173.328c30.366-2.985 41.08-27.648 44.735-64.823c3.654-37.175-21.174-70.814-31.502-69.799s-43.15 40.322-46.805 77.497c-3.654 37.175 3.205 60.11 33.572 57.125' transform='rotate(-38 72.877 106.136)'/><path fill='url(#logosPinia1)' d='M184.454 186.277c30.367 2.986 36.394-20.032 32.74-57.207c-3.655-37.175-35.645-76.4-45.973-77.415s-35.989 32.542-32.334 69.717s15.201 61.92 45.567 64.905' transform='rotate(52 178.34 119.085)'/><path fill='url(#logosPinia2)' d='M129.232 151.601c27.341 0 34.878-26.184 34.878-67.013S138.531 3.745 129.232 3.745S93.605 43.758 93.605 84.588c0 40.829 8.286 67.013 35.627 67.013' transform='rotate(7 128.858 77.673)'/><path fill='url(#logosPinia3)' d='M113.386 330.307c56.896 0 103.038-16.528 103.038-91.482s-46.142-136.462-103.038-136.462c-56.897 0-103.002 61.507-103.002 136.462s46.105 91.482 103.002 91.482'/><ellipse cx='165.427' cy='216.677' fill='#eaadcc' rx='14.717' ry='6.845'/><ellipse cx='57.273' cy='212.57' fill='#eaadcc' rx='14.717' ry='6.845' transform='rotate(7 57.273 212.57)'/><path d='M96.266 210.285a2.054 2.054 0 1 0-3.406 2.295c3.151 4.676 7.997 7.39 14.373 8.119c6.348.725 12.016-.902 16.877-4.852a2.054 2.054 0 1 0-2.59-3.187c-3.999 3.249-8.563 4.559-13.82 3.958c-5.23-.598-8.986-2.7-11.434-6.333M65.818 178.63a14.67 14.67 0 0 1 10.551 3.945a14.67 14.67 0 0 1 4.672 10.25a14.67 14.67 0 0 1-3.945 10.55a14.67 14.67 0 0 1-10.25 4.672a14.67 14.67 0 0 1-10.551-3.945a14.67 14.67 0 0 1-4.67-10.25a14.67 14.67 0 0 1 3.944-10.55a14.67 14.67 0 0 1 10.249-4.672'/><path fill='#fff' d='M66.59 190.932a4.792 4.792 0 1 0-9.578.336a4.792 4.792 0 0 0 9.579-.336'/><path d='M154.99 182.366a14.67 14.67 0 0 1 10.552 3.944a14.67 14.67 0 0 1 4.67 10.25a14.67 14.67 0 0 1-3.944 10.551a14.67 14.67 0 0 1-10.25 4.671a14.67 14.67 0 0 1-10.55-3.945a14.67 14.67 0 0 1-4.672-10.25a14.67 14.67 0 0 1 3.945-10.55a14.67 14.67 0 0 1 10.25-4.671'/><path fill='#fff' d='M65.71 175.552c9.824-.343 18.066 7.342 18.409 17.165s-7.342 18.065-17.166 18.408s-18.064-7.342-18.407-17.166c-.343-9.823 7.341-18.064 17.164-18.407m12.252 17.38c-.224-6.423-5.613-11.448-12.037-11.223c-6.422.224-11.447 5.612-11.222 12.035c.224 6.424 5.612 11.448 12.035 11.224s11.448-5.612 11.224-12.036m76.921-13.645c9.824-.343 18.065 7.342 18.408 17.165s-7.342 18.065-17.165 18.408s-18.065-7.342-18.408-17.165s7.342-18.065 17.165-18.408m12.251 17.38c-.224-6.423-5.612-11.447-12.036-11.223s-11.448 5.613-11.223 12.036s5.612 11.448 12.035 11.224c6.424-.225 11.448-5.613 11.224-12.037'/><path fill='#fff' d='M155.763 194.668a4.792 4.792 0 1 0-9.578.335a4.792 4.792 0 0 0 9.578-.335'/><path fill='#ecb732' d='m38.083 243.16l22.33 23.235l16.022-17.044a3.765 3.765 0 0 1 5.486 5.157l-16.283 17.324l23.1 24.036a3.765 3.765 0 1 1-5.43 5.218l-22.834-23.761l-10.725 11.41a3.765 3.765 0 1 1-5.486-5.158l10.986-11.688l-22.595-23.511a3.765 3.765 0 1 1 5.43-5.218m149.956 0a3.765 3.765 0 1 1 5.429 5.218l-22.596 23.511l10.988 11.688a3.765 3.765 0 0 1-.042 5.201l-.123.121a3.765 3.765 0 0 1-5.322-.165l-10.725-11.41l-22.834 23.762a3.765 3.765 0 0 1-5.197.222l-.127-.116a3.765 3.765 0 0 1-.105-5.324l23.1-24.036l-16.284-17.324a3.765 3.765 0 0 1 .042-5.2l.123-.121a3.765 3.765 0 0 1 5.321.164l16.021 17.044z'/><path fill='#ffc73b' d='M136.602 126.74a3.765 3.765 0 0 1 0 5.323l-17.53 17.531l10.684 10.686a3.765 3.765 0 0 1 .12 5.2l-.12.125a3.765 3.765 0 0 1-5.324 0l-10.686-10.686l-10.686 10.686a3.765 3.765 0 1 1-5.324-5.325l10.685-10.686l-17.53-17.53a3.765 3.765 0 0 1-.12-5.2l.12-.125a3.765 3.765 0 0 1 5.324 0l17.531 17.53l17.531-17.53a3.765 3.765 0 0 1 5.325 0'/></svg>`
},
name: 'Pinia',
desc: 'Vue 3 的状态管理库，简洁且支持类型推导。',
link: 'https://pinia.vuejs.org/'
},
// 深浅模式 svg 图标
{
icon: {
svg: {
light: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#242938' rx='60'/><path fill='url(#skillIconsNetlifyDark0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyDark0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`,
dark: `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><g fill='none'><rect width='256' height='256' fill='#f4f2ed' rx='60'/><path fill='url(#skillIconsNetlifyLight0)' d='m172.787 97.405l-.073-.031c-.041-.016-.083-.031-.12-.068a.57.57 0 0 1-.146-.485l4.032-24.651l18.909 18.913l-19.665 8.367a.4.4 0 0 1-.172.031h-.078a.5.5 0 0 1-.105-.088a9 9 0 0 0-2.582-1.988m27.426-1.502l20.218 20.217c4.199 4.205 6.301 6.301 7.068 8.732c.114.36.208.72.281 1.09l-48.316-20.462l-.078-.032c-.193-.078-.418-.167-.418-.365s.23-.292.423-.37l.062-.026zm26.743 36.528c-1.043 1.961-3.077 3.996-6.52 7.443l-22.794 22.789l-29.481-6.139l-.157-.031c-.261-.042-.537-.089-.537-.324a8.9 8.9 0 0 0-3.417-6.222c-.12-.12-.088-.308-.052-.48c0-.026 0-.052.011-.073l5.544-34.04l.021-.115c.032-.261.078-.563.313-.563a9.02 9.02 0 0 0 6.051-3.469c.047-.052.078-.11.141-.141c.167-.078.365 0 .537.073l50.335 21.292zM192.4 167.905l-37.483 37.483l6.416-39.433l.01-.053a.7.7 0 0 1 .032-.151c.052-.125.187-.177.318-.229l.062-.026a9.66 9.66 0 0 0 3.626-2.697c.125-.146.276-.287.469-.313a.5.5 0 0 1 .151 0l26.393 5.425zm-45.417 45.417l-4.225 4.225l-46.71-67.507l-.052-.073c-.072-.099-.15-.198-.135-.313c.005-.083.057-.156.115-.219l.052-.067c.14-.209.26-.418.391-.642l.104-.183l.016-.015c.073-.125.14-.245.266-.313c.11-.052.26-.031.38-.005l51.749 10.672a.85.85 0 0 1 .397.172c.068.068.083.141.099.224a9.16 9.16 0 0 0 5.362 6.129c.146.073.083.235.016.407q-.05.113-.079.235c-.652 3.964-6.243 38.066-7.746 47.273m-8.825 8.82c-3.114 3.083-4.95 4.715-7.026 5.373a10.44 10.44 0 0 1-6.291 0c-2.43-.772-4.532-2.869-8.731-7.073l-46.908-46.908l12.252-19.003a.8.8 0 0 1 .209-.245c.13-.094.318-.052.475 0c2.812.849 5.831.696 8.543-.433c.141-.052.282-.088.392.011q.081.075.146.167l46.939 68.116zm-73.479-53.131l-10.76-10.76l21.25-9.066a.4.4 0 0 1 .172-.036c.177 0 .282.177.376.339q.32.492.678.959l.067.084c.063.088.021.177-.041.261l-11.737 18.219zm-15.523-15.523l-13.614-13.614c-2.315-2.316-3.995-3.995-5.164-5.44l41.395 8.586l.157.026c.255.041.537.088.537.328c0 .261-.308.381-.569.48l-.12.052zM28 127.434a10.4 10.4 0 0 1 .47-2.582c.771-2.431 2.868-4.527 7.072-8.732l17.422-17.421a11464 11464 0 0 0 24.13 34.88c.14.187.297.396.135.552c-.761.84-1.523 1.758-2.06 2.755a.83.83 0 0 1-.261.323c-.068.042-.14.026-.22.01h-.01L28 127.429zm29.627-33.398L81.052 70.61c2.202.965 10.214 4.35 17.38 7.376c5.425 2.295 10.37 4.381 11.924 5.06c.157.062.298.125.365.281c.042.094.021.214 0 .313a10.46 10.46 0 0 0 2.728 9.535c.157.157 0 .38-.135.574l-.073.11l-23.785 36.84a.7.7 0 0 1-.225.261c-.125.078-.302.042-.448.005a12 12 0 0 0-2.833-.386c-.855 0-1.784.157-2.722.329h-.006c-.104.016-.198.036-.281-.026a1.1 1.1 0 0 1-.235-.266zm28.157-28.157l30.326-30.326c4.199-4.199 6.301-6.3 8.731-7.068a10.43 10.43 0 0 1 6.291 0c2.431.767 4.533 2.87 8.732 7.068l6.572 6.572l-21.569 33.404a.8.8 0 0 1-.213.25c-.131.09-.313.053-.47 0a10.94 10.94 0 0 0-10.015 1.93c-.141.146-.349.063-.527-.015c-2.816-1.226-24.724-10.484-27.858-11.815m65.232-19.174L170.93 66.62l-4.798 29.721v.078a.8.8 0 0 1-.042.199c-.052.104-.157.125-.261.156a9.5 9.5 0 0 0-2.858 1.424a1 1 0 0 0-.105.089c-.057.062-.114.12-.208.13a.6.6 0 0 1-.225-.036l-30.347-12.894l-.057-.027c-.193-.078-.422-.172-.422-.37a11.5 11.5 0 0 0-1.617-4.773c-.146-.24-.308-.49-.183-.735zm-20.51 44.89l28.448 12.049c.157.073.329.14.397.302c.027.097.027.2 0 .297a7 7 0 0 0-.157 1.372v.798c0 .199-.203.282-.391.36l-.057.021c-4.507 1.925-63.271 26.983-63.36 26.983s-.182 0-.271-.089c-.156-.156 0-.375.14-.574q.038-.051.074-.104l23.378-36.2l.042-.062c.136-.22.292-.464.542-.464l.235.036c.532.073 1.002.141 1.476.141c3.547 0 6.833-1.726 8.815-4.679a.9.9 0 0 1 .178-.208c.141-.105.349-.052.511.02m-32.58 47.909l64.054-27.316s.094 0 .182.088c.35.35.647.584.934.803l.141.089c.13.073.261.157.271.292c0 .052 0 .084-.01.131l-5.488 33.706l-.021.135c-.036.261-.073.559-.318.559a9 9 0 0 0-7.161 4.418l-.027.041c-.073.12-.14.235-.26.298c-.11.052-.251.031-.365.005l-51.081-10.537c-.052-.01-.793-2.707-.85-2.712'/><defs><radialGradient id='skillIconsNetlifyLight0' cx='0' cy='0' r='1' gradientTransform='scale(230.653 199.78)rotate(90 -.267 .36)' gradientUnits='userSpaceOnUse'><stop stop-color='#20c6b7'/><stop offset='1' stop-color='#4d9abf'/></radialGradient></defs></g></svg>`
}
},
name: 'Netlify',
desc: '提供 CI/CD、自动构建和无服务器函数的前端部署平台。',
link: 'https://www.netlify.com/'
}
]"
/>template
<Card
:grid="4"
:items="[
// 普通图片
{
image: 'https://i.theojs.cn/logo/alipay.svg',
name: '支付宝',
desc: '移动支付平台，提供便捷的在线支付和转账服务',
link: 'https://i.theojs.cn/alipay.webp'
},
// 深浅模式图片
{
image: {
light: 'https://i.theojs.cn/logo/github.svg',
dark: 'https://i.theojs.cn/logo/github-dark.svg',
crop: true
},
name: 'GitHub',
desc: '全球最大代码托管平台，支持版本控制和协作开发。',
link: 'https://github.com/'
}
]"
/>输出
参数说明
| 字段 | 类型 | 描述 | 是否必填 |
|---|---|---|---|
grid | number | 网格列数。默认为 4 列，传入数字如 2、3 可指定多列。 | 可选 |
name | string | 名称，作为显示文本。 | 可选 |
desc | string | 描述文本，用于补充说明信息。 | 可选 |
link | LinkType | 链接地址，支持站内路径或外部 URL。 | 可选 |
rel | RelType | 链接的 rel 属性，建议设置为 noopener noreferrer 以增强安全性。 | 可选 |
target | TargetType | 链接的目标窗口。默认根据链接地址判断：外部链接默认在新标签页打开（_blank），内部链接无默认值（即当前页打开）。可自定义覆盖该行为。 | 可选 |
icon | IconType | 图标配置，支持字符串或对象，支持深浅色模式和颜色配置。详情查看 IconType | 可选 |
image | ImageType | 图片配置，支持字符串或对象，支持深浅色模式和裁剪。详情查看 ImageType | 可选 |
size | SizeType | 控制图片或者图标的width和height 默认值为 48 | 可选 |
IconType
ts
export type IconMode = string | { light: string; dark: string }
export type IconType =
| string
| { icon: string; color?: IconMode }
| { light: string; dark: string; color?: IconMode }
| { svg: IconMode }ImageType
ts
export type ImageType =
| string
| { src: string; crop?: boolean; [prop: string]: any }
| { light: string; dark: string; crop?: boolean; [prop: string]: any }