Рубрики
Без рубрики

Использование вариантов темы Gatsby

Это второй пост в серии о начале работы с темами Gatsby, где мы узнаем о … с меткой Gatsby, React, WebDev, JavaScript.

Это второй пост в серии о начале работы с темами Гэтсби, где мы узнаем об темах постепенно. В первом сообщении в блоге мы создали веб -сайт Gatsby с нуля и добавили Gatsby-Theme-Blog , который берет некоторое содержание Markdown или MDX в указанной папке, преобразует их в страницы на нашем веб -сайте и дает несколько хороших базовых компонентов и стилей.

Если вы не читали, используя свою первую тему Gatsby, вы можете сделать это, прежде чем продолжить.

В этом посте мы собираемся глубже погрузиться в варианты, которые Gatsby-Theme-Blog дает нам настройку нашего опыта.

В будущих постах мы обсудим, что такое затенение и как теневать компоненты, стили и данные.

Какие варианты?

Если мы посмотрим на Документация для Gatsby-Theme-Blog Пакет, у нас доступно четыре варианта.

  1. Базепат который по умолчанию “/”. Это URL для страницы индекса блога и root URL для всех сообщений в блоге.
  2. ContentPath по умолчанию /Содержание/Сообщения Анкет Это местоположение файлов .md/.mdx, которые вы хотите преобразовать в сообщения в блоге.
  3. AssetPath по умолчанию /контент/активы . Это расположение вашего аватара (картинки) для биографического компонента.
  4. mdx который по умолчанию к истинному. Это определяет, является ли Gatsby-Theme-Blog должен настроить mdx Для вас, или если вы будете справиться с этим сами. Если у вас есть Gatsby-MDX Установленные и настроенные для других страниц, вы можете установить это на false.

Как мы их переопределили?

Мы можем переопределить эти значения по умолчанию в gatsby-config.js нашего веб -сайта Gatsby. Когда вам не нужно менять какие -либо варианты в теме, ваша конфигурация может выглядеть так:

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-theme-blog'
  ]
}

Если бы мы хотели изменить один или несколько вариантов, мы бы использовали синтаксис Longhand для плагина/темы.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-blog',
      options: {
        basePath: '/blog'
      }
    }
  ]
}

Возможно, вам придется проконсультироваться с документацией по темам, которые вы используете, чтобы увидеть, есть ли какие -либо варианты, которые вы должен Установить, или если все являются необязательными.

Где используются варианты?

Если мы перейдем к папке нашего веб -сайта Gatbsy и откроем node_modules/gatsby-thememe-blog/gatsby-config.js В нашем любимом редакторе мы увидим что -то подобное.

// node_modules/gatsby-theme-blog/gatsby-config.js
module.exports = options => {
  const { mdx = true } = options

  return {
    siteMetadata: {
      title: `Blog Title Placeholder`,
      author: `Name Placeholder`,
      description: `Description placeholder`,
      social: [
        {
          name: `twitter`,
          url: `https://twitter.com/gatsbyjs`,
        },
        {
          name: `github`,
          url: `https://github.com/gatsbyjs`,
        },
      ],
    },
    plugins: [
      mdx && {
        resolve: `gatsby-plugin-mdx`,
        options: {
          extensions: [`.mdx`, `.md`],
          gatsbyRemarkPlugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {
                // should this be configurable by the end-user?
                maxWidth: 1380,
                linkImagesToOriginal: false,
              },
            },
            { resolve: `gatsby-remark-copy-linked-files` },
            { resolve: `gatsby-remark-numbered-footnotes` },
            { resolve: `gatsby-remark-smartypants` },
          ],
          remarkPlugins: [require(`remark-slug`)],
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: options.contentPath || `content/posts`,
          name: options.contentPath || `content/posts`,
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: options.assetPath || `content/assets`,
          name: options.assetPath || `content/assets`,
        },
      },
    // ...more config
  }
}

Самое важное, что следует отметить, это то, что gatsby-config.js Файл – это Функция, которая принимает объект, здесь он называется параметрами в качестве аргумента и возвращает объект конфигурации. Если мы посмотрим внимательно, мы увидим три из четырех вариантов для Gatsby-Theme-Blog используется в разных местах в конфигурации.

mdx который используется для определения того, настраивать или нет Gatsby-MDX Для нас, наряду с некоторыми полезными плагинами для Markdown/MDX.

ContentPath который используется внутри Gatsby-Source-Filesyystem конфигурация Определение, где в нашей файловой системе искать сообщения и как их называть, когда мы запрашиваем их с помощью GraphQL.

AssetPath который также используется внутри Gatsby-Source-Filesyystem конфигурация, но на этот раз определяя, где в нашей файловой системе искать наши активы и как их называть, когда мы запрашиваем их с помощью GraphQL.

Итак, мы нашли три из четырех вариантов. Где используется четвертый?

Для этого мы собираемся заглянуть внутрь node_modules/gatsby-thememe-blog/gatsby node.js Анкет

// node_modules/gatsby-theme-blog/gatsby-node.js
// Ensure that content directories exist at site-level
exports.onPreBootstrap = ({ store }, themeOptions) => {
  const { program } = store.getState()

  basePath = themeOptions.basePath || `/`
  contentPath = themeOptions.contentPath || `content/posts`
  assetPath = themeOptions.assetPath || `content/assets`

  const dirs = [
    path.join(program.directory, contentPath),
    path.join(program.directory, assetPath),
  ]

  dirs.forEach(dir => {
    debug(`Initializing ${dir} directory`)
    if (!fs.existsSync(dir)) {
      mkdirp.sync(dir)
    }
  })
}

Вам не нужно понимать, что происходит во всем этом файле, на самом деле это красота Gatsby, Gatsby Plugins, а теперь и темы Gatsby, но если мы посмотрим на Onprebootstrap Функция мы видим, что второй аргумент – это объект с теми же параметрами, доступными для него, как и в gatsby-config.js файл.

Когда веб -сайт Gatsby с этой темой будет запущен, Gatsby проверит наличие этих путей ( contentPath и assetPath ). Если они не существуют, Гэтсби будет использовать mkdirp пакет, чтобы убедиться, что они созданы.

Следующее место, которое нам нужно посмотреть, это CreatePages функция в том же файле. На этот раз мы пользуемся глобальным Базепат переменная, которую мы установили в Onprebootstrap функция Соответствующая часть здесь:

// node_modules/gatsby-theme-blog/gatsby-node.js
// inside of the exports.createPages function
  createPage({
    path: basePath,
    component: PostsTemplate,
    context: {
      posts,
      siteTitle,
      socialLinks,
    },
  })

Важно понять, что все наше Базепат это будет путь, по которому наш Poststemplate получается с данными, которые передаются через объект контекста.

Это много вещей, но давайте быстро повторим:

  • Тема документация должен Перечислите, какие варианты доступны и каковы дефолты
  • Вы можете использовать синтаксис плагина Longhand, который является стандартным в Gatsby, чтобы переопределить тему по умолчанию, если/при необходимости
  • Вы также можете проверить gatsby-config.js темы и gatsby-node.js Для получения дополнительного контекста о том, как/где эти варианты используются, если документация оставляет желать лучшего.

Я надеюсь, что этот пост был полезным. В следующий раз мы погрузимся в задержку, переживая то, что находится в Гэтсби.

Оригинал: “https://dev.to/hagnerd/using-gatsby-theme-options-16bm”

Читайте ещё по теме: