Skip to content

关于本网站

更新: 1/12/2026字数: 0 字阅读: 0 分钟

这是一个使用现代前端技术构建的个人学习笔记和技术文档网站,用于记录和分享前端开发、Three.js、可视化等相关技术的学习心得和实践经验。

技术栈

核心框架和工具

  • VitePress 2.0.0-alpha.15 - 基于Vue 3的静态站点生成器,提供现代化的文档网站构建体验
  • Vue 3.4.0 - 渐进式JavaScript框架,用于构建用户界面
  • TypeScript - 类型安全的JavaScript超集,提升代码质量和开发效率
  • Sass/SCSS - CSS预处理器,提供更强大的样式管理能力

主要依赖库

  • medium-zoom - 图片放大查看功能
  • nprogress-v2 - 页面加载进度条
  • xgplayer - 视频播放器组件
  • vitepress-plugin-comment-with-giscus - 评论功能集成
  • vitepress-plugin-google-analytics - 网站访问统计

内容主题

网站包含以下主要内容主题:

  • 前端基础汇总 - HTML、CSS、JavaScript、Vue、React等前端核心技术
  • Three.js - 3D图形编程学习笔记和实践
  • 可视化 - Canvas、Echarts、AntV G6、PixiJS等数据可视化技术
  • JavaScript - JavaScript深入学习和实践
  • 学习笔记 - 各类技术书籍和课程的学习记录

特色功能

  • 自定义主题和组件,提供个性化的阅读体验
  • 响应式设计,适配不同设备屏幕
  • 代码高亮和语法支持
  • 图片放大查看功能
  • 页面加载进度提示
  • 评论系统集成
  • 网站访问统计

参考资料

本项目在开发过程中参考了以下优秀博客:

VitePress个性化配置

页面基础配置

参考链接: https://vitepress.yiov.top/page.html

  • ✅ 右侧大纲
  • ✅ 上次更新时间
  • ✅ 底部备案信息
  • ✅ 在GitHub编辑功能

首页封面

参考链接: https://vitepress.yiov.top/frontmatter.html

  • ✅ 首页封面

代码配置

参考链接: https://vitepress.yiov.top/markdown.html

  • ✅ 代码行数显示

样式美化

参考链接: https://vitepress.yiov.top/style.html

  • ✅ 自定义主题色
  • ✅ 引用样式修改
  • ✅ 首页彩虹渐变动画
  • ✅ 导航栏毛玻璃样式
  • ✅ 优化代码块为mac风格
  • ✅ 侧边栏样式定制

组件增强

参考链接: https://vitepress.yiov.top/components.html

  • ✅ 首页文字下划线效果
  • ✅ 字数统计和阅读时长

布局配置

参考链接: https://vitepress.yiov.top/layout.html

  • ✅ 不蒜子/vercount访问统计
  • ✅ 回到顶部功能
  • ✅ 视图模式切换过渡动画

插件集成

参考链接: https://vitepress.yiov.top/plugin.html

  • ✅ 谷歌分析
  • ✅ 图片缩放功能
  • ✅ 切换路由进度条

评论系统

参考链接: https://vitepress.yiov.top/plugin.html#%E8%AF%84%E8%AE%BA

  • ✅ 评论系统

部署与自动化

个人导航搭建

参考以下资源搭建了个人导航系统:

感谢您访问本网站!如果您有任何建议或反馈,欢迎提出。