Gridsome 入門篇之搭建基於 Markdown 的博客

項目架構

1. 初始化項目

gridsome create my-blog
cd my-blog
gridsome develop

若是第一步 create 在安裝依賴時報錯或耗時較長，可中斷安裝，刪除 node_modules，經過 cnpm 手動安裝。

cd my-blog
rm -rf node_modules
cnpm install

此時便可在 http://localhost:8080/ 看到項目的首頁。

2. 安裝解析文件的插件

• @gridsome/source-filesystem：將文件轉換爲 GraphQL 數據層可獲取的內容。
• @gridsome/transformer-remark：Gridsome 用於轉換 Markdown 的轉換器。

安裝

cnpm install @gridsome/source-filesystem @gridsome/transformer-remark -S

在 gridsome.config.js 中配置插件

plugins: [
  {
    use: "@gridsome/source-filesystem",
    options: {
      path: "blog/*.md",
      typeName: "Post"
    }
  }
]

插件的做用

@gridsome/source-filesystem 是將文件轉換爲能夠在組件中使用 GraphQL 獲取的內容，而轉換的時候須要轉換器才能解析文件。所以須要安裝 @gridsome/transformer-remark 依賴。只要在 package.json 中找到支持文件的轉換器，Gridsome 就會自動轉換文件。

@gridsome/source-filesystem 的配置參數：

• path：文件的路徑。
• typeName：GraphQL 類型和模板名稱。 src/templates 中的 .vue 文件必須與 typeName 匹配才能爲其具備模板。

3. 建立 markdown 文件的模版

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

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

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

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

4. 建立 blog 文件夾

根據 @gridsome/source-filesystem 插件中的 path 定義的路徑，新建 blog 文件夾，本示例中安裝的目錄與 src 同級。

blog 文件夾中新建 test.md 文件。

---
title: Test
author: Dora
---

## 一個測試頁面

這是 **markdown** 文件的內容區，請在此將您出衆的思想分享給你們！

此時便可在 localhost:8080/blog/test 中看到該頁面了。

5. 在 index.vue 中添加跳轉連接

在 index.vue 中可添加跳轉至 blog 頁面的入口連接。

<template>
  <Layout>
    <h1>Hello, Gridsome!</h1>

    <p v-for="edge in $page.posts.edges" :key="edge.node.id">
      <a :href="edge.node.path">{{edge.node.title}}</a>
    </p>
  </Layout>
</template>
<page-query>
query {
  posts: allPost{
    edges {
      node {
        id
        title
        path
      }
    }
  }
}
</page-query>

此時，就能夠愉快的在 blog 中寫 markdown 文件了。

然而，gridsome 默認 markdown 文件是沒有樣式的，所以想要頁面有本身的特點，須要自定義 markdown 中不一樣語法的樣式。

自定義個性化博客

全局樣式表和資源一般放在 src/assets 文件夾中，並導入到 src/main.js 中。

導入全局樣式表

安裝SASS

npm install -D sass-loader node-sass

導入樣式表

// main.js
import '~/assets/style/index.scss';

在 Gridsome 中，可使用別名 〜 或 @ 連接到 /src 文件夾中的文件。

定義樣式

Markdown 是一個 Web 上使用的文本到 HTML 的轉換工具，能夠經過簡單、易讀易寫的文本格式生成結構化的 HTML 文檔。

1. # - ###### 標題轉換爲 <h1> - <h6> 標籤

h3 {
  color: darkgoldenrod;
}

h4 {
  color: cadetblue;
}

2. 區塊引用 > 轉換爲 <blockquote> 標籤

blockquote {
  border-left: 4px solid darkgoldenrod;
  padding: 1px 10px;
  color: #666;
  background-color: rgba(184, 134, 11, 0.1);
}

3. 有序列表轉換爲 <ol> 標籤

4. 無序列表轉換爲 <ul> 標籤

5. 代碼塊會轉換爲 <pre> 和 <code> 標籤

pre[class*="language-"] {
  padding: 20px;
  background-color: rgba(95, 158, 160, 0.2);
  border: 1px solid rgba(95, 158, 160, 0.3);
  border-radius: 5px;
}

6. 行內代碼會轉換爲 <code> 標籤

p code {
  padding: 2px 4px;
  font-size: 14px;
  color: rgb(95, 158, 160);
  background-color: rgba(95, 158, 160, 0.2);
  border-radius: 3px;
}

7. 一個 * 或 _ 造成的斜體會被轉成用 <em> 標籤

8. 兩個 ** 或 __ 造成的粗體會被轉成用 <strong> 標籤

9. 超連接是 <a> 標籤，圖片是 <img> 標籤

a {
  color: #6b17e6;
  transition: opacity 0.2s;
  text-decoration: none;
  &:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
}

代碼塊語法高亮

安裝 remark-prismjs 插件

cnpm install @gridsome/remark-prismjs -S

在 main.js 中引入引入 css

import 'prismjs/themes/prism.css'

在 gridsome.config.js 中配置插件

將語法高亮運用到單個 markdown 文件夾。

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/*.md',
        typeName: 'Post'
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    }
  ]
}

將語法高亮運用到全部 markdown 文件。

module.exports = {
  transformers: {
    remark: {
      plugins: [
        '@gridsome/remark-prismjs'
      ]
    }
  }
}

若是要禁用行內代碼塊的高亮顯示，可在插件選項中配置 transformInlineCode: false 選項。

module.exports = {
  transformers: {
    remark: {
      plugins: [
        ['@gridsome/remark-prismjs', { transformInlineCode: false }]
      ]
    }
  }
}

自此，便可完整的經過 gridsome 實現一個基於 Markdown 的博客。