博客更新；配置更新；新增文章模板；

kevinchu7 · Sep 13, 2023 · c91cc0f · c91cc0f
1 parent 5eebfa5
commit c91cc0f
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 12 deletions.
diff --git a/_config.fluid.yml b/_config.fluid.yml
@@ -239,7 +239,7 @@ custom_js:
 # The usage is the same as custom_js
 custom_css:
   - /css/macpanel
-  - //at.alicdn.com/t/c/font_4241027_j8xjy563jwl.css
+  - //at.alicdn.com/t/c/font_4241027_yvefgc8b65.css
 
 # 网页访问统计
 # Analysis of website visitors
@@ -356,7 +356,7 @@ navbar:
       submenu: [
         { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" },
         { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" },
-        { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
+        { key: "tag", link: "/tags/", icon: "iconfont icon-tag" }
       ]
     }
     - {

diff --git a/scaffolds/page_a.md b/scaffolds/page_a.md
@@ -13,5 +13,5 @@ index_img: https://static.kevinchu.top/blog/assets/img/cover_001.jpeg
 # 排序，sticky数值越大，该文章越靠前
 sticky: 999
 # 首页隐藏
-archive: false   
+archive: false
 ---
diff --git a/scaffolds/page_m.md b/scaffolds/page_m.md
@@ -0,0 +1,27 @@
+---
+title: {{ title }}
+date: {{ date }}
+updated: {{ date }}
+# 标签
+tags: 
+# 分类
+categories: 
+# 封面图
+index_img: https://static.kevinchu.top/blog/assets/img/cover_001.jpeg
+# 顶部图
+# banner_img: 
+# 排序，sticky数值越大，该文章越靠前
+sticky: 999
+# 首页隐藏
+archive: false
+---
+<script>
+MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']]
+  }
+};
+</script>
+<script id="MathJax-script" async
+  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+</script>
diff --git a/source/_posts/2023-09-12-hexo-supports-latex.md b/source/_posts/2023-09-12-hexo-supports-latex.md
@@ -0,0 +1,160 @@
+---
+title: Hexo支持LaTeX公式渲染
+index_img: https://static.kevinchu.top/blog/assets/img/cover_010.jpeg
+archive: false
+date: 2023-09-12 19:16:59
+updated: 2023-09-12 19:16:59
+tags:
+    - Hexo
+    - LaTeX
+categories:
+    - 博客建站
+---
+
+## 1 前言
+当前主流的LaTeX公式渲染引擎主要是[MathJax](https://github.com/mathjax/MathJax-src)和[KaTex](https://github.com/KaTeX/KaTeX)，MathJax几乎支持所有的LaTeX，功能强大，但是渲染速度相对较慢；KaTex更为轻量，渲染速度快，但是对部分复杂的公式不支持。两者各有利弊，都很实用。
+
+Hexo博客默认的markdown渲染器[hexo-renderer-marked](https://github.com/hexojs/hexo-renderer-marked)不支持渲染LaTeX公式，也不能扩展插件，想要在博客中渲染LaTeX往往需要更换markdown渲染器以使用公式引擎对公式进行渲染。常见可用的markdown渲染器有[hexo-renderer-pandoc](https://github.com/wzpan/hexo-renderer-pandoc)、[hexo-renderer-markdown-it](https://github.com/hexojs/hexo-renderer-markdown-it)、[hexo-renderer-markdown-it-plus](https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus)等等，通常要配合插件一起使用，且可能需要应对各类样式问题和兼容性问题。
+
+Hexo官方还对Hexo 5.0以上版本推出了[hexo-math](https://github.com/hexojs/hexo-math)插件来帮助识别两个公式引擎的语法，实现对LaTeX的渲染。该方式支持更多定制化参数，很方便，不过通常需要进行配置，且使用时要用较为繁琐的符号将需要渲染的公式内容包裹起来。
+
+本文介绍一种最原始、最直接的方式，不用更换markdown渲染器，也无需安装和配置插件，直接在需要渲染公式的文章中引入LaTeX自动渲染js来实现对LaTaX公式的渲染。
+
+## 2 引入LaTeX自动渲染脚本实现LaTaX公式渲染
+
+### 2.1 使用方式
+选择你想要使用的引擎（MathJax或KaTeX选其一），直接在markdown文章内容中添加引入对应引擎自动渲染js的代码即可（任意位置，建议放在内容首部或尾部），引入代码参考2.1和2.3。
+
+>如果觉得这种方法不够优雅，也可以使用Hexo 5.0的注入器或者各个主题自带的注入器将代码注入到需要的页面。另一种思路是，建一个带引入代码的文章模板，需要写带有LaTeX公式的博客时，直接通过该模板创建文章。
+
+**注意**：
+Hexo在markdown文章中写LaTeX公式时，有个经典问题就是一些字符会被markdown渲染器误认为是转义符号而被丢失，之后公式引擎再对公式渲染时语义已经改变导致渲染出错，最典型的例子就是换行符`\\`会被转义成`\`，导致最终渲染的公式内容不换行。本方式会存在这样的问题，我的应对方法是，针对可能被转义的公式，**用`<span>`标签将LaTeX公式包裹起来**，这样公式内容就不会被markdown渲染器识别为转义字符。例如：
+某矩阵LaTeX公式：
+```LaTeX
+$$
+\begin{pmatrix}  
+  a_{11} & a_{12} & a_{13} \\  
+  a_{21} & a_{22} & a_{23} \\  
+  a_{31} & a_{32} & a_{33}  
+\end{pmatrix} 
+$$
+```
+直接写，渲染异常：
+
+$$
+\begin{pmatrix}  
+  a_{11} & a_{12} & a_{13} \\  
+  a_{21} & a_{22} & a_{23} \\  
+  a_{31} & a_{32} & a_{33}  
+\end{pmatrix} 
+$$
+
+使用`<span>`标签包裹：
+```LaTeX
+<span>
+$$
+\begin{pmatrix}  
+  a_{11} & a_{12} & a_{13} \\  
+  a_{21} & a_{22} & a_{23} \\  
+  a_{31} & a_{32} & a_{33}  
+\end{pmatrix}
+$$
+</span>
+```
+
+效果如下，渲染正常：
+
+<span>
+$$
+\begin{pmatrix}  
+  a_{11} & a_{12} & a_{13} \\  
+  a_{21} & a_{22} & a_{23} \\  
+  a_{31} & a_{32} & a_{33}  
+\end{pmatrix}
+$$
+</span>
+
+>当然也可以采用其他的处理方式，参考这篇[博客](https://shomy.top/2016/10/22/hexo-markdown-mathjax)。
+
+### 2.2 引入MathJax自动渲染js
+
+引入MathJax自动渲染脚本代码（需开启对`$`分隔符的支持）：
+```html
+<script>
+MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']]
+  }
+};
+</script>
+<script id="MathJax-script" async
+  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+</script>
+```
+
+更多配置参考：[MathJax的官方文档](https://docs.mathjax.org/en/latest/web/start.html)
+
+### 2.3 引入KaTeX自动渲染js
+
+引入KaTeX自动渲染脚本代码：
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        renderMathInElement(document.body, {
+          // customised options
+          // • auto-render specific keys, e.g.:
+          delimiters: [
+              {left: '$$', right: '$$', display: true},
+              {left: '$', right: '$', display: false},
+              {left: '\\(', right: '\\)', display: false},
+              {left: '\\[', right: '\\]', display: true}
+          ],
+          // • rendering keys, e.g.:
+          throwOnError : false
+        });
+    });
+</script>
+```
+
+更多配置参考：[KaTeX的官方文档](https://katex.org/docs/autorender)
+
+
+## 3 LaTeX公式写法
+
+### 3.1.引用方式
+
+| **写法** | **引用方式** |
+| :--------: | :-------: |
+|  `$...$`  | 行内引用 |
+| `$$...$$` | 独行引用 |
+
+示例：
+
+这是文内引用：$\frac{n!}{k!(n-k)!} = \binom{n}{k}$
+
+这是独行引用（行间引用）：$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$
+
+
+### 3.2 语法
+
+
+LaTeX语法参考这篇博客：[**LaTeX公式手册(全网最全)**](https://blog.csdn.net/bwqiang/article/details/106029183)
+
+其他LaTeX教程：[**Wikibooks**](https://en.wikibooks.org/wiki/LaTeX/Mathematics)
+
+好用的LaTeX在线工具：[**LaTeX公式编辑器**](https://www.latexlive.com)
+
+
+<script>
+MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']]
+  }
+};
+</script>
+<script id="MathJax-script" async
+  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+</script>
diff --git a/source/navigation/index.md b/source/navigation/index.md
@@ -130,20 +130,19 @@ comment: ''
 </div>
 
 
-
-#### 🔨 工具
+#### 🔨 工具合集
 
 <br>
 
 - [**🔗在线工具**](https://tool.lu/)
 
-- [**🔗UU在线工具**](https://uutool.cn/)
-
 - [**🔗菜鸟工具**](https://c.runoob.com/)
 
+- [**🔗UU在线工具**](https://uutool.cn/)
+
 <br>
 
-#### 💻 学习
+#### 💻 学习网站
 
 <br>
 
@@ -163,27 +162,26 @@ comment: ''
 
 <br>
 
-#### 📱 娱乐
+#### 📱 头版头条
 
 <br>
 
 - [**🔗今日热榜**](https://tophub.today/)
 
 <br>
 
-#### 🔍 综合
+#### 🔍 综合导航
 
 <br>
 
 - [**🔗AK47导航**](https://www.ak47s.cn/)
 
 - [**🔗炫猿导航**](https://xydh.fun/)
 
+<br>
 
 
 
-<br>
-
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.css"