个人BLOG:https://odivblog.com/产品系统

随着前端工程、Web3、人工智能等技术快速发展，开发者需要持续学习并沉淀项目经验。传统笔记工具虽然可以记录知识，但在内容检索、个人品牌展示、搜索引擎传播和项目成果呈现方面存在一定局限。

oDivBlog 是一个面向开发者的个人技术博客，主要记录前端工程、Next.js、Web3、Solidity、智能合约及 AI Agent 等方向的学习内容和项目实践。项目将技术内容沉淀、个人作品展示和开发者个人品牌建设结合起来，为其他开发者提供具有实践参考价值的技术资料。

1. 博客文章：发布前端、Web3、Solidity、Foundry、AI Agent 和工程化等方向的技术教程与项目复盘。

2. 文章分类：通过标签对文章进行分类，支持用户按照技术方向筛选和浏览内容。

3. 文章详情：展示文章标题、发布日期、标签及正文内容，支持代码块、图片、列表和引用等技术文档格式。

4. 项目展示：集中展示个人参与或独立开发的项目，包括 Web3 数据平台、DApp、代币模拟工具、行情助手和图片压缩工具等。

5. 个人介绍：展示个人简介、技术方向和技能图谱，帮助访问者快速了解开发者的技术能力。

6. 中英文切换：提供中文和英文两套内容及独立访问路径，满足不同语言用户的阅读需求。

7. 开发资源：整理开发过程中使用的社区、行情平台、链上工具和学习资源。

8. SEO 支持：为不同页面及文章配置独立标题、描述、规范链接和多语言关联信息，并提供站点地图和搜索引擎抓取规则。

9. 响应式适配：兼容 PC、平板和移动端设备，为不同屏幕尺寸提供统一的浏览体验。

10. 社交分享：配置文章分享标题、描述和预览图片，使文章在社交平台分享时能够正确展示摘要信息。

1. 基于 Next.js App Router、React 和 TypeScript 独立完成个人技术博客的架构设计与前端开发，按照首页、博客、项目、关于和公共组件等模块组织代码。

2. 使用 MDX 管理博客内容，将 Markdown 的写作体验与 React 组件结合，实现文章元数据、代码块、图片、列表及自定义内容组件的统一渲染。

3. 设计博客内容管理结构，通过文章元数据维护标题、描述、发布日期、更新时间、标签、语言及草稿状态，并根据元数据自动生成文章列表。

4. 实现中英文国际化路由，通过 zh 和 en 路径分别管理不同语言内容，并完成导航、页面文案、文章和项目资料的多语言展示。

5. 实现文章标签筛选、年份归档和详情路由，使用户能够按照标签及发布时间快速查找技术内容。

6. 使用 Next.js 静态生成、服务端组件等能力，在构建阶段生成主要页面和文章内容，减少客户端请求，提高首屏加载速度和搜索引擎可访问性。

7. 完成全站 SEO 建设，为首页、博客列表、项目页和文章详情页配置独立 Metadata，并实现 canonical、hreflang、Open Graph、JSON-LD、sitemap.xml 和 robots.txt。

8. 对图片、字体及静态资源进行优化，结合组件拆分、按需加载和合理的客户端组件边界，减少不必要的 JavaScript，提高页面加载性能。

9. 完成响应式页面开发，适配 PC 端和移动端，并统一文章排版、代码展示、导航交互和深浅色主题下的视觉效果。

10. 将项目部署至 Vercel，配置自定义域名、HTTPS、正式域名重定向和自动化部署流程，并接入 Google Search Console 提交站点地图和管理搜索收录。

11. 持续维护网站内容及项目模块，根据新增技术文章和作品扩展页面功能，同时处理构建