Jekyll Post 模板

| 原创 | 优化 jekyll

Visual Studio code 自带的 snippets 特性可以快速生成特定文件的模板,同时高度可定制,借助snippets可简化多种格式的文件编辑。

在启用手动配置的 snippets 之前,其实 VScode 已经提供了一些常用的 snippets 如 image 和 link。使用方式:打开 VScode,在任意一个 Markdown 文件中键入 image,按 tab 键补全,可以看到,VScode 会将刚刚输入的 image 自动替换为:

VScode自动替换image字段为markdown的图片链接格式

而且可以看到,图中已经有三个默认的操作光标,第一个是 alt 字段,匹配 img 标签中的 alt 字段,第二个是 link 字段,匹配图片链接,第三个是图片链接之后的一个光标插入位,是最后光标回落的编辑点。一般先编辑 alt 字段,然后按下 tab 键切换到 link 的光标处编辑 link,最后同样按下 tab 键切换到图片链接最后,则此次的 image snippets 使用完成。

对于 markdown 格式,启用 snippets 的方式是:在 VScode 的任意界面按下快捷键 Ctrl + shift + p ,搜索 snippets ,选中 Open User Snippets ,下拉选择 markdown 文件格式,进入 markdown.json 用户配置文件,参考注释就可以编辑自己需要在 markdown 格式文件中引用的 code snippets 了。

接下来进入 File - Preferences - Settings ,在搜索栏搜索 snippets ,可以进一步配置 snippets 的行为。

设定后重启 VScode,新建一个 markdown 格式文件,输入 postyml (可以通过 tab 按键补全),显示效果如下图。按下 enter 键启用 snippets 。

基于 jekyll 的博客可以参考博主下面的 markdown.json 配置:

{
	"post yml head file": {
		"prefix": "head",
		"body": [
			"---",
			"layout: post",
			"title: $1",
			"date: $2",
			"description: $3",
			"tags: ",
			" - $4",
			"---\n",
			"## $5\n",
			"$0"
		],
		"description": "post markdown file head file"
	},
	"link quick": {
		"prefix": "ql",
		"body": [
			"[$2]($1) $3",
		],
		"description": "quick generate link"
	},
	"rounded template": {
		"prefix": "img",
		"body": [
			"![]($1)*$2*\n\n$3",
		],
		"description": "default img template"
	},
	"highlight": {
		"prefix": "high",
		"body": [
			"```${1:bash}",
			"$2",
			"```\n",
			"$0"
		],
		"description": "highlight"
	},
	"note": {
		"prefix": "note",
		"body": [
			"> ${1:note}",
			"{: .note}\n",
			"$0"
		],
		"description": "note without warning"
	},
	"key style": {
		"prefix": "ks",
		"body": [
			"`$1`{:.key} + `$2`{:.key}"
		],
		"description": "按键样式"
	}
}