如何在gatsby-theme-blog中添加katex插件

Question

我是Gatsby的新手(一般是前端)。我试图添加katex插件https://www.gatsbyjs.org/packages/gatsby-remark-katex/到我的项目基于博客主题https://www.gatsbyjs.org/packages/gatsby-theme-blog/，但它不起作用。

我所做的工作如下:从gatsby-theme-blog开始

$ gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
$ cd my-themed-blog

在项目的顶部，安装gatsby-remark-katex插件，

$ npm install --save gatsby-transformer-remark gatsby-remark-katex katex

在顶级gatsby-config.js中添加配置

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {},
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
        ],
      },
    },
  ],
  // Customize your site metadata:
  siteMetadata: {
    // ... cutting the following
  },
}

并将顶层gatsby-browser.js中的css导入为

import "katex/dist/katex.min.css"

如果我把一些标记文档放在content/posts下面，比如

---
title: Hello World (example)
date: 2019-12-18
---

math $x + y = \epsilon$.

该网页显示如下

Hello World (example)
December 18, 2019

math $x + y = \epsilon$.

我为普通的gatsby项目以及博客starter https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/这样做，就像从

$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

像这样编辑gatsby-config.js

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
        ],
      },
    },

和gatsby-browser.js

// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"

import "katex/dist/katex.min.css"

而且它起作用了。

我怎样才能添加katex插件到项目中使用主题，如博客主题？我应该以某种方式将其添加到node_modules的主题目录中吗？

谢谢!

Answer 1

我和你一样( gatsby，react和前端开发的新手)，在katex不适合我的情况下也遇到了类似的问题。我发现我的问题是我有两个部分

resolve: `gatsby-transformer-remark`,

在我的gatsby-config.js文件中。我看到您已经粘贴了gatsby-config.js文件的一部分，所以我只能推测该文件的其余部分包含什么。

无论哪种方式，我的旧gatsby-config.js版本看起来是这样的：

    {
      resolve: "gatsby-transformer-remark",    //----->FIRST ENTRY
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-katex",
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: "ignore"
            }
          }
        ],
      },

<****** OTHER PLUGINS IN BETWEEN ********>

    {
      resolve: "gatsby-transformer-remark",   //------>SECOND ENTRY
      options: {
        excerpt_separator: `<!-- end -->`,
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },

我认为这可能是导致问题的唯一原因，所以我将这两个合并到一个单独的gatsby-transformer-remark部分：

{
      resolve: "gatsby-transformer-remark",
      options: {
        excerpt_separator: `<!-- end -->`,
        plugins: [
          {
            resolve: "gatsby-remark-katex",
            options: {
              strict: "ignore"
            }
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          {
            resolve: "gatsby-remark-prismjs",
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
              noInlineHighlight: false,
            },
          },
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
},

希望这能有所帮助。

Answer 2

这里明显的问题是：gatsby-starter-blog被配置为呈现位于content/blog/<subdir>文件夹中的博客。

为了呈现一个markdown博客帖子，您需要有一个博客帖子模板，它是src/templates/blog-post.js。

从标记生成超文本标记语言页面是在gatsby-node.js文件中进行的。

这些配置在gatsby-starter-blog-theme中都不存在，因此，输出id与您期望的不同。

您可以通过使用gatsby-starter-blog或从以下存储库复制gatsby-starter-blog-theme中缺少的文件来使其正常工作：https://github.com/gatsbyjs/gatsby-starter-blog。

这不是KaTeX的问题。我认为渲染所需的文件目前还不存在，或者它们是空的。

我也推荐你看看Taylor Bell的“用React建立博客，用Gatsby做Markdown”。你可以在这里找到它：https://egghead.io/lessons/gatsby-install-the-latest-version-of-gatsby，这是一个非常简短的系列教程，可以帮助你从头到尾了解一切。