From b4bc31cf75c6424bae6a8b1e7cc3882a3acb88aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=91=E8=8B=8D=E7=8B=97?= <admin@imalun.com>
Date: Sat, 4 Nov 2023 17:44:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/.vitepress/config.ts                     |  7 +++
 demo/.vitepress/theme/index.ts                |  2 +
 demo/.vitepress/theme/layout.vue              | 11 ++++
 .../components/TrmPageAbout.vue               |  2 +-
 .../components/TrmPageArchive.vue             |  6 +-
 .../components/TrmPageIndex.vue               | 19 ++++---
 .../components/TrmPageLinks.vue               | 17 ++----
 .../components/TrmPagePost.vue                | 13 +++--
 .../components/TrmSidebarUser.vue             |  2 +-
 .../components/TrmTopBarLogo.vue              |  2 +-
 .../{ => global}/TrmCardCategorie.vue         |  8 +--
 .../components/global/TrmCardLink.vue         | 55 +++++++++++++++++++
 .../components/{ => global}/TrmCardPost.vue   | 26 +++++----
 .../{ => global}/TrmCardPostMini.vue          |  4 +-
 .../{ => global}/TrmDividerTitle.vue          |  0
 .../components/{ => global}/TrmSwichImgs.vue  |  0
 .../components/{ => global}/TrmTimeline.vue   | 26 ++++++---
 packages/vitepress-theme-async/index.ts       | 16 +++++-
 packages/vitepress-theme-async/package.json   |  9 +++
 .../styles/_components/card.less              | 34 ------------
 .../styles/_components/index.less             |  1 -
 .../styles/_components/plugins/index.less     |  4 ++
 .../{ => plugins}/publication.less            | 43 ---------------
 .../vitepress-theme-async/types/index.d.ts    | 16 +++++-
 24 files changed, 181 insertions(+), 142 deletions(-)
 create mode 100644 demo/.vitepress/theme/layout.vue
 rename packages/vitepress-theme-async/components/{ => global}/TrmCardCategorie.vue (86%)
 create mode 100644 packages/vitepress-theme-async/components/global/TrmCardLink.vue
 rename packages/vitepress-theme-async/components/{ => global}/TrmCardPost.vue (87%)
 rename packages/vitepress-theme-async/components/{ => global}/TrmCardPostMini.vue (96%)
 rename packages/vitepress-theme-async/components/{ => global}/TrmDividerTitle.vue (100%)
 rename packages/vitepress-theme-async/components/{ => global}/TrmSwichImgs.vue (100%)
 rename packages/vitepress-theme-async/components/{ => global}/TrmTimeline.vue (81%)
 rename packages/vitepress-theme-async/styles/_components/{ => plugins}/publication.less (82%)

diff --git a/demo/.vitepress/config.ts b/demo/.vitepress/config.ts
index a3011ab..fc26831 100644
--- a/demo/.vitepress/config.ts
+++ b/demo/.vitepress/config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
 	},
 	titleTemplate: ':title | Async',
 	themeConfig: {
+		globalComponents: ['TrmDividerTitle'],
 		topBars: [
 			{ title: 'Home', url: '/' },
 			{
@@ -109,5 +110,11 @@ export default defineConfig({
 			tags: '/tags',
 			categorys: '/categories',
 		},
+		noticeOutdate: {
+			enable: true,
+			limitDay: 1,
+			style: 'flat',
+			position: 'bottom',
+		},
 	},
 });
diff --git a/demo/.vitepress/theme/index.ts b/demo/.vitepress/theme/index.ts
index f02feba..8be6b31 100644
--- a/demo/.vitepress/theme/index.ts
+++ b/demo/.vitepress/theme/index.ts
@@ -4,8 +4,10 @@
 // };
 
 import { defineTheme } from 'vitepress-theme-async';
+import layout from './layout.vue';
 
 export default defineTheme({
+	Layout: layout,
 	enhanceApp(_ctx) {
 		//
 	},
diff --git a/demo/.vitepress/theme/layout.vue b/demo/.vitepress/theme/layout.vue
new file mode 100644
index 0000000..f1385c9
--- /dev/null
+++ b/demo/.vitepress/theme/layout.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Theme from "vitepress-theme-async";
+const { Layout } = Theme;
+</script>
+<template>
+	<Layout>
+		<template #links-after>
+			<TrmDividerTitle title="asdasd" index="01" />
+		</template>
+	</Layout>
+</template>
diff --git a/packages/vitepress-theme-async/components/TrmPageAbout.vue b/packages/vitepress-theme-async/components/TrmPageAbout.vue
index 04ef5c9..48febe5 100644
--- a/packages/vitepress-theme-async/components/TrmPageAbout.vue
+++ b/packages/vitepress-theme-async/components/TrmPageAbout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 let i = 0;
 const theme = useTheme();
 </script>
diff --git a/packages/vitepress-theme-async/components/TrmPageArchive.vue b/packages/vitepress-theme-async/components/TrmPageArchive.vue
index e7da743..2cc4b81 100644
--- a/packages/vitepress-theme-async/components/TrmPageArchive.vue
+++ b/packages/vitepress-theme-async/components/TrmPageArchive.vue
@@ -2,9 +2,9 @@
 import { computed, onMounted, ref } from "vue";
 import { useTags, useArchives, useCategories, useAllPosts, useTheme } from "../composables";
 
+import TrmTimeline from "./global/TrmTimeline.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 import TrmPagination from "./TrmPagination.vue";
-import TrmTimeLine from "./TrmTimeline.vue";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
 import { formatDate } from "../utils/client";
 import { useCurrentPageIndex } from "../blog";
 
@@ -80,7 +80,7 @@ onMounted(() => {
 			<TrmDividerTitle :title="filter || 'All'" index="01" />
 		</div>
 		<div class="col-lg-12">
-			<TrmTimeLine :list="pageList" />
+			<TrmTimeline :list="pageList" />
 		</div>
 	</div>
 	<TrmPagination :total="filterList.length" :size="pageSize" />
diff --git a/packages/vitepress-theme-async/components/TrmPageIndex.vue b/packages/vitepress-theme-async/components/TrmPageIndex.vue
index 42caa07..3be197e 100644
--- a/packages/vitepress-theme-async/components/TrmPageIndex.vue
+++ b/packages/vitepress-theme-async/components/TrmPageIndex.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useAllPosts, useCategories, useTheme } from "../composables";
+import { useData } from "vitepress";
+import { AsyncThemeConfig } from "types";
+import { useAllPosts, useCategories, usePageUrl } from "../composables";
 import { useCurrentPageIndex } from "../blog";
 
-import TrmCardCategorie from "./TrmCardCategorie.vue";
-import TrmCardPost from "./TrmCardPost.vue";
+import TrmCardCategorie from "./global/TrmCardCategorie.vue";
+import TrmCardPost from "./global/TrmCardPost.vue";
 import TrmPagination from "./TrmPagination.vue";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 
-const theme = useTheme();
+const { page, theme } = useData<AsyncThemeConfig>();
+const pageUrl = usePageUrl();
 const currentPageIndex = useCurrentPageIndex();
-const pageSize = theme.value.indexGenerator?.perPage || 10;
 const allPosts = useAllPosts();
+const pageSize = theme.value.indexGenerator?.perPage || 10;
 
 const categories = useCategories()
 	.sort((a, b) => b[1] - a[1])
@@ -26,7 +29,7 @@ const pageList = computed(() => {
 <template>
 	<div v-if="categories.length > 0" class="row hidden-sm">
 		<div v-for="(item, index) in categories" class="col-lg-6" :key="index">
-			<TrmCardCategorie :name="item[0]" :length="item[1]" />
+			<TrmCardCategorie :name="item[0]" :length="item[1]" :category-url="pageUrl.categorys + '?q=' + item[0]" />
 		</div>
 	</div>
 	<div class="row">
@@ -34,7 +37,7 @@ const pageList = computed(() => {
 			<TrmDividerTitle :title="$t('title.newPublish')" index="01" />
 		</div>
 		<div class="col-lg-6" v-for="item in pageList" :key="item.url">
-			<TrmCardPost :post="item" />
+			<TrmCardPost :post="item" :category-url="pageUrl.categorys" :sticky="page.frontmatter.index && item.sticky && item.sticky > 0" />
 		</div>
 	</div>
 	<TrmPagination :total="allPosts.length" :size="pageSize" />
diff --git a/packages/vitepress-theme-async/components/TrmPageLinks.vue b/packages/vitepress-theme-async/components/TrmPageLinks.vue
index 5bcf5ba..81941f2 100644
--- a/packages/vitepress-theme-async/components/TrmPageLinks.vue
+++ b/packages/vitepress-theme-async/components/TrmPageLinks.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
+import TrmCardLink from "./global/TrmCardLink.vue";
 import { useTheme } from "../composables";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
-import { truncate } from "../utils/shared";
+
 let i = 0;
 const theme = useTheme();
 </script>
@@ -38,17 +39,7 @@ const theme = useTheme();
 			<TrmDividerTitle :title="$t('title.links')" :index="`0${++i}`" />
 		</div>
 		<div v-for="item in theme.links" :key="item.url" class="col-lg-6">
-			<a :href="item.url" target="_blank" rel="nofollow">
-				<div class="trm-link-box trm-scroll-animation">
-					<div class="trm-link-avatar">
-						<img draggable="false" :alt="item.name" :src="item.image" />
-					</div>
-					<div class="trm-link-text">
-						<h6 class="trm-mb-10">{{ item.name }}</h6>
-						<div>{{ item.desc ? truncate(item.desc, { length: 32 }) : "" }}</div>
-					</div>
-				</div>
-			</a>
+			<TrmCardLink v-bind="item" />
 		</div>
 	</div>
 	<slot name="links-after" />
diff --git a/packages/vitepress-theme-async/components/TrmPagePost.vue b/packages/vitepress-theme-async/components/TrmPagePost.vue
index 0b3ca61..fa07952 100644
--- a/packages/vitepress-theme-async/components/TrmPagePost.vue
+++ b/packages/vitepress-theme-async/components/TrmPagePost.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { formatDate } from "../utils/client";
-import { usePrevNext, useTheme } from "../composables";
+import { usePageUrl, usePrevNext, useTheme } from "../composables";
 
-import TrmDividerTitle from "./TrmDividerTitle.vue";
-import TrmCardPost from "./TrmCardPost.vue";
-import TrmCardPostMini from "./TrmCardPostMini.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
+import TrmCardPost from "./global/TrmCardPost.vue";
+import TrmCardPostMini from "./global/TrmCardPostMini.vue";
 import TrmReward from "./TrmReward.vue";
 import TrmPostCopyright from "./TrmPostCopyright.vue";
 import TrmOutdateNotice from "./TrmOutdateNotice.vue";
@@ -14,6 +14,7 @@ import TrmIconUser from "./icons/TrmIconUser.vue";
 
 const control = usePrevNext();
 const theme = useTheme();
+const pageUrl = usePageUrl();
 </script>
 <template>
 	<slot name="post-before" />
@@ -59,11 +60,11 @@ const theme = useTheme();
 			<TrmDividerTitle :title="$t('title.otherArticles')" index="01" />
 		</div>
 		<div class="col-lg-6" v-if="control.prev">
-			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.prev" />
+			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.prev" :category-url="pageUrl.categorys" :sticky="false" />
 			<TrmCardPostMini v-else :post="control.prev" />
 		</div>
 		<div class="col-lg-6" v-if="control.next">
-			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.next" />
+			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.next" :category-url="pageUrl.categorys" :sticky="false" />
 			<TrmCardPostMini v-else :post="control.next" />
 		</div>
 	</div>
diff --git a/packages/vitepress-theme-async/components/TrmSidebarUser.vue b/packages/vitepress-theme-async/components/TrmSidebarUser.vue
index a6e9fd0..fc79381 100644
--- a/packages/vitepress-theme-async/components/TrmSidebarUser.vue
+++ b/packages/vitepress-theme-async/components/TrmSidebarUser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables/index";
-import TrmSwichImgs from "./TrmSwichImgs.vue";
+import TrmSwichImgs from "./global/TrmSwichImgs.vue";
 import avatarImg from "../assets/avatar.jpg";
 import { onMounted, ref } from "vue";
 
diff --git a/packages/vitepress-theme-async/components/TrmTopBarLogo.vue b/packages/vitepress-theme-async/components/TrmTopBarLogo.vue
index d0a72ee..eac9f11 100644
--- a/packages/vitepress-theme-async/components/TrmTopBarLogo.vue
+++ b/packages/vitepress-theme-async/components/TrmTopBarLogo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables/index";
-import TrmSwichImgs from "./TrmSwichImgs.vue";
+import TrmSwichImgs from "./global/TrmSwichImgs.vue";
 
 const theme = useTheme();
 </script>
diff --git a/packages/vitepress-theme-async/components/TrmCardCategorie.vue b/packages/vitepress-theme-async/components/global/TrmCardCategorie.vue
similarity index 86%
rename from packages/vitepress-theme-async/components/TrmCardCategorie.vue
rename to packages/vitepress-theme-async/components/global/TrmCardCategorie.vue
index 6634ebd..ffc0e26 100644
--- a/packages/vitepress-theme-async/components/TrmCardCategorie.vue
+++ b/packages/vitepress-theme-async/components/global/TrmCardCategorie.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { usePageUrl } from "../composables";
-import TrmIconNext from "./icons/TrmIconNext.vue";
+import TrmIconNext from "../icons/TrmIconNext.vue";
 
 defineProps<{
 	name: string;
+	categoryUrl: string;
 	length: number;
 }>();
-
-const pageUrl = usePageUrl();
 </script>
 
 <template>
@@ -17,7 +15,7 @@ const pageUrl = usePageUrl();
 			<span class="trm-number">{{ length }}</span>
 		</h6>
 		<div class="trm-divider trm-mb-20 trm-mt-20"></div>
-		<a :href="pageUrl.categorys + '?q=' + name" class="trm-label">
+		<a :href="categoryUrl" class="trm-label">
 			{{ $t("title.more") }}
 			<TrmIconNext class="arrow-right" />
 		</a>
diff --git a/packages/vitepress-theme-async/components/global/TrmCardLink.vue b/packages/vitepress-theme-async/components/global/TrmCardLink.vue
new file mode 100644
index 0000000..03ffe3b
--- /dev/null
+++ b/packages/vitepress-theme-async/components/global/TrmCardLink.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { truncate } from "../../utils/shared";
+defineProps<{
+	url?: string;
+	name?: string;
+	image?: string;
+	desc?: string;
+}>();
+</script>
+<template>
+	<a :href="url" target="_blank" rel="nofollow">
+		<div class="trm-link-box trm-scroll-animation">
+			<div class="trm-link-avatar">
+				<img draggable="false" :alt="name" :src="image" />
+			</div>
+			<div class="trm-link-text">
+				<h6 class="trm-mb-10">{{ name }}</h6>
+				<div>{{ desc ? truncate(desc, { length: 32 }) : "" }}</div>
+			</div>
+		</div>
+	</a>
+</template>
+<style lang="less">
+.trm-link-box {
+	display: flex;
+	padding: 20px;
+	border-radius: var(--card-border-radius, 10px);
+	background-color: var(--theme-bg-color, #fcfcfe);
+	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	margin-bottom: var(--card-bottom-card, 40px);
+
+	.trm-link-avatar {
+		width: 50px;
+		height: 50px;
+		margin-right: 20px;
+		flex-shrink: 0;
+
+		img {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			box-shadow: none !important;
+			padding: 2px;
+		}
+	}
+
+	.trm-link-text {
+		div {
+			height: 2.6em;
+			line-height: 1.3em;
+			overflow: hidden;
+		}
+	}
+}
+</style>
diff --git a/packages/vitepress-theme-async/components/TrmCardPost.vue b/packages/vitepress-theme-async/components/global/TrmCardPost.vue
similarity index 87%
rename from packages/vitepress-theme-async/components/TrmCardPost.vue
rename to packages/vitepress-theme-async/components/global/TrmCardPost.vue
index 0fc9ec6..75b498a 100644
--- a/packages/vitepress-theme-async/components/TrmCardPost.vue
+++ b/packages/vitepress-theme-async/components/global/TrmCardPost.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
-import { formatDate } from "../utils/client";
-import { usePageUrl } from "../composables";
+import { formatDate } from "../../utils/client";
+import defImage from "../../assets/block.jpg";
 import TrmSwichImgs from "./TrmSwichImgs.vue";
-import defImage from "../assets/block.jpg";
 
-defineProps<{
-	post: AsyncTheme.PostData;
-}>();
-
-const { page } = useData();
-const pageUrl = usePageUrl();
+withDefaults(
+	defineProps<{
+		post: AsyncTheme.PostData;
+		categoryUrl: string;
+		sticky?: boolean;
+	}>(),
+	{
+		sticky: false,
+	},
+);
 </script>
 
 <template>
@@ -29,12 +31,12 @@ const pageUrl = usePageUrl();
 				<TrmSwichImgs :src="post.cover.default || defImage" :attrs="{ alt: 'cover', class: 'no-fancybox' }" />
 			</template>
 		</a>
-		<div v-if="page.frontmatter.index && post.sticky && post.sticky > 0" class="trm-top">
+		<div v-if="sticky" class="trm-top">
 			{{ $t("post.sticky") }}
 		</div>
 		<div class="trm-card-descr">
 			<div class="trm-label trm-category trm-mb-20">
-				<a :href="post.categories?.length ? pageUrl.categorys + '?q=' + post.categories[0] : '#.'">
+				<a :href="post.categories?.length ? categoryUrl + '?q=' + post.categories[0] : '#.'">
 					{{ post.categories?.length ? post.categories[0] : $t("title.unclassified") }}
 				</a>
 			</div>
diff --git a/packages/vitepress-theme-async/components/TrmCardPostMini.vue b/packages/vitepress-theme-async/components/global/TrmCardPostMini.vue
similarity index 96%
rename from packages/vitepress-theme-async/components/TrmCardPostMini.vue
rename to packages/vitepress-theme-async/components/global/TrmCardPostMini.vue
index 634f588..58f841e 100644
--- a/packages/vitepress-theme-async/components/TrmCardPostMini.vue
+++ b/packages/vitepress-theme-async/components/global/TrmCardPostMini.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { formatDate } from "../utils/client";
+import { formatDate } from "../../utils/client";
 import TrmSwichImgs from "./TrmSwichImgs.vue";
-import defImage from "../assets/block.jpg";
+import defImage from "../../assets/block.jpg";
 
 defineProps<{
 	post: AsyncTheme.PostData;
diff --git a/packages/vitepress-theme-async/components/TrmDividerTitle.vue b/packages/vitepress-theme-async/components/global/TrmDividerTitle.vue
similarity index 100%
rename from packages/vitepress-theme-async/components/TrmDividerTitle.vue
rename to packages/vitepress-theme-async/components/global/TrmDividerTitle.vue
diff --git a/packages/vitepress-theme-async/components/TrmSwichImgs.vue b/packages/vitepress-theme-async/components/global/TrmSwichImgs.vue
similarity index 100%
rename from packages/vitepress-theme-async/components/TrmSwichImgs.vue
rename to packages/vitepress-theme-async/components/global/TrmSwichImgs.vue
diff --git a/packages/vitepress-theme-async/components/TrmTimeline.vue b/packages/vitepress-theme-async/components/global/TrmTimeline.vue
similarity index 81%
rename from packages/vitepress-theme-async/components/TrmTimeline.vue
rename to packages/vitepress-theme-async/components/global/TrmTimeline.vue
index 057bde4..2895ef5 100644
--- a/packages/vitepress-theme-async/components/TrmTimeline.vue
+++ b/packages/vitepress-theme-async/components/global/TrmTimeline.vue
@@ -1,33 +1,41 @@
 <script setup lang="ts">
-import { formatDate } from "../utils/client";
-defineProps<{ list: AsyncTheme.PostData[] }>();
+import { formatDate } from "../../utils/client";
+
+type DataItem = {
+	url: string;
+	title: string;
+	date?: string | number;
+	excerpt?: string;
+};
+
+defineProps<{ list: DataItem[] }>();
 </script>
 <template>
 	<div class="trm-timeline">
-		<div v-for="post in list" class="trm-timeline-item trm-scroll-animation" :key="post.url">
+		<div v-for="item in list" class="trm-timeline-item trm-scroll-animation" :key="item.url">
 			<div class="trm-timeline-mark-light"></div>
 			<div class="trm-timeline-mark"></div>
 			<div class="trm-a trm-timeline-content">
 				<div class="trm-card-header">
 					<div class="trm-left-side">
 						<h6>
-							<a :href="post.url" class="trm-anima-link">
-								{{ post.title }}
+							<a :href="item.url" class="trm-anima-link">
+								{{ item.title }}
 							</a>
 						</h6>
-						<div class="trm-text-sm trm-accent-color trm-mt-15">
+						<div v-if="item.date" class="trm-text-sm trm-accent-color trm-mt-15">
 							<ul class="trm-card-data trm-label">
 								<li class="trm-accent-color">
-									{{ formatDate(post.date, "YY-MM-DD") }}
+									{{ formatDate(item.date, "YY-MM-DD") }}
 								</li>
 								<li class="trm-accent-color">
-									{{ formatDate(post.date, "HH:mm") }}
+									{{ formatDate(item.date, "HH:mm") }}
 								</li>
 							</ul>
 						</div>
 					</div>
 				</div>
-				<div v-if="post.excerpt" class="trm-publication trm-mt-15" v-html="post.excerpt"></div>
+				<div v-if="item.excerpt" class="trm-publication trm-mt-15" v-html="item.excerpt"></div>
 			</div>
 		</div>
 	</div>
diff --git a/packages/vitepress-theme-async/index.ts b/packages/vitepress-theme-async/index.ts
index d2d0d05..1b2f254 100644
--- a/packages/vitepress-theme-async/index.ts
+++ b/packages/vitepress-theme-async/index.ts
@@ -1,17 +1,31 @@
 import type { Theme } from 'vitepress';
+import { Component } from 'vue';
 
 import './styles/index.less';
 import Layout from './layouts/Layout.vue';
 import NotFound from './layouts/NotFound.vue';
 import { withConfigProvider } from './blog';
 import { getLangText } from './composables';
+
 // export * from './config/index.js'
 
 const theme = <Theme>{
 	Layout: withConfigProvider(Layout),
 	NotFound,
-	enhanceApp({ app }) {
+	enhanceApp({ app, siteData }) {
 		app.config.globalProperties.$t = getLangText;
+
+		const globalComponents = siteData.value.themeConfig.globalComponents;
+		if (globalComponents) {
+			const modulesFiles = import.meta.glob('./components/global/*.vue', { import: 'default', eager: true });
+			const flag = Array.isArray(globalComponents);
+			for (const path in modulesFiles) {
+				const componentName = path.split('/').reverse()[0].replace(/.vue$/, '');
+				if (!flag || (flag && globalComponents.includes(componentName))) {
+					app.component(componentName, modulesFiles[path] as Component);
+				}
+			}
+		}
 	},
 };
 
diff --git a/packages/vitepress-theme-async/package.json b/packages/vitepress-theme-async/package.json
index 5b4e97b..6372bcc 100644
--- a/packages/vitepress-theme-async/package.json
+++ b/packages/vitepress-theme-async/package.json
@@ -11,6 +11,15 @@
 	"type": "module",
 	"main": "./index.ts",
 	"types": "./types/index.d.ts",
+	"exports": {
+		".": {
+			"default": "./index.ts",
+			"types": "./types/index.d.ts"
+		},
+		"./config": {
+			"default": "./config/index.js"
+		}
+	},
 	"keywords": [
 		"vitepress-theme",
 		"blog-theme"
diff --git a/packages/vitepress-theme-async/styles/_components/card.less b/packages/vitepress-theme-async/styles/_components/card.less
index 5e5c292..3a15e63 100644
--- a/packages/vitepress-theme-async/styles/_components/card.less
+++ b/packages/vitepress-theme-async/styles/_components/card.less
@@ -41,37 +41,3 @@
 		}
 	}
 }
-
-// link card
-
-.trm-link-box {
-	display: flex;
-	padding: 20px;
-	border-radius: var(--card-border-radius, 10px);
-	background-color: var(--theme-bg-color, #fcfcfe);
-	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
-	margin-bottom: var(--card-bottom-card, 40px);
-
-	.trm-link-avatar {
-		width: 50px;
-		height: 50px;
-		margin-right: 20px;
-		flex-shrink: 0;
-
-		img {
-			width: 100%;
-			height: 100%;
-			border-radius: 50%;
-			box-shadow: none !important;
-			padding: 2px;
-		}
-	}
-
-	.trm-link-text {
-		div {
-			height: 2.6em;
-			line-height: 1.3em;
-			overflow: hidden;
-		}
-	}
-}
diff --git a/packages/vitepress-theme-async/styles/_components/index.less b/packages/vitepress-theme-async/styles/_components/index.less
index 3926a6d..834bb7d 100644
--- a/packages/vitepress-theme-async/styles/_components/index.less
+++ b/packages/vitepress-theme-async/styles/_components/index.less
@@ -5,7 +5,6 @@
 @import "./card.less";
 @import "./btn.less";
 @import "./banner.less";
-@import "./publication.less";
 @import "./tag-plugins.less";
 @import "./plugins/index.less";
 @import "./fixed-btn.less";
diff --git a/packages/vitepress-theme-async/styles/_components/plugins/index.less b/packages/vitepress-theme-async/styles/_components/plugins/index.less
index 954f6c1..dab9b04 100644
--- a/packages/vitepress-theme-async/styles/_components/plugins/index.less
+++ b/packages/vitepress-theme-async/styles/_components/plugins/index.less
@@ -13,3 +13,7 @@
 & when (@isReward) {
 	@import "./reward.less";
 }
+
+& when (@isCustomMdStyle=false) {
+	@import "./publication.less";
+}
diff --git a/packages/vitepress-theme-async/styles/_components/publication.less b/packages/vitepress-theme-async/styles/_components/plugins/publication.less
similarity index 82%
rename from packages/vitepress-theme-async/styles/_components/publication.less
rename to packages/vitepress-theme-async/styles/_components/plugins/publication.less
index 14c134d..75f94b1 100644
--- a/packages/vitepress-theme-async/styles/_components/publication.less
+++ b/packages/vitepress-theme-async/styles/_components/plugins/publication.less
@@ -244,47 +244,4 @@
 		word-wrap: break-word;
 		white-space: normal;
 	}
-
-	.post-outdate-notice {
-		position: relative;
-		padding: 0.5em 1em;
-		border-radius: 4px;
-		font-size: 0.9rem;
-		background-color: var(--notice-outdate-bg);
-		color: var(--notice-outdate-color);
-
-		&.top {
-			margin: 0 0 20px;
-		}
-
-		&.bottom {
-			margin: 20px 0 0;
-		}
-
-		// & when(@noticeOutdateStyle =flat) {
-		// 	border-left: 5px solid var(--notice-outdate-border);
-		// }
-	}
-}
-
-.trm-post-copyright {
-	list-style: none;
-	font-size: 0.9rem;
-	margin-top: 2rem;
-	padding: 0.5rem 1rem;
-	border-left: 4px solid var(--primary, #afb42b);
-	background-color: var(--body-color-5, #7b7b7d);
-	list-style: none;
-	word-break: break-all;
-	position: relative;
-	overflow: hidden;
-	line-height: 2;
-
-	li {
-		list-style: none;
-	}
-
-	a {
-		color: var(--primary, #afb42b);
-	}
 }
diff --git a/packages/vitepress-theme-async/types/index.d.ts b/packages/vitepress-theme-async/types/index.d.ts
index 8bd4930..33c320c 100644
--- a/packages/vitepress-theme-async/types/index.d.ts
+++ b/packages/vitepress-theme-async/types/index.d.ts
@@ -8,6 +8,12 @@ export declare interface AsyncThemeConfig {
 	/** 主题切换动画 | theme transition animations */
 	themeLoading?: boolean;
 
+	/** 自定义文章样式 */
+	customMdStyle?: boolean;
+
+	/** 将主题组件注册到全局 | register the global component */
+	globalComponents?: boolean | Array<string>;
+
 	/** 作者 | author */
 	author?: string;
 
@@ -76,8 +82,14 @@ export declare interface AsyncThemeConfig {
 	/** 目录 | outline */
 	outline?: DefaultTheme.Outline;
 	outlineTitle?: string;
+
+	/** 过期提示 | notice outdate */
+	noticeOutdate?: AsyncTheme.NoticeOutdateConfig;
 }
 // -----------------------------------------------------------------------
 
-export * from './theme.d.ts';
-export * from '../index';
+import './theme.d.ts';
+import Theme, { defineTheme } from '../index';
+
+export default Theme;
+export { defineTheme };