fix: use breadcrumb generator for read-more links

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/ReadMore.vue

@@ -11,17 +11,7 @@ const props = defineProps<{
   target?: string;
 }>();
 
-function createBreadcrumb(link: string = 'here') {
-  if (link.startsWith('http'))
-    return link.replace(/^https?:\/\//, '');
-
-  return link
-    .split('/')
-    .filter(Boolean)
-    .join(' > ')
-    .replace('Api', 'API');
-}
-
-// Guess title from link!
-const computedTitle = computed<string>(() => props.title || createBreadcrumb(props.to));
+const computedTitle = computed<string>(
+  () => props.title || useBreadcrumb(props.to).map(x => x.title).join(' > '),
+);
 </script>

components/layout/Breadcrumb.vue

@@ -18,29 +18,6 @@
 
 <script setup lang="ts">
 const route = useRoute();
-const { navigation } = useContent();
 
-interface Item {
-  title: string;
-  href: string;
-}
-
-function generateBreadcrumb(url: string): Item[] {
-  const breadcrumbItems: Item[] = [];
-  const segments = url.split('/').filter(segment => segment !== ''); // Remove empty segments
-
-  // Construct breadcrumb for each segment
-  let href = '';
-  let nav = navigation.value;
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i].replace('.html', '');
-    href += `/${segment}`;
-    const page = nav.find(x => (x._path as string) === href);
-    nav = page?.children;
-    breadcrumbItems.push({ title: page?.title ?? segment, href });
-  }
-  return breadcrumbItems;
-}
-
-const breadcrumbs = computed(() => generateBreadcrumb(route.path));
+const breadcrumbs = computed(() => useBreadcrumb(route.path));
 </script>

composables/useBreadcrumb.ts

@@ -0,0 +1,24 @@
+interface BreadcrumbItem {
+  title: string;
+  href: string;
+}
+
+export function useBreadcrumb(url: string): BreadcrumbItem[] {
+  const { navigation } = useContent();
+
+  const breadcrumbItems: BreadcrumbItem[] = [];
+  // Remove empty segments
+  const segments = url.split('/').filter(segment => segment !== '');
+
+  // Construct breadcrumb for each segment
+  let href = '';
+  let nav = navigation.value;
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i].replace('.html', '');
+    href += `/${segment}`;
+    const page = nav.find(x => (x._path as string) === href);
+    nav = page?.children;
+    breadcrumbItems.push({ title: page?.title ?? segment, href });
+  }
+  return breadcrumbItems;
+}