修改 blog排序

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

@@ -312,7 +312,7 @@ export default {
       return require('@/assets/images/avatars/' + userId + '-small.png')
     },
     defaultsImg() {
-      return require('@/assets/images/banner/banner-27.jpg')
+      return require('@/assets/images/banner/banner-' + (Math.floor(Math.random() * 38) + 1) + '.jpg')
     },
     postComment() {
       useJwt.getPost('/api/comment/post', {

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

@@ -3,55 +3,109 @@
 
     <!-- blogs -->
     <b-row class="blog-list-wrapper">
-      <b-col v-for="(blog, index) in blogList" :key="index" md="6">
-        <b-card tag="article" no-body>
-          <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
-            <b-img :src="defaultsImg()" :alt="defaultsImg().slice(5)" class="card-img-top" />
-          </b-link>
-          <b-card-body>
-            <b-card-title>
-              <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }"
-                class="blog-title-truncate text-body-heading">
-                {{ blog.title }}
-              </b-link>
-            </b-card-title>
-            <b-media no-body>
-              <b-media-aside vertical-align="center" class="mr-50">
-                <b-avatar href="javascript:void(0)" size="24" :src="getUserAvatar(blog.userId)" />
-              </b-media-aside>
-              <b-media-body>
-                <small class="text-muted mr-50">by</small>
-                <small>
-                  <b-link class="text-body">{{ blog.userFullName }}</b-link>
-                </small>
-                <span class="text-muted ml-75 mr-50">|</span>
-                <small class="text-muted">{{ dateFormat(blog.blogPosted) }}</small>
-              </b-media-body>
-            </b-media>
-            <div class="my-1 py-25">
-              <b-link v-for="(tag, index) in JSON.parse(blog.tags)" :key="index">
-                <b-badge pill class="mr-75" :variant="tagsColor(tag)">
-                  {{ tag }}
-                </b-badge>
-              </b-link>
-            </div>
-            <b-card-text class="blog-content-truncate">
-              {{ blog.excerpt }}
-            </b-card-text>
-            <hr>
-            <div class="d-flex justify-content-between align-items-center">
-              <b-link :to="{ path: `/pages/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>
-                </div>
-              </b-link>
-              <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }" class="font-weight-bold">
-                Read More
-              </b-link>
-            </div>
-          </b-card-body>
-        </b-card>
+      <b-col md="6">
+        <b-col v-for="(blog, index) in blogList.slice(0, Math.ceil(blogList.length / 2))" :key="index" md="12">
+          <b-card tag="article" no-body>
+            <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
+              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(5)" class="card-img-top" />
+            </b-link>
+            <b-card-body>
+              <b-card-title>
+                <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }"
+                  class="blog-title-truncate text-body-heading">
+                  {{ blog.title }}
+                </b-link>
+              </b-card-title>
+              <b-media no-body>
+                <b-media-aside vertical-align="center" class="mr-50">
+                  <b-avatar href="javascript:void(0)" size="24" :src="getUserAvatar(blog.userId)" />
+                </b-media-aside>
+                <b-media-body>
+                  <small class="text-muted mr-50">by</small>
+                  <small>
+                    <b-link class="text-body">{{ blog.userFullName }}</b-link>
+                  </small>
+                  <span class="text-muted ml-75 mr-50">|</span>
+                  <small class="text-muted">{{ dateFormat(blog.blogPosted) }}</small>
+                </b-media-body>
+              </b-media>
+              <div class="my-1 py-25">
+                <b-link v-for="(tag, index) in JSON.parse(blog.tags)" :key="index">
+                  <b-badge pill class="mr-75" :variant="tagsColor(tag)">
+                    {{ tag }}
+                  </b-badge>
+                </b-link>
+              </div>
+              <b-card-text class="blog-content-truncate">
+                {{ blog.excerpt }}
+              </b-card-text>
+              <hr>
+              <div class="d-flex justify-content-between align-items-center">
+                <b-link :to="{ path: `/pages/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>
+                  </div>
+                </b-link>
+                <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }" class="font-weight-bold">
+                  Read More
+                </b-link>
+              </div>
+            </b-card-body>
+          </b-card>
+        </b-col>
+      </b-col>
+      <b-col md="6">
+        <b-col v-for="(blog, index) in blogList.slice(Math.ceil(blogList.length / 2))" :key="index" md="12">
+          <b-card tag="article" no-body>
+            <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
+              <b-img :src="defaultsImg()" :alt="defaultsImg().slice(5)" class="card-img-top" />
+            </b-link>
+            <b-card-body>
+              <b-card-title>
+                <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }"
+                  class="blog-title-truncate text-body-heading">
+                  {{ blog.title }}
+                </b-link>
+              </b-card-title>
+              <b-media no-body>
+                <b-media-aside vertical-align="center" class="mr-50">
+                  <b-avatar href="javascript:void(0)" size="24" :src="getUserAvatar(blog.userId)" />
+                </b-media-aside>
+                <b-media-body>
+                  <small class="text-muted mr-50">by</small>
+                  <small>
+                    <b-link class="text-body">{{ blog.userFullName }}</b-link>
+                  </small>
+                  <span class="text-muted ml-75 mr-50">|</span>
+                  <small class="text-muted">{{ dateFormat(blog.blogPosted) }}</small>
+                </b-media-body>
+              </b-media>
+              <div class="my-1 py-25">
+                <b-link v-for="(tag, index) in JSON.parse(blog.tags)" :key="index">
+                  <b-badge pill class="mr-75" :variant="tagsColor(tag)">
+                    {{ tag }}
+                  </b-badge>
+                </b-link>
+              </div>
+              <b-card-text class="blog-content-truncate">
+                {{ blog.excerpt }}
+              </b-card-text>
+              <hr>
+              <div class="d-flex justify-content-between align-items-center">
+                <b-link :to="{ path: `/pages/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>
+                  </div>
+                </b-link>
+                <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }" class="font-weight-bold">
+                  Read More
+                </b-link>
+              </div>
+            </b-card-body>
+          </b-card>
+        </b-col>
       </b-col>
       <b-col cols="12">
         <!-- pagination -->
@@ -221,7 +275,7 @@ export default {
       return require('@/assets/images/avatars/' + userId + '-small.png')
     },
     defaultsImg() {
-      return require('@/assets/images/banner/banner-27.jpg')
+      return require('@/assets/images/banner/banner-' + (Math.floor(Math.random() * 38) + 1) + '.jpg')
     },
   },
 }