@nuxt/content的大坑

目录

• 一. this.$content().search()只能获得从开头开始输入的字段
  • 解法一
  • 解法二

一. this.$content().search()只能获得从开头开始输入的字段

官网链接
https://nuxtjs.org/docs/directory-structure/content/
https://content.nuxtjs.org/v1/getting-started/fetching

解法一

1. 首先安装插件
   remove-markdown： 用于将Markdown文本转为普通文本
   https://www.npmjs.com/package/remove-markdown

npm i remove-markdown

2. 然后在 nuxt.config.js 配置 hooks

hooks: {
    'content:file:beforeInsert': (document)=>{
	// 注册插件
      const removeMd = require('remove-markdown');
      if(document.extension === '.md'){
        // 删除Markdown格式的文本
        document.bodyPlainText = removeMd(document.text);
        // 合并title和删除Markdown格式的文本bodyPlainText
        document.bodyPlainTextAndTitle = `${document.title}\n${document.bodyPlainText}`
      }
    }
  },

3. 在官方案例的Search.vue中改造

watch: {
    async q(q) {
      this.focusIndex = -1
      if (!q) {
        this.searching = false
        this.results = []
        return
      }
      this.searching = true
      this.results = []
      // 原来的搜索search必须从开头开始输入
      // this.results = await this.$content('doc', { deep: true, text: true })
      //   .sortBy('position', 'asc')
      //   .search(q)
      //   .fetch()
	  // 改为使用where
      this.results = await this.$content('doc', { deep: true, text: true })
        .sortBy('position', 'asc')
        .where({bodyPlainTextAndTitle: {$regex: q}})
		// .where({bodyPlainTextAndTitle: {$regex: [q, 'i']}})
        .fetch()
      this.searching = false
    }
  },

解法二

前两步与解法一相同
3. 在官方案例的Search.vue中改造

watch: {
    async q(q) {
      this.focusIndex = -1
      if (!q) {
        this.searching = false
        this.results = []
        return
      }
      this.searching = true
      this.results = []
      // 原来的搜索search必须从开头开始输入
      // this.results = await this.$content('doc', { deep: true, text: true })
      //   .sortBy('position', 'asc')
      //   .search(q)
      //   .fetch()
	  // 查询所有数据
      const all = await this.$content('doc', { deep: true, text: true })
          .sortBy('position', 'asc')
          .fetch()
      // 过滤会使正则报错的特殊字符 +*()[]?
      let query = q.replace(/[\?|\(|\)|\+|\*|\[|\]]/g,'')
      if (query) {
        query = new RegExp(query)
        // 循环校验是否匹配输入值
        for (let i = 0; i < all.length; i++) {
		// 判断query是否在 title和删除Markdown格式的文本bodyPlainText里
          if (query.test(all[i].bodyPlainText)||query.test(all[i].title)) {
            this.results.push(all[i])
          }
        }
      }
      this.searching = false
    }
  },