如何在Gridsome博客中为YAML Markdown作者进行GraphQL查询

Question

我使用Gridsome建立了一个博客，到目前为止一切都很好。要创建新帖子，我只需在文件夹Post内创建一个新的Markdown文件，该文件会自动呈现在前端。前端显示带有分页的基本页面Blog.vue，其中显示每个帖子的标题，作者，日期，可点击和自动生成的标签，还具有“阅读更多”按钮，当单击该按钮时，会将用户带到{ {1}}，显示博客文章及其相关内容。我正在使用graphQL来显示每个帖子及其内容，以及使用Post.vue的链接（由于不确定其相关性，我不会在此处发布）。

每个帖子都有一个markdown文件，并且在每个.md文件的YAML标头中，我都可以将<page-query>放在Twitter的Vue App中，其功能类似于twitter hashtags。单击后，用户将被定向到显示“所有带有标签{标签名}的帖子” 的页面。这是通过将Tag.vue放在tags文件夹中并在页面上使用以下查询来完成的。

还在使用...

templates

..在我的Blog.vue文件的Tags { id path }中

这是我用来获取所有带有特定标签的帖子的<page-query>。

<page-query>

这是我的Tag.Vue

<page-query>
query ($id: String!){
  tag (id: $id) {
    title
    belongsTo {
      edges {
        node {
          ... on Post {
           id
        title
        excerpt
        date (format: "MMMM Do, YYYY")
        tags {
          id
          path
        }
        timeToRead
        path
        cover_image(width: 600, height:300, quality: 90, blur: 1)
          }
        }
      }
    }
  }
}
</page-query>

我正在尝试使用YAML标头变量“ author：”进行非常相似的操作，但是我遇到了麻烦，并且不知道确切地从哪里开始。

我试图在模板中添加一个<h1 style="color: white">Posts tagged #{{ $page.tag.title }}</h1> <article v-for="edge in $page.tag.belongsTo.edges" :key="edge.node.id"> <div class="postContainer"> <g-image :src="edge.node.cover_image" style="width: 100% ; padding-top: 15px;"></g-image> <h2>{{ edge.node.title }}</h2> <p>{{ edge.node.excerpt }}</p> <p>Posted {{ edge.node.date }} - {{ edge.node.timeToRead }} min read</p> <!-- <div v-html="edge.node.content"></div> --> <div class="div1"> <g-link class="span" style="padding: .5em ; background-color: #091A28" v-for="tag in edge.node.tags" :to="tag.path" :key="tag.id" >{{ tag.id }}</g-link> <br /> <div class="readMore"> <g-link :to="edge.node.path" class="gLinkPost">Read More</g-link> </div> </div> </div> </article> 文件夹，并制作一个类似的Authors.vue，但是我无法使其正常工作，但我认为我可能会走上正轨。

我希望有一个“作者” 页面，该页面仅显示样式化的作者列表，当单击该页面时，将显示所有用户的帖子，并允许用户单击作者在博客文章上命名，并将直接转到此“作者” 页面。

这是我的结构，可供参考。

感谢您抽出宝贵的时间阅读。预先感谢您的答复。