如何将 Katex 插件添加到 Gatsby-theme-blog 中

Question

我是盖茨比(以及一般的前端(的新手。 我正在尝试根据博客主题 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$.

我为普通盖茨比项目以及博客入门 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

我和你在同一条船上(盖茨比、反应和前端开发的新手(，并且面临着类似的问题，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"
]
}
},

希望这有帮助。

Answer 2

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

为了呈现降价博客文章，您需要有一个博客文章模板，该模板src/templates/blog-post.js.

从降价生成 HTML 页面发生在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的"Build a Blog with React and Markdown using Gatsby"。 你可以在这里找到它：https://egghead.io/lessons/gatsby-install-the-latest-version-of-gatsby 这是一个非常简短的教程系列，可以帮助你从头到尾获得一切。