如何给网站添加查看更多的功能

现在我们可以看到很多网站都有一个查看更多的功能，需要点击这个按钮才能看到完整的功能，究其原因还是网站想留住用户，通过这个功能来跟用户产生互动。

同时这个功能还能防止一些爬虫无节制的爬取资源，比如一些采集站点通过爬虫不停地爬取某个网站的内容作为伪原创内容发布到自己的网站，这个时候查看更多功能就发挥了很好的效果，必须要手动点击才能看到完整内容，对于一般的爬虫当然无能为力了。

当然如果爬虫的技术稍微好点就会在模拟点击这个按钮，所有想要完全避免也是不可能的，对于一些免费内容如果要阻止爬虫爬取就只能限制需要登录才能查看，如果这样就失去了一些传播效果了。当然爬虫其实也是可以登录爬取的。

说回笔者给自己的网站加查看更多功能的初衷，一方面是防止爬虫不停爬取浪费服务器资源，这些爬虫不限于一般的采集资源的爬虫，还有搜索引擎的爬虫，通过看看Nginx的日志发现有一些国外的爬虫几乎是一天24小时不停地爬取内容。

另一方面是为了加强与用户的交互体验，虽然对于用户来说可能多了一个点击操作，但是如果内容足够优质能够吸引用户点击这个按钮，那么对于一个网站来说也是很不错的，方便统计从而更好的提供优质服务。

对于笔者的网站来说，要实现查看更多的功能其实是很方便的，因为网站采用Nuxtjs开发，vue的语法，通过v-if就能很容易实现，即请求完接口后将完整内容截取前2000个字符渲染到页面，同时将完整内容存入另一个变量，用户点击查看更多变量后将完整内容的变量值赋给之前的变量，就能看到完整内容。

async asyncData({ $axios, route, error }) {
    let [detail] = await Promise.all([getDetailApi(route.params.id)]);

    let result = {
      detailData: detail.data.result,
      postId: route.params.id,
      contentAll: detail.data.result.content
    };
    if (result.detailData.content.length > 2000) {
      // 大于2000字符显示查看更多按钮
      result.detailData.content = result.detailData.content.slice(0,2500)
      result.showAll = true
    }
    return result
  },

点击查看按钮后：

getMore() {
      this.showAll = false
      this.detailData.content = this.contentAll  // 将完整内容的变量值赋值给content字段
    },

本文章由javascript技术分享原创和收集