# ds

**Repository Path**: mayekun/ds

## Basic Information

- **Project Name**: ds
- **Description**: 或曾经、或现在、或未来，属于你的单身博客。
古人说 “人生天地间，忽如远行客”。
此间天地，乃孤身行吟者之居所。
不慕红尘双飞翼，独守清心半卷书。
往来皆素心之士，谈笑无伉俪之扰。
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://ds.mayekun.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-28
- **Last Updated**: 2026-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, 单身博客, 前后端分离

## README

<p align="center">
  <a href="https://gitee.com/mayekun/ds/stargazers">
    <img src="https://gitee.com/mayekun/ds/badge/star.svg?theme=gvp">
  </a>
  <a href="https://github.com/eonsee/ds/stargazers">
    <img src="https://img.shields.io/github/stars/eonsee/ds?style=social">
  </a>
  <a href="https://gitee.com/mayekun/ds">
    <img src="https://img.shields.io/badge/danshen-blog-v1.0-brightgreen.svg">
  </a>
  <a href="https://gitee.com/mayekun/ds/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue">
  </a>
</p>

<p align="center">

| 主题一 | 主题二 |
|--------|--------|
| <img src="./public/index.png" alt="主题一" width="100%"> | <img src="./public/index2.png" alt="主题二" width="100%"> |

</p>

<div align="center">

# 单身博客

*一个基于 Vue3 + Element Plus + TailwindCSS 的现代翻页式博客网站*

</div>

---

## 一、项目仓库

- Gitee: https://gitee.com/mayekun/ds
- GitHub: https://github.com/eonsee/ds

---

## 二、技术栈

- **Vue 3** - Composition API
- **Element Plus** - UI 组件库
- **TailwindCSS** - 原子化 CSS
- **Vite** - 构建工具
- **marked** - Markdown 渲染

---

## 三、主要特性

| 特性 | 描述 |
|------|------|
| 📖 翻页布局 | 左侧目录，右侧内容，支持左右翻页和键盘控制 |
| 🎨 8种主题 | 经典原木、玫瑰粉、森林绿、深海蓝、暮光紫、午夜黑、纯白、纯黑 |
| 📊 发布热力图 | 展示文章发布时间分布 |
| 💬 评论系统 | 支持评论、回复和点赞 |
| ❤️ 点赞分享 | 支持文章点赞和分享到社交平台 |
| 🔥 最新/最热 | 文章列表支持按时间或热度排序 |
| 🎬 田园动画 | 文章底部的趣味动画装饰 |
| 📱 响应式 | 适配桌面端和移动端 |

---

## 四、快速开始

```bash
# 克隆项目
git clone https://gitee.com/mayekun/ds.git

# 进入目录
cd ds/blog

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

---

## 五、项目结构

```
blog/
├── public/
│   ├── favicon.svg        # 网站图标
│   └── index.png          # 预览图片
├── src/
│   ├── components/        # Vue 组件
│   │   ├── ArticleFooterScene.vue   # 田园场景动画
│   │   ├── AuthorInfo.vue          # 作者信息
│   │   ├── BookPage.vue            # 书页组件
│   │   ├── BookSpine.vue           # 书脊/目录
│   │   ├── CommentSection.vue      # 评论区
│   │   ├── PageTurner.vue         # 翻页控制
│   │   ├── PublishHeatmap.vue      # 发布热力图
│   │   ├── ShareAndLike.vue       # 分享点赞
│   │   └── ThemeSwitcher.vue      # 主题切换
│   ├── App.vue             # 主应用
│   ├── main.js             # 入口文件
│   └── style.css           # 全局样式
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js
```

---

## 六、在线访问

**https://ds.mayekun.com**

---

## 七、许可证

[MIT License](./LICENSE)