vscode 代码片段配置

像 HTML 一样, hexo 可以自定义很多标注性质的词法来渲染不容类型的信息进行展示, 而像我这样的懒人, 一般不乐意一直不停的敲那些一成不变的代码片段, 所以在 blog 根目录下建立一个隐藏文件夹 .vscode, 在这个文件夹内新建文件 snippets.code-snippets 可以定义更短的代码来触发代码片段, 方便内容编辑.

所以现在我正在使用的 blog 所拥有的代码片段用 mermaid 图展示就是:

stateDiagram-v2
	direction LR
	[*]-->BBlock
	[*]-->ThmBlock
	[*]-->RefBlock

    state BBlock {
		direction LR
        Mermaid: >mermaid
		MermaidDesc: mermaid图
		Bubble: >bubble
		BubbleDesc: 用来显示鼠标悬停信息

		Mermaid-->MermaidDesc
		Bubble-->BubbleDesc
    }
    state ThmBlock {
		direction LR
        Def: >def
		DefDesc: 定义区块
		Thm: >thm
		ThmDesc: 定理区块
		Lemma: >lem
		LemmaDesc: 引理区块
		Hint: >hint
		HintDesc: 提示, 折叠消息类
		Ques: >ques
		QuesDesc: 问题区块
		Example: >example
		ExampleDesc: 例子区块
		Otherproof: >otherproof
		OtherproofDesc: 对于多种证法的证明使用tab页

		Def-->DefDesc
		Thm-->ThmDesc
		Lemma-->LemmaDesc
		Hint-->HintDesc
		Ques-->QuesDesc
		Example-->ExampleDesc
		Otherproof-->OtherproofDesc
    }
    state RefBlock {
		direction LR
        Label: >label
		LabelDesc: 用于在文章内跳转的标签
		Ref: >ref
		RefDesc: 引用文章内的标签
		Cite: >cite
		CiteDesc: 引用文章

		Label-->LabelDesc
		Ref-->RefDesc
		Cite-->CiteDesc
    }
snippets.code-snippets 的全部代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
{
	// Place your blog 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Hint": {
		"scope": "markdown",
		"prefix": ">hint",
		"body": [
			"{% hideToggle 提示,purple,white %}",
			"$1",
			"{% endhideToggle %}"
		],
		"description": "提示"
	},
	"Question": {
		"scope": "markdown",
		"prefix": ">ques",
		"body": [
			"{% note primary no-icon %}",
			"**问题:** $1",
			"{% endnote %}"
		],
		"description": "问题"
	},
	"Definition": {
		"scope": "markdown",
		"prefix": ">def",
		"body": [
			"{% note primary no-icon modern %}",
			"**定义**: $1",
			"{% endnote %}"
		],
		"description": "定义"
	},
	"Theorem": {
		"scope": "markdown",
		"prefix": ">thm",
		"body": [
			"{% note primary no-icon modern %}",
			"**定理**: $1",
			"{% endnote %}"
		],
		"description": "定理"
	},
	"Lemma": {
		"scope": "markdown",
		"prefix": ">lem",
		"body": [
			"{% note primary no-icon modern %}",
			"**引理**: $1",
			"{% endnote %}"
		],
		"description": "引理"
	},
	"Example": {
		"scope": "markdown",
		"prefix": ">example",
		"body": [
			"{% note primary no-icon modern %}",
			"**例**: $1",
			"{% endnote %}"
		],
		"description": "例子"
	},
	"Label": {
		"scope": "markdown",
		"prefix": ">label",
		"body": [
			"<span id = \"$1\"></span>"
		],
		"description": "标签"
	},
	"Reference": {
		"scope": "markdown",
		"prefix": ">ref",
		"body": [
			"[这里](#$1)"
		],
		"description": "引用"
	},
	"Cite": {
		"scope": "markdown",
		"prefix": ">cite",
		"body": [
			"{% post_link 文件名$1 %}"
		],
		"description": "引用"
	},
	"Bubble": {
		"scope": "markdown",
		"prefix": ">bubble",
		"body": [
			"{% bubble 内容$1,淡出信息 %}"
		],
		"description": "气泡信息"
	},
	"OtherProof": {
		"scope": "markdown",
		"prefix": ">otherproof",
		"body": [
			"{% tabs test2, 3 %}",
			"<!-- tab -->",
			"**This is Tab 1.**",
			"<!-- endtab -->",
			"",
			"<!-- tab -->",
			"**This is Tab 2.**",
			"<!-- endtab -->",
			"",
			"<!-- tab -->",
			"**This is Tab 3.**",
			"<!-- endtab -->",
			"{% endtabs %}"
		],
		"description": "其他证明以 tab 页展示"
	}
}

自定义配置mathjax

首先根据baidu出来的信息, 找到简书上的教程, 然后在参考MathJax官方教程在本地找到文件[blog path]/themes/butterfly/layout/includes/third-party/math/mathjax.pug进行修改, 为了防止链接实效, 将简要步骤叙述如下:

step 1

更换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_modules\kramed\lib\rules\inline.js, 把第11行的escape变量的值做相应的修改：

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

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

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

重新启动hexo(先clean再generate), 问题完美解决.

step 2

参考MathJax官方教程, 在本地找到文件[blog path]/themes/butterfly/layout/includes/third-party/math/mathjax.pug进行添加以下行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
window.MathJax = {
	loader: {
		source: { ... },
		load: ['[tex]/configmacros']
	},
	tex: {
		packages: {'[+]': ['configmacros']},
		inlineMath: ...,
		tags: ...,
		macros: {
			RR: '\\mathbb{R}',
			ud: '\\mathrm{d}'
		}
	}
}
...

如此便可以在hexo编写数学公式时使用自定义宏\ud和\RR来分别表示正体积分微元符号d和花写实数集R.

自定义配置搜索

在blog根目录执行以下代码:

1
npm install hexo-generator-searchdb --save

在_config.yml文件中新增以下代码段

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在hexo博客所选择的主题, 比如_config.yml, 中增加以下配置即可

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

在blog中调用latex包

1
2
3
4
5
6
7
8
9
$$
\require{cancel}
\begin{align}
& \;\;x^6 - \color{green}{2\sqrt{3}}\, x^5 - x^4 + x^3 - \color{blue}{4}\,x^2 + 2x - \sqrt{3}
\\ = &\; \cancel{x^6} - \left(\color{green}{\cancel{x} - \bcancel{\frac{1}{x}}}\right)x^5 - \bcancel{x^4} + \xcancel{x^3} - \left(\color{blue}{\xcancel{x}+\frac{1}{x}}\right)x^2 + 2x - \sqrt{3}
\\ = &\;\; x - \sqrt{3}
\\ = &\; \;2
\end{align}
$$

mathjax 的其它书写功能模板展示

交叉引用

1
2
3
4
5
$$
e^{i\pi }+1=0\tag{1}\label{eq}
$$

这里我们引用$\eqref{eq}$。

这里我们引用$\eqref{eq}$。

Hexo 主题 butterfly 的目录结构

graph LR;
  A[butterfly]-->B[languaes语言配置];
  A-->C[layout布局];
  A-->D[script脚本];
  A-->E[source资源];
  A-->F[_config.yml 配置文件];
  C-->H[includes页面布局];
  C-->I[404.pug];
  J[head.pug]-->|用于|I;
  K[loading.pug]-->|用于|I;
  L[预加载]-->K;
  M[additional-js.pug]-->|用于|I;
  C-->N[archive.pug归档布局];
  G[article-sort.pug]-->|用于|N;
  O[pagination.pug]-->|用于|N;
  N-->|继承|P[layout.pug];
  C-->Q[category.pug];
  Q-->|继承|P;
  R[post-ui.pug]-->|用于|Q;
  S[article-sort.pug]-->|用于|Q;
  C-->T[index.pug];
  C-->U[page.pug];
  C-->V[post.pug];
  C-->W[tag.pug];
  H-->IA[head];
  H-->IB[header];
  H-->IC[loading];
  H-->ID[mixins];
  H-->IE[page];
  IE-->IEA[flink.pug]-->IEAA[友情链接];
  H-->IF[post];
  H-->IG[third-party];
  H-->IH[widget];
  H-->M;
  H-->II[footer.pug];
  H-->IJ[head.pug];
  H-->P;
  H-->O;
  H-->IL[rightside.pug];
  H-->IM[sidebar.pug];

layout/includes/head

analytics.pug

主要用于分析网站数据: 流量, 访客量等. 可以参考tongji

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 登录百度统计 https://tongji.baidu.com/web/welcome/login
// 注册并添加博客网站以得到下面的代码, 以下代码在百度统计后台有展示
if theme.baidu_analytics
  script.
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();

// 登录谷歌统计 https://analytics.google.com/analytics/web/
// 按要求填写网站地址, 和百度统计类似
if theme.google_analytics
  script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`)
  script.
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '!{theme.google_analytics}');

config_site.pug

配置网站全局变量GLOBAL_CONFIG_SITE的数据, 内容有代码折叠属性, 是否显示文章目录等.

config.pug

配置 algolia 快速搜索, 本地搜索, 简繁体互换, 版权说明, 主题日夜间切换相关, 文章是否过时设置, 代码高亮, 全局变量 GLOBAL_CONFIG 等.

google_adsense.pug

配置 google adsense 广告.

site_verification.pug

如果在搜索引擎中搜索不到自己的 blog 页面, 可以在这里添加到搜索引擎中, 比如百度的站点管理地址在这里, bing 和 google 的地址均可在 _config.yml 文件的相应位置找到站点添加地址.

layout/includes/header

index.pug

配置在不同页面顶部信息的展示方式.

顶部菜单信息的展示配置.

导航栏标题与搜索配置.

post-info.pug

博文元数据信息, 如: 是否可以在浏览器编辑文章, 发表日期, 更新日期, 文章类别, 字数统计, 访问量等.

social.pug

联系信息展示.

tabs 测试区

This is Tab 1.

This is Tab 2.

This is Tab 3.

问题: blablabla…

This is Tab 1.

This is Tab 2.

This is Tab 3.

没有预设的情况

This is Tab 1.

This is Tab 2.

This is Tab 3.

图标类 tab 页

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

引用段落测试区

这是一个引用段落, 可以看看配色.

其它待添加工具

  • 一个可以复制代码的视频嵌入工具. 一个可以参考的样本见这里.

References

tongji. 分析网站数据, https://zhuanlan.zhihu.com/p/392900656 ↩