【问题标题】:Shadowing/Customizing parent theme's plugin in GatsbyGatsby 中的阴影/自定义父主题插件
【发布时间】:2021-02-14 20:42:24
【问题描述】:

我将 Gatsby 主题 @lekoarts/gatsby-theme-minimal-blog 用于我自己的博客。该主题还有一个父核心主题@lekoarts/gatsby-theme-minimal-blog-core,它使用了gatsby-plugin-mdx 插件。

在我自己的博客中,我想更改插件gatsby-plugin-mdx 的选项,例如设置

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

我尝试在我自己的博客的gatsby-config.js 中导入gatsby-plugin-mdx,但它不起作用我在解析现有.mdx 文件时遇到错误。

还尝试通过创建具有相同内容但linkImagesToOriginal: true 没有效果的src/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.js 来隐藏核心主题的gatsby-config.js 文件。

如何更改父主题的插件选项?

核心主题的gatsby-config.js文件如下:

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),
}

【问题讨论】:

  • 您能否提供您正在尝试修改的gatsby-config.js(我的意思是您的)
  • 我已编辑问题以包含该文件。 @FerranBuireu

标签: gatsby gatsby-plugin mdxjs gatsby-plugin-mdx


【解决方案1】:

试试:

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),
)}

根据this guide from the great Jason Lengstorfgatsby-config.js需要转成一个函数。

我不知道.filter(Boolean)在这种情况下在做什么,你可以尝试删除它,因为我看不到在哪里定义。

【讨论】:

【解决方案2】:

由于主题中的内置选项mdx,我能够修改插件。

我在博客的gatsby-config.js 中设置了mdx: false,这将禁用核心主题中的插件,并在我的博客的gatsby-config.js 中添加了带有新选项的gatsby-plugin-mdx

【讨论】:

    猜你喜欢
    • 2021-08-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-10
    • 2011-04-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多