✨ feat: 支持破图设置和远程加载友链

packages/vitepress-theme-async/components/TrmPageLinks.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 import TrmCardLink from "./global/TrmCardLink.vue";
+import { data } from '../composables/links.data'
 import { useTheme } from "../composables";
 
 let i = 0;
@@ -34,12 +35,12 @@ const theme = useTheme();
 		</div>
 	</div>
 	<slot name="links-list-before" />
-	<div v-if="theme.links?.length" class="row trm-scroll-animation">
+	<div v-if="data?.length" class="row trm-scroll-animation">
 		<div class="col-lg-12">
 			<TrmDividerTitle :title="$t('title.links')" :index="`0${++i}`" />
 		</div>
-		<div v-for="item in theme.links" :key="item.url" class="col-lg-6">
-			<TrmCardLink v-bind="item" />
+		<div v-for="item in data" :key="item.url" class="col-lg-6">
+			<TrmCardLink v-bind="item" :err="theme.errorImg?.flink" />
 		</div>
 	</div>
 	<slot name="links-after" />

packages/vitepress-theme-async/components/global/TrmCardLink.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { truncate } from "../../utils/shared";
-defineProps<{
-	url?: string;
-	name?: string;
-	image?: string;
-	desc?: string;
-}>();
+import friend_404 from '../../assets/friend_404.gif'
+
+withDefaults(
+	defineProps<{
+		url?: string;
+		name?: string;
+		image?: string;
+		desc?: string;
+		err?: string;
+	}>(), {
+	err: friend_404
+})
 </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" />
+				<img draggable="false" :alt="name" :src="image" :onerror='`this.onerror=null;this.src="${err}"`' />
 			</div>
 			<div class="trm-link-text">
 				<h6 class="trm-mb-10">{{ name }}</h6>
@@ -28,6 +34,7 @@ defineProps<{
 	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);
+	align-items: center;
 
 	.trm-link-avatar {
 		width: 50px;

packages/vitepress-theme-async/composables/links.data.ts

@@ -0,0 +1,19 @@
+import { SiteConfig } from 'vitepress';
+import { isString } from '../utils/shared';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const config: SiteConfig<AsyncThemeConfig> = (globalThis as any).VITEPRESS_CONFIG;
+const theme = config.site.themeConfig;
+
+declare const data: AsyncTheme.Links[] | undefined;
+export { data };
+
+export default {
+	async load() {
+		if (isString(theme.links) && /^(http[s]{0,1}):\/\//g.test(theme.links)) {
+			return (await fetch(theme.links)).json();
+		} else if (Array.isArray(theme.links)) {
+			return theme.links;
+		}
+	},
+};

packages/vitepress-theme-async/layouts/Layout.vue

@@ -13,8 +13,9 @@ import TrmPagePost from "../components/TrmPagePost.vue";
 import TrmPageArchive from "../components/TrmPageArchive.vue";
 import TrmPageAbout from "../components/TrmPageAbout.vue";
 import TrmPageLinks from "../components/TrmPageLinks.vue";
+import errimg from '../assets/404.jpg'
 import { useData, useRoute } from "vitepress";
-import { initJustifiedGallery, initPictures, initScrollAnimation } from "../utils/client";
+import { initJustifiedGallery, initPictures, initPostErrorImg, initScrollAnimation } from "../utils/client";
 import { onMounted, onUnmounted, watch, WatchStopHandle, nextTick } from "vue";
 
 const route = useRoute()
@@ -26,14 +27,16 @@ onMounted(() => {
 	watcher = watch(
 		() => route.path,
 		() => {
+			const flag = initPostErrorImg(theme.value.errorImg?.postPage || errimg)
 			nextTick(() => {
+				initScrollAnimation()
+				!flag && initPostErrorImg(theme.value.errorImg?.postPage || errimg)
 				if (theme.value.plugin?.plugins?.flickrJustifiedGallery) {
-					initJustifiedGallery(theme.value.plugin?.thirdPartyProvider + theme.value.plugin?.plugins?.flickrJustifiedGallery)
+					initJustifiedGallery(theme.value.plugin?.thirdPartyProvider + theme.value.plugin.plugins.flickrJustifiedGallery)
 				}
 				if (theme.value.plugin?.plugins?.fancybox?.js) {
-					initPictures(theme.value.plugin?.thirdPartyProvider + theme.value.plugin?.plugins?.fancybox.js)
+					initPictures(theme.value.plugin?.thirdPartyProvider + theme.value.plugin.plugins.fancybox.js)
 				}
-				initScrollAnimation()
 			})
 		},
 		{ immediate: true }

packages/vitepress-theme-async/types/theme.d.ts

@@ -787,6 +787,22 @@ declare namespace AsyncTheme {
 		};
 	}
 	//#endregion PluginConfig
+
+	//#region ErrorImgConfig
+	/**
+	 * 破图时默认图片
+	 */
+	interface ErrorImgConfig {
+		/**
+		 * 友链头像破图时显示默认图片
+		 */
+		flink?: string;
+		/**
+		 * 文章破图时显示默认图片
+		 */
+		postPage?: string;
+	}
+	//#endregion ErrorImgConfig
 }
 
 // async-theme-config -----------------------------------------------------------------------
@@ -855,7 +871,7 @@ declare interface AsyncThemeConfig {
 	about?: AsyncTheme.AboutPageConfig;
 
 	/** 友情链接 | Links */
-	links?: AsyncTheme.LinksConfig;
+	links?: AsyncTheme.LinksConfig | string;
 
 	/** 打赏 | Reward */
 	reward?: AsyncTheme.RewardConfig;
@@ -891,6 +907,9 @@ declare interface AsyncThemeConfig {
 
 	/** 三方 CDN 插件 */
 	plugin?: AsyncTheme.PluginConfig;
+
+	/** 破图时默认图片 | Replace Broken Images  */
+	errorImg?: AsyncTheme.ErrorImgConfig;
 }
 // -----------------------------------------------------------------------
 

packages/vitepress-theme-async/utils/client/index.ts

@@ -297,3 +297,11 @@ export const initScrollAnimation = () => {
 	);
 	document.querySelectorAll('.trm-scroll-animation').forEach(element => element && intersectionObserver?.observe(element));
 };
+
+export const initPostErrorImg = (url: string) => {
+	const imgs = document.querySelectorAll<HTMLImageElement>('#article-container img');
+	imgs.forEach(img => {
+		img.setAttribute('onerror', `this.onerror=null;this.src="${url}";`);
+	});
+	return imgs.length > 0;
+};