ETHANAI Agent 开发工程师
全部项目

ViBlog

P003Personal web / creative coding

一个持续生长的个人空间。收藏做过的项目，也记录把想法变成现实的过程。

查看源码
ViBlog 个人技术博客主界面
本网站现采用 Astro、React 与 Three.js 构建。下方文档与截图保留原版 ViBlog 的实现记录，当前源码以仓库为准。

项目概述

ViBlog 是一个纯前端驱动的静态个人技术博客系统，采用 Vibe Coding 方式构建，支持文章管理、项目展示和响应式设计，无需复杂后端即可运行。

核心特性：

  • 文章管理：Markdown 格式文章，自动化生成列表和详情页
  • 项目展示：支持项目详情和图片画廊
  • 响应式设计：适配桌面端和移动端
  • 管理后台：支持文章/项目/配置的增删改查

技术选型

前端： HTML5 + CSS3 + JavaScript + marked.js

后端： Node.js（原生 http/fs 模块，无需额外框架）

数据存储： JSON 配置文件 + Markdown 文章内容 + 图片资源

实现过程

项目结构

ViBlog/
├── index.html          # 首页
├── article.html        # 文章详情页
├── posts.html          # 文章列表页
├── project.html        # 项目详情页
├── projects.html       # 项目列表页
├── admin/              # 管理后台
├── articles/           # 文章目录（manifest.json + [文章ID]/）
├── projects/           # 项目目录（manifest.json + [项目ID]/）
├── assets/             # 静态资源
├── styles.css          # 全局样式
├── script.js           # 前端脚本
├── server.js           # Node.js 服务器
└── site-settings.json  # 网站配置

核心模块

1. 文章管理系统

  • 文章存储在 articles/[文章ID]/ 目录，包含 index.md 和 meta.json
  • build-manifest.js 自动扫描生成 manifest.json 索引
  • 前端动态加载并渲染文章列表和详情页

2. 项目展示系统

  • 项目配置存储在 projects/[项目ID]/detail.json
  • 支持 Markdown 格式的概述、技术栈、实现方案
  • 图片画廊支持中英文文件名，URL 编码正确解析

3. 管理后台

提供文章管理、项目管理、网站设置三大功能，通过 RESTful API 与后端交互。

API 接口：

POST /api/articles/save         # 保存文章
DELETE /api/articles/:id       # 删除文章
POST /api/projects/save        # 保存项目
DELETE /api/projects/:id       # 删除项目
GET  /api/site-settings        # 获取网站设置
POST /api/site-settings        # 保存网站设置

技术要点

服务器处理：

  • 使用 decodeURIComponent() 正确解码中文路径
  • 静态文件服务限制访问范围在项目根目录内
  • 支持 CORS 跨域资源共享

性能优化：

  • 图片懒加载（loading="lazy"）
  • manifest 索引减少重复请求
  • CSS 变量实现主题复用

Agentic BI Copilot