gridsome(四)——搭建簡易博客/獲取markdown文件內容

準備工作

• 創建項目：gridsome create +項目名

• 進入項目：cd +項目名

• 運行：gridsome develop
  之後在瀏覽器中訪問：localhost:8080即可看見以下界面：

安裝插件

我們的目標是搭建一個簡單的博客，而博客的內容是Markdown文檔，所以需要使用gridsome插件將文件轉換爲可以使用GraphQL在組件中獲取的內容。以下2個插件具體介紹參考gridsome(三)。

• 將文件轉換爲可以在組件中使用GraphQL 獲取的內容：cnpm install @gridsome/source-filesystem -S
• 轉換器:cnpm install @gridsome/transformer-remark -S

配置插件

在gridsome.config.js中配置插件信息：

module.exports = {
  siteName: 'Learn Gridsome',
  siteDescription: '',
  plugins: [{
      use: "@gridsome/source-filesystem",
      options: {
        path: "src/blog/*.md",
        typeName: "myPage"    //此處是GraphQL 類型和模板名稱，必須與src/templates 中的 .vue 文件匹配才能應用其模板。
      }
    }
  ]
}

創建markdown文件模板

在 templates文件夾下新建 myPage.vue文件，該文件即 markdown文件的模版頁面，所有的 markdown文件會根據此文件的佈局渲染出頁面。

<template>
  <Layout>
    <div v-html="$page.myPage.content"/>
  </Layout>
</template>

<page-query>
query ($id: ID!) {
  myPage(id: $id) {
    title
    content
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.myPage.title
    }
  }
};
</script>

創建博客內容

按照在gridsome.config.js文件中安裝的@gridsome/source-filesystem配置的 path，新建 blog文件夾，與 src 同級,該目錄下新建 test.md文件。

• 文件目錄如下所示：

• 文件內容

  ---
  title: Blog
  ---
  
  # 標題一
  
  ## 標題二
  
  ### 標題三
  
  這是 **markdown** 文件的內容區！
  
  

• 瀏覽器訪問：http://localhost:8080/src/blog/test即可看見以下頁面：

  
  搭建超級簡單的博客就完成啦😄😄😄

結合樣式搭建簡易博客

其他內容不變，修改test.md與 myPage.vue文件內容即可：

• test.md文件

  ---
  title: Bolg
  description: Markdown is intended to be as easy-to-read and easy-to-write as is feasible.Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.
  author: Author:Anna
  date: 2020/2/5
  ---
  
  # Gridsome Blog Starter
  
  A simple, hackable & minimalistic starter for Gridsome </br>that uses Markdown for content.
  

• myPage.vue文件

  <template>
    <Layout>
      <div class="bogBox">
        <g-image src="../assets/Img/1.jpeg" class="img"></g-image>
        <div v-html="$page.myPage.content" class="content" />
      </div>
      <div class="description">
        <div v-html="$page.myPage.description"></div>
        <div v-html="$page.myPage.author" class="author"></div>
        <div v-html="$page.myPage.date" class="date"></div>
      </div>
    </Layout>
  </template>
  
  <page-query>
  query ($id: ID!) {
    myPage(id: $id) {
      title
      content
      description
      author
      date
    }
  }
  </page-query>
  
  <script>
  export default {
    metaInfo() {
      return {
        title: this.$page.myPage.title
      };
    }
  };
  </script>
  

  樣式省略。。。。。。

• 效果圖