程沛权 - 养了三只猫

一个网站连接多个内容栏目

主导航包括项目、博客、菜谱、文身和关于等入口。首页展示作者介绍、出版书籍、文章及开源作品，也呈现家庭烹饪内容。这样的布局让访问者可以从不同兴趣进入：前端开发者可查看项目和文章，想了解作者背景的人可以打开关于页面，喜欢烹饪内容的读者则能进入菜谱栏目。页面同时提供中英文语言切换。

网站不仅是静态个人简历，还包含可检索的文章和分类内容。项目目录将作品按类型整理，博客栏目发布技术与个人主题文章，菜谱则按使用场景和菜品类别组织。公开页面可以直接访问，导航路径清楚，适合将它作为作者作品集和持续写作的综合入口。

开源项目页按用途浏览

项目页展示作者创建或维护的开源作品，并提供全部项目及多个类别筛选。页面显示教程、工具、UI、捆绑、配置、模板、软件、在线工具、脚手架和服务端等类型，访问者可以按需要缩小范围。卡片通常包含项目名、简介和相关数据，帮助读者快速了解用途，再跳转到项目仓库或相关说明继续查看。

其中，vue-picture-cropper 被介绍为简单易用的 Vue 3 图片裁剪组件；@re-dev/react-truncate 提供文本截断相关组件；vite-plugin-banner 用于为打包后的 chunk 文件添加 banner。页面还列出 learning-vue3 学习指南，围绕 Vue 3、TypeScript 和前端工程化展开。其他项目包括常用 JavaScript/TypeScript 工具函数和网站分析工具。这些作品覆盖组件、构建插件、学习材料和代码工具等不同方向。

对前端开发者来说，分类列表能帮助快速发现与当前技术栈相关的项目。想找界面组件时可浏览 UI 类别，想了解构建流程则可查看捆绑或工具项目；如果需要系统入门材料，可以进入教程分类。每项作品的详细功能、版本兼容和使用方式，应以项目仓库或官方说明为准。项目页是发现作品的索引，具体维护状态和安装步骤需要在对应来源确认。

书籍与技术写作补充项目目录

首页介绍作者出版的前端工程化书籍，内容以 Vue.js 3 为核心，围绕前端工程化、Node.js、npm、TypeScript 和 Vue 相关实践展开。对刚进入前端领域的读者，书籍页面提供内容范围和学习方向的简介。网站也通过博客文章记录工程实践、工具使用和兴趣主题，读者可以从项目页转入文章，进一步理解开发背景和技术选择。

开源目录偏重作品与用途，书籍和文章则提供更长篇的解释材料。这样的组合让访问者能够按不同深度了解作者工作：先从项目卡片快速浏览，再打开仓库查看代码，或阅读文章理解相关经验。对正在寻找 Vue 组件、构建插件或前端学习路径的人来说，这些栏目可以作为继续探索的起点。

生活栏目让个人站点更完整

菜谱栏目按不同主题提供家常料理内容，包括新手入门、省钱菜谱、上班带饭、潮汕风味、特色主食和汤品等。文身、音乐和养猫等兴趣信息也出现在个人介绍中，使网站具有个人作品集之外的生活记录属性。访问者可以根据兴趣选择栏目，不必将网站内容限制在技术范畴。

这种多主题结构适合希望了解作者整体表达的读者。技术作品和生活文章并置，构成长期维护个人网站的一种方式：项目列表展示可以复用的成果，博客保存经验和思考，菜谱等栏目呈现日常兴趣。首页作为总入口，帮助新访客辨认不同内容所在位置。

适合前端开发者与个人网站读者

如果你需要浏览 Vue、React 或 Vite 相关开源项目，可以从项目页的类型筛选开始；如果希望了解工程化学习材料，可查看 learning-vue3 和出版书籍介绍；想读作者的开发经历，则进入博客栏目。个人网站同时展示菜谱与兴趣内容，也适合关注独立创作者如何组织线上作品集的读者。

总结来说，程沛权的网站把个人介绍、开源项目、技术文章和生活栏目集中在一个易于浏览的入口中。36项项目按用途归类，从前端组件到构建工具和学习教程都有展示。项目页适合发现作品，具体功能与版本信息应进一步访问其仓库确认；首页则提供理解作者背景和探索其他栏目的路径。

使用项目目录时，可以先按类型筛选，再阅读简介判断是否匹配当前技术栈。进入仓库后再确认许可证、维护状态和安装步骤，避免只凭卡片中的短描述作判断。