Hexo Note

Author: JosephLau

小技巧

Hexo博客实现页内跳转

如何在Hexo中写MarkDown文档,不使用绝对地址进行跳转到本博客中另外一个页面

传送门在此,代码如下:

1
2
# 出现了莫名的BUG
{% post_link Settings-of-iTerm2-on-Mac 详细设置请看这篇文章 %}

上面的方法失效了,本博客目前使用的是permalink链接到唯一的文章,改了文章名也没有关系

具体设置方法请看这里

Next 主题中渲染 LaTeX数学公式

原因

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

因为类 Latex 格式书写的数学公式下划线_表示下标,有特殊的含义,如果被强制转换为<em>标签,那么 MathJax 引擎在渲染数学公式的时候就会出错。

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

解决方法

更换 Hexo 的 markdown 渲染引擎,hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ,两者比较接近,也比较轻量级。

1
2
 npm uninstall hexo-renderer-marked --save
$ npm install hexo-renderer-kramed --save

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。
然后,跟换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下,找到node_moduleskramedlibrulesinline.js,把第11行的 escape 变量的值做相应的修改:

1
2

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

这一步是在原基础上取消了对,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

1
2

em: /^*((?:**|[sS])+?)*(?!*)/,

重新启动hexo(先clean再generate),问题完美解决。哦,如果不幸还没解决的话,看看是不是还需要在使用的主题中配置mathjax开关。

在 Next 主题中开启 MathJax 开关

如何使用了主题了,别忘了在主题(Theme)中开启 MathJax 开关,下面以 next 主题为例,介绍下如何打开 MathJax 开关。

进入到主题目录,找到 _config.yml 配置问题,把 math 默认的 false 修改为true

1
2
3
4
5
6
7
8
9
10
11
12
13
math:
# enable: false
enable: true
# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has `mathjax: true` in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: true
engine: mathjax
#engine: katex
# hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
mathjax:
# Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
cdn: //cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML

还需要在post的Front-matter里打开mathjax开关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
copyright: true
comments: true
mathjax: false
tags:
-
categories:
- Uncategoried
image:
sticky:
---

需要渲染LaTeX公式的再选择开启。

Markdown写作注意事项

  • 引用

    1
    2
    3
    4
    <blockquote>引用内容</blockquote>

    /* 如果上下间距很小,可以像下面这样写 */
    <p><blockquote>引用内容</blockquote></p>
  • 居中和右对齐

    1
    2
    3
    4
    5
    /* 居中 */
    <center>内容</center>

    /* 右对齐 */
    <p style="text-align:right">内容</p>
  • 字体大小和颜色

    1
    2
    <font color="#xxxxxx" size="number">内容</font>
    /* 详细请查看 http://www.w3school.com.cn/tags/tag_font.asp */
  • Todo list

    1
    2
    3
    4
    <ul>
    <li><i class="fa fa-check-square"></i> 已完成</li>
    <li><i class="fa fa-square"></i> 未完成</li>
    </ul>

主题自带样式 note 标签

在主题配置文档_config.yml里有一个关于这个的配置,但官方文档没有提供 HTML 的使用方式,个人认为这种方式更简单,也不会产生一些奇怪的显示 bugs……

default

1
<div class="note default"><p>default</p></div>

primary

1
<div class="note primary"><p>primary</p></div>

success

1
<div class="note success"><p>success</p></div>
1
<div class="note info"><p>info</p></div>

warning

1
<div class="note warning"><p>warning</p></div>

danger

note danger, note danger, note danger
note danger, note danger, note danger
note danger, note danger, note danger

1
2
3
4
5
6
7
<div class="note danger"><p>danger</p></div>
// 或者这样
{% note danger %}
note danger, note danger, note danger
note danger, note danger, note danger
note danger, note danger, note danger
{% endnote %}

danger no-icon

1
<div class="note danger no-icon"><p>danger no-icon</p></div>

首先可以在主题配置文档中需要配置下,贴上我的:

1
2
3
4
5
6
7
8
9
文档位置:~/blog/themes/next/_config.yml# Note tag (bs-callout).
note:
# 风格
style: flat
# 要不要图标
icons: true
# 圆角矩形
border_radius: 3
light_bg_offset:

里面的三种风格长啥样?开启图标长啥样?可以查看这个页面,更多的介绍也在这个页面。

主题自带样式 label 标签

首先可以在主题配置文档中有配置,需要配置下,贴上我的:

1
2
文档位置:~/blog/themes/next/_config.yml# Label tag.
label: true

然后效果如下(@ 前面的是label的名字,后面的是要显示的文字):

default
1
{% label [email protected] %}
primary
1
{% label [email protected] %}
success
1
{% label [email protected] %}
info
1
{% label [email protected] %}
warning
1
{% label [email protected] %}
danger
1
{% label [email protected] %}

目前博主发现个 bug,如果把它加在一段文字的段首,则会有点问题,见issue

BUGs

  1. Hexo解析问题

    例如:文章中代码块外出现}}时,Hexo 解析就会出现问题

    解决办法:

    • One

      1
      2
      3
      {% raw %}
      含有双大括号的内容
      {% endraw %}
    • The Other