使用 gatsby-plugin-categories / gatsby-plugin-tags 标记云和类别列表
Posted
技术标签:
【中文标题】使用 gatsby-plugin-categories / gatsby-plugin-tags 标记云和类别列表【英文标题】：Tag cloud and Category list with gatsby-plugin-categories / gatsby-plugin-tags 【发布时间】：2020-12-18 07:22:03 【问题描述】：我想创建一个标签云（或类别列表），它应该链接到相应的标记文章和类别。但是在我构建的查询中，我只将name OR slug 连接起来，因为它们要么放在fields 要么放在frontmatter 中，而不是放在一个对象中
我使用这两个广泛使用的插件：https://github.com/rmcfadzean/gatsby-pantry
这是我当前的查询：
tags: allMarkdownRemark(filter: frontmatter: title: ne: "")
group(field: frontmatter___tags)
fieldValue
totalCount
edges
node
fields
tags
frontmatter
tags
"data":
"allMarkdownRemark":
"group": [
"fieldValue": "Another tag",
"totalCount": 1,
"edges": [
"node":
"fields":
"tags": [
"another-tag",
"my-example",
"post"
]
,
"frontmatter":
"tags": [
"Another tag",
"My example",
"Post"
]
]
,
"fieldValue": "Example",
"totalCount": 1,
"edges": [
"node":
"fields":
"tags": [
"example",
"post"
]
,
"frontmatter":
"tags": [
"Example",
"Post"
]
]
,
"fieldValue": "My example",
"totalCount": 1,
"edges": [
"node":
"fields":
"tags": [
"another-tag",
"my-example",
"post"
]
,
"frontmatter":
"tags": [
"Another tag",
"My example",
"Post"
]
]
,
"fieldValue": "Post",
"totalCount": 2,
"edges": [
"node":
"fields":
"tags": [
"another-tag",
"my-example",
"post"
]
,
"frontmatter":
"tags": [
"Another tag",
"My example",
"Post"
]
,
"node":
"fields":
"tags": [
"example",
"post"
]
,
"frontmatter":
"tags": [
"Example",
"Post"
]
]
]
,
我怎样才能得到这样的对象：
"tags":
[
"slug": "another-tag", "frontmatter": "Another Tag",
"slug": "example", "frontmatter": "Example"
]
【问题讨论】：
【参考方案1】：我目前的方法是在视图本身。我遍历 fields.tags 并在数组中搜索它们。我保存索引并将其用于 frontmatter.tags（它们的顺序相同）
正是那个代码：
<ul className="tagcloud">
tags.group.map((tag, idx) =>
var index = tag.edges[0].node.frontmatter.tags.indexOf(
tag.fieldValue
)
return (
<li key=idx>
<Link
to=`/tags/$tag.edges[0].node.fields.tags[index]`
className="transition link"
>
tag.fieldValue
</Link>
</li>
)
)
</ul>
【讨论】：
以上是关于使用 gatsby-plugin-categories / gatsby-plugin-tags 标记云和类别列表的主要内容，如果未能解决你的问题，请参考以下文章
在使用加载数据流步骤的猪中，使用（使用 PigStorage）和不使用它有啥区别？