AimerFeng Blog (然然的博客)

一个基于 Vue 3 + Vite 构建的现代化个人博客，专注于 Web3、区块链和 AI 技术分享。

✨ 特性

• 🎨 玻璃质感设计 - 现代化的 Glassmorphism 视觉效果
• 🌓 深色/浅色主题 - 自动适配系统主题偏好
• 📱 响应式设计 - 完美适配桌面端和移动端
• ⚡ 极速加载 - 基于 Vite 的静态站点生成
• 🔍 SEO 优化 - 完整的 meta 标签和 Open Graph 支持
• 🏷️ 标签分类 - 支持 Web3 和 AI 内容分类过滤
• 📝 Markdown 支持 - 完整的 Markdown 语法和代码高亮
• 🚀 一键部署 - 预配置 Vercel 部署

🛠️ 技术栈

• 前端框架: Vue 3 + Composition API
• 构建工具: Vite + vite-ssg (静态站点生成)
• 样式方案: UnoCSS (原子化 CSS)
• 内容管理: Markdown + Frontmatter
• 语法高亮: Shiki
• 类型支持: TypeScript
• 部署平台: Vercel

🚀 快速开始

环境要求

• Node.js >= 16
• pnpm (推荐) 或 npm/yarn

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

开发模式

# 启动开发服务器
pnpm dev

# 访问 http://localhost:3333

构建部署

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

📁 项目结构

aimerfeng-blog/
├── pages/                    # 页面和文章
│   ├── index.md             # 首页
│   ├── posts/               # 博客文章
│   │   ├── web3-intro.md    # Web3 示例文章
│   │   ├── smart-contracts.md
│   │   ├── ai-agents.md     # AI 示例文章
│   │   └── llm-dev.md
│   ├── projects.md          # 项目展示页
│   └── [...404].md          # 404 页面
├── src/
│   ├── components/          # Vue 组件
│   │   ├── GlassBackground.vue  # 玻璃背景组件
│   │   ├── GlassCard.vue        # 玻璃卡片组件
│   │   └── ...
│   ├── styles/              # 样式文件
│   │   ├── main.css         # 主样式
│   │   ├── glass.css        # 玻璃效果样式
│   │   └── ...
│   └── ...
├── public/                  # 静态资源
├── vercel.json             # Vercel 部署配置
└── package.json

🎨 玻璃质感设计

本博客采用现代化的 Glassmorphism 设计风格，具有以下特点：

• 模糊背景: 使用 backdrop-filter: blur() 创建毛玻璃效果
• 半透明: 精心调配的透明度营造层次感
• 边框高光: 微妙的边框光效增强视觉层次
• 渐变动画: 流动的背景渐变动画
• 主题适配: 深色和浅色主题下的不同玻璃效果

📝 内容管理

添加新文章

1. 在 pages/posts/ 目录下创建新的 .md 文件
2. 添加 Frontmatter 元数据
3. 编写 Markdown 内容

示例文章结构：

---
title: 文章标题
date: 2024-01-01
description: 文章描述
tags: [web3, blockchain]
---

# 文章内容

这里是文章正文...

支持的标签

• Web3 相关: web3, blockchain, ethereum, solidity, defi, nft
• AI 相关: ai, llm, machine-learning, python, tensorflow

🔧 自定义配置

详细的自定义指南请参考 CUSTOMIZATION.md

🚀 部署指南

详细的部署步骤请参考 DEPLOYMENT.md

📄 许可证

本项目基于 CC BY-NC-SA 4.0 许可证开源。

---

AimerFeng (然然) - Web3 & AI 技术分享者

• 🐦 Twitter: @AimerFeng
• 📧 Email: contact@aimerfeng.me
• 🔗 GitHub: @AimerFeng