add new

src/components/blogs/HomePage.vue

@@ -493,22 +493,22 @@ onMounted(() => {
                 listMaxHeight: 90,
                 lrcType: 3,
                 audio: [
-                    {
-                        name: 'name1',
-                        artist: 'artist1',
-                        url: 'url1.mp3',
-                        cover: 'cover1.jpg',
-                        lrc: 'lrc1.lrc',
-                        theme: '#ebd0c2'
-                    },
-                    {
-                        name: 'name2',
-                        artist: 'artist2',
-                        url: 'url2.mp3',
-                        cover: 'cover2.jpg',
-                        lrc: 'lrc2.lrc',
-                        theme: '#46718b'
-                    }
+                    // {
+                    //     name: 'name1',
+                    //     artist: 'artist1',
+                    //     url: 'url1.mp3',
+                    //     cover: 'cover1.jpg',
+                    //     lrc: 'lrc1.lrc',
+                    //     theme: '#ebd0c2'
+                    // },
+                    // {
+                    //     name: 'name2',
+                    //     artist: 'artist2',
+                    //     url: 'url2.mp3',
+                    //     cover: 'cover2.jpg',
+                    //     lrc: 'lrc2.lrc',
+                    //     theme: '#46718b'
+                    // }
                 ]
             });
         }

src/views/blog/blogcontent/BlogDetailView.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="blogDetail">
-      <div v-for="anchor in titles" :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
+      <div v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
            @click="handleAnchorClick(anchor)" :key="anchor.lineIndex">
         <a style="cursor: pointer">{{ anchor.title }}</a>
       </div>
@@ -9,69 +9,81 @@
   </template>
   
   <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
-  import { useRoute } from 'vue-router';
-  import { get } from '@/tools/request';
+import { ref, onMounted, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { get } from '@/tools/request';
 
-  const route = useRoute();
-  const text = ref({
-    blogtitle: "",
-    blogcontent: ""
-  });
-  const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
-  const preview = ref<any>(null);
+const route = useRoute();
+const text = ref({
+  blogtitle: "",
+  blogcontent: ""
+});
+const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
 
-  // Props for v-md-preview component
-  const previewProps = {
-    leftToolbar: "undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save | tip | emoji"
-  };
+// Props for v-md-preview component
+const previewProps = {
+  leftToolbar: "undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save | tip | emoji"
+};
 
-  // Fetch blog content
-  const blogOneList = async () => {
-    try {
-      const response = await get(`/blogs/list/${route.params.id}`);
-      if (response.data.data) {
-        text.value.blogcontent = response.data.data.blogcontent;
-      }
-    } catch (error) {
-      console.error("Error fetching blog content:", error);
+// Fetch blog content
+const blogOneList = async () => {
+  try {
+    const response = await get(`/blogs/list/${route.params.id}`);
+    if (response.data.data) {
+      text.value.blogcontent = response.data.data.blogcontent;
     }
-  };
+  } catch (error) {
+    console.error("Error fetching blog content:", error);
+  }
+};
 
-  // Process headings after blog content is fetched
-  const processHeadings = () => {
-    const anchors = document.querySelectorAll('#blogDetail h1, #blogDetail h2, #blogDetail h3, #blogDetail h4, #blogDetail h5, #blogDetail h6');
-    const titlesArray = Array.from(anchors).filter((title) => !!title.innerText.trim());
+// Process headings after blog content is fetched
+const processHeadings = async () => {
+  await nextTick();
+  const anchors = document.querySelectorAll('#blogDetail h1, #blogDetail h2, #blogDetail h3, #blogDetail h4, #blogDetail h5, #blogDetail h6');
+  const titlesArray = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
 
-    if (!titlesArray.length) {
-      titles.value = [];
-      return;
-    }
+  if (!titlesArray.length) {
+    titles.value = [];
+    return;
+  }
 
-    const hTags = Array.from(new Set(titlesArray.map((title: any) => title.tagName))).sort();
+  const hTags = Array.from(new Set(titlesArray.map((title: any) => title.tagName))).sort();
 
-    titles.value = titlesArray.map((el: any) => ({
-      title: el.innerText,
-      lineIndex: el.getAttribute('data-v-md-line') || '',
-      indent: hTags.indexOf(el.tagName),
-    }));
-  };
+  titles.value = titlesArray.map((el: any) => ({
+    title: el.innerText,
+    lineIndex: el.getAttribute('data-v-md-line') || '',
+    indent: hTags.indexOf(el.tagName),
+  }));
+};
 
-  // Handle anchor click
-  const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
-    const heading = document.querySelector(`#blogDetail [data-v-md-line="${anchor.lineIndex}"]`);
+// Handle anchor click
+const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
+  const heading = document.querySelector(`#blogDetail [data-v-md-line="${anchor.lineIndex}"]`);
 
-    if (heading) {
-      heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
+  if (heading) {
+    heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  } else {
+    // Use MutationObserver to wait for the target element to be available
+    const observer = new MutationObserver((mutations, obs) => {
+      const heading = document.querySelector(`#blogDetail [data-v-md-line="${anchor.lineIndex}"]`);
+      if (heading) {
+        heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        obs.disconnect(); // Stop observing once the target element is found
+      }
+    });
+    const blogDetail = document.querySelector('#blogDetail') as HTMLElement;
+    observer.observe(blogDetail, { childList: true, subtree: true });
+  }
+};
+
+// Lifecycle hook to fetch blog content and process headings
+onMounted(async () => {
+  await blogOneList();
+  await processHeadings();
+});
+</script>
 
-  // Lifecycle hook to fetch blog content and process headings
-  onMounted(async () => {
-    await blogOneList();
-    processHeadings();
-  });
-  </script>
   
   <style scoped>
   #blogDetail {