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

【问题标题】：How to write a case-insensitive query for nuxt-content如何为 nuxt-content 编写不区分大小写的查询
【发布时间】：2020-12-25 09:01:29
【问题描述】：

我正在使用 Nuxt Content 编写我的博客，它可以根据帖子的属性过滤帖子。我的属性之一是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>

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

【问题讨论】：

标签： nuxt.js lokijs

【解决方案1】：

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

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

但是，分析代码后我得出的结论是，在这个示例中，数据被注入到 .md 文件中

稍微修改一下 sn-p 我设法让它以正确的方式工作，我给你留下下面的代码：（你必须将它添加到 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>

【讨论】：