在Gridsome中，显示来自多个目录的文章列表
※這篇文章是轉載自我的部落格，如果您也有興趣，歡迎點擊觀看〜
首先
Gridsome可以将各种数据显示为静态网站。这次我们将讨论在创建社团网站时遇到的问题，并整理了如何显示多个目录下的Markdown文件列表的方法。
如果对这篇文章有任何建议或反馈，请在评论框或联系我的GitHub上告知，因为这篇文章中的内容是我个人的解释。
Gridsome是一个开源的静态站点生成框架，基于Vue.js构建。它使用GraphQL查询来获取数据，并以静态HTML文件的形式生成网站，使网站加载速度更快。Gridsome还支持PWA（渐进式Web应用程序），并具有自动生成优化的图像、代码分割和路由功能。它易于使用且功能强大，适用于个人博客、电子商务网站等各种项目。
让我们超简略地介绍一下Gridsome吧。
Gridsome是一个用Vue编写的静态网站生成器。类似的技术还有用React编写的Gatsby。静态网站生成器是专门用于生成静态网站（如HTML等）的工具，通常在数据交互相对较少的网站（如个人作品集或博客）中使用。
Gridsome是受Gatsby启发而开发的技术，其机制也类似于Gatsby。数据，像CMS或Markdown文件等，被暂时存储在一个称为GraphQL数据层的工具中，然后最终生成静态网站。Gridsome官方网站也对数据层进行了以下解释。
GraphQL数据层是开发模式下可用的工具。这是将所有数据导入Gridsome项目时临时存储的地方。可以将其视为一种本地数据库，可以帮助您更快速和更好地处理数据。
来源：GraphQL 数据层
导入Markdown数据
截至2020年10月3日，开发环境如下所示。
我們將在這個工作中分別用不同的目錄管理新聞和產品的文章，然後將批量的Markdown數據導入GraphQL數據層，並在首頁上顯示。
由于这次想将Markdown文件转换为数据，所以需要引入一个可以将Markdown文件导入到GraphQL数据层的Gridsome插件。使用以下命令将名为@gridsome/vue-remark的插件安装进来。本次使用Yarn进行安装。
$ yarn add @gridsome/vue-remark
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
.
.
.
Done in 10.34s.
完成@gridsome/vue-remark的安装后，将以下内容写入gridsome.config.js。
//gridsome.config.js
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: '@gridsome/vue-remark',
options: {
typeName: 'NewsPost', // 必須。GraphQL上で扱う型定義
baseDir: './posts/news', // 記事となるmarkdownファイルを置くディレクトリ
pathPrefix: '/news', // URLになるパス。必須ではない。
template: './src/templates/NewsPost.vue' // 記事ページのVueコンポーネントファイルの指定
}
},
{
use: '@gridsome/vue-remark',
options: {
typeName: 'ProductPost',
baseDir: './posts/products',
pathPrefix: '/products',
template: './src/templates/ProductPost.vue'
}
}
]
}
使用Gridsome从零开始创建博客 – 参考代码而不是使用Markdown文件来创建文章
这些写作方法已经详细介绍在@gridsome/vue-remark中。这部分可以如下解释。
-
- マークダウンファイルをデータとして利用するには、マークダウンファイルを入れておくディレクトリがそれぞれのGraphQL上の型1つにつき1つ必要。
NewsとProductのそれぞれに対して、GraphQL上の型・格納するディレクトリ・パス・テンプレートファイルの指定を行っている。
先程導入したプラグインを、NewsとProductのそれぞれに対して適用させている。
这个gridsome.config.js文件是Gridsome项目的数据配置文件，因此非常重要。这个配置文件决定了是否能够成功加载数据，所以务必要仔细编写。
因为数据定义已经完成，所以现在要创建一个存储Markdown文件的目录作为数据。
mkdir posts/news
mkdir posts/products
在两个news目录和products目录中，我们将以以下格式创建Markdown文件。如果这两个目录中都不存在这种格式的Markdown文件，则会报错，因此请确保两个目录都创建好文件。
---
title: "成功していればここにタイトルが表示されます"
---
## これは最初の投稿です
マークダウンで記事一覧を表示することかできたぞ!やったぜ!
テンションあがるなｧ＾〜
通过这种方式创建了一个Markdown文件。被包围的部分被称为”Front Matter”，可以用来描述和设置每个Markdown文件的元数据。当描述Front Matter时，插件会通过GraphQL数据层将元数据导入。具体来说，
-
- title: マークダウンファイルでtitleを記述した部分
- content: 記事本文
除了这两个之外，
- id: 各マークダウンファイルに紐付けられている一意の文字列
有三个信息已经导入。接下来，根据需要在这些数据层上进行查询。
创建投稿目录页面
然后，我们会在每个页面上编写GraphQL，从导入到数据层的数据中查询所需的数据。我们将在Index.vue中的默认代码中添加查询GraphQL数据的部分。需要注意的是，
