API 示例
摘要
本页演示了 VitePress 提供的一些运行时 API 的用法。
useData() API 可用于访问当前页面的网站、主题和页面数据。它适用于以下两个文件：.md 和 .vue
md
<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": "<script setup\r\nimport Categories from '../.vitepress/theme/components/Categories.vue'\r\n</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": "<script setup\r\nimport Timeline from '../.vitepress/theme/components/Timeline.vue'\r\n</script>",
"cover": ""
}
},
{
"route": "/about/friends",
"meta": {
"title": "友人帐",
"sidebar": false,
"publish": false,
"showAnalyze": false,
"date": "2024-07-22 16:21:18",
"categories": [],
"tags": [],
"description": "<script setup\r\n const handleLeave = () =>{\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": "<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://<USERNAME>.gitee.io/<REPO>/`\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>\r\n> 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>\r\n> 下面以 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> | -------------------- | ---------------------------- | --",
"cover": "",
"publish": true
}
},
{
"route": "/public/figure/README",
"meta": {
"title": "PicGo 图床",
"date": "2025-03-22 15:49:46",
"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": "/技术文章/前端开发/前端开发面试题",
"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": "/软件工具/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": "/软件工具/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 <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-11-08 15:10: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 的完整列表.