1

我使用 Gridsome 建立了一个博客，到目前为止一切正常。要创建新帖子，我只需在文件夹中创建一个新的 Markdown 文件Post，它会自动呈现在前端。前端显示一个Blog.vue带有分页的基本页面，其中显示每个帖子的标题、作者、日期、可点击和自动生成的标签，还有一个“阅读更多”按钮，单击该按钮会将用户带到Post.vue显示博客文章的页面及其相关内容。我正在使用 graphQL 来显示每个帖子及其内容，以及使用的链接<page-query>（我不会在这里发布它，因为我不确定它是否相关）。

每个帖子都有一个降价文件，并且在每个 .md 文件的 YAML 标头中，我可以tags在我的 Vue 应用程序中放置类似于 twitter 主题标签的功能。单击后，用户将被定向到显示“所有已标记的帖子{标签名称}”的页面。这是通过将我的 Tag.vue 放在我的templates文件夹中并在页面上使用以下查询来完成的。

还使用...

Tags { id path }

.. 在<page-query>我的 Blog.vue 文件中

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

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

这是我的 Tag.Vue

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

我正在尝试使用 YAML 标头变量 "author:" 做一些非常相似的事情，但是我遇到了麻烦，并且诚然不知道从哪里开始。

我试图Authors.vue在我的模板中添加一个文件夹，并制作一个类似的文件夹<page-query>，但我无法让它工作，但我想我可能走在正确的轨道上。

我希望有一个“作者”页面，它只显示一个样式化的作者列表，点击后，将显示所有用户的帖子，并允许用户点击博客文章上的作者姓名，并将指向此“作者”页面。

这是我的结构以供更好的参考。

在此处输入图像描述

感谢您花时间阅读。预先感谢您的回复。

4

0 回答 0