AimerFeng_blog

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 16 Open GitHub ↗

my blog

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev

# 访问 http://localhost:3333
```

### 构建部署

```bash
# 构建生产版本
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 内容

示例文章结构：
```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](./CUSTOMIZATION.md)

## 🚀 部署指南

详细的部署步骤请参考 [DEPLOYMENT.md](./DEPLOYMENT.md)

## 📄 许可证

本项目基于 [CC BY-NC-SA 4.0](./CC-BY-NC-SA-4.0) 许可证开源。

---

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

- 🐦 Twitter: [@AimerFeng](https://twitter.com/AimerFeng)
- 📧 Email: contact@aimerfeng.me
- 🔗 GitHub: [@AimerFeng](https://github.com/AimerFeng)

AimerFeng_blog

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README