如何为nuxt-content编写不区分大小写的查询

Question

我正在用Nuxt内容写我的博客，它可以根据帖子的属性过滤帖子。我的属性之一是tags。现在我想为每个标签创建一个页面。

我当前的解决方案是有效的，但是查询是区分大小写的，而我希望它是不区分大小写的。

<script>
export default {
  async asyncData({ $content, params }) {
    const tag = params.tag

    const articles = await $content('blog', params.slug)
      .where({ tags: { $contains: tag } })
      .only(['title', 'slug', 'description', 'createdAt', 'body'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles, tag }
  },
}
</script>

基于LokiJS documentation，我尝试在where函数中使用一个函数，但它返回所有帖子，而不仅仅是给定标记的帖子。

<script>
export default {
  async asyncData({ $content, params }) {
    const tag = params.tag

    const articles = await $content('blog', params.slug)
      .where(function (article) {
        return article.tags
          .map((tag) => tag.toLowerCase())
          .contains(params.tag.toLowerCase())
      })
      .only(['title', 'slug', 'description', 'createdAt', 'body'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles, tag }
  },
}
</script>

那么，我应该如何编写查询，以便获得包含标签的文章，而不必担心区分大小写。

Answer 1

今天我遇到了同样的问题。

我找到的最接近的文档是：https://content.nuxtjs.org/snippets/#case-insensitive-sorting

但是，通过分析代码，我得出结论，在本例中，数据被注入到.md文件中

修改一下代码片段我设法让它以正确的方式工作，我给你留下了下面的代码：(你必须将它添加到nuxt.config.js文件中)

hooks: {
    'content:file:beforeInsert': document => {
      if (document.extension === '.md') {
        Object.entries(document).forEach(([key, value]) => {
          const _key = `case_insensitive__${key}`;

          // Strings
          if (!document[_key] && typeof value === 'string') {
            document[_key] = value.toLocaleLowerCase();
          }

          // Arrays
          if (!document[_key] && Array.isArray(value)) {
            document[_key] = value.map(val => {
              if (typeof val === 'string') {
                return val.toLocaleLowerCase();
              }
              return val;
            });
          }
        });
      }
    },
  },

在此之后，如果您将前缀"case_insensitive__“放在标记下，则标记的所有属性都将是小写的。

我给你一个例子，说明我是如何过滤标签的，以便它们是大写还是小写都无关紧要(两者都可以在url中使用)：

_tag.vue
...
<script>
  export default {
    async asyncData({ $content, params }) {
      const articles = await $content('articles')
        .where({ case_insensitive__tags: { $contains: params.tag.toLowerCase() } })
        .without('body')
        .sortBy('createdAt', 'asc')
        .fetch();
      return {
        articles,
      };
    },
  };
</script>