Vitepress-Theme-Async全局组件
默认情况下不会注册到全局组件中，需要通过 globalComponents 字段配置是否需要将组件注册为全局组件使用，设置为 true 默认会将所有组件注册为全局组件，也可一传递组件名称 ['TrmDividerTitle'] 选择性的注册。
示例
主题内置全局组件使用示例。
友链卡片
展开代码
用于友链列表卡片展示。
vue
<template>
<TrmCardLink url="https://www.imalun.com/" name="白云苍狗" image="https://www.imalun.com/images/avatar.jpg" desc="醒，亦在人间；梦，亦在人间" />
</template><template>
<TrmCardLink url="https://www.imalun.com/" name="白云苍狗" image="https://www.imalun.com/images/avatar.jpg" desc="醒，亦在人间；梦，亦在人间" />
</template>分类卡片
展开代码
用于展示分类信息和总数量。
分类 36
查看分类vue
<template>
<TrmCardCategorie name="分类" categoryUrl="https://www.imalun.com" length="36" />
</template><template>
<TrmCardCategorie name="分类" categoryUrl="https://www.imalun.com" length="36" />
</template>文章卡片
展开代码
首页文章分页卡片信息展示。
vue
<template>
<TrmCardPost sticky categoryUrl="https://www.imalun.com" :post="post" />
</template>
<script setup>
const post = {
"excerpt": "<p><img src=\"https://vitepress-theme-async.imalun.com/imgs/demo.png\" alt=\"1663833969157.png\"><em>示例图</em></p>\n<p>Welcome to <a href=\"https://vitepress-theme-async.imalun.com/\" target=\"_blank\" rel=\"noreferrer\">vitepress-theme-async</a>.</p>\n",
"sticky": 1,
"title": "Hello Theme Async",
"date": 1663744109000,
"cover": {
"type": "img",
"default": [
"https://vitepress-theme-async.imalun.com/imgs/demo.png"
]
},
"categories": [
"分类二"
],
"lastUpdated": 1724910812069.1824,
"tags": [
],
"url": "/demosite/hello-world",
"filePath": "posts/hello-world.md"
}
</script><template>
<TrmCardPost sticky categoryUrl="https://www.imalun.com" :post="post" />
</template>
<script setup>
const post = {
"excerpt": "<p><img src=\"https://vitepress-theme-async.imalun.com/imgs/demo.png\" alt=\"1663833969157.png\"><em>示例图</em></p>\n<p>Welcome to <a href=\"https://vitepress-theme-async.imalun.com/\" target=\"_blank\" rel=\"noreferrer\">vitepress-theme-async</a>.</p>\n",
"sticky": 1,
"title": "Hello Theme Async",
"date": 1663744109000,
"cover": {
"type": "img",
"default": [
"https://vitepress-theme-async.imalun.com/imgs/demo.png"
]
},
"categories": [
"分类二"
],
"lastUpdated": 1724910812069.1824,
"tags": [
],
"url": "/demosite/hello-world",
"filePath": "posts/hello-world.md"
}
</script>文章卡片 Mini
展开代码
文章详情里山下篇卡片信息展示。
Hello Theme Async
- 22-09-21
- 07:08
- 分类二
vue
<template>
<TrmCardPostMini :post="post" />
</template>
<script setup>
const post = {
"excerpt": "<p><img src=\"https://vitepress-theme-async.imalun.com/imgs/demo.png\" alt=\"1663833969157.png\"><em>示例图</em></p>\n<p>Welcome to <a href=\"https://vitepress-theme-async.imalun.com/\" target=\"_blank\" rel=\"noreferrer\">vitepress-theme-async</a>.</p>\n",
"sticky": 1,
"title": "Hello Theme Async",
"date": 1663744109000,
"cover": {
"type": "img",
"default": [
"https://vitepress-theme-async.imalun.com/imgs/demo.png"
]
},
"categories": [
"分类二"
],
"lastUpdated": 1724910812069.1824,
"tags": [
],
"url": "/demosite/hello-world",
"filePath": "posts/hello-world.md"
}
</script><template>
<TrmCardPostMini :post="post" />
</template>
<script setup>
const post = {
"excerpt": "<p><img src=\"https://vitepress-theme-async.imalun.com/imgs/demo.png\" alt=\"1663833969157.png\"><em>示例图</em></p>\n<p>Welcome to <a href=\"https://vitepress-theme-async.imalun.com/\" target=\"_blank\" rel=\"noreferrer\">vitepress-theme-async</a>.</p>\n",
"sticky": 1,
"title": "Hello Theme Async",
"date": 1663744109000,
"cover": {
"type": "img",
"default": [
"https://vitepress-theme-async.imalun.com/imgs/demo.png"
]
},
"categories": [
"分类二"
],
"lastUpdated": 1724910812069.1824,
"tags": [
],
"url": "/demosite/hello-world",
"filePath": "posts/hello-world.md"
}
</script>分割线
展开代码
文章详情里山下篇卡片信息展示。
标题
标题
vue
<template>
<TrmDividerTitle title="标题" index="01" />
<TrmDividerTitle title="标题" index="02" />
</template><template>
<TrmDividerTitle title="标题" index="01" />
<TrmDividerTitle title="标题" index="02" />
</template>时间轴
展开代码
文章详情里山下篇卡片信息展示。
vitepress-theme-async 主题发布
- 20-01-15
- 15:30
标题
- 20-01-15
- 15:30
vue
<template>
<TrmTimeline :list="list" />
</template>
<script setup>
const list = [
{
title: "vitepress-theme-async 主题发布",
url: "https://www.imalun.com",
date: '2020-01-15 15:30:54',
},
{
title: "标题",
url: "https://www.imalun.com",
date: '2020-01-15 15:30:54',
}
]
</script><template>
<TrmTimeline :list="list" />
</template>
<script setup>
const list = [
{
title: "vitepress-theme-async 主题发布",
url: "https://www.imalun.com",
date: '2020-01-15 15:30:54',
},
{
title: "标题",
url: "https://www.imalun.com",
date: '2020-01-15 15:30:54',
}
]
</script>相册组件
展开代码
用于相册页显示图片合集。
vue
<template>
<TrmPortfolio :src="data.src" :cover="data.cover" :title="data.title" :desc="data.desc" />
</template>
<script setup>
const data = {
title: "壁纸",
desc: "收藏的一些壁纸",
src: 'https://',
cover: "https://img1.wallspic.com/previews/5/0/1/6/6/166105/166105-pang_ke-zi_se_de-zi_luo_lan_se-fen_hong_se-pin_hong_se-500x.jpg"
}
</script><template>
<TrmPortfolio :src="data.src" :cover="data.cover" :title="data.title" :desc="data.desc" />
</template>
<script setup>
const data = {
title: "壁纸",
desc: "收藏的一些壁纸",
src: 'https://',
cover: "https://img1.wallspic.com/previews/5/0/1/6/6/166105/166105-pang_ke-zi_se_de-zi_luo_lan_se-fen_hong_se-pin_hong_se-500x.jpg"
}
</script>相册详情
展开代码
默认使用 fjGallery 插件进行排版。
vue
<template>
<TrmGallery :srcs="list" />
</template>
<script setup>
const list = [
'https://img2.wallspic.com/previews/8/9/4/5/6/165498/165498-ka_tong-tao-pin_hong_se-zhang_zhang_de_tou_fa-ji_qie-500x.jpg',
'https://img3.wallspic.com/previews/5/7/4/2/7/172475/172475-yi_shu-tao-tou_fa-ka_tong-500x.jpg',
'https://img2.wallspic.com/previews/5/0/9/0/70905/70905-hai_yang-ma_er_dai_fu-tian_kong-du_jia_cun-huan_jiao-500x.jpg',
'https://img3.wallspic.com/previews/4/3/4/8/6/168434/168434-xing_zhi-zi_ran_jing_guan-dan_huang-shui_dao-zhi_bei-500x.jpg',
'https://img2.wallspic.com/previews/6/5/4/5/6/165456/165456-giy_fu_gang-e_mo_sha_shoukimetsu_no_yaiba-shan_zi_de_yi_shu-zi_se_de-dian_lan_se_de-500x.jpg',
'https://img1.wallspic.com/previews/5/4/0/4/7/174045/174045-jian_ying-qi_fen-ren_men_zai_zi_ran_jie-tian_wen_xue_dui_xiang-yi_shu-500x.jpg',
'https://img1.wallspic.com/previews/9/3/1/6/5/156139/156139-feng_jing_hua-yi_shu-shu_ma_yi_shu-qi_fen-sheng_tai_qu-500x.jpg',
'https://img2.wallspic.com/previews/7/6/4/5/7/175467/175467-wo_de_xue_shu_jie_de_ying_xiong-tao-yi_shu-ka_tong-azure-500x.jpg',
'https://img1.wallspic.com/previews/3/7/0/0/7/170073/170073-liang_ge_ling-ka_tong-shou_shi-chuang_zao_xing_de_yi_shu-hong_se_de-500x.jpg',
'https://img1.wallspic.com/previews/1/8/3/6/6/166381/166381-shi_zi-xin_ba-bai_se_shi_zi-hu_xu-mao_ke-500x.jpg',
'https://img3.wallspic.com/previews/4/2/2/3/7/173224/173224-ri_luo-shui_zi_yuan-qi_fen-yu_hui-zi_se_de-500x.jpg',
'https://img1.wallspic.com/previews/7/5/7/9/6/169757/169757-ji_bo_li_de_bo_wu_guan-zi_ran_jing_guan-yi_shu-ji_yun-500x.jpg',
'https://img1.wallspic.com/previews/5/2/0/6/7/176025/176025-qi_fen-tian_wen_xue_dui_xiang-yi_shu-dian_lan_se_de-yuan_quan-500x.jpg',
'https://img3.wallspic.com/previews/6/5/8/1/4/141856/141856-hen_ku_de-hui_hua-yu_yan_jing_tou-zhai_nan-tu_xing_she_ji-500x.jpg',
'https://img1.wallspic.com/previews/2/1/6/5/6/165612/165612-kimetsu_no_yaiba-e_mo_sha_shoukimetsu_no_yaiba-tao-tou_fa-wai_tao-500x.jpg',
'https://img3.wallspic.com/previews/5/1/0/2/4/142015/142015-feng_ge-ka_ka_xi_qi_mu-huo_ying_ren_zhe-tu_xing_she_ji-shi_jue_yi_shu-500x.jpg',
]
</script><template>
<TrmGallery :srcs="list" />
</template>
<script setup>
const list = [
'https://img2.wallspic.com/previews/8/9/4/5/6/165498/165498-ka_tong-tao-pin_hong_se-zhang_zhang_de_tou_fa-ji_qie-500x.jpg',
'https://img3.wallspic.com/previews/5/7/4/2/7/172475/172475-yi_shu-tao-tou_fa-ka_tong-500x.jpg',
'https://img2.wallspic.com/previews/5/0/9/0/70905/70905-hai_yang-ma_er_dai_fu-tian_kong-du_jia_cun-huan_jiao-500x.jpg',
'https://img3.wallspic.com/previews/4/3/4/8/6/168434/168434-xing_zhi-zi_ran_jing_guan-dan_huang-shui_dao-zhi_bei-500x.jpg',
'https://img2.wallspic.com/previews/6/5/4/5/6/165456/165456-giy_fu_gang-e_mo_sha_shoukimetsu_no_yaiba-shan_zi_de_yi_shu-zi_se_de-dian_lan_se_de-500x.jpg',
'https://img1.wallspic.com/previews/5/4/0/4/7/174045/174045-jian_ying-qi_fen-ren_men_zai_zi_ran_jie-tian_wen_xue_dui_xiang-yi_shu-500x.jpg',
'https://img1.wallspic.com/previews/9/3/1/6/5/156139/156139-feng_jing_hua-yi_shu-shu_ma_yi_shu-qi_fen-sheng_tai_qu-500x.jpg',
'https://img2.wallspic.com/previews/7/6/4/5/7/175467/175467-wo_de_xue_shu_jie_de_ying_xiong-tao-yi_shu-ka_tong-azure-500x.jpg',
'https://img1.wallspic.com/previews/3/7/0/0/7/170073/170073-liang_ge_ling-ka_tong-shou_shi-chuang_zao_xing_de_yi_shu-hong_se_de-500x.jpg',
'https://img1.wallspic.com/previews/1/8/3/6/6/166381/166381-shi_zi-xin_ba-bai_se_shi_zi-hu_xu-mao_ke-500x.jpg',
'https://img3.wallspic.com/previews/4/2/2/3/7/173224/173224-ri_luo-shui_zi_yuan-qi_fen-yu_hui-zi_se_de-500x.jpg',
'https://img1.wallspic.com/previews/7/5/7/9/6/169757/169757-ji_bo_li_de_bo_wu_guan-zi_ran_jing_guan-yi_shu-ji_yun-500x.jpg',
'https://img1.wallspic.com/previews/5/2/0/6/7/176025/176025-qi_fen-tian_wen_xue_dui_xiang-yi_shu-dian_lan_se_de-yuan_quan-500x.jpg',
'https://img3.wallspic.com/previews/6/5/8/1/4/141856/141856-hen_ku_de-hui_hua-yu_yan_jing_tou-zhai_nan-tu_xing_she_ji-500x.jpg',
'https://img1.wallspic.com/previews/2/1/6/5/6/165612/165612-kimetsu_no_yaiba-e_mo_sha_shoukimetsu_no_yaiba-tao-tou_fa-wai_tao-500x.jpg',
'https://img3.wallspic.com/previews/5/1/0/2/4/142015/142015-feng_ge-ka_ka_xi_qi_mu-huo_ying_ren_zhe-tu_xing_she_ji-shi_jue_yi_shu-500x.jpg',
]
</script>