gridsome template 介紹

是為了collections裡面的node產生頁面，因此template資料夾裡面的檔案命名是{collection}的名稱。 src/templates/{Collection}.vue，以redditPost為例，新增template/redditPost.vue。

// template/redditPost.vue

<template lang="pug">
  BlogLayout
    h1 {{$page.redditPost.title}}
    //- components
    h2 {{$page.metadata.message}}
    img.reddit-img(:src="$page.redditPost.fields.img")
</template>

<page-query>
query redditPost ($path: String!){
  redditPost: redditPost (path: $path){
      title
        path
      fields{
        img
      }
  },
  metadata: metadata {
    message
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.redditPost.title
    };
  }
};
</script>
<style lang="sass">
.reddit-img
  width: 100%
</style>