搭建Hexo博客遇到的问题（2）

最新推荐文章于 2024-06-11 02:45:00 发布

bwqiang

最新推荐文章于 2024-06-11 02:45:00 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏： Hexo个人博客

本文链接：https://blog.youkuaiyun.com/bwqiang/article/details/105890032

Hexo个人博客专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Hexo博客中正确显示LaTeX数学公式，包括解决Markdown语法与LaTeX语法冲突的方法，以及配置nexT主题以优化博客显示效果的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Hexo博客如何显示 $\LaTeX$ 数学公式

原因

Hexo默认使用hexo-renderer-marked引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线’_'代表斜体，会被渲染引擎处理为<em>标签。

因为类Latex格式书写的数学公式下划线 ‘_’ 表示下标，有特殊的含义，如果被强制转换为<em>标签，那么MathJax引擎在渲染数学公式的时候就会出错。例如，x_i即 $x_i$ 在开始被渲染的时候，处理为x<em>i</em>，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。

类似的语义冲突的符号还包括’*’, ‘{’, ‘}’, ''等。

解决办法

在 git bash 中输入如下两个命令：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

找到目录D:\HexoBlog\node_modules\kramed\lib\rules下的inline.js文件，把第11行的escape变量的值做相应的修改：

// 修改： escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

同时把第20行的em变量也要做相应的修改：

// 修改：em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

打开nexT主题文件D:\HexoBlog\themes\hexo-theme-next下的_config.yml文件，把mathjax默认的false修改为true，具体如下：

# MathJax Support
mathjax:
  enable: true
  per_page: true

如果某篇博文有数学公式，还必须在Front-matter里打开mathjax开关：

---
title: 搭建Hexo博客遇到的问题（2）
categories: Hexo
mathjax: true
--

遇到Git bash 显示hexo Nunjucks Errors情况，找到出问题的地方，在博文源代码的出问题的位置上下加入：{% raw %} {% endraw %}即可。

验证

写一个爱因斯坦质能方程： $E=mc^2$ 。显然，在Hexo中已成功实现！

2、配置nexT主题遇到的问题

这是目前Hexo博客界面：

最近下载了一些Hexo博客主题。在没有重大调整的前提下，可以说nexT主题是最吸引我的，主要原因就是博文的字体比较大看起来非常清晰和优快云中写的博文没有差别，其余的Hexo博客主题中的字迹比较小。而且nexT主题中涵盖了文章目录等等，目前基本框架已经确立，但还有很多细节亟待完善。

目前自己还存在的问题如下：

Hexo处理 $\LaTeX$ 数学公式还存下一些问题。
添加每篇文章的阅读次数显示和阅读时常和文字统计显示。
如何点开每篇博文后文章显示在新的网页中。
博客主页中的分类栏目、关于栏目、标签栏目等等还没有实现具体的网站。
头像下面的Github、优快云等等logo链接的实现还需要进一步完善。

1.主页菜单下添加分类、标签、关于等项目

首先将主题中的配置文件_config.yml中的menu里面的about、tags、categories前的#号去掉，就开启了关于、标签和分类标签。

menu:
  home: / || fa fa-home # 主页
  about: /about/ || fa fa-user  # 关于页面
  tags: /tags/ || fa fa-tags # 标签页 
  categories: /categories/ || fa fa-th # 分类页 
  archives: /archives/ || fa fa-archive  # 归档页
  schedule: /schedule/ || fa fa-calendar # 
  #sitemap: /sitemap.xml || fa fa-sitemap 
  #commonweal: /404/ || fa fa-heartbeat

在Hexo根目录下的 Git Bash 运行如下命令：

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

在这里插入图片描述

打开 categories 页面对应的index.md文件，进行编辑：

---
title: 文章分类
date: 2020-05-02 16:14:49
type: "categories"
---

实现效果：
在这里插入图片描述

同理修改 tags 文件后博客的展示为：
对 about 文件夹进行编辑后，博客表现形式为：

所以，本部分基本上就完成了。

更改Hexo博客背景，添加动态线条

http://shenzekun.cn/hexo如何添加动态背景.html

其余特效炫酷技巧

仿照该简书大牛所做：https://www.jianshu.com/p/f054333ac9e6。