效率!效率!!还是TM的效率!!!

因博主在尝试自动化出现技术错误,而事前并未对图片数据进行备份,所以导致本篇博文中的演示图片全部丢失😮‍💨。

Vscode自定义代码

我之所以更新慢的原因,跟这个静态博客脱不开关系,每次写Markdown格式的时候,我总想着加一些有趣的小标签进去,但是老记不住那么多语法,所以想了个办法来解决这个问题 。

利用Vscode的代码自动补全功能,自定义一些常用“代码”片段,然后一劳永逸。

优势

高效

方便

容易上手

  • 简单介绍
    以往如果我在 .MD文件 中加入像 文字块 这样的内容时,我就需要去到主题的 配置文档 中查看它的语法,然后复制、修改参数,才能正常使用。每次写文章都要东找西找的,效率低只是一方面,主要是太麻烦,人都是有惰性的
    而自从我设置了自定义代码片段后,我感觉前所未有的舒畅,仿佛天都比以前蓝了。(我猜的,好几天没见太阳了)

案例展示

折叠菜单

  • 我举个几个简单的例子来说明
    假设我现在要在下方加入一个折叠菜单,通常情况下需要这么写:

    1
    2
    3
    4
    {% folding cyan open, 折叠菜单 %}
    这是一个缩小的图片{% inlineimage https://esimg.laogou717.com/i/2024/09/29/77c3uf.webp, height=60px %}
    {% endfolding %}

    折叠菜单

    这是一个缩小的图片

    但使用自定义代码片段后,我只需要在文件中输入我自己设置的 片段前缀系统就会自动显示设定的代码:
    自定义代码片段1

    然后按下键盘上的 TABEnter,就能直接调用配置的代码,并且光标自动定位到我设置的地方或自动选中某些文字。

    Vscode快捷输入

yaml头部元数据

相信各位使用静态博客的朋友都对下面这种yaml格式的元数据不陌生吧。
其中有些字段我们每次更新都需要进行配置,不然博客框架就无法正常生成静态文件
比如本篇文章的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 效率!效率!!还是TM的效率!!!
description: 一旦尝试了Vscode自定义代码片段,你会发现以前写文章像是原始人一样!通过对Md文档的某些字段进行指定来快速调用,事半功倍!
date: 2024-09-27
cover: https://esimg.laogou717.com/i/2024/09/28/hxlmb.webp
tags: [AI,开源项目,效率,写作]
keywords: [AI,开源项目,效率,写作]
categories: AI纪元
main_color: #0a0c1c
updated: 2024-09-29
ai:
-
---

你会发现很多内容都是可以重复利用的。而不用每次都重新输入或复制粘贴。
为此,我在自定义代码中写了两个版本的元数据配置,一个用来发布 AI纪元 系列内容,另一个用来发布我的个人 日记

点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"AI纪元头部": {
"prefix": "aitop",
"body": [
"---",
"title: 【必需】文章标题",
"description: 【可选】文章描述",
"date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
"cover: ${CLIPBOARD/(http)(:\\\\/\\\\/[^\\\\s)]+)/https$2/}",
"tags: [AI,开源项目]",
"keywords: ",
"categories: AI纪元",
"main_color: ",
"---"
],
"description": "AI纪元专用代码"
  • 说明
    • 通过${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}自动获取发布当日的日期时间
    • 通过$CLIPBOARD自动获取粘贴板中的内容并填入封面字段中
    • 加入${CLIPBOARD/(http)(:\\\\/\\\\/[^\\\\s)]+)/https$2/}正则表达式把http处理为https
      这样我只需要输入“aitop”就可以直接生成带封面、日期的元数据
点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"日记": {
"prefix": "top",
"body": [
"---",
"title: ${CURRENT_MONTH}月${CURRENT_DATE}日记",
"date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
"categories: 日记",
"keywords: [神烦老狗,日记,生活感悟]",
"description: ${CURRENT_YEAR}年${CURRENT_MONTH}月${CURRENT_DATE}日生活记录",
"cover: https://esimg.laogou717.com/i/2024/09/26/r88udl.webp",
"main_color: #000000",
"---"
],
"description": "博客日记头部部分"

这个没什么可说的,我的日记默认都是以日期开头,固定的封面。

文章更新日期

我讨厌手动输入日期时间,所以自定义了updated: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}字段,这样当我去更改一些旧文时,直接在文章头部输入简写 U D 并按下回车,就能自动填入当日的日期。

这样一些支持显示文章更新时间的博客主题就会出现这样的提示,非常人性化

配置方法

VSCode 设置

  • 基础设置
    首先需要在vscode中找到关于自定义代码的设置。你可以在窗口的左下角,点击设置按钮找到代码片段选项。

    点击后Vscode的搜索框会被唤醒。接着我们直接搜索Markdown,找到一个名为markdown.json的文件。

    进入 markdown.json 文件后,即可开始编辑自定义代码片段。这个文件中的配置只在 Markdown 文件中生效,不会影响其他语言的输入。

    如果想全局生效,可以选择 “New Global Snippets file”(创建全局代码片段)。

    以下是进入编辑器后的设置示例👇

基本语法解释(非必读)
  • 基本语法
    VS Code 的自定义代码片段是通过 .code-snippets 文件编写的,可以存放在用户全局配置目录或特定项目中。基本语法如下:
1
2
3
4
5
6
7
8
9
10
11
{
"代码片段名称": {
"prefix": "触发前缀", // 输入的前缀,用于触发代码片段
"body": [
"代码的第一行",
"代码的第二行,可以使用占位符:${1:默认值}",
"多行内容可用数组表示,每行一个元素"
],
"description": "对该代码片段的描述"
}
}
  • 语法说明

    • prefix: 用于触发代码片段的关键词,输入后会唤醒代码自动补全功能。
    • body: 代码片段的内容,支持多行和占位符。占位符可以使用 ${1:默认值},其中 1 是占位符的索引,默认值 是提示的默认内容。
    • description: 对代码片段的描述,解释其用途。
  • 示例
    创建一个简单的 HTML 模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"HTML模板": {
"prefix": "html-template",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>${1:Document}</title>",
"</head>",
"<body>",
" ${2:<!-- 内容放在这里 -->}",
"</body>",
"</html>"
],
"description": "一个简单的 HTML 页面模板"
}
}
  • 示例解读
    • prefix: html-template,当输入这个前缀或简写时,VS Code 会提示插入该代码片段。
    • body: HTML 模板的内容,包含了占位符 ${1:Document}${2:<!-- 内容放在这里 -->},用于快速修改标题和内容。
    • description: 简要说明了代码片段的用途,方便选择。

一键生成自定义代码

如果你并不想自己编写这破玩意儿,那么你可以试试我做的这个 自定义代码生成器 👇

Vscode自定义代码工具

在vscode配置常用的代码,并且提供唤醒前缀,只需输入一次。

界面很干净简洁 (高情商),但到底怎么写下面的信息呢?
如果你有这个问题,不要怀疑,应该是我前面废话太多了,没讲清楚,我们一步一步来看。
把需要偷懒、重复的内容填入下面的”内容区域”
Vscode自定义代码工具首页

比如我希望每篇博文下方我都加入一个 互联网要饭环节
那么我就在内容区输入我准备好的内容:“V我50~啊~V我50~”。
V我50

触发字段最好设置英文,要是你不怕输入的时候麻烦,硬用中文当前缀Vscode倒是也能支持。

  • 生成配置
    输入完毕后,点击生成按钮会出现一个弹窗,直接点弹窗里的复制。然后粘贴到我们的markdown.json文件中去(大括号的中间)。
    然后按下ctrl+s保存文件。

接着随便创建一个.md文件,在其中输入:刚刚设置的“触发前缀”,看看是否会出现自动补全的提示。

如果成功就万事大吉🎉,接下来你只需要寻按照自己需要添加,或者把你的需求告诉chatgpt,直接让它帮你写。
如果失败就也没关系😄,你只需要复制这段代码。

1
2
3
4
5
6
7
8
9
"[markdown]": {
"editor.quickSuggestions": {
"comments": "on",
"strings": "on",
"other": "on"
},
"diffEditor.ignoreTrimWhitespace": true
},

然后在重新点击左下角的设置按钮,点击设置,在设置页面的右上角打开配置文件,跟上面写自定义代码一样,直接滑到底部粘贴进大括号里保存就可以正常识别了。

尾声

元数据的配置

由于我们不是配置全局页面的代码补全,所以会导致你在markdown.json中配置的字段,在头部---的包围之中无法唤出自动补全。

  • 要么直接全局配置,要么就把头部的代码,全部放到yaml.json中配置。格式都是一样的。