API 示例

摘要

本页演示了 VitePress 提供的一些运行时 API 的用法。

useData() API 可用于访问当前页面的网站、主题和页面数据。它适用于以下两个文件：.md 和 .vue

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### 主题信息

<pre>{{ theme }}</pre>

### 页面信息

<pre>{{ page }}</pre>

### 文档配置

<pre>{{ frontmatter }}</pre>

Results

主题信息

{
  "docs": [
    {
      "route": "/categories",
      "meta": {
        "title": "文章分类页面",
        "layout": "page",
        "sidebar": false,
        "publish": false,
        "pagefind-indexed": false,
        "date": "2024-08-12 15:03:19",
        "categories": [],
        "tags": [],
        "description": "&lt;script setup\r\nimport Categories from '../.vitepress/theme/components/Categories.vue'\r\n&lt;/scrip",
        "cover": ""
      }
    },
    {
      "route": "/timeline",
      "meta": {
        "title": "时间线页面",
        "layout": "page",
        "sidebar": false,
        "publish": false,
        "pagefind-indexed": false,
        "date": "2024-07-18 13:46:03",
        "categories": [],
        "tags": [],
        "description": "&lt;script setup\r\nimport Timeline from '../.vitepress/theme/components/Timeline.vue'\r\n&lt;/script&gt",
        "cover": ""
      }
    },
    {
      "route": "/about/friends",
      "meta": {
        "title": "友人帐",
        "sidebar": false,
        "publish": false,
        "showAnalyze": false,
        "date": "2024-07-22 16:21:18",
        "categories": [],
        "tags": [],
        "description": "&lt;script setup\r\n  const handleLeave = () =&gt;{\r\n   window.scrollTo(0, document.body.scrollHeight)",
        "cover": ""
      }
    },
    {
      "route": "/about/index",
      "meta": {
        "title": "关于我",
        "date": "2021-05-20 09:00:00",
        "sidebar": false,
        "publish": false,
        "showAnalyze": false,
        "reward": {
          "expand": true
        },
        "categories": [],
        "tags": [],
        "description": "&lt;script setup\r\nimport Time from '../../.vitepress/theme/components/Time.vue'\r\nimport Theorem from",
        "cover": ""
      }
    },
    {
      "route": "/examples/api",
      "meta": {
        "description": "本页演示了 VitePress 提供的一些运行时 API 的用法",
        "categories": [
          "文章例子"
        ],
        "tags": [
          "示例"
        ],
        "pagefind-indexed": false,
        "publish": false,
        "title": "API 示例",
        "date": "2024-08-08 13:48:53",
        "cover": ""
      }
    },
    {
      "route": "/examples/markdown",
      "meta": {
        "title": "Markdown 扩展",
        "description": "VitePress 带有内置的 Markdown 扩展",
        "categories": [
          "文章例子"
        ],
        "tags": [
          "示例",
          "markdown"
        ],
        "publish": false,
        "date": "2024-08-08 10:17:31",
        "cover": ""
      }
    },
    {
      "route": "/examples/start",
      "meta": {
        "hot": 1,
        "categories": [
          "文章例子"
        ],
        "tags": [
          "例子"
        ],
        "date": "2021-05-20 00:00:00",
        "title": "编写第一篇文章",
        "description": "编写第一篇文章\r\n\r\n在`docs`文件夹下创建文章，文章的格式为`.md`，例如`start.md`。\r\n\r\n 配置关键词\r\n\r\n在文章的`frontmatter`中，可以添加以下关键词，用于控制文",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/node安装教程",
      "meta": {
        "title": "node 安装教程",
        "date": "2023-06-01 10:34:58",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "node"
        ],
        "description": "node 安装教程\r\n\r\n 一、安装环境\r\n\r\n1、本机系统：Windows 10 （64 位）\r\n2、Node.js：v14.16.1（64 位）\r\n\r\n 二、安装 Node.js 步骤\r\n\r\n1、",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/PowerDesigner安装教程",
      "meta": {
        "title": "PowerDesigner 安装教程",
        "date": "2023-05-31 15:34:50",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "PowerDesigner"
        ],
        "showComment": false,
        "description": "PowerDesigner 安装教程\r\n\r\n 安装图文教程\r\n\r\n1、解压 PowerDesigner 安装文件，并双击 PowerDesigner.exe；\r\n\r\n2、欢迎来到 PowerDesig",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/使用宝塔部署商城项目案例",
      "meta": {
        "title": "宝塔部署商城项目案例",
        "date": "2023-05-31 14:12:39",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "宝塔",
          "网站部署"
        ],
        "showComment": false,
        "description": "宝塔部署商城项目案例\r\n\r\n 部署前准备\r\n\r\n 安装所需软件/服务\r\n\r\n- MySQL 服务（ 5.7.34）\r\n- phpMyAdmin（5.1）\r\n- PM2 管理器（5.2）\r\n- Ngin",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/安装CentOS7.9",
      "meta": {
        "title": "安装 CentOS7.9 教程",
        "date": "2023-06-01 09:36:18",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "linux"
        ],
        "description": "安装 CentOS7.9 教程\r\n\r\n1. 点击创建新的虚拟机\r\n\r\n\r\n\r\n2. 默认选择典型，下一步\r\n\r\n\r\n\r\n3. 选择稍后安装，下一步\r\n\r\n\r\n\r\n4. 选择 Linux 操作系统，版本",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/将静态博客部署到Gitee",
      "meta": {
        "title": "将静态博客部署到 Gitee",
        "date": "2024-04-16 17:40:05",
        "hot": 2,
        "categories": [
          "教程文章"
        ],
        "tags": [
          "博客部署"
        ],
        "description": "将静态博客部署到 Gitee\r\n\r\n 介绍\r\n\r\n\r\n\r\n1.  部署到项目仓库路径下：`https://&lt;USERNAME&gt;.gitee.io/&lt;REPO&gt;/`\r\n\r\n2. ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/将静态博客部署到Github",
      "meta": {
        "title": "将静态博客部署到 Github",
        "date": "2024-04-29 15:48:45",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "博客部署"
        ],
        "hot": 3,
        "description": "将静态博客部署到 Github\r\n\r\n 介绍\r\n\r\n\r\n&gt;\r\n&gt; GitHub 相比与 Gitee，只要在 GitHub 配置第一次后，下次更新博客推送不需要前往 GitHub 重新部署更",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/将项目部署到阿里云服务器",
      "meta": {
        "title": "将项目部署到阿里云服务器",
        "date": "2023-05-31 16:04:27",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "网站部署"
        ],
        "showComment": false,
        "description": "将项目部署到阿里云服务器\r\n\r\n 1.配置好云服务器\r\n\r\n购买服务器实例，重置一下密码，记住实例的 IP 地址。\r\n\r\n\r\n\r\n 2.利用 xshell 软件连接服务器\r\n\r\n1. 新建回话，填写配",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/小助手教程",
      "meta": {
        "title": "小助手教程",
        "date": "2023-06-26 16:09:47",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "助手"
        ],
        "description": "小助手教程\r\n\r\n 1.pushplus 消息推送配置\r\n\r\n- 微信关注“pushplus 推送加”公众号\r\n\r\n  \r\n\r\n- 首次使用需要点击链接登录启用\r\n\r\n  \r\n\r\n- 在公众号发送 t",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/搭建ngrok实现内网穿透",
      "meta": {
        "title": "搭建 ngrok 内网穿透教程",
        "date": "2023-05-13 16:32:37",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "内网穿透",
          "ngrok"
        ],
        "description": "搭建 ngrok 内网穿透教程\r\n\r\n 搭建 ngrok 实现内网穿透\r\n\r\n\r\n&gt;\r\n&gt; 下面以 centos7 linux 服务器教大家怎么搭建 ngrok 内网穿透！！！！\r\n\r\n ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/搭建PicGo图床",
      "meta": {
        "title": "利用 PicGo+Gitee 搭建图床",
        "date": "2024-04-02 12:23:06",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "PicGo图床"
        ],
        "description": "利用 PicGo+Gitee 搭建图床\r\n\r\n 介绍\r\n\r\n利用 Gitee+PicGo+Typora+Snipaste 实现图床搭建、编写文档笔记\r\n\r\n 使用教程\r\n\r\n1.  安装\r\n    -",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/解决vscode软件下载慢的问题",
      "meta": {
        "title": "解决 vscode 软件下载慢的问题",
        "date": "2023-05-31 15:20:45",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "vscode"
        ],
        "showComment": false,
        "description": "解决 vscode 软件下载慢的问题\r\n\r\n- 在官网找到需要下载的软件版本：https://code.visualstudio.com\r\n- 点击下载，大概率会出现如下情况：\r\n  - 下载慢\r\n ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/教程文章/远程访问MySQL",
      "meta": {
        "title": "远程访问 MySQL 数据库篇",
        "date": "2024-04-19 09:22:15",
        "categories": [
          "教程文章"
        ],
        "tags": [
          "MySQL"
        ],
        "description": "远程访问 MySQL 数据库篇\r\n\r\n 本地连接远程数据库\r\n\r\n\r\n\r\n1. 使用 FinalShell 登录服务器，然后进入 mysql\r\n\r\n   ```sh\r\n   mysql -u root",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/日常生活/蚂蚁森林攻略",
      "meta": {
        "title": "蚂蚁森林攻略",
        "description": "日行一万步，吃动两平衡，健康一辈子。",
        "date": "2023-05-13 16:15:35",
        "categories": [
          "日常生活"
        ],
        "tags": [
          "蚂蚁森林"
        ],
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/软件工具/typora快捷键",
      "meta": {
        "date": "2023-05-10 18:29:09",
        "categories": [
          "软件工具"
        ],
        "tags": [
          "typora",
          "快捷键"
        ],
        "showComment": false,
        "title": "typora 常用快捷键",
        "description": "typora 常用快捷键\r\n\r\n 快捷键功能分类\r\n\r\n 文件\r\n\r\n| 功能               | 热键（Windows / Linux） | 热键（macOS）       |\r\n| :",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/软件工具/我的设备",
      "meta": {
        "title": "我的设备",
        "date": "2023-05-17 17:06:23",
        "categories": [
          "软件工具"
        ],
        "tags": [
          "软件"
        ],
        "publish": false,
        "showComment": false,
        "description": "我的设备\r\n\r\n 本地设备记录\r\n\r\n 电脑软件列表\r\n\r\n|       软件名称       | 描述                                        |     软",
        "cover": ""
      }
    },
    {
      "route": "/软件工具/推荐安装软件列表",
      "meta": {
        "title": "必备软件推荐",
        "date": "2023-05-13 14:49:02",
        "sticky": 3,
        "categories": [
          "软件工具"
        ],
        "tags": [
          "软件"
        ],
        "description": "必备软件推荐\r\n\r\n 推荐常用的软件列表\r\n\r\n 电脑软件列表\r\n\r\n\r\n&gt; | -------------------- | ---------------------------- | --",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/public/figure/README",
      "meta": {
        "title": "PicGo 图床",
        "date": "2024-11-08 14:13:50",
        "categories": [],
        "tags": [],
        "description": "图床地址\r\n\r\n- Gitee：https://gitee.com/kimshift/figure\r\n- Github：https://github.com/kimshift/figure\r\n\r\n 介",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/ps/PS基本操作",
      "meta": {
        "title": "PS 基本操作",
        "date": "2023-06-01 10:40:44",
        "categories": [
          "技术文章"
        ],
        "tags": [
          "ps"
        ],
        "description": "PS 基本操作\r\n\r\n 1. PS 常规快捷键\r\n\r\n因为网页美工大部分效果图都是利用 PS ( Photoshop )来做的，所以以后我们大部分切图工作都是在 PS 里面完成。\r\n\r\n- 文件 → ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/前端开发面试题",
      "meta": {
        "title": "前端开发面试题",
        "date": "2023-06-02 18:05:12",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "面试题"
        ],
        "sticky": 3,
        "description": "前端开发面试题\r\n\r\n $HTML， HTTP，web 综合问题\r\n\r\n 1、前端需要注意哪些 SEO\r\n\r\n- 合理的`title`、`description`、`keywords`：搜索对着三项的",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/正则表达式",
      "meta": {
        "title": "常用正则表达式",
        "date": "2023-06-02 18:00:22",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "正则表达式"
        ],
        "sticky": 3,
        "description": "常用正则表达式\r\n\r\n 1. 正则表达式概述\r\n\r\n 1.1 什么是正则表达式\r\n\r\n正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/npm命令",
      "meta": {
        "title": "npm 基础知识",
        "date": "2023-05-31 11:45:11",
        "categories": [
          "终端知识"
        ],
        "tags": [
          "npm"
        ],
        "description": "npm 基础知识\r\n\r\n npm 常用命令\r\n\r\n- 清楚缓存：npm cache clean --force\r\n- 查看配置：npm config ls\r\n\r\n 配置本地信息\r\n\r\n```\r\nnpm",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/pm2管理应用",
      "meta": {
        "title": "pm2 基础知识",
        "date": "2023-05-31 14:10:03",
        "categories": [
          "终端知识"
        ],
        "tags": [
          "pm2"
        ],
        "description": "pm2 基础知识\r\n\r\n pm2 管理器\r\n\r\n pm2 安装\r\n\r\n```\r\n 命令行安装 pm2\r\nnpm install -g pm2\r\n```\r\n\r\n pm2 用法\r\n\r\n```\r\npm2 s",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/软件工具/vscode/vscode常用插件",
      "meta": {
        "title": "vscode 常用插件",
        "date": "2023-05-11 09:07:02",
        "categories": [
          "软件工具"
        ],
        "tags": [
          "vscode",
          "插件"
        ],
        "description": "vscode 常用插件\r\n\r\n vscode 常用插件\r\n\r\n- Chinese:中文语言包（输入 Chinese 就可以找到）\r\n\r\n- Code Runner:运行选中代码段（支持大量语言，我一般",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/软件工具/vscode/vscode断点调试配置",
      "meta": {
        "title": "vscode 断点调试配置",
        "date": "2023-05-11 09:07:12",
        "categories": [
          "软件工具"
        ],
        "tags": [
          "vscode",
          "调试"
        ],
        "description": "vscode 断点调试配置\r\n\r\n 配置步骤\r\n\r\n注意：`VSCode`调试 TS 代码是需要配置的。\r\n\r\n 第一步：准备要调试的 ts 文件\r\n\r\n新建 `a.ts` 文件，作为要调试的 ts ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/软件工具/vscode/vscode配置",
      "meta": {
        "title": "vscode 配置",
        "date": "2023-05-11 09:07:12",
        "categories": [
          "软件工具"
        ],
        "tags": [
          "vscode",
          "配置"
        ],
        "description": "vscode 配置\r\n\r\n 常用配置\r\n\r\n```json\r\n{\r\n  \"workbench.startupEditor\": \"none\",\r\n  \"terminal.integrated.defau",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/css/1.CSS语法知识",
      "meta": {
        "title": "1.CSS语法知识",
        "date": "2023-06-02 10:33:45",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css"
        ],
        "prev": false,
        "next": "2.CSS3的新特性",
        "description": "1.CSS 语法知识\r\n\r\n 1.1 CSS 字体属性\r\n\r\nCSS Fonts(字体属性用于定义字体系列、大小、粗细、和字样式(如斜体)\r\n\r\n 1.1.1 font-family 字体系列\r\n\r\n",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/css/2.CSS3的新特性",
      "meta": {
        "title": "2.CSS3的新特性",
        "date": "2023-06-02 10:33:52",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css"
        ],
        "prev": "1.CSS语法知识",
        "next": false,
        "description": "2.CSS3 的新特性\r\n\r\n 2.1 CSS3 的现状\r\n\r\n- 新增的 CSS3 特性有兼容性问题，ie9+才支持\r\n- 移动端支持优于 PC 端\r\n- 不断改进中\r\n- 应用相对广泛\r\n- 现阶",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/1.HTML基础",
      "meta": {
        "title": "1.HTML基础",
        "date": "2023-06-02 09:57:31",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": false,
        "next": "2.HTML5",
        "description": "1.HTML 基础\r\n\r\n HTML 标签\r\n\r\n 基础\r\n\r\n| 标签             | 描述               |\r\n| ---------------- | --------",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/2.HTML5",
      "meta": {
        "title": "2.HTML5",
        "date": "2023-06-02 09:57:57",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "1.HTML基础",
        "next": "3.移动端布局",
        "description": "2.HTML5\r\n\r\n「1. 什么是 HTML5」\r\n\r\n- 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的 HTML。\r\n\r\n- 两个概念：\r\n\r\n  - ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/3.移动端布局",
      "meta": {
        "title": "3.移动端布局",
        "date": "2023-06-02 09:58:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "2.HTML5",
        "next": "4.流式布局",
        "description": "3.移动端布局\r\n\r\n 1. 移动端基础\r\n\r\n 1.1 浏览器现状\r\n\r\nPC 端常见浏览器\r\n\r\n360 浏览器、谷歌浏览器、火狐浏览器、QQ 浏览器、百度浏览器、搜狗浏览器、IE 浏览器。\r\n\r",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/4.流式布局",
      "meta": {
        "title": "4.流式布局",
        "date": "2023-06-02 09:58:58",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "3.移动端布局",
        "next": "5.flex弹性布局",
        "description": "4.流式布局\r\n\r\n- 流式布局，就是百分比布局，也称非固定像素布局。\r\n- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。\r\n- 流式布局方式是移动 we",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/5.flex弹性布局",
      "meta": {
        "title": "5.flex弹性布局",
        "date": "2023-06-02 09:59:15",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "4.流式布局",
        "next": "6.rem适配布局",
        "description": "5.flex 弹性布局\r\n\r\n 1.传统布局与 flex 布局\r\n\r\n传统布局\r\n\r\n- 兼容性好布局繁琐\r\n- 局限性，不能再移动端很好的布局\r\n- 局限性，不能再移动端很好的布局\r\n\r\nflex ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/6.rem适配布局",
      "meta": {
        "title": "6.rem适配布局",
        "date": "2023-06-02 09:59:35",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "5.flex弹性布局",
        "next": "7.响应式布局",
        "description": "6.rem 适配布局\r\n\r\n 1.rem 基础\r\n\r\nrem 单位\r\n\r\n- rem (root em)是一个相对单位，类似于 em , em 是父元素字体大小。.\r\n- 不同的是rem的基准是相对于",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/html/7.响应式布局",
      "meta": {
        "title": "7.响应式布局",
        "date": "2023-06-02 10:00:03",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "html"
        ],
        "prev": "6.rem适配布局",
        "next": false,
        "description": "7.响应式布局\r\n\r\n 1.响应式开发\r\n\r\n 1.1 响应式开发原理\r\n\r\n就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。\r\n\r\n| 设备划分           ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/ajax语法",
      "meta": {
        "title": "ajax语法",
        "date": "2023-06-02 09:07:24",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "ajax"
        ],
        "description": "ajax 语法\r\n\r\n 1. Ajax 基础\r\n\r\n 1.1 传统网站中存在的问题\r\n\r\n- 网速慢的情况下，页面加载时间长，用户只能等待\r\n- 表单提交后，如果一项内容不合格，需要重新填写所有表单内",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/node/node中使用babel解析es6",
      "meta": {
        "title": "node中使用babel解析es6",
        "date": "2023-06-01 10:47:41",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "node"
        ],
        "sidebar": false,
        "description": "node 中使用 babel 解析 es6\r\n\r\n1. 安装依赖\r\n\r\n   ```sh\r\n    npm install -D @babel/core @babel/cli @babel/prese",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/react/React学习笔记",
      "meta": {
        "title": "react学习笔记",
        "date": "2023-06-05 13:49:15",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "react"
        ],
        "description": "react 学习笔记\r\n\r\n react 基础\r\n\r\n关于虚拟 DOM：\r\n\r\n- 本质是 Object 类型的对象（一般对象）\r\n- 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 D",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/react/react脚手架配置代理",
      "meta": {
        "title": "react脚手架配置代理",
        "date": "2023-06-05 13:47:30",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "react"
        ],
        "description": "react脚手架配置代理\r\n\r\n 方法一\r\n\r\n\r\n\r\n```json\r\n\"proxy\":\"http://localhost:5000\"\r\n```\r\n\r\n说明：\r\n\r\n1. 优点：配置简单，前端请求资",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/01.sass语法嵌套规则与注释",
      "meta": {
        "title": "01.sass语法嵌套规则与注释",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "01.sass 语法嵌套规则与注释\r\n\r\n 语法嵌套规则\r\n\r\n 选择器嵌套\r\n\r\n例如有这么一段 css，正常 CSS 的写法\r\n\r\n```scss\r\n.container {\r\n  width: ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/02.sass变量",
      "meta": {
        "title": "02.sass变量",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "02.sass 变量\r\n\r\n css 变量的定义与书写\r\n\r\n CSS 定义变量的方法\r\n\r\n```css\r\n:root {\r\n  --color: f00;\r\n}\r\n\r\nbody {\r\n  --bo",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/03.sass导入",
      "meta": {
        "title": "03.sass导入@import",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "03.sass 导入@import\r\n\r\n @import\r\n\r\nSass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/04.sass混合指令",
      "meta": {
        "title": "04.sass混合指令(Mixin)",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "04.sass 混合指令(Mixin)\r\n\r\n\r\n\r\n 定义与使用混合指令 @mixin\r\n\r\n```scss\r\n@mixin mixin-name() {\r\n  /* css 声明 */\r\n}\r\n`",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/05.sass继承指令",
      "meta": {
        "title": "05.sass继承指令(@extend)",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "05.sass 继承指令(@extend)\r\n\r\n\r\n\r\n\r\n\r\n CSS 案例\r\n\r\n接下来以警告框为例进行讲解 4 种类型\r\n\r\n| 标记    | 说明                     ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/06.sass运算符",
      "meta": {
        "title": "06.sass运算符",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "06.sass 运算符\r\n\r\n 等号操作符\r\n\r\n所有数据类型都支持等号运算符:\r\n\r\n| 符号 | 说明   |\r\n| ---- | ------ |\r\n| ==   | 等于   |\r\n| != ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/07.sass插值语句",
      "meta": {
        "title": "07.sass插值语句({ })",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "07.sass 插值语句({ })\r\n\r\n引入之前的案例发出一个问题\r\n\r\n例如\r\n\r\n```scss\r\np {\r\n  font: 16px/30px Arial, Helvetica, sans-s",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/08.sass常见函数",
      "meta": {
        "title": "08.sass常见函数",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "08.sass 常见函数\r\n\r\n\r\n\r\n Color(颜色函数)\r\n\r\nsass 包含很多操作颜色的函数。例如：lighten() 与 darken()函数可用于调亮或调暗颜色，opacify()函数",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/09.sass流程控制指令",
      "meta": {
        "title": "09.sass流程控制指令",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "09.sass 流程控制指令\r\n\r\n @if 控制指令\r\n\r\n@if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。\r\n\r\n语法方式同 js 的 if....else if ...els",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/10.sass @function",
      "meta": {
        "title": "10.sass @function",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "10.sass @function\r\n\r\n 函数作用\r\n\r\n把一些比较复杂或经常用些的内容进行抽离（封装），以便重复使用\r\n\r\n 函数的定义与使用\r\n\r\n 函数的定义\r\n\r\n```scss\r\n@fun",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/11.三元条件函数(if)",
      "meta": {
        "title": "11.三元条件函数(if)",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "如何使用\r\n\r\n```scss\r\nif($condition,$if-true,$if-false);\r\n```\r\n\r\n判断$condition，如果条件成立，则返回$if-true 的结果，如果条件",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/12.sass @use",
      "meta": {
        "title": "12.sass @use",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "12.sass @use\r\n\r\n 作用\r\n\r\n从其他 Sass 样式表加载 mixin，function 和变量，并将来自多个样式表的 CSS 组合在一起，@use 加载的样式表被称为“模块”，多次引",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/13.sass @forward",
      "meta": {
        "title": "13.sass @forward",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "13.sass @forward\r\n\r\n 作用\r\n\r\n通过 `@forward`加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于类似于 es6 的 export ...，通常用于跨多",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/14.sass @at-root",
      "meta": {
        "title": "14.sass @at-root",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "作用\r\n\r\n@at-root 可以使被嵌套的选择器或属性跳出嵌套\r\n\r\n 语法\r\n\r\n```scss\r\n@at-root &lt;selector\r\n    ...\r\n}\r\n```\r\n\r\n 普通嵌套\r",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/sass/15.vscode使用Easy Sass Autocompile插件",
      "meta": {
        "title": "15.vscode使用Easy Sass Autocompile插件",
        "date": "2024-04-24 16:12:01",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "css",
          "sass"
        ],
        "description": "15.vscode 使用 Easy Sass Autocompile 插件\r\n\r\n配置\r\n\r\n```json\r\n{\r\n  \"easySassAutocompile.sassBinLocation\": ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/vue/vue开发配置笔记",
      "meta": {
        "title": "vue开发配置笔记",
        "date": "2023-05-31 17:13:05",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "vue"
        ],
        "description": "vue 开发配置笔记\r\n\r\n 项目优化\r\n\r\n1. 生成打包报告\r\n\r\n   打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种:\r\n\r\n   - 通过命令行参数的形式",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/vue/基础原理",
      "meta": {
        "title": "vue基础原理",
        "date": "2023-06-01 15:07:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "vue"
        ],
        "description": "vue 基础原理\r\n\r\n 单页应用(SPA)\r\n\r\n可以构建 SPA 应用的,并且比较热门的框架有三个，React,Vue,Angular,当然他们也可以构建 MPA 应用\r\n\r\nSPA 的核心概念包",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/人脸识别-百度智能云",
      "meta": {
        "title": "百度人脸识别",
        "date": "2023-06-02 18:14:26",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "人脸识别"
        ],
        "description": "百度人脸识别\r\n\r\n 步骤\r\n\r\n 人脸识别具体步骤\r\n\r\n1.  创建人脸检测应用\r\n2.  获取 access_token\r\n3.  准备照片，按照要求填写接口所需参数\r\n4.  通过接口调用人脸",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/移动端图片上传IOS安卓兼容",
      "meta": {
        "title": "移动端图片上传IOS安卓兼容",
        "date": "2023-06-02 18:22:09",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "图片兼容"
        ],
        "sidebar": false,
        "description": "移动端图片上传 IOS 安卓兼容\r\n\r\n- 安装依赖\r\n\r\n```javascript\r\nimport EXIF from 'exif-js'\r\n```\r\n\r\nvue/react 中处理方式相同\r\n\r",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/GIt/Git基础知识",
      "meta": {
        "title": "Git 基础知识",
        "date": "2023-05-13 13:15:18",
        "categories": [
          "终端知识"
        ],
        "tags": [
          "git"
        ],
        "description": "Git 基础知识\r\n\r\n git 本地仓库命令\r\n\r\n 全局配置：\r\n\r\n```sh\r\n查看全局配置\r\ngit config --global --list\r\n\r\n配置本地用户名和邮箱\r\ngit co",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/GIt/本地生成SSH",
      "meta": {
        "title": "本地生成 SSH 公钥",
        "date": "2023-05-13 13:20:23",
        "categories": [
          "终端知识"
        ],
        "tags": [
          "ssh",
          "git"
        ],
        "description": "本地生成 SSH 公钥\r\n\r\n SSH 公钥配置\r\n\r\n 打开本地终端\r\n\r\n- 笔记本/台式：CMD 窗口或者 git 的 bash 窗口等等\r\n- 云服务器/linux 系统的终端\r\n\r\n 在命令",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/GIt/远程仓库命令",
      "meta": {
        "title": "git 远程仓库命令",
        "date": "2023-05-13 13:29:22",
        "categories": [
          "终端知识"
        ],
        "tags": [
          "git"
        ],
        "description": "git 远程仓库命令\r\n\r\n GitHub/Gitee 远程仓库\r\n\r\n 关联远程仓库\r\n\r\n- 关联远程仓库：git remote add origin 仓库地址\r\n\r\n- 关联多个远程仓库 Git",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/volta/修改安装路径",
      "meta": {
        "categories": [
          "终端知识"
        ],
        "tags": [
          "volta"
        ],
        "title": "volta 修改安装路径",
        "date": "2024-08-09 09:49:16",
        "description": "volta 修改安装路径\r\n\r\n 介绍\r\n\r\n- 一般来说, volta 安装成功之后就能正常使用了, 但默认是装到 C 盘,没看到能改的地方【头大】\r\n- 后续可能会安装各种不同版本的`node/n",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/终端知识/volta/关于volta",
      "meta": {
        "categories": [
          "终端知识"
        ],
        "tags": [
          "volta"
        ],
        "title": "关于 Volta!",
        "date": "2024-08-09 09:49:16",
        "description": "关于 Volta!\r\n\r\n 介绍\r\n\r\n欢迎来到 Volta!\r\n\r\nVolta 是一种管理 JavaScript 命令行工具的便捷方式。\r\n\r\n 功能\r\n\r\n- 速度\r\n- 无缝，每个项目的版本切换",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/jQuery/1.jQuery入门",
      "meta": {
        "title": "1.jQuery入门",
        "date": "2023-06-01 17:01:48",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "jQuery"
        ],
        "prev": false,
        "next": "2.jQuery常用API",
        "description": "1.jQuery 入门\r\n\r\n 1.jQuery 概述\r\n\r\n 1.1 JavaScript 库\r\n\r\n仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。\r\n\r\nJavaS",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/jQuery/2.jQuery常用API",
      "meta": {
        "title": "2.jQuery常用API",
        "date": "2023-06-01 17:11:41",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "jQuery"
        ],
        "prev": "1.jQuery入门",
        "next": "3.jQuery事件",
        "description": "2.jQuery 常用 API\r\n\r\n 1. jQuery 选择器\r\n\r\n 1.1 jQuery 基础选择器\r\n\r\n原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/jQuery/3.jQuery事件",
      "meta": {
        "title": "3.jQuery事件",
        "date": "2023-06-01 17:13:13",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "jQuery"
        ],
        "prev": "2.jQuery常用API",
        "next": "4.jQuery其他方法",
        "description": "1. jQuery 事件注册\r\n\r\n 单个事件注册\r\n\r\n语法：\r\n\r\n```\r\nelement.事件(function(){})\r\n```\r\n\r\n```\r\n$(\"div\").click(functi",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/jQuery/4.jQuery其他方法",
      "meta": {
        "title": "4.jQuery其他方法",
        "date": "2023-06-01 17:14:54",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "jQuery"
        ],
        "prev": "3.jQuery事件",
        "next": false,
        "description": "4.jQuery 其他方法\r\n\r\n 1. jQuery 对象拷贝\r\n\r\n如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法\r\n\r\n语法：\r\n\r\n```\r\n$.",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/1.javaScript入门",
      "meta": {
        "title": "1.javaScript入门",
        "date": "2023-06-02 10:50:11",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": false,
        "next": "2.Web APl简介",
        "description": "1.javaScript 入门\r\n\r\n 1.JavaScript 基础\r\n\r\n 1.组成\r\n\r\n- ECMAScript:javascript 语法\r\n- DOM:页面文件对象模型\r\n- BOM:浏览",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/2.Web APl简介",
      "meta": {
        "title": "2.Web APl简介",
        "date": "2023-06-02 10:52:38",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": "1.javaScript入门",
        "next": "3.BOM浏览器对象模型",
        "description": "1.js 基础与 Web API 关联\r\n\r\nJS 基础阶段\r\n\r\n- 我们学习的是 ECMAscript 标准规定的基本语法\r\n- 要求同学们掌握 Js 基础语法\r\n- 只学习基本语法，做不了常用的",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/3.BOM浏览器对象模型",
      "meta": {
        "title": "3.BOM浏览器对象模型",
        "date": "2023-06-02 10:53:38",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": "2.Web APl简介",
        "next": "4.PC端网页特效",
        "description": "3.BOM 浏览器对象模型\r\n\r\n 1. BOM 概述\r\n\r\n 1.1 什么是 BOM\r\n\r\nBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/4.PC端网页特效",
      "meta": {
        "title": "4.PC端网页特效",
        "date": "2023-06-02 10:54:38",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": "3.BOM浏览器对象模型",
        "next": "5.移动端特效",
        "description": "4.PC 端网页特效\r\n\r\n 1. 元素偏移量 offset 系列\r\n\r\n 1.1 offset 概述\r\n\r\noffset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/5.移动端特效",
      "meta": {
        "title": "5.移动端特效",
        "date": "2023-06-02 10:59:04",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": "4.PC端网页特效",
        "next": "6.本地存储",
        "description": "5.移动端特效\r\n\r\n 1. 触屏事件\r\n\r\n 1.1 触屏事件概述\r\n\r\n移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动 端也有自己独特",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js基础/6.本地存储",
      "meta": {
        "title": "6.本地存储",
        "date": "2023-06-02 10:59:55",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js基础"
        ],
        "prev": "5.移动端特效",
        "next": "../js进阶/1.js面向对象编程",
        "description": "6.本地存储\r\n\r\n 1. 本地存储\r\n\r\n随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经 常性在本地存储大量的数据，HTML5 规范提出了相关解决",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js进阶/1.js面向对象编程",
      "meta": {
        "title": "1.js面向对象编程",
        "date": "2023-06-02 13:56:09",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js进阶"
        ],
        "prev": "../js基础/6.本地存储",
        "next": "2.js函数进阶",
        "description": "1.js 面向对象编程\r\n\r\n 1. 面向对象编程介绍\r\n\r\n 1.1 两大编程思想\r\n\r\n- 面向过程\r\n- 面向对象\r\n\r\n 1.2 面向过程编程 POP(Process-oriented pro",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js进阶/2.js函数进阶",
      "meta": {
        "title": "2.js函数进阶",
        "date": "2023-06-02 14:50:11",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js进阶"
        ],
        "prev": "1.js面向对象编程",
        "next": "3.ES6语法",
        "description": "2.js 函数进阶\r\n\r\n 1. 函数的定义和调用\r\n\r\n 1.1 函数的定义方式\r\n\r\n1. 函数声明方式 function 关键字 (命名函数)\r\n2. 函数表达式 (匿名函数)\r\n3. new ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js进阶/3.ES6语法",
      "meta": {
        "title": "3.ES6语法",
        "date": "2023-06-02 15:50:11",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js进阶"
        ],
        "prev": "2.js函数进阶",
        "next": "4.js常用内置方法",
        "description": "3.ES6 语法\r\n\r\n 前言：ES6 新特性\r\n\r\n- let 和 const 命令\r\n- es6 的模板字符串\r\n- 解构赋值\r\n- 增强函数\r\n- 扩展的字符串、对象、数组功能\r\n- Symbo",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/js进阶/4.js常用内置方法",
      "meta": {
        "title": "4.js常用内置方法",
        "date": "2023-06-02 17:57:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "js进阶"
        ],
        "prev": "3.ES6语法",
        "next": false,
        "description": "4.js 常用内置方法\r\n\r\n 一、字符串方法\r\n\r\n 字符串常用方法表\r\n\r\n|                方法                |                        ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/ts/1.ts入门",
      "meta": {
        "title": "1.ts入门",
        "date": "2023-06-02 18:57:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "ts"
        ],
        "prev": false,
        "next": "2.ts面向对象",
        "description": "1.ts 入门\r\n\r\n 1.TypeScript 简介\r\n\r\n1. TypeScript 是 JavaScript 的超集。\r\n2. 它对 JS 进行了扩展，向 JS 中引入了类型的概念，并添加了许多",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/javascript/ts/2.ts面向对象",
      "meta": {
        "title": "2.ts面向对象",
        "date": "2023-06-02 19:57:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "ts"
        ],
        "prev": "1.ts入门",
        "next": false,
        "description": "2.ts 面向对象\r\n\r\n面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。\r\n\r\n- ",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/对接微信/微信扫码",
      "meta": {
        "title": "微信扫码",
        "date": "2023-06-02 18:06:50",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "微信"
        ],
        "description": "微信扫码\r\n\r\n 对接微信公众号准备\r\n\r\n- 注册微信公众号-订阅号(凭个人身份即可注册)\r\n- 注册小程序测试账号\r\n- 下载安装微信开发者工具\r\n- 模拟公网 IP 端口方式\r\n  - 申请云服",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/001.开发事件",
      "meta": {
        "title": "开发事件",
        "date": "2023-06-02 18:54:42",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "事件"
        ],
        "prev": false,
        "next": "002.react umi使用antd自定义icon",
        "description": "开发事件\r\n\r\n dom 操作\r\n\r\n 获取 DOM 添加删除 class\r\n\r\n- react 中\r\n\r\n```js\r\nimport React from 'react'\r\nimport { Ste",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/002.react umi使用antd自定义icon",
      "meta": {
        "title": "在react-umi在使用antd自定义icon/默认icon",
        "date": "2023-06-02 18:59:15",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "事件"
        ],
        "sidebar": false,
        "prev": "001.开发事件",
        "next": "003.react主动调用input-file唤醒选择文件",
        "description": "在 react-umi 在使用 antd 自定义 icon/默认 icon\r\n\r\n\r\n\r\n- 引入文件\r\n\r\n```\r\nimport { Icon } from 'antd';\r\nimport { R",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/003.react主动调用input-file唤醒选择文件",
      "meta": {
        "title": "react主动调用input-file唤醒选择文件",
        "date": "2023-06-02 19:01:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "事件"
        ],
        "sidebar": false,
        "prev": "002.react umi使用antd自定义icon",
        "next": "004.vue特殊用例",
        "description": "react 主动调用 input-file 唤醒选择文件\r\n\r\n\r\n\r\nreact 代码示例：\r\n\r\n```jsx\r\nimport { Component } from 'react'\r\nimport",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/004.vue特殊用例",
      "meta": {
        "title": "vue 特殊用例",
        "date": "2023-06-02 19:01:25",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "javascript",
          "事件"
        ],
        "sidebar": false,
        "prev": "003.react主动调用input-file唤醒选择文件",
        "next": false,
        "description": "vue 特殊用例\r\n\r\n style 中使用 vue data 变量\r\n\r\n```\r\nthis.$el.style.setProperty('--displayStyle', 'data变量'); /",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/005.vue3",
      "meta": {
        "date": "2024-04-28 17:55:06",
        "categories": [
          "前端开发"
        ],
        "tags": [
          "vite",
          "vue",
          "问题"
        ],
        "title": "vue3 开发相关问题",
        "description": "vue3 开发相关问题\r\n\r\n Vite 不支持 require 解决方案\r\n\r\n\r\n\r\n1. 方法 require()\r\n\r\n   - Node.JS 原生方法 ，以 CommonJS 方式加载模块",
        "cover": "",
        "publish": true
      }
    },
    {
      "route": "/技术文章/前端开发/开发笔记/开发事件/006.react调用子组件内部方法",
      "meta": {
        "categories": [
          "前端开发"
        ],
        "tags": [
          "react",
          "问题"
        ],
        "title": "react 调用子组件内部方法",
        "date": "2024-10-10 11:31:44",
        "description": "react 调用子组件内部方法\r\n\r\n 1. 普通函数组件\r\n\r\n```jsx\r\nimport React, { useState, forwardRef, useImperativeHandle }",
        "cover": "",
        "publish": true
      }
    }
  ],
  "srcDir": "./docs",
  "search": {
    "pageResultCount": 5,
    "provider": "local"
  },
  "sidebar": [
    {
      "text": "",
      "items": []
    }
  ],
  "logo": "/favicon.ico",
  "nav": [
    {
      "text": "<i class=\"iconfont kt-home-filling\"> 首页</i>",
      "link": "/"
    },
    {
      "text": "<i class=\"iconfont kt-menu\"> 例子</i>",
      "items": [
        {
          "text": "API 示例",
          "link": "/examples/api"
        },
        {
          "text": "Markdown 扩展",
          "link": "/examples/markdown"
        }
      ]
    },
    {
      "text": "<i class=\"iconfont kt-clock-filling\"> 时间线</i>",
      "link": "/timeline"
    },
    {
      "text": "<i class=\"iconfont kt-comment-filling\"> 关于作者</i>",
      "link": "/about/"
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/kimshift"
    }
  ],
  "outline": [
    2,
    3
  ],
  "outlineTitle": "大纲",
  "darkModeSwitchLabel": "切换模式",
  "lastUpdatedText": "上次更新于",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "相关推荐",
  "author": "琴时",
  "startYear": "2021",
  "custom": true,
  "darkTransition": true,
  "themeColor": "vp-green",
  "article": {
    "readingTimePosition": "inline",
    "readingTime": true,
    "autoCover": true,
    "docMetaInsertSelector": "h1",
    "docMetaInsertPosition": "after"
  },
  "hotArticle": {
    "title": "精选文章",
    "nextText": "换一组",
    "pageSize": 5,
    "empty": "暂无精选内容"
  },
  "friend": {
    "list": [
      {
        "name": "KimShift 空间",
        "des": "记得要奔走在自己的热爱里🌹",
        "avatar": "https://kimshift.github.io/avatar.png",
        "link": "https://kimshift.github.io/"
      },
      {
        "name": "Vitepress",
        "des": "Vite & Vue Powered Static Site Generator",
        "avatar": "https://vitepress.dev/vitepress-logo-mini.svg",
        "link": "https://vitepress.dev/zh/"
      }
    ],
    "limit": 3,
    "random": false,
    "scrollSpeed": 2000
  },
  "footer": {
    "copyright": "default",
    "icpRecord": {
      "name": "粤ICP备2021069222号",
      "link": "https://beian.miit.gov.cn"
    }
  },
  "home": {
    "title": "记事录",
    "homeTags": true,
    "avatar": "/avatar.png",
    "avatarMode": "card",
    "minScreenAvatar": false,
    "pageSize": 6,
    "inspiringTimeout": 3000,
    "inspiring": [
      "千万不要因为走得太久，而忘记了我们为什么出发",
      "人生就像一场修行，你不可能一开始就修成正果",
      "无论多么沉重的负担，也不要忘记微笑；无论多么漫长的路程，也不要忘记坚持",
      "生活的真谛不在繁华，而在于淡泊"
    ]
  },
  "backToTopConfig": {
    "behavior": "smooth",
    "top": 300
  },
  "authorList": [
    {
      "nickname": "kimshift",
      "url": "转载文章地址",
      "des": "记得要奔走在自己的热爱里🌹"
    }
  ],
  "reward": {
    "openTitle": "打赏一下",
    "closeTitle": "下次一定",
    "qRCode": "/img/wechat_pay.jpg",
    "icon": "wechat"
  },
  "recommend": {
    "pageSize": 9,
    "nextText": "下一页",
    "style": "sidebar"
  },
  "comment": {
    "type": "giscus",
    "showComment": true,
    "options": {
      "repo": "kimshift/kimshift.github.io",
      "repoId": "R_kgDOL0rB9A",
      "category": "Announcements",
      "categoryId": "DIC_kwDOL0rB9M4ChIGT",
      "loading": "lazy",
      "inputPosition": "top"
    }
  }
}

页面信息

{
  "title": "API 示例",
  "description": "本页演示了 VitePress 提供的一些运行时 API 的用法",
  "frontmatter": {
    "description": "本页演示了 VitePress 提供的一些运行时 API 的用法",
    "categories": [
      "文章例子"
    ],
    "tags": [
      "示例"
    ],
    "pagefind-indexed": false,
    "publish": false
  },
  "headers": [],
  "relativePath": "examples/api.md",
  "filePath": "examples/api.md",
  "lastUpdated": 1723096133000
}

文档配置

{
  "description": "本页演示了 VitePress 提供的一些运行时 API 的用法",
  "categories": [
    "文章例子"
  ],
  "tags": [
    "示例"
  ],
  "pagefind-indexed": false,
  "publish": false
}

查看文档以获得运行时 api 的完整列表.

API 示例 ​

Results ​

主题信息 ​

页面信息 ​

文档配置 ​

更多 ​

API 示例

Results

主题信息

页面信息

文档配置

更多