✨ add similar recommend for post page #62

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nicelinks-vue-client",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A nice website for assembling nice links created using Vue.js",
   "author": "jeffjade <[email protected]>",
   "private": true,

src/assets/scss/common.scss

@@ -248,12 +248,20 @@ input:-ms-input-placeholder {
     display: block;
   }
   .v {
-    padding: 15px 20px;
+    padding: 0 20px;
   }
-  .v[data-class='v'] blockquote {
-    border-left-width: 4px;
-    p {
-      color: $silver-grey;
+  .v[data-class='v'] {
+    blockquote {
+      border-left-width: 4px;
+      p {
+        color: $silver-grey;
+      }
+    }
+    .vcomment {
+      display: block;
+    }
+    .vpanel {
+      margin: 0.5em auto;
     }
   }
 }

src/components/SimilarRecommend.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="similar-recommend" v-if="linksArr.length > 0">
+    <h2 class="title">猜您可能喜欢</h2>
+    <div class="list-item" v-for="(item, index) in linksArr" :key="index">
+      <router-link
+        class="gtag-track jump-link"
+        data-action="route-entry"
+        data-category="recommend"
+        data-label="route-entry"
+        :to="getAssembleRoute(item)"
+      >
+        <div class="screenshot">
+          <img class="image" :src="getScreenshotPath(item)" :alt="item.title + ' | 倾城之链'" />
+        </div>
+        <div class="meta">
+          <h3 class="title">{{ getAssembleTitle(item) }}</h3>
+          <div class="desc">{{ getAssembleDesc(item) }}</div>
+        </div>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import pageMixin from 'mixins/pageMixin.js'
+import marked from 'marked'
+
+export default {
+  name: 'SimilarRecommend',
+
+  mixins: [pageMixin],
+
+  data() {
+    return {
+      linksArr: [],
+      RECOMMEND_NUM: 5,
+      isMobile: window.innerWidth <= 960,
+    }
+  },
+
+  props: {
+    pdata: {
+      type: [Array, Object],
+      default: () => {
+        return []
+      },
+    },
+  },
+
+  watch: {
+    pdata() {
+      this.fetchSimilarTagLinks()
+    },
+  },
+
+  mounted() {},
+
+  components: {},
+
+  methods: {
+    assembleSimilarLinks(resArr) {
+      const tempArr = resArr.filter((item) => {
+        return item._id !== this.pdata._id
+      })
+      this.linksArr = tempArr.slice(0, this.RECOMMEND_NUM)
+    },
+
+    fetchSimilarTagLinks() {
+      this.$apis
+        .getLinksByTag({
+          active: true,
+          alive: true,
+          pageCount: 1,
+          pageSize: this.RECOMMEND_NUM + 1,
+          sortType: 1,
+          sortTarget: 'created',
+          tags: this.pdata.tags[0],
+        })
+        .then((res) => {
+          this.assembleSimilarLinks(res)
+        })
+        .catch((error) => {
+          console.error(`Something Error @fetchSimilarTagLinks：`, error)
+        })
+        .finally(() => {})
+    },
+
+    getAssembleTitle(item) {
+      const limit = this.isMobile ? 30 : 50
+      return this.$util.interceptString(item.title, limit)
+    },
+
+    getAssembleDesc(item) {
+      const limit = this.isMobile ? 50 : 80
+      const content =
+        marked(item.review, {
+          sanitize: false,
+        }).replace(/<[^>]*>/g, '') || item.desc
+      return this.$util.interceptString(content, limit)
+    },
+
+    getAssembleRoute(item) {
+      return `/post/${item._id}`
+    },
+
+    getScreenshotPath(item) {
+      const urlPath = this.$util.getHostnameByUrl(item.urlPath)
+      return `https://oss.nicelinks.site/${urlPath}.png?x-oss-process=style/png2jpg&imageView2/1/w/320/h/180/interlace/1/ignore-error/1`
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../assets/scss/variables.scss';
+@import '../assets/scss/mixins.scss';
+.similar-recommend {
+  width: 100%;
+  padding: 15px 20px;
+  .title {
+    font-size: $font-large;
+    color: $black;
+    text-align: left;
+    font-weight: 500;
+    padding: 10px 0;
+  }
+  .jump-link {
+    @include flex-box-center(row, space-between, center);
+    height: 100%;
+    padding: 1rem;
+  }
+  .list-item {
+    width: calc(100% - 2rem);
+    height: 9rem;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+    margin: 1.2rem auto;
+    box-sizing: content-box;
+    @include flex-box-center(column, center, inherit);
+    .screenshot {
+      width: 20%;
+      height: 4rem;
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .meta {
+      width: 78%;
+      height: 100%;
+      @include flex-box-center(column, space-between, flex-start);
+      text-align: left;
+      .title {
+        width: 100%;
+        font-size: $font-medium;
+        color: $link-title;
+        margin: 0;
+        padding: 0;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .desc {
+        color: $silver-grey;
+        font-size: $font-small;
+        line-height: 1.8rem;
+        word-spacing: 3px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .similar-recommend .list-item {
+    height: 10rem;
+  }
+}
+</style>

src/components/linksList/Index.vue

@@ -12,11 +12,11 @@
       </div>
     </el-card>
     <el-card
+      v-else
       :class="cardClassName"
       shadow="hover"
-      key="index"
+      :key="index"
       v-for="(item, index) in pdata"
-      v-if="pdata.length > 0"
     >
       <router-link
         class="gtag-track"
@@ -31,13 +31,6 @@
       <LinkItem v-else :item="item" :is-abstract="isAbstract"></LinkItem>
       <slot name="link-share"></slot>
     </el-card>
-    <div class="advert-area">
-      <img
-        src="https://image.nicelinks.site/倾城之链-Banner.png"
-        onerror="javascript:this.src='https://s1.ax1x.com/2020/07/09/UnsWdg.png';"
-        alt="倾城之链：云集世间优秀站点"
-      />
-    </div>
   </div>
 </template>
 
@@ -172,14 +165,6 @@ export default {
       text-align: left;
       border-bottom: 1px solid $item-border-color;
     }
-    .advert-area {
-      width: 100%;
-      padding-top: 15px;
-      img {
-        width: 100%;
-        box-shadow: 0px 0px 20px lightgrey;
-      }
-    }
   }
 }
 </style>

src/components/linksList/LinkItem.vue

@@ -414,14 +414,14 @@ export default {
     word-break: break-all;
   }
   .link-desc {
-    color: $black-grey;
+    color: $silver-grey;
     margin: 15px auto;
     padding-left: 10px;
     word-break: break-all;
     line-height: $font-medium;
     font-size: $font-small;
     word-spacing: 3px;
-    border-left: 2px solid $black-grey;
+    border-left: 2px solid $border-grey;
   }
   .segmenting-line {
     border-top: 1px solid #8c8b8b;

src/helper/util.js

@@ -254,15 +254,24 @@ export default {
   // 获取字符串实际长度(包含汉字,汉字统一按照 2 字节算;)
   getByteLength(str = '') {
     if (typeof str !== 'string') return str.length
-    return str.replace(/[^\x00-\xff]/g, 'aa').length
+    return str.replace(/[\\u4E00-\\u9FFF]+/g, 'aa').length
   },
 
   interceptString(string = '', length = 140) {
-    if (this.getByteLength(string) > 140) {
-      return string.substring(0, length) + '...'
-    } else {
-      return string
+    let count = 0
+    let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
+    let result = ''
+    for (let i = 0, len = string.length; i < len; i++) {
+      const target = string[i]
+      const isChinese = reg.test(target)
+      result += target
+      const step = isChinese ? 2 : 1
+      count += step
+      if (count >= length) {
+        return result + '...'
+      }
     }
+    return string
   },
 
   updateAfterFilterEmptyValue(obj) {

src/views/Post.vue

@@ -5,6 +5,7 @@
         <div class="main-container">
           <div class="entry-list">
             <links-list :pdata="niceLinksArr" :is-loading="isLoading" />
+            <SimilarRecommend :pdata="niceLinksArr[0]" />
             <div id="waline"></div>
           </div>
           <aside-list :index="index"></aside-list>
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import SimilarRecommend from 'components/SimilarRecommend'
+
 export default {
   name: 'Post',
 
@@ -31,7 +34,9 @@ export default {
 
   watch: {},
 
-  components: {},
+  components: {
+    SimilarRecommend,
+  },
 
   created() {
     this.fetchPostData()