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

Question

我正在使用 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 文档 我尝试在

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__”，则 Markdown 的所有属性都将变为小写。

我给你留下了一个例子，说明我如何过滤标签，这样它们是大写还是小写都没关系（都在网址中工作）：

_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>

Answer 2

我在源代码中发现了这一点，所以我在

Nuxt 3

中这样做：

.where({
  title: { $icontains: "Hello World!" }
})

源代码类型：

/**
   * Ignore case contains
   *
   * @example
    ```ts
    queryContent().where({
      title: {
        $icontains: 'hello world'
      }
    })
    ```
   **/
  $icontains?: string