效率！效率！！还是TM的效率！！！

文章摘要

神人GPT

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

Vscode自定义代码

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

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

优势

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

案例展示

折叠菜单

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



{% fold 折叠菜单 %}

这是一个缩小的图片{% inline_img https://esimg.laogou717.com/i/2024/09/29/77c3uf.webp '' 60px %}

{% endfold %}

折叠菜单

这是一个缩小的图片 60px

但使用自定义代码片段后，我只需要在文件中输入我自己设置的 **片段前缀**系统就会自动显示设定的代码：
![自定义代码片段1](https://esimg.laogou717.com/i/2024/09/29/8o3q1j.webp)

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

![Vscode快捷输入](https://esimg.laogou717.com/i/2024/09/29/8oqgry.webp)

yaml头部元数据

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

---
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纪元 系列内容，另一个用来发布我的个人 日记。

点击展开

"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”就可以直接生成带封面、日期的元数据

点击展开

"日记": {
		"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 并按下回车，就能自动填入当日的日期。

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

配置方法

VSCode 设置

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

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

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

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

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

{% gallery true,,2 %}
    ![进入markdown.json](https://esimg.laogou717.com/i/2024/09/29/bxxmjr.webp)
    {% endgallery %}

基本语法解释（非必读）

基本语法
VS Code 的自定义代码片段是通过 .code-snippets 文件编写的，可以存放在用户全局配置目录或特定项目中。基本语法如下：

{
  "代码片段名称": {
    "prefix": "触发前缀",  // 输入的前缀，用于触发代码片段
    "body": [
      "代码的第一行",
      "代码的第二行，可以使用占位符：${1:默认值}",
      "多行内容可用数组表示，每行一个元素"
    ],
    "description": "对该代码片段的描述"
  }
}

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

{
  "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配置常用的代码，并且提供唤醒前缀，只需输入一次。

mdcode — Vscode自定义代码工具

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

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

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

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

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

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

"[markdown]": {
    "editor.quickSuggestions": {
        "comments": "on",
        "strings": "on",
        "other": "on"
    },
    "diffEditor.ignoreTrimWhitespace": true
},

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