Runtime API Examples
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:
md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>Results
Theme Data
{
"loading": "正在加载中...",
"viewTransition": {
"enabled": true,
"mode": "out-in",
"duration": 300,
"easing": "ease-in"
},
"toComment": {
"enabled": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"post": {
"postStyle": "card",
"excerptPosition": "top",
"showMore": true,
"moreLabel": "阅读全文 >",
"emptyLabel": "暂无文章",
"coverImgMode": "full",
"showCapture": true,
"splitSeparator": false,
"transition": true,
"transitionName": "tk-slide-fade",
"listStyleTitleTagPosition": "right",
"cardStyleTitleTagPosition": "left",
"defaultCoverImg": []
},
"page": {
"disabled": false,
"pageSize": 20,
"pagerCount": 7,
"layout": "prev, pager, next, jumper, ->, total",
"size": "default",
"background": false,
"hideOnSinglePage": false
},
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "最近更新",
"link": "/recent"
}
],
"sidebar": {
"/": [
{
"text": "api-examples",
"link": "/api-examples"
},
{
"text": "markdown-examples",
"link": "/markdown-examples"
}
],
"/docs/": [
{
"text": "",
"items": [
{
"text": "HTML",
"items": [
{
"text": "html1",
"link": "/docs/HTML/html1"
}
]
},
{
"text": "ai",
"items": [
{
"text": "使用 LLM 学习陌生知识",
"link": "/docs/ai/1-llm-for-learning"
}
]
},
{
"text": "css",
"items": [
{
"text": "css 如何保持元素宽高比？",
"link": "/docs/css/1-aspect-ratio"
},
{
"text": "2-css-sprite",
"link": "/docs/css/2-css-sprite"
}
]
},
{
"text": "frontend-essays",
"items": [
{
"text": "前端路由探讨",
"link": "/docs/frontend-essays/1-frontend-routing"
}
]
},
{
"text": "frontend-performance",
"items": [
{
"text": "前端首屏加载与白屏优化",
"link": "/docs/frontend-performance/1-first-screen-loading"
}
]
},
{
"text": "vue",
"items": [
{
"text": "Vue slot 插槽",
"link": "/docs/vue/1-vue-slot"
},
{
"text": "Vue 与 React 互操作",
"link": "/docs/vue/2-vue-react-interop"
}
]
},
{
"text": "website",
"items": [
{
"text": "vitepress 介绍",
"link": "/docs/website/1-vitepress"
},
{
"text": " 使用 Cloudflare R2 自建图床",
"link": "/docs/website/2. 使用 Cloudflare R2 自建图床"
}
]
}
]
}
],
"/projects/": [
{
"text": "",
"items": [
{
"text": "作品索引",
"link": "/projects/1-project-index"
},
{
"text": "FavorTube 项目",
"link": "/projects/2. favorTube"
}
]
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/vuejs/vitepress"
}
],
"permalinks": {
"map": {},
"inv": {}
},
"docAnalysisInfo": {
"fileList": [
{
"filePath": "/opt/buildhome/repo/site-config/api-examples.md",
"relativePath": "api-examples.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/HTML/html1.md",
"relativePath": "docs/HTML/html1.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/ai/1-llm-for-learning.md",
"relativePath": "docs/ai/1-llm-for-learning.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/css/1-aspect-ratio.md",
"relativePath": "docs/css/1-aspect-ratio.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/css/2-css-sprite.md",
"relativePath": "docs/css/2-css-sprite.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/frontend-essays/1-frontend-routing.md",
"relativePath": "docs/frontend-essays/1-frontend-routing.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/frontend-performance/1-first-screen-loading.md",
"relativePath": "docs/frontend-performance/1-first-screen-loading.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/vue/1-vue-slot.md",
"relativePath": "docs/vue/1-vue-slot.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/vue/2-vue-react-interop.md",
"relativePath": "docs/vue/2-vue-react-interop.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/website/1-vitepress.md",
"relativePath": "docs/website/1-vitepress.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/docs/website/2. 使用 Cloudflare R2 自建图床.md",
"relativePath": "docs/website/2. 使用 Cloudflare R2 自建图床.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/markdown-examples.md",
"relativePath": "markdown-examples.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/projects/1-project-index.md",
"relativePath": "projects/1-project-index.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/projects/2. favorTube.md",
"relativePath": "projects/2. favorTube.md"
},
{
"filePath": "/opt/buildhome/repo/site-config/recent.md",
"relativePath": "recent.md"
}
],
"totalFileWords": 12296,
"eachFileWords": [
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/api-examples.md",
"relativePath": "api-examples.md"
},
"wordCount": 119,
"readingTime": "1m",
"frontmatter": {
"outline": "deep"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/HTML/html1.md",
"relativePath": "docs/HTML/html1.md"
},
"wordCount": 0,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/ai/1-llm-for-learning.md",
"relativePath": "docs/ai/1-llm-for-learning.md"
},
"wordCount": 6008,
"readingTime": "20.8m",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": {},
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/css/1-aspect-ratio.md",
"relativePath": "docs/css/1-aspect-ratio.md"
},
"wordCount": 765,
"readingTime": "3m",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": {},
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/css/2-css-sprite.md",
"relativePath": "docs/css/2-css-sprite.md"
},
"wordCount": 4,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/frontend-essays/1-frontend-routing.md",
"relativePath": "docs/frontend-essays/1-frontend-routing.md"
},
"wordCount": 47,
"readingTime": "1m",
"frontmatter": {
"title": "前端路由探讨",
"date": {},
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/frontend-performance/1-first-screen-loading.md",
"relativePath": "docs/frontend-performance/1-first-screen-loading.md"
},
"wordCount": 1971,
"readingTime": "7.1m",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": {},
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/vue/1-vue-slot.md",
"relativePath": "docs/vue/1-vue-slot.md"
},
"wordCount": 1260,
"readingTime": "5m",
"frontmatter": {
"title": "Vue slot 插槽",
"date": {},
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/vue/2-vue-react-interop.md",
"relativePath": "docs/vue/2-vue-react-interop.md"
},
"wordCount": 1193,
"readingTime": "4.2m",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": {},
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/website/1-vitepress.md",
"relativePath": "docs/website/1-vitepress.md"
},
"wordCount": 360,
"readingTime": "1.6m",
"frontmatter": {
"title": "vitepress 介绍",
"date": {},
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/docs/website/2. 使用 Cloudflare R2 自建图床.md",
"relativePath": "docs/website/2. 使用 Cloudflare R2 自建图床.md"
},
"wordCount": 0,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/markdown-examples.md",
"relativePath": "markdown-examples.md"
},
"wordCount": 133,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/projects/1-project-index.md",
"relativePath": "projects/1-project-index.md"
},
"wordCount": 143,
"readingTime": "1m",
"frontmatter": {
"title": "作品索引",
"date": {},
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/projects/2. favorTube.md",
"relativePath": "projects/2. favorTube.md"
},
"wordCount": 3,
"readingTime": "1m",
"frontmatter": {
"title": "FavorTube 项目",
"date": {},
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
}
},
{
"fileInfo": {
"filePath": "/opt/buildhome/repo/site-config/recent.md",
"relativePath": "recent.md"
},
"wordCount": 290,
"readingTime": "1.7m",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
}
}
],
"lastCommitTime": "2026-09-24 23:32:58"
},
"catalogues": {
"arr": [],
"map": {},
"inv": {}
},
"posts": {
"allPosts": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/",
"relativePath": "/",
"frontmatter": {
"layout": "home",
"hero": {
"name": "Neilson's blog",
"text": "Neilson 的技术博客",
"tagline": "Code is cheap，show me the talk! 😜",
"image": "https://i.ibb.co/081tGLd/3-D.png",
"actions": [
{
"theme": "brand",
"text": "文章列表",
"link": "/recent"
},
{
"theme": "alt",
"text": "作品集",
"link": "/projects/1-project-index"
}
]
},
"tk": {
"teekHome": false,
"archivesPage": true,
"features": [
{
"title": "当前技术栈，持续学习中······",
"details": "满足大部分开发场景。",
"features": [
{
"title": "前端杂谈",
"icon": "https://i.ibb.co/qYM828hr/html-logo.png",
"details": "前端设计思想、实现方案",
"link": "/docs/frontend-essays/1-frontend-routing"
},
{
"title": "HTML",
"icon": "https://i.ibb.co/qYM828hr/html-logo.png",
"details": "语义化标签、表单与多媒体、Canvas/SVG、SEO 与无障碍访问。",
"link": "/docs/html/html1"
},
{
"title": "CSS",
"icon": "https://i.ibb.co/hJ1PnWrR/css-logo.png",
"details": "选择器与盒模型、Flex/Grid 布局、响应式设计、动画与预处理器（Sass/Less）。",
"link": "/docs/css/1-aspect-ratio"
},
{
"title": "JavaScript",
"icon": "https://i.ibb.co/NndyXvxK/js-logo.png",
"details": "ES6+ 语法、DOM 操作、事件循环、异步编程（Promise/Async）、闭包与原型链。"
},
{
"title": "TypeScript",
"icon": "https://i.ibb.co/WN7JcRy6/ts-logo.png",
"details": "类型注解、接口与泛型、高级类型、装饰器。"
},
{
"title": "浏览器",
"icon": "https://i.ibb.co/DPTV9Cnb/chrome-logo.png",
"details": "渲染流程、开发者工具、存储机制（Cookie/LocalStorage）、跨域与安全（CSP/XSS）。"
},
{
"title": "网络协议",
"icon": "https://i.ibb.co/NBzrsJT/wangluoxieyi-logo.png",
"details": "HTTP/HTTPS、TCP/IP、WebSocket、RESTful API 设计、缓存策略与状态码。"
},
{
"title": "数据结构与算法",
"icon": "https://i.ibb.co/zWrPz34x/shujujiegouyusuanfa-logo.png",
"details": "数组、链表、栈/队列、树/图、排序与搜索、动态规划、复杂度分析。"
},
{
"title": "代码规范",
"icon": "https://i.ibb.co/yBkdmTKV/daimaguifan-logo.png",
"details": "ESLint/Prettier 配置、Git Hooks（Husky）、Commitlint、Lint-staged。"
},
{
"title": "版本控制",
"icon": "https://i.ibb.co/Rkkg1Yn3/banbenkongzhi-logo.png",
"details": "Git 工作流（分支策略、rebase/merge）、GitHub/GitLab 协作、CI 触发。"
},
{
"title": "包管理",
"icon": "https://i.ibb.co/VppcfdWR/baoguanli-logo.png",
"details": "npm/yarn/pnpm 原理、依赖版本锁定、Monorepo 管理（Workspaces）。"
},
{
"title": "构建工具",
"icon": "https://i.ibb.co/ym52MLw3/goujiangongju-logo.png",
"details": "Webpack/Vite 配置、Loader/Plugin 开发、代码分割与 Tree Shaking。"
},
{
"title": "Vue",
"icon": "https://i.ibb.co/Q7dXCfTF/vue-logo.png",
"details": "响应式原理、组合式 API、Vue Router/Pinia、SSR（Nuxt）。",
"link": "/docs/vue/1-vue-slot"
},
{
"title": "React",
"icon": "https://i.ibb.co/hFWz41RF/react-logo.png",
"details": "JSX、Hooks、Context、Redux/Zustand、Next.js 服务端渲染。"
},
{
"title": "UI 库",
"icon": "https://i.ibb.co/j9YyRypC/Ant-Design-logo.png",
"details": "Element Plus/Ant Design/Vuetify 组件使用、主题定制、按需加载。"
},
{
"title": "前端性能优化",
"icon": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png",
"details": "打包优化（代码分割/懒加载）、渲染性能（重排重绘）、首屏加载优化、性能审计（Lighthouse）。",
"link": "/docs/frontend-performance/1-first-screen-loading"
},
{
"title": "测试",
"icon": "https://i.ibb.co/gFgsBCj9/ceshi-logo.png",
"details": "单元测试（Jest/Vitest）、组件测试（Testing Library）、E2E（Cypress/Playwright）。"
},
{
"title": "设计模式",
"icon": "https://i.ibb.co/4ZhqLB4t/shejimoshi-logo.png",
"details": "单例、工厂、观察者、装饰器等常用模式，以及 MVVM、依赖注入。"
},
{
"title": "接口协作",
"icon": "https://i.ibb.co/C3Dk6Qxr/jiekouxiezuo-logo.png",
"details": "使用 Apifox/Postman 管理接口文档、Mock 数据、自动化测试。"
},
{
"title": "React Native",
"icon": "https://i.ibb.co/23747dY3/react-native-logo.png",
"details": "原生组件、Bridge 通信、热更新、性能调优。"
},
{
"title": "UniApp",
"icon": "https://i.ibb.co/Wp3qbDjC/uniapp-logo.png",
"details": "跨端编译（H5/小程序/App）、条件编译、插件市场。"
},
{
"title": "Electron",
"icon": "https://i.ibb.co/yBQbhHXF/electron-logo.png",
"details": "主进程/渲染进程、IPC 通信、打包与更新、安全性。"
},
{
"title": "Node.js",
"icon": "https://i.ibb.co/xSVj0818/nodejs-logo.png",
"details": "事件驱动、非阻塞 I/O、npm 生态、Express/Koa 框架。"
},
{
"title": "NestJS",
"icon": "https://i.ibb.co/1GCbcWpN/nestjs-logo.png",
"details": "模块化、依赖注入、GraphQL/微服务支持、TypeORM 集成。"
},
{
"title": "Golang",
"icon": "https://i.ibb.co/4RCCJWXr/golang-logo.png",
"details": "协程并发、垃圾回收，高并发微服务与中间件开发。"
},
{
"title": "MySQL",
"icon": "https://i.ibb.co/kLgN383/mysql-logo.png",
"details": "数据库设计（范式/索引）、SQL 优化、事务隔离级别、主从复制，掌握关系型数据库核心。"
},
{
"title": "MongoDB",
"icon": "https://i.ibb.co/Fk7QtC4N/mongodb-logo.png",
"details": "文档模型、聚合框架、索引策略、分片集群，非结构化数据存储。"
},
{
"title": "Redis",
"icon": "https://i.ibb.co/8gCZ04hN/redis-logo.png",
"details": "五种数据结构、持久化（RDB/AOF）、缓存穿透/雪崩、哨兵/集群模式。"
},
{
"title": "消息队列",
"icon": "https://i.ibb.co/bjFKJQyq/xiaoxiduilie-logo.png",
"details": "RabbitMQ/Kafka 使用场景、交换机/队列设计、消息可靠性投递，实现异步解耦与流量削峰。"
},
{
"title": "运维",
"icon": "https://i.ibb.co/SXq60KFv/yunwei-logo.png",
"details": "Linux 基础操作、Shell 脚本、CI/CD 流水线（Jenkins/GitHub Actions）、Docker 容器化部署。"
},
{
"title": "AI",
"icon": "https://i.ibb.co/ynQpbnyC/ai-logo.png",
"details": "机器学习基础、LLM 应用开发、Prompt Engineering、Agent 构建（LangChain）。",
"link": "/docs/ai/1-llm-for-learning"
},
{
"title": "Python",
"icon": "https://i.ibb.co/DPVH9n6h/python-logo.png",
"details": "后端开发（Django/Flask）、数据处理与爬虫、自动化运维脚本、机器学习入门。"
},
{
"title": "站点搭建",
"icon": "https://i.ibb.co/pvHNnPhW/zhandiandajian-logo.png",
"details": "wordpress、vitepress。",
"link": "/docs/website/1-vitepress"
}
]
}
]
}
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
}
],
"originPosts": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
}
],
"sortPostsByDateAndSticky": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
},
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
},
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
}
],
"sortPostsByDate": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
},
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
},
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
}
],
"groupPostsByYear": {
"2026 ": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
},
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
},
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
}
]
},
"groupPostsByYearMonth": {
"2026 ": {
"09": [
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Runtime API Examples",
"date": "2026-09-24 15:33:21",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/HTML/html1.html",
"relativePath": "/docs/HTML/html1.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/docs/css/2-css-sprite.html",
"relativePath": "/docs/css/2-css-sprite.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "html",
"date": "2026-09-24 15:33:21",
"capture": "css 雪碧图"
},
{
"url": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"relativePath": "/docs/website/2. 使用 Cloudflare R2 自建图床.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": " 使用 Cloudflare R2 自建图床",
"date": "2026-09-24 15:33:21",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Markdown Extension Examples",
"date": "2026-09-24 15:33:21",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/recent.html",
"relativePath": "/recent.html",
"frontmatter": {
"title": "最近更新",
"layout": "page",
"sidebar": false
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "最近更新",
"date": "2026-09-24 15:33:21",
"capture": "<script setup\nimport { data as posts } from './.vitepress/posts.data.js'\nconst formatDateToUTC = (dateStr) => {\n const d = new Date(dateStr);\n if (isNaN(d.getTime())) {\n throw new Error(`Invalid date string: ${dateStr}`);\n }\n const pad = n => String(n).padStart(2, '0');\n const year "
}
],
"04": [
{
"url": "/docs/ai/1-llm-for-learning.html",
"relativePath": "/docs/ai/1-llm-for-learning.html",
"frontmatter": {
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"group": "AI",
"groupLogo": "https://i.ibb.co/ynQpbnyC/ai-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "使用 LLM 学习陌生知识",
"date": "2026-04-13 15:04:12",
"capture": "面对陌生或一知半解的知识概念时，到底应该怎样学习呢？\n如果我们放眼到人类知识传承的长河中看，就会发现每一代的人都会给出不同的答案。而答案的差异，来自于知识载体和认知工具的差异。\n当下大模型很火热，出现了越来越多的基于 LLM 实现的智能体 Agent，人们可以用它们来做各种工作，如：程序设计、三维建模、平面图绘制、以及视频生成等。当然最基础的知识问答基本人人都做过了，小学生都会用它来问作业答案。当下人们学习新知识的入口已经从传统的搜索引擎，过渡到了与 LLM 对话。不用从海量的搜索结果中自行提取需要的信息了，只需要进入一个 LLM 对话框，输出“请帮我回答一下什么是XX？”即可得到经过整合后的"
},
{
"url": "/docs/frontend-performance/1-first-screen-loading.html",
"relativePath": "/docs/frontend-performance/1-first-screen-loading.html",
"frontmatter": {
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"group": "前端性能优化",
"groupLogo": "https://i.ibb.co/fzb4NBHx/xingnnegyouhua-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端首屏加载与白屏优化",
"date": "2026-04-01 17:22:35",
"capture": "前端首屏加载与白屏优化\n 首屏加载是什么？\n首屏加载，指用户在浏览器可视区域（Viewport）内看到的所有内容——包括文字、图片、按钮、视频等——完全渲染完毕，并且页面能够正常响应用户操作（如点击、滚动） 的过程。\n它不以“第一个像素”为终点，而是以“首屏内容的完整呈现与可交互”为终点。\n 首屏加载的优化维度\n- 网络层精细化调度\n- 长 JS 任务拆分（Time Slicing）\n- 组件延迟装载（非核心）\n- 资源加载优先级\n- 数据请求并行化与预取\n- 布局稳定性（防 CLS）\n 基本优化手段\n 网络层精细化调度\n- 预连接：`<link rel=\"preconnect\" hre"
},
{
"url": "/docs/vue/2-vue-react-interop.html",
"relativePath": "/docs/vue/2-vue-react-interop.html",
"frontmatter": {
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"group": "vue react",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue 与 React 互操作",
"date": "2026-04-01 17:22:35",
"capture": "在开发中有时候会遇到这样的问题：\n当前项目自身是 Vue 技术栈，已经迭代了很多次了，但是现在一个核心模块需要用到第三方实现，但是第三方给出的组件是 React，此时应该怎么处理呢？\n以我开发过的项目代码为例：\n- 前端\n - 一个 Vue 开发的视频应用，可播放、可上传。\n- 文件存储\n - 上传：前端上传文件时，先上传到 Go 编写的 P2P 文件节点保存（本地节点、或线上部署节点），保存后返回一个文件哈希地址给前端，前端将文件哈希 post 发送到 NodeJS 编写的服务端，存储到 MongoDb 数据库中\n - 下载：前端通过 NodeJS 服务端请求视频哈希地址，再通过 P2"
},
{
"url": "/docs/website/1-vitepress.html",
"relativePath": "/docs/website/1-vitepress.html",
"frontmatter": {
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"group": "website",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "vitepress 介绍",
"date": "2026-04-01 17:22:35",
"capture": "简介\n一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成\n基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件\n 快速开始\n 环境准备\nNodeJS 22及以上，NodeJS下载地址\n 安装 vitepress\n- 创建站点文件夹：`vitepress-site`\n- 初始化站点项目：`cd vitepress-site`、`npm init -y`\n- 安装 vitepress：`npm add -D vitepress`\n- 生成站点项目结构：`npx vitepress init`\n - 选"
},
{
"url": "/projects/1-project-index.html",
"relativePath": "/projects/1-project-index.html",
"frontmatter": {
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "作品索引",
"date": "2026-04-01 17:22:35",
"capture": "<script setup\nimport WorkCard from '../.vitepress/theme/components/WorkCard.vue'\n</script>\n favorTube\n<WorkCard\n title=\"作品 A\"\n description=\"作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。作品 A 的简短介绍。\"\n image=\"htt"
},
{
"url": "/projects/2. favorTube.html",
"relativePath": "/projects/2. favorTube.html",
"frontmatter": {
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"group": "projects",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "FavorTube 项目",
"date": "2026-04-01 17:22:35",
"capture": ""
},
{
"url": "/docs/css/1-aspect-ratio.html",
"relativePath": "/docs/css/1-aspect-ratio.html",
"frontmatter": {
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "css 如何保持元素宽高比？",
"date": "2026-04-01 10:12:52",
"capture": "设置元素宽高为百分比\n首先思考一个问题，百分比是相对单位，那么设置子元素的宽高为百分比到底基于什么呢？\n元素的百分比宽高，基于它所处的包含块，包含块的计算规则又是根据该元素的 position 属性决定的，大致分为以下三类：\n1. position: static / relative / sticky\n - 包含块是最近的非 static 定位祖先元素的内容区（content-box）\n - 宽度百分比\n - 相对于最近的非 static 定位的祖先块级元素的 content-box 宽度\n - 要求父级有固定宽度，比如：100px、50vw\n "
},
{
"url": "/docs/frontend-essays/1-frontend-routing.html",
"relativePath": "/docs/frontend-essays/1-frontend-routing.html",
"frontmatter": {
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"group": "CSS",
"groupLogo": "https://i.ibb.co/hJ1PnWrR/css-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "前端路由探讨",
"date": "2026-04-01 10:12:52",
"capture": "可以概括为一句话：\n\n本质上就是一张"
}
],
"03": [
{
"url": "/docs/vue/1-vue-slot.html",
"relativePath": "/docs/vue/1-vue-slot.html",
"frontmatter": {
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"group": "vue",
"groupLogo": "https://i.ibb.co/Q7dXCfTF/vue-logo.png"
},
"author": {
"name": "NeilSon",
"link": "https://github.com/Kele-Bingtang"
},
"title": "Vue slot 插槽",
"date": "2026-03-28 10:37:00",
"capture": "作用\nVue 插槽这个功能是 Vue2 与 Vue3 均有的功能，用来向组件内部分发模板内容\n 分类\n- 默认插槽\n - 无名字\n - 每个组件只有一个\n- 具名插槽\n - 带有 name 属性\n - 可有多个\n- 作用域插槽\n 基本用法\n 默认插槽用法\n父组件写法：\n```html\n<ChildComponent\n 当前文字将分发到默认插槽位置\n</ChildComponent>\n```\n子组件写法：\n```html\n<template>\n <div>\n <!-- 文字会分发到此处 -->\n <slot>"
}
]
}
},
"groupPosts": {
"categories": {},
"tags": {}
},
"groupCards": {
"categories": [],
"tags": []
}
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.