gridsome(三)——plugins

Gridsome插件是npm软件包，可以将其安装到任何项目中。gridsome中有很多插件，简单学几个吧：👇👇👇

@gridsome/source-filesystem

将文件转换为可以使用GraphQL在组件中获取的内容。

• 安装

  //1、yarn安装
  yarn add @gridsome/source-filesystem
  //2、npm或者cnpm安装
  npm/cnpm install @gridsome/source-filesystem
  

• 使用

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

• 说明
  @gridsome/source-filesystem 是将文件转换为可以在组件中使用GraphQL 获取的内容，而转换的时候需要转换器才能解析文件,为了使Gridsome理解文件的内容，必须在项目中安装@ gridsome / transformer-remark(该插件在下面会介绍)作为dev依赖项。只要在package.json中找到支持文件的转换器，Gridsome就会自动为您转换文件。

• options(参数说明)

  • path
    • type:String
    • 说明：文件路径
  • typeName
    • type:String
    • Default: FileNode
    • 说明：GraphQL类型和模板名称。src / templates中的.vue文件必须与typeName匹配才能为其具有模板。
  • baseDir

    • type:String

    • 说明：所有文件的基本目录。从文件路径生成路由时，将不包括baseDir。如果省略，该选项默认为项目根目录。

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

@gridsome/transformer-remark

Gridsome通过 remark 转换 Markdown的转换器。

• 安装

  //1、yarn安装
  yarn add @gridsome/transformer-remark
  //2、npm或者cnpm安装
  npm/cnpm install @gridsome/transformer-remark
  

• 使用
  如果在项目中安装了转换器，则会自动使用。可以为每个源插件或全局设置自定义转换器选项。

  //gridsome.config.js
  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {
          path: 'blog/**/*.md',
          typeName: 'Post',
          remark: {
            // remark options (为该源插件设置转换器)
          }
        }
      }
    ],
    transformers: {
      remark: {
        // global remark options(全局设置转换器)
      }
    }
  }
  

• 🌰

  将remark-attr插件全局添加到项目中（需要安装该插件）

  {
    remark: {
      plugins: [
        'remark-attr'
      ]
    }
  }
  

  参数说明如下👇👇👇：

• Options

  • plugins

    • Type: array
    • Default: []

  • useBuiltIns

    将此选项设置为false可禁用所有内置插件。

    • Type: boolean
    • Default:true

  • grayMatter

    从字符串或文件中解析 front-matter 前置内容。

    • Type: object
    • Default: {}

  • squeezeParagraphs

    删除空（或仅空格）段落。

    • Type: boolean
    • Default:true

  大致罗列这么多吧，更多信息参考官网。

@gridsome/remark-prismjs

Markdown代码块的语法突出显示器。

• 安装

  //yarn安装
  yarn add @gridsome/remark-prismjs
  //npm/cnpm安装
  npm/cnpm install @gridsome/remark-prismjs
  

• 使用

  在main.js文件中，导入Prism CSS主题:

  import 'prismjs/themes/prism.css'
  

  在gridsome.config.js中，将语法高亮器添加到单个markdown源中：

  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {
          path: 'blog/**/*.md',
          route: '/blog/:year/:month/:day/:slug',
          remark: {
            plugins: [
              '@gridsome/remark-prismjs'
            ]
          }
        }
      }
    ]
  }
  

  或向所有markdown源添加语法突出显示器:

  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {}
      }
    ],
  
    transformers: {
      remark: {
        plugins: [
          '@gridsome/remark-prismjs'
        ]
      }
    }
  }
  

  如果要禁用内联代码块的突出显示，请在插件选项中传递transformInlineCode：false:

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

• 使用前
  

• 使用后
  

gridsome-plugin-remark-shiki

使用shiki的Markdown代码块的语法突出显示。

• 安装

  //yarn安装
  yarn add gridsome-plugin-remark-shiki
  //npm/cnpm安装
  npm/cnpm install gridsome-plugin-remark-shiki
  

• 使用

  使用给定的选项将语法高亮添加到单个markdown源中。

  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {
          path: 'blog/**/*.md',
          route: '/blog/:year/:month/:day/:slug',
          remark: {
            plugins: [
              [ 'gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: false } ]
            ]
          }
        }
      }
    ]
  }
  

  向所有markdown源添加语法突出显示工具，但跳过内联代码:

  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {}
      }
    ],
  
    transformers: {
      remark: {
        plugins: [
          [ 'gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: true } ]
        ]
      }
    }
  }
  

  将自定义主题与语法高亮一起使用：

  const shiki = require('shiki')
  
  const customTheme = shiki.loadTheme('./static/custom-theme.json')
  
  module.exports = {
    plugins: [
      {
        use: '@gridsome/source-filesystem',
        options: {
          path: 'blog/**/*.md',
          typeName: 'Post',
          remark: {
            plugins: [
              [ 'gridsome-plugin-remark-shiki', { theme: customTheme, skipInline: true } ]
            ]
          }
        }
      }
    ]
  }
  

更多插件请参考官网