创建一个新的 Gridsome 项目。
gridsome create myBlog
control + c
cd myBlog
cnpm install
gridsome develop
默认界面:
修改后的界面:
目标
搭建一个博客网站。
我们需要一个包含博客列表的页面,然后每篇博客的内容为 Markdown 文档。
首先,我们需要创建一个新的 Gridsome 项目。
gridsome create myBlog
control + c
cd myBlog
cnpm install
gridsome develop
安装插件
GraphQL数据层 —— 为您的所有数据集中管理数据。
为了将文件转换为 GraphQL 数据层可获取的内容,我们需要安装一个叫做 @gridsome/source-filesystem
的插件:
cnpm install @gridsome/source-filesystem -S
然后,又因为我们的博客内容为 Markdown 文件,所以我们还需安装一个叫做 @gridsome/transformer-remark
的插件:
cnpm install @gridsome/transformer-remark -S
用于 Gridsome 转换 Markdown 的转换器。
配置插件
接下来,我们需要在 gridsome.config.js
中配置一下插件:
module.exports = {
siteName: 'Gridsome Blog',
siteDescription: 'A simple blog designed with Gridsome',
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'src/blog/*.md',
typeName: 'Blog'
}
}
]
}
上面的配置是设置 source-filesystem 插件所需的。选项:
- path:博客内容存放的位置。
- typeName:GraphQL 类型和模板名称。
src/templates
中的 .vue 文件必须与 typeName 匹配才能应用其模板。
Layouts
Gridsome 使用 Layouts 作为页面和模板的包装器。布局包含页眉,页脚或侧边栏等 slot 组件以及插入来自页面和模板的内容的组件。
<template>
<div class