vuepress blog自动生成标题、时间等信息

vuepress是一款很出色的静态网站生成器,配合官方提供的blog主题,很快就能搭建一个自己的博客网站。vuepress blog使用yaml解析元信息,也就是一篇文章的title、date、author和tags等,笔者在使用时发现每次定义这些信息很麻烦,于是就找解决方案,最后发现使用vscode的代码片段功能可以轻松解决这个问题,下面就是具体方法:

  1. 首先打开Code > 首选项 > 用户片段,点击新建片段并起一个名字,比如blog

20220216190943

  1. 在文件中输入下面的内容,其中Print blog meta是代码片段的标题,prefix是触发的关键字,body是生成的内容,description是代码片段的描述。body中我们默认设置了title就是文件名字,date是当前时间,author默认是admin,tags默认空。
{
	"Print blog meta": {
		"prefix": "blogMeta",
		"body": [
			"---",
			"title: ${1:$TM_FILENAME_BASE}",
			"date: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			"author: ${2:admin}",
			"tags:",
			"  - $3",
			"---",
			"\r"
		],
		"description": "生成博客元信息"
	}
}
  1. vscode默认没有启动markdown的代码片段功能,因此需要在设置中添加下面的代码,快捷键 command+shift+p 输入setting.json
 "[markdown]":{
        "editor.quickSuggestions": true
    },
  1. 新建一篇markdown文件,输入blogMeta就可以自动生成了
---
title: vuepress blog自动生成标题、时间等信息
date: 2022/02/16 17:16:47
author: admin
tags:
  - tool
---

vuepress blog自动生成标题、时间等信息首发于聚享小站,如果对您有帮助,不要忘记点赞支持一下呦🎉

posted @ 2022-02-19 12:28  wmui  阅读(405)  评论(0编辑  收藏  举报