新增 點 blogList comment 跳轉

resources/js/src/views/blog/BlogDetail.vue

@@ -6,7 +6,8 @@
       <b-row>
         <!-- blogs -->
         <b-col cols="12">
-          <b-card :img-src="getImg(blogDetail.blog.path)" img-top img-alt="Blog Detail Pic" :title="blogDetail.blog.title">
+          <b-card :img-src="getImg(blogDetail.blog.path)" img-top img-alt="Blog Detail Pic"
+            :title="blogDetail.blog.title">
             <b-media no-body>
               <b-media-aside vertical-align="center" class="mr-50">
                 <b-avatar href="javascript:void(0)" size="24" :src="getUserAvatar(blogDetail.blog.userId)" />
@@ -47,7 +48,7 @@
             <!-- eslint-enable -->
             <hr class="my-2">
 
-            <div class="d-flex align-items-center justify-content-between">
+            <div class="d-flex align-items-center justify-content-between" id="commentIcon">
               <div class="d-flex align-items-center">
                 <div class="d-flex align-items-center mr-1">
                   <b-link class="mr-50">
@@ -173,12 +174,14 @@
           :class="index ? 'mt-2' : ''">
           <b-media-aside class="mr-2">
             <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }" @click="pageReload">
-              <b-img :src="getImg(recentpost.path)" :alt="getImg(recentpost.path).slice(6)" width="100" rounded height="70"/>
+              <b-img :src="getImg(recentpost.path)" :alt="getImg(recentpost.path).slice(6)" width="100" rounded
+                height="70" />
             </b-link>
           </b-media-aside>
           <b-media-body>
             <h6 class="blog-recent-post-title">
-              <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }" class="text-body-heading" @click="pageReload">
+              <b-link :to="{ name: 'blog-detail', params: { id: recentpost.id } }" class="text-body-heading"
+                @click="pageReload">
                 {{ recentpost.title }}
               </b-link>
             </h6>
@@ -294,6 +297,13 @@ export default {
     useJwt.getPost('/api/get_blog/sidebar').then(res => {
       this.blogSidebar = res.data
     })
+
+    setTimeout(() => {
+      if (this.$route.hash == '#blogComment') {
+        var el = document.getElementById('commentIcon');
+        el.scrollIntoView({ behavior: "smooth" });
+      }
+    }, 500);
   },
   methods: {
     kFormatter,

resources/js/src/views/blog/BlogList.vue

@@ -41,7 +41,7 @@
               </b-card-text>
               <hr>
               <div class="d-flex justify-content-between align-items-center">
-                <b-link :to="{ path: `/pages/blog/${blog.id}#blogComment` }">
+                <b-link :to="{ path: `/blog/${blog.id}#blogComment` }">
                   <div class="d-flex align-items-center text-body">
                     <feather-icon icon="MessageSquareIcon" class="mr-50" />
                     <span class="font-weight-bold">{{ blog.comment ? kFormatter(blog.comment) : 0 }} Comments</span>
@@ -93,7 +93,7 @@
               </b-card-text>
               <hr>
               <div class="d-flex justify-content-between align-items-center">
-                <b-link :to="{ path: `/pages/blog/${blog.id}#blogComment` }">
+                <b-link :to="{ path: `/blog/${blog.id}#blogComment` }">
                   <div class="d-flex align-items-center text-body">
                     <feather-icon icon="MessageSquareIcon" class="mr-50" />
                     <span class="font-weight-bold">{{ blog.comment ? kFormatter(blog.comment) : 0 }} Comments</span>