在Hugo PaperMod主题中加入数学支持的最简方式

已于 2022-12-26 19:10:10 修改
阅读量1k 收藏 1
点赞数 4
文章标签： 前端 javascript 经验分享
于 2022-09-20 21:28:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wongssh/article/details/126962069
版权
本文介绍了如何在不修改Hugo PaperMod主题文件的情况下，为博客添加数学公式支持。通过创建自定义文件，引入Katex CDN，并在文章中使用特定语法，实现了MathJax的行内和块状显示功能，同时提到了可拓展性，如引入nutshell插件。
摘要由CSDN通过智能技术生成

概述

在Hugo的PaperMod的主题中加入数学公式支持是很多人的刚需，在此主题下最好的文章是PaperMod开发者给出的Math Typesetting 。根据此篇博客内容，我们发现加入数学公式功能需要对theme文件夹进行修改，但大部分人可能都使用了git submodule引入的主题文件。这使我们几乎无法通过修改主题文件来增加这一功能。

本文主要讨论了在使用submodule情况下，不通过修改主题文件加入数学公式支持。

解决方案

在当前的写作仓库内创建layouts/partials/math.html文件，写入以下内容：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css" integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js" integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz" crossorigin="anonymous"></script>
<script<
最低0.47元/天 解锁文章
WongSSH
关注
[译]Hugo-Theme-PaperMod主题文档 特性
恐咖兵糖的博客
09-08 1656
转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 介绍 我们将在下面的所有示例中使用 yml/yaml 格式，我建议使用 yml 而不是 toml，因为它更易于阅读。 如果你需要，你可以找 YML to TOML 这类转换器。 Asse.
Hugo-PaperMod 项目使用教程
gitblog_00265的博客
08-18 344
Hugo-PaperMod 项目使用教程 hugo-PaperMod A fast, clean, responsive Hugo theme.项目地址:https://gitcode.com/gh_mirrors/hu/hugo-PaperMod 1. 项目的目录结构及介绍 Hugo-PaperMod 项目的目录结构遵循 Hugo 的标准布局。以下是主要目录和文件的介绍： hugo-Paper...
hugo-PaperMod:快速，干净，响应Swift的雨果主题
03-17
PaperMod | :comet: 快速 :cloud: 流利| :crescent_moon: 光滑| :mobile_phone: React灵敏 Hugo PaperMod是基于的主题。 该项目的目标是向og主题添加更多功能和自定义。 该包含许多有关“安装”，“功能”的文档，以及更多内容。 确保您访问它，以获得绝佳的动手体验并了解其功能... 可以在此处找到exampleSite： 。 演示是使用exampleSite作为源构建的。 功能/模组 :collision: 默认情况下，使用Hugo的资产生成器进行流水线处理，指纹识别，捆绑和缩小。 3种模式： 内容生成表（较新的实现）。 帖子存档。 社交图标（家庭信息和个人资料模式） 帖子上的“社交媒体共享”按钮。 菜单位置指示器。 多语言支持。 （带有语言选择器） 分类法 每个帖子的封面图像（带有响应图像支持）。 浅色/深色主题（自动将主题A / c切换到浏览器主题和主题切换按钮）。 S
Hugo-PaperMod 使用教程
gitblog_00666的博客
08-18 341
Hugo-PaperMod 使用教程 hugo-PaperMod A fast, clean, responsive Hugo theme.项目地址:https://gitcode.com/gh_mirrors/hu/hugo-PaperMod 项目介绍 Hugo-PaperMod 是一个基于 Hugo 框架的快速、响应式、简约的主题。它由 Aditya Telange 开发，旨在提供一个轻量级...
HuGo博客处理数学公式方案
REWINE
07-21 1362
摘选自在Hugo中使用MathJax 本站在添加MathJax时，把所有修改写成了一个layouts/partials/mathjax.html文件： <script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> MathJax.Hub.Config({ tex2jax: {
hugo博客搭建 | PaperMod主题
Xym's Blog
05-08 2823
文章目录1.安装hugo2.新建站点3.下载主题4.配置文件5.目录设置6.启动博客7.写文章 博客原文：【置顶】hugo博客搭建 | PaperMod主题 1.安装hugo windows用户可以先去官网下载hugo框架，hugo官网地址， 苹果用户有安装HomeBrew工具的话可以直接输入brew install hugo进行安装。 下载完成后检查是否安装成功，输入: hugo version，若出现版本信息则表示安装成功。 2.新建站点 输入hugo new site hugoblog ，就会在h
Hugo博客PaperMod主题目录放在侧边
Xym's Blog
12-18 810
Hugo博客 | PaperMod主题的目录放在侧边
hugo-purus:纯粹，简单且简约的Hugo主题
05-24
hugo-purus：Hugo的纯粹主题 purus （拉丁语为“ pure”）是为提供动力的主题。 它为您提供了您可能渴望的关于的简洁体验。 买者自负 我是Hugo的新手，也是撰写主题的新手。 如果您认为可以更一般或更优雅地解决某些...
基于Scss与多语言支持的hugo主题virgo设计源码
最新发布
10-05
该项目为基于Scss构建的Hugo主题——Virgo，源码包含846个文件，涵盖了多种语言支持。其中，Scss文件28个，JavaScript、HTML和CSS文件共52个，其他包括woff2、svg、png、md等多种格式文件。Virgo主题设计简洁纯粹，...
hugo-book：雨果文档主题像普通书一样简单
02-05
雨果书主题 文档主题与普通书一样简单 产品特点 简洁简洁的设计 轻巧便携 多国语言支持 ...然后运行hugo（或将theme = "book"设置theme = "book" / theme: book配置文件中的theme: book ） hugo serve
HugoNuo一个响应式简洁的hugo主题
08-11
Hugo Nuo一个响应式简洁的hugo主题
在Hugo中优雅地使用数学公式
白马湖水怪的博客
09-12 1125
在2021年4月之前，我使用 Hexo 静态博客，也曾经因为 Hexo 默认的 Markdown 渲染引擎不能很好地渲染checkbox而头疼。现在，切换到 Hugo 以后，有一次遇到了数学公式渲染的问题。 关于 Hugo 默认的 Markdown 渲染引擎goldmark，在官方文档1中可以看到： markup: asciidocExt: attributes: {} backend: html5 extensions: [] failureLevel: fatal noHeaderOrFooter: t
[译]Hugo-Theme-PaperMod主题文档 数学排版
恐咖兵糖的博客
09-08 327
转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/math-typesetting/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 可以使用第三方 JavaScript 库启用 Hugo 项目中的数学符号。 在这个例子中，我们将使用 KaTeX 在 /layouts/partials/math.html下创建 partial 在此部分引用自动渲染.
[译]Hugo-Theme-PaperMod主题文档 icons
恐咖兵糖的博客
09-08 410
[译]Hugo-Theme-PaperMod主题文档 icons 转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-icons/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 转载自: 社交图标 No. Name Platform Link 1 123rf 123rf.com 2 adobe
[译]Hugo-Theme-PaperMod主题文档 Variables | Front Matter
恐咖兵糖的博客
09-08 619
转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-variables/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 以下是与此主题一起使用的变量… Site Variables under Params name type example Description env string ‘prod.
[译]Hugo-Theme-PaperMod主题文档 FAQs
恐咖兵糖的博客
09-08 614
[译]Hugo-Theme-PaperMod主题文档 特性 转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 介绍 我们将在下面的所有示例中使用 yml/yaml 格式，我建议使用 yml 而不是 toml，因为它更易于阅读。 如果你需要，你可以找 Y
Hugo 主题 Paper 发布 3.0
weixin_33816300的博客
04-02 646
Paper Paper 是一个简洁、纯粹、灵动的 Hugo 主题。 在主题版本迭代中，设计理念如一，始终将目光聚焦于文字本身，摒弃任何多余的修饰与干扰，专注于对博客文字内容的呈现。 Paper 致力于成为不同博客的最佳载体，电脑、手机、平板，不同屏幕，流动适配，致力于让读者获得一种沉浸、流畅、自如的阅读体验，让文字释放最原始的力量。 这也是主题被命名为「Paper」的原因。 i18n Paper...
[译]Hugo-Theme-PaperMod主题文档 安装 | 升级
恐咖兵糖的博客
09-08 1207
转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-installation/ 作者：PaperMod Authors 已获得作者授权 中文demo https://note.ftls.xyz/papermod/ 介绍 我们将在下面的所有示例中使用 yml/yaml 格式，我建议使用 yml 而不是 toml，因为它更易于阅读。 如果你需要，你可以找 YML to TOML 这类转换器。 .
怎么在宝塔上部署hugo网站
03-09
您可以按照以下步骤在宝塔上部署hugo网站： 1. 在宝塔面板中创建一个网站，并将域名解析到服务器上。 2. 在网站设置中，选择“SSL”选项，启用HTTPS。 3. 在网站设置中，选择“Web服务”选项，启用Nginx。 4. 在网站设置中，选择“网站目录”选项，进入网站目录。 5. 在网站目录中，创建一个名为“public”的文件夹。 6. 在网站目录中，创建一个名为“hugo”的文件夹。 7. 在“hugo”文件夹中，使用命令行工具安装hugo。 8. 在“hugo”文件夹中，使用命令行工具创建一个新的hugo网站。 9. 在新的hugo网站中，编辑配置文件，将“baseURL”设置为您的域名。 10. 在新的hugo网站中，使用命令行工具生成静态网站文件，并将其保存到“public”文件夹中。 11. 在宝塔面板中，选择“文件管理”选项，进入“public”文件夹。 12. 将hugo生成的静态网站文件上传到“public”文件夹中。 13. 在宝塔面板中，选择“网站目录”选项，进入网站目录。 14. 在网站目录中，编辑Nginx配置文件，将“root”设置为“/www/wwwroot/您的域名/public”。 15. 保存Nginx配置文件，并重启Nginx服务。 16. 现在您的hugo网站已经成功部署在宝塔上了！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WongSSH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值