我是Gatsby(和前端)的新手。 我正在尝试根据博客主题https://www.gatsbyjs.org/packages/gatsby-remark-katex/将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项目以及博客起步者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
中的主题目录中吗?
谢谢!
答案 0 :(得分:0)
我和您在同一条船上(是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"
]
}
},
我认为这可能是导致问题的唯一原因,因此我将这2个问题合并为一个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"
]
}
},
希望这会有所帮助。
答案 1 :(得分:0)
这里明显的问题是:gatsby-starter-blog
配置为呈现content/blog/<subdir>
文件夹中的博客。
要呈现降价博客文章,您需要一个博客文章模板,src/templates/blog-post.js
。
通过降价生成HTML页面在gatsby-node.js
文件中进行。
gatsby-starter-blog-theme
中不存在这些配置,因此输出ID与您期望的不同。
您可以通过使用gatsby-starter-blog
或通过从以下仓库(https://github.com/gatsbyjs/gatsby-starter-blog)复制gatsby-starter-blog-theme
中丢失的文件来使其工作。
这不是KaTeX的问题。我认为需要渲染的文件目前不存在,或者为空。
我还建议您观看Taylor Bell撰写的“使用Gatsby使用React和Markdown构建博客”。您可以在这里找到它:https://egghead.io/lessons/gatsby-install-the-latest-version-of-gatsby,这是一系列非常简短的教程,可以帮助您从头到尾掌握所有内容。