
效率!效率!!还是TM的效率!!!
JonasTechVscode自定义代码
我之所以更新慢的原因,跟这个静态博客脱不开关系,每次写Markdown格式的时候,我总想着加一些有趣的小标签进去,但是老记不住那么多语法,所以想了个办法来解决这个问题 。
利用Vscode的代码自动补全功能,自定义一些常用“代码”片段,然后一劳永逸。
优势
高效
方便
容易上手
- 简单介绍
以往如果我在 .MD文件 中加入像 文字块 这样的内容时,我就需要去到主题的 配置文档 中查看它的语法,然后复制、修改参数,才能正常使用。每次写文章都要东找西找的,效率低只是一方面,主要是太麻烦,人都是有惰性的
而自从我设置了自定义代码片段后,我感觉前所未有的舒畅,仿佛天都比以前蓝了。(我猜的,好几天没见太阳了)
案例展示
折叠菜单
我举个几个简单的例子来说明
假设我现在要在下方加入一个折叠菜单,通常情况下需要这么写:1
2
3
4{% folding cyan open, 折叠菜单 %}
这是一个缩小的图片{% inlineimage https://esimg.laogou717.com/i/2024/09/29/77c3uf.webp, height=60px %}
{% endfolding %}折叠菜单
这是一个缩小的图片
但使用自定义代码片段后,我只需要在文件中输入我自己设置的 片段前缀系统就会自动显示设定的代码:
然后按下键盘上的 TAB 或 Enter,就能直接调用配置的代码,并且光标自动定位到我设置的地方或自动选中某些文字。
yaml头部元数据
相信各位使用静态博客的朋友都对下面这种yaml
格式的元数据不陌生吧。
其中有些字段我们每次更新都需要进行配置,不然博客框架就无法正常生成静态文件。
比如本篇文章的配置:
1 | --- |
你会发现很多内容都是可以重复利用的。而不用每次都重新输入或复制粘贴。
为此,我在自定义代码中写了两个版本的元数据配置,一个用来发布 AI纪元 系列内容,另一个用来发布我的个人 日记 。
点击展开
1 | "AI纪元头部": { |
- 说明
- 通过
${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}
自动获取发布当日的日期时间 - 通过
$CLIPBOARD
自动获取粘贴板中的内容并填入封面字段中 - 加入
${CLIPBOARD/(http)(:\\\\/\\\\/[^\\\\s)]+)/https$2/}
正则表达式把http处理为https
这样我只需要输入“aitop”就可以直接生成带封面、日期的元数据
- 通过
点击展开
1 | "日记": { |
这个没什么可说的,我的日记默认都是以日期开头,固定的封面。
文章更新日期
我讨厌手动输入日期时间,所以自定义了updated: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}
字段,这样当我去更改一些旧文时,直接在文章头部输入简写 U D 并按下回车,就能自动填入当日的日期。
这样一些支持显示文章更新时间的博客主题就会出现这样的提示,非常人性化。
配置方法
VSCode 设置
基础设置
首先需要在vscode中找到关于自定义代码的设置。你可以在窗口的左下角,点击设置按钮找到代码片段选项。[{"url":"https://esimg.laogou717.com/i/2024/09/29/bmsw6f.webp","alt":"vscode设置"}]点击后Vscode的搜索框会被唤醒。接着我们直接搜索Markdown,找到一个名为markdown.json的文件。
[{"url":"https://esimg.laogou717.com/i/2024/09/29/boeisr.webp","alt":"vscode搜索框"},{"url":"https://esimg.laogou717.com/i/2024/09/29/bp8wjv.webp","alt":"搜索markdown.json"}]进入
markdown.json
文件后,即可开始编辑自定义代码片段。这个文件中的配置只在 Markdown 文件中生效,不会影响其他语言的输入。以下是进入编辑器后的设置示例👇
[{"url":"https://esimg.laogou717.com/i/2024/09/29/bxxmjr.webp","alt":"进入markdown.json"}]
基本语法解释(非必读)
- 基本语法
VS Code 的自定义代码片段是通过.code-snippets
文件编写的,可以存放在用户全局配置目录或特定项目中。基本语法如下:
1 | { |
语法说明
- prefix: 用于触发代码片段的关键词,输入后会唤醒代码自动补全功能。
- body: 代码片段的内容,支持多行和占位符。占位符可以使用
${1:默认值}
,其中1
是占位符的索引,默认值
是提示的默认内容。 - description: 对代码片段的描述,解释其用途。
示例
创建一个简单的 HTML 模板:
1 | { |
- 示例解读
- prefix:
html-template
,当输入这个前缀或简写时,VS Code 会提示插入该代码片段。 - body: HTML 模板的内容,包含了占位符
${1:Document}
和${2:<!-- 内容放在这里 -->}
,用于快速修改标题和内容。 - description: 简要说明了代码片段的用途,方便选择。
- prefix:
一键生成自定义代码
Vscode自定义代码片段
在vscode配置常用的代码,并且提供唤醒前缀,只需输入一次。
界面很干净简洁 (高情商),但到底怎么写下面的信息呢?
如果你有这个问题,不要怀疑,应该是我前面废话太多了,没讲清楚,我们一步一步来看。
把需要偷懒、重复的内容填入下面的”内容区域”
比如我希望每篇博文下方我都加入一个 互联网要饭环节
那么我就在内容区输入我准备好的内容:“V我50~啊~V我50~”。
触发字段最好设置英文,要是你不怕输入的时候麻烦,硬用中文当前缀Vscode倒是也能支持。
- 生成配置
输入完毕后,点击生成按钮会出现一个弹窗,直接点弹窗里的复制。然后粘贴到我们的markdown.json
文件中去(大括号的中间)。
然后按下ctrl
+s
保存文件。
接着随便创建一个.md
文件,在其中输入:刚刚设置的“触发前缀”,看看是否会出现自动补全的提示。
如果成功就万事大吉🎉,接下来你只需要寻按照自己需要添加,或者把你的需求告诉chatgpt,直接让它帮你写。
如果失败就也没关系😄,你只需要复制这段代码。
1 | "[markdown]": { |
然后在重新点击左下角的设置按钮,点击设置,在设置页面的右上角打开配置文件,跟上面写自定义代码一样,直接滑到底部粘贴进大括号里保存就可以正常识别了。
尾声
元数据的配置
由于我们不是配置全局页面的代码补全,所以会导致你在markdown.json
中配置的字段,在头部---
的包围之中无法唤出自动补全。
- 要么直接全局配置,要么就把头部的代码,全部放到
yaml.json
中配置。格式都是一样的。 - [{"url":"https://esimg.laogou717.com/i/2024/09/29/ewgb35.webp","alt":"yaml.json文件配置"}]