如何将 katex 插件添加到 gatsby-theme-blog

Posted 2023-03-22

【中文标题】如何将 katex 插件添加到 gatsby-theme-blog

【英文标题】：how to add katex plugin into gatsby-theme-blog

【发布时间】：2020-04-10 13:12:48

【问题描述】：

我是 Gatsby 的新手（以及一般的前端）。 我正在尝试根据博客主题 https://www.gatsbyjs.org/packages/gatsby-theme-blog/ 将 katex 插件 https://www.gatsbyjs.org/packages/gatsby-remark-katex/ 添加到我的项目中，但它不起作用。

我所做的如下： 从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 项目以及博客启动者 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"

它正在工作。

如何使用 blog-theme 等主题将 katex 插件添加到项目中？我应该以某种方式将其添加到node_modules 的主题目录中吗？

谢谢！

【参考方案1】：

我和你在同一条船上（gatsby、react 和前端开发的新手）并且遇到了与 katex 不适合我的类似问题。我发现我的问题是我有 2 个部分用于

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"
        ]
      
,

希望这会有所帮助。

【讨论】：

感谢您的评论。我想到了类似的原因。实际上“主题”有自己的gatsby-config.js（安装后在node_modules），所以***gatsby-config.js 并不是站点配置的唯一位置。对于gatsby-theme-blog，有两个gatsby-config.js，例如node_modules/gatsby-theme-blog/gatsby-config.js 和node_modules/gatsby-theme-blog-core/gatsby-config.js，但没有gatsby-transformer-remark 条目。而且我认为node_modules 下的文件不适合编辑...

理想情况下，您永远不应该更改 node_modules 文件夹中的任何内容，因为它们是库文件。您应该改用组件阴影。

【参考方案2】：

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

为了渲染markdown博文，你需要有一个博文模板，即src/templates/blog-post.js。

从 markdown 生成 html 页面发生在 gatsby-node.js 文件中。

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

您可以通过使用 gatsby-starter-blog 或从以下 repo 复制 gatsby-starter-blog-theme 中丢失的文件来使其工作：https://github.com/gatsbyjs/gatsby-starter-blog。

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

我还建议您观看 Taylor Bell 的“使用 Gatsby 使用 React 和 Markdown 构建博客”。您可以在这里找到它：https://egghead.io/lessons/gatsby-install-the-latest-version-of-gatsby，这是一个非常简短的教程系列，可以帮助您从头到尾了解所有内容。

【讨论】：

感谢您的回答！看来您提到的方式是“入门”方法而不是“主题”机制，我刚刚为"Building a Theme" 和相应的egghead videos 找到了新的（？）教程文档……这已经让我不知所措了。有什么（简单的）方法可以修改现有主题？

@kengo 是的，您可以修改任何现有主题。如果您想更改页面的外观，但不修改“组件”（将其视为乐高积木），则必须更改 CSS 文件。如果您想添加、删除或修改任何 UI 组件（同样是乐高积木），您必须修改博客文章模板。无论如何，我认为你应该花一些时间学习基本的 React 和 Gatsby，然后再继续。