基於Gridsome建立一個基於Vue.JS和Markdown的部落格

banq發表於2019-07-02
Vue.js

本文介紹如何使用Gridsome的JAMstack生成靜態站點，在文章的最後，我們將使用Markdown構建一個部落格作為生成的內容，使用GraphQL來查詢將在頁面上顯示的帖子。

靜態站點生成器是Web開發的新混合方法的一部分，允許您在計算機上本地構建功能強大的網站，但是將站點預構建為靜態檔案以進行部署。JAMstack是一種構建網站和應用程式的新方法，可提供更好的效能，更高的安全性，更低的擴充套件成本和更好的開發人員體驗

介紹Gridsome

Gridsome是一個Vue.js驅動的靜態站點生成器，用於建立可在任何地方部署的快速安全的網站。它使開發人員可以輕鬆構建現代JAMstack網站。

Gridsome捆綁了一些難以錯過的功能，這使它成為最受歡迎的靜態站點生成器之一。其中一些功能包括：

  • 使用熱重新載入進行本地開發 - 在開發過程中實時檢視更改。
  • 編寫Vue.js程式碼 - 一個輕量級且易於使用的前端框架。
  • GraphQL資料層 - 為您的所有資料集中管理資料。
  • 自動頁面路由 - 使用檔案快速建立和管理頁面。
  • 漸進式影象支援 - 自動調整大小，優化和延遲載入影象。
  • 自動頁面預取 - 頁面在後臺載入以便快速瀏覽。
  • 自動優化的程式碼 - 開箱即用的程式碼分割和資產優化。
  • 快速靜態頁面生成 - 安全，快速地部署到任何靜態Web主機。
  • 資料來源外掛 - 從流行的無頭CMS，API或Markdown檔案新增資料。

建立一個Gridsome專案

我們需要設定一個新的Gridsome專案，為此我們將需要執行以下命令。

第一步，使用npm或yarn在計算機上安裝Gridsome CLI。 

$ npm install --global @gridsome/cli or
$ yarn global add @gridsome/cli

安裝CLI後的下一步是繼續建立一個名為的新專案Telerik-blog並執行該專案。 

// create a new gridsome project
$ gridsome create telerik-blog
$ cd telerik-blog
$ gridsome develop

執行這些命令後，本地開發伺服器應該執行在http://localhost:8080，訪問可顯示的示例頁面。

如果我們嘗試更改此佈局頁面上的任何內容，那麼我們將看到它會自動更改螢幕上的內容。這是我們之前談到的Gridsome Hot Reloading功能的結果。

用Gridsome構建一個部落格

我們將開始描述我們試圖通過部落格實現的目標 - 我們將有一個包含帖子列表的單個頁面，並且每個帖子都包含Markdown中的內容。為了實現這一目標，我們需要安裝一個Gridsome外掛叫做gridsome/source-filesystem有助於轉換檔案轉換成可以與GraphQL在你的元件中獲取內容。繼續使用此命令安裝程式包：

yarn add @gridsome/source-filesystem or 
npm install @gridsom/source-filesystem

並在gridsome.config.js檔案中配置它：

module.exports = {
  siteName: 'Gridsome Blog',
  siteDescription: 'A simple blog designed with Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/posts/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ]
}

上面的配置是我們設定source-filesystem外掛所需的。這裡設定的選項：

  • path：我們將在帖子中消費的降價內容的位置。
  • typeName：GraphQL型別和模板名稱。一個.vue檔案src/templates必須符合typeName有它的模板。
  • route：這是每個帖子將遵循的路線，即 localhost:8080/blog/new-post

Gridsome使用Layouts作為頁面和模板的包裝器。佈局包含頁首，頁尾或側邊欄等slot元件以及插入來自頁面和模板的內容的元件。

<template>
  <div class="layout">
    <slot/> <!-- Page/Template will be inserted here -->
    <div class="footer">
      <p>
        Built with
        <a class="link" href="//gridsome.org">Gridsome</a>
        & Made with  by
        <a class="link" href="//twitter.com/lauragift21">Gift Egwuenu</a>
      </p>
    </div>
  </div>
</template>

上面的程式碼塊是我們的Default.vue元件。我們可以繼續瀏覽GitHub Repo中使用的樣式。

建立頁面佈局

頁面佈局將列出所有部落格帖子，也將作為主頁。在Gridsome中，Pages用於普通頁面以及列表和分頁GraphQL集合。在這種情況下，我們的部落格文章是集合。

頁面URL是根據檔案的位置和名稱生成的。例如，如果我們在pages目錄中建立一個檔案並命名它Index.vue，它將被視為index.html主頁。如果我們建立一個檔案並呼叫它About.vue也同樣適用- 它將被視為about.html並將被連結為/about。

這就是路由在Pages中的工作方式。因為我們只想在一個頁面中顯示所有內容，所以我們可以繼續建立Index.vue 檔案，或者如果我們已經為我們生成了一個檔案，那麼我們可以使用它。

我們Index.vue應該看起來像這樣： 

<template>
  <Layout>
    <header class="header">
      <h1>Gridsome Blog</h1>
      <p>A simple blog designed with Gridsome</p>
    </header>
  </Layout>
</template>

現在我們有了主頁，我們可以繼續建立一個部落格帖子列表並在頁面上顯示。我們可以在元件目錄中建立一個PostList.vue檔案，我們將在其中建立用於顯示部落格帖子列表：

<template>
  <div class="post-list">
    <hr class="line" />
    <p class="date" v-html="post.date" />
    <h1 class="title" v-html="post.title" />
    <p class="description" v-html="post.description" />
    <b> {{post.timeToRead}} min read </b>  &nbsp
    <g-link :to="post.path" class="read">Read More...</g-link>
  </div>
</template>

<script>
export default {
  props: ["post"],
};
</script>

在此檔案中，我們有用於顯示帖子列表的內容，我們還新增了一個post屬性，使我們能夠將資料從父元件傳遞到PostList子元件。

返回Index.vuePages目錄中，請記住我之前提到的Gridsome為您的所有資料提供了集中資料管理，在我們的例子中是指GraphQL。它使用<page-query>並將<static-query>資料提取到頁面，模板和元件中。在這裡，我們需要提取我們在Markdown中編寫的內容目錄中的所有帖子，並將它們顯示在我們的Vue元件中。

<page-query>
query {
  allPost {
    totalCount
    edges {
      node {
        id
        title
        timeToRead
        description
        date (format: "D MMMM YYYY")
        path
      }
    }
  }
}
</page-query>

現在，我們的Vue元件中有內容了，我們可以將它們傳遞給PostList.vue元件，如下所示：

<section class="posts">
  <PostList v-for="edge in $page.allPost.edges" :key="edge.node.id" :post="edge.node" />
</section>

顯示帖子佈局

現在我們有一個content顯示資料夾中的帖子列表。下一步是在單擊其中一個帖子時顯示單個帖子。我們將使用模板來處理這個問題。在Gridsome中，Template用於顯示GraphQL集合的單個帖子檢視。新增以下內容到templates目錄中Post.vue檔案。

<template>
  <Layout>
    <br>
    <g-link to="/" class="link">  &larr; Go Back</g-link>
    <div class="post-title">
      <h1>{{$page.post.title}}</h1>
        <p class="post-date"> {{ $page.post.date}} | {{$page.post.timeToRead}} min read 
      </p>
    </div>
    <div class="post-content">
      <p v-html="$page.post.content" />
    </div>
  </Layout>
</template>

要查詢單個帖子的內容，我們將使用page-query：

<page-query>
query Post ($path: String!) {
   post: post (path: $path) {
    id
    title
    content
    date (format: "D MMMM YYYY")
    timeToRead
  }
}
</page-query>

完成後，當您單擊read more主頁時，您應該看到我們在gridsome.config.js中配置的帶有帖子標題的單個帖子的內容

相關文章