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,7 +9,7 @@
   </template>
   
   <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { get } from '@/tools/request';
 
@@ -19,7 +19,6 @@
   blogcontent: ""
 });
 const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
-  const preview = ref<any>(null);
 
 // Props for v-md-preview component
 const previewProps = {
@@ -39,9 +38,10 @@
 };
 
 // Process headings after blog content is fetched
-  const processHeadings = () => {
+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) => !!title.innerText.trim());
+  const titlesArray = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
 
   if (!titlesArray.length) {
     titles.value = [];
@@ -63,16 +63,28 @@
 
   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();
-    processHeadings();
+  await processHeadings();
 });
 </script>
 
+  
   <style scoped>
   #blogDetail {
     width: 45%;