Добавить локальные файлы markdown на уровень GraphQL в Gridsome

#gridsome

#gridsome

Вопрос:

Как в Gridsome добавить локальные файлы markdown на уровень GraphQL, чтобы можно было добавлять graphql в компоненты vue?

На момент написания статьи документы Gridsome для добавления данных из локальных файлов пусты.

Ответ №1:

У starter-blog также есть рабочая реализация:https://github.com/gridsome/gridsome-starter-blog/blob/master/gridsome.config.js

В репозитории gridsome для source-filesystem есть несколько документов, которые помогут: https://github.com/gridsome/gridsome/tree/master/packages/source-filesystem

Документы, импортированные сюда на случай разрыва ссылки в будущем (но ссылка, вероятно, будет более актуальной).

@gridsome /source-файловая система

Преобразуйте файлы в содержимое, которое может быть извлечено с помощью GraphQL в ваших компонентах.

Установить

  • yarn add @gridsome/source-filesystem
  • npm install @gridsome/source-filesystem

Использование

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

Источнику файловой системы также потребуется преобразователь для разбора файлов. В приведенном выше примере выполняется поиск набора файлов Markdown, поэтому, чтобы позволить Gridsome понимать содержимое файлов, вы должны установить @gridsome / transformer-remark в качестве зависимости разработчика в вашем проекте. Gridsome автоматически преобразует файлы для вас, если в вашем package.json есть преобразователь, поддерживающий ваши файлы.

Опции

путь

  • Введите: string обязательно

Где искать файлы. Должен быть путь к глобусу.

Имя типа

  • Тип: string
  • По умолчанию: 'FileNode'

Тип GraphQL и имя шаблона. .vue Файл в src/templates должен соответствовать typeName , чтобы для него был шаблон.

маршрут

  • Тип: string

Определите динамический маршрут, если ваш источник может иметь определенную структуру имен путей. Это сгенерирует единый маршрут для всех узлов из этого источника. Возможными параметрами пути являются year , month , day slug или любое пользовательское значение поля. Если этот параметр опущен, маршрут для каждого файла будет сгенерирован на основе их пути и имени файла. Узнайте больше о параметрах маршрута.

ссылки

  • Тип: object

Определите поля, которые будут иметь ссылку на другой узел. Ожидается, что ссылки typeName будут существовать. Но тип контента также может быть создан автоматически, если вы задаете create: true . Прочитайте больше о ссылках.

 {
  refs: {
    // Reference to existing authors by id.
    author: 'Author',
    // Create a Tag content type and its nodes automatically.
    tags: {
      typeName: 'Tag',
      route: '/tag/:id',
      create: true
    }
  }
}
  

Указатель

  • Тип: Array
  • По умолчанию: ['index']

Определите, какие файлы следует рассматривать в качестве индексных файлов. У этих файлов имя файла не будет отображаться в пути маршрутизации, и они станут основным index.html файлом каталога. Убедитесь, что для каждого каталога возможен только один индексный файл, если определено несколько имен индексов.