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>
  

  样式省略。。。。。。

• 效果图