Плагин Shadowing/Customizing родительской темы в Gatsby

Question

Плагин Shadowing/Customizing родительской темы в Gatsby

Я использую тему Гэтсби @lekoarts/gatsby-theme-minimal-blog для своего собственного блога. Тема также имеет родительскую основную тему @lekoarts/gatsby-theme-minimal-blog-core , в которой используется плагин gatsby-plugin-mdx .

В своем собственном блоге я хотел бы изменить параметры плагина, такие как настройка

      options: {
  maxWidth: 960,
  quality: 90,
  linkImagesToOriginal: true, // set to true from false
}

я пытался импортировать gatsby-plugin-mdxв моем собственном блоге, но это не сработало, я получаю ошибки при разборе существующих .mdxфайлы.

Также пытаюсь скрыть файл основной темы, создав src/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.jsс тем же содержанием, но linkImagesToOriginal: trueне имеет эффектов.

Как я могу изменить параметры плагина родительской темы?

Файл основной темы выглядит следующим образом:

      const withDefaults = require(`./utils/default-options`)

module.exports = (themeOptions) => {
  const options = withDefaults(themeOptions)
  const { mdx = true } = themeOptions

  return {
    plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: options.postsPath,
          path: options.postsPath,
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: options.pagesPath,
          path: options.pagesPath,
        },
      },
      mdx && {
        resolve: `gatsby-plugin-mdx`,
        options: {
          extensions: [`.mdx`, `.md`],
          gatsbyRemarkPlugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 960,
                quality: 90,
                linkImagesToOriginal: false, // want to set this to true
              },
            },
          ],
          plugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 960,
                quality: 90,
                linkImagesToOriginal: false,
              },
            },
          ],
        },
      },
      `gatsby-transformer-sharp`,
      `gatsby-plugin-sharp`,
      `gatsby-plugin-typescript`,
    ].filter(Boolean),
  }
}

gatsby-config.jsмоего блога

      require(`dotenv`).config({
  path: `.env`,
})
const newsletterFeed = require(`./src/@lekoarts/gatsby-theme-minimal-blog/utils/newsletterFeed`)
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE

module.exports = {
  siteMetadata: {
    siteTitle: 'Kaan Uzdoğan',
    siteTitleAlt: `Kaan Uzdoğan - Personal Site`,
    siteHeadline: 'Kaan Uzdoğan - Personal Site',
    siteUrl: `https://kaanuzdogan.com`,
    author: `@kaanuzdogan`,
    siteLanguage: 'en',
    siteImage: '/banner.jpg',
    siteDescription: 'Personal Blog and Website of Kaan Uzdogan',
  },
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      // See the theme's README for all available options
      options: {
        feedTitle: 'Kaan Uzdoğan\'s Personal Site',
        navigation: [
          {
            title: `Blog`,
            slug: `/blog`,
          },
          {
            title: `About`,
            slug: `/about`,
          },
        ],
        externalLinks: [
          {
            name: `Twitter`,
            url: `https://twitter.com/kaanuzdogan`,
          },
          {
            name: `Instagram`,
            url: `https://www.instagram.com/kuzdogan`,
          },
          {
            name: `Github`,
            url: `https://github.com/kuzdogan`
          }
        ],
        formatString: 'DD MMMM YYYY'
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: newsletterFeed('Kaan Uzdoğan\'s Personal Site'),
    },
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `kaanuzdogan`
      }
    },
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          process.env.GOOGLE_MEASUREMENT_ID, // Google Analytics / GA
        ],
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `minimal-blog - @lekoarts/gatsby-theme-minimal-blog`,
        short_name: `minimal-blog`,
        description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#6B46C1`,
        display: `standalone`,
        icons: [
          {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-netlify`,
    shouldAnalyseBundle && {
      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
      options: {
        analyzerMode: `static`,
        reportFilename: `_bundle.html`,
        openAnalyzer: false,
      },
    },
    {
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint: '<hiding the endpoint url>',
        timeout: 3500,
      },
    },
  ].filter(Boolean),
}

1

gatsby gatsby-plugin mdxjs gatsby-plugin-mdx

Источник

user6528944 31 янв '21 в 22:27

2 ответа

Другие вопросы по тегам gatsby gatsby-plugin mdxjs gatsby-plugin-mdx

user6528944 14 фев '21 в 12:42 2021-02-14 12:42 · Answer 1 · 2021-02-14 12:42

Я смог изменить плагин благодаря встроенной опции mdxв теме.

я установил mdx: falseв моем блоге, который отключит плагин в основной теме, и добавил gatsby-plugin-mdxс новыми опциями в моем блоге gatsby-config.js.

0

Источник

user6528944 14 фев '21 в 12:42

user5585371 03 фев '21 в 07:10 2021-02-03 07:10 · Answer 2 · 2021-02-03 07:10

Пытаться:

      module.exports = ()=> ({
  siteMetadata: {
    siteTitle: 'Kaan Uzdoğan',
    siteTitleAlt: `Kaan Uzdoğan - Personal Site`,
    siteHeadline: 'Kaan Uzdoğan - Personal Site',
    siteUrl: `https://kaanuzdogan.com`,
    author: `@kaanuzdogan`,
    siteLanguage: 'en',
    siteImage: '/banner.jpg',
    siteDescription: 'Personal Blog and Website of Kaan Uzdogan',
  },
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      // See the theme's README for all available options
      options: {
        feedTitle: 'Kaan Uzdoğan\'s Personal Site',
        navigation: [
          {
            title: `Blog`,
            slug: `/blog`,
          },
          {
            title: `About`,
            slug: `/about`,
          },
        ],
        externalLinks: [
          {
            name: `Twitter`,
            url: `https://twitter.com/kaanuzdogan`,
          },
          {
            name: `Instagram`,
            url: `https://www.instagram.com/kuzdogan`,
          },
          {
            name: `Github`,
            url: `https://github.com/kuzdogan`
          }
        ],
        formatString: 'DD MMMM YYYY'
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: newsletterFeed('Kaan Uzdoğan\'s Personal Site'),
    },
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `kaanuzdogan`
      }
    },
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          process.env.GOOGLE_MEASUREMENT_ID, // Google Analytics / GA
        ],
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `minimal-blog - @lekoarts/gatsby-theme-minimal-blog`,
        short_name: `minimal-blog`,
        description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#6B46C1`,
        display: `standalone`,
        icons: [
          {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-netlify`,
    shouldAnalyseBundle && {
      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
      options: {
        analyzerMode: `static`,
        reportFilename: `_bundle.html`,
        openAnalyzer: false,
      },
    },
    {
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint: '<hiding the endpoint url>',
        timeout: 3500,
      },
    },
  ].filter(Boolean),
)}

Согласно этому руководству от великого Джейсона Ленгсторфа gatsby-config.jsнужно превратить в функцию.

я не знаю, что .filter(Boolean)делает в этом случае, вы можете попробовать удалить его, так как я не вижу, где он определен.