《Hexo:从零开始编写自己的主题》 - 6. 添加自己的脚本处理数学公式
《Hexo:从零开始编写自己的主题》
1. Hexo概述以及Hexo工作原理
2. 入门Hexo主题编写
3. 优化样式,设计自己的主题
4. fancybox优化图片展示效果、代码高亮以及数学公式
5. 添加本地搜索功能以及发布博客让官网接收
6. 添加自己的脚本处理数学公式
6. 添加自己的脚本,以处理数学公式为例
6.1 问题描述
这个应该算法是 hexo 的一个BUG或者说是hexo的不足。正常情况下,我们将 markdown 文件渲染为 html 时,需要保护一些特别部分不被渲染,比如说代码块与公式。
代码块中写
1 | <h1> Hello World </h1> |
很明显这块代码不应该被渲染,公式也是如此,但是对于复杂的公式,可能存在大公式里包含小公式的情况,hexo 有可能只渲染子模块,比如:
公式为
1 | $$ |
6.2 解决方法
为了保护我们的公式不被瞎渲染,我们需要在公式前后加 p 标签,即
1 | <p> |
所以接下来就是算法设计部分,我们拿到的是markdown 的文字,在渲染前进行 过滤处理。
以下内容的概念就是在 “before_post_render” 时触发的代码,即对所有的博客进行渲染前的工作。
1 | hexo.extend.filter.register('before_post_render', data => { |
总体思路为:
1. 将原文划分为 “代码块” 与 “非代码块” 两部分。如果是代码块的公式,不做处理。比如 ```bash 中的内容。
2. 非代码块的内容根据 两个美元符号 $$ 进行 split,再对每一个分割块进行处理。
1 | // 根据 $$ 将原内容分块 |
6.3 效果查看
前往smileyan个人网站 https://smileyan.cn/heyan/ 查看效果。
源码的地址为:https://github.com/smile-yan/hexo-theme-heyan
6.4 总结
如果觉得别人的主题不够符合自己的喜好,那就自己写个主题。
如果觉得 hexo 渲染可能存在问题,那就自己写脚本纠正官方的问题。
如果觉得本文有用,请点个赞支持一下吧~ 感谢!
原文链接:https://blog.csdn.net/smileyan9/article/details/124400719
💡 准备购买云服务器 / 域名来搭建或部署站点?
通过下面的链接下单,通常能领到新用户专属优惠,也能小额支持本站持续更新:
阿里云(返现) | 腾讯云 2核2G 99元/年 | 腾讯云 云产品特惠













