Gridsome(三)：搭建简易博客网站

最新推荐文章于 2022-06-22 14:52:26 发布

莫亓

最新推荐文章于 2022-06-22 14:52:26 发布

阅读量1.1k

点赞数

分类专栏：初次见面请多关照是干货呀文章标签： gridsome

本文链接：https://blog.csdn.net/Bule_daze/article/details/103928162

版权

本文介绍了如何使用Gridsome创建一个简易的博客网站。通过安装和配置插件，如@gridsome/source-filesystem和@gridsome/transformer-remark，将Markdown文件转化为GraphQL数据。内容包括设置布局，创建blog文件夹，定义markdown模板，添加样式，实现代码块高亮，并在首页添加链接。此外，还提及了关于gridsome.config.js中一些参数的用途。

摘要由CSDN通过智能技术生成

创建一个新的 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'
      }
    }
  ]
}