# Blog

**Repository Path**: khzhg/Blog

## Basic Information

- **Project Name**: Blog
- **Description**: 【个人博客】vue3 + ElImage + nodejs 集成了看板娘，音乐播放器等（UI原生开发达99%）的响应式BLOG。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://snows-l.site
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2025-01-15
- **Last Updated**: 2025-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

snows_l's BLOG

## 一、项目介绍


本项目是基于前端（vue3+vite+pinia）  后端（nodejs+exporess） + mysql 的全手写个人博客，95%的代码都纯原生标签。

当时为了方便了按需引入了 elementPLUS 的el-image进行二次封装，实现图片的来加载优化。

项目地址：[snows_l's BLOG](http://snows-l.site)

![输入图片说明](md_asstes/blog_index.png)



## 二、项目特色

### 1、集成了看板娘，可以与项目内容互动，也可以切换模型。
![看板娘与内容互动](md_asstes/blog_kbn_3.png)
![看板娘模型](md_asstes/blog_kbn.png)![看板娘模型](md_asstes/blog_kbn_2.png)





### 2、做了移动端适配。
![移动端适配](md_asstes/blog_m-1.png)![移动端适配](md_asstes/blog_m-2.png)




### 3、光标拖动效果（可切换，默认不展示，需要在设置中打开/切换）
![光标拖动效果](md_asstes/blog_mouse.png)



### 4、背景樱花飘落（可切换），如下：下雪，下硬币😄
![背景樱花飘落](md_asstes/blog_yinhua.png)




### 5、音乐🎵播放器（右下角）
![音乐🎵播放器](md_asstes/blog_music.png)




### 6、背景切换




### 7、字体切换
![字体切换](md_asstes/blog_font.png)




### 8、白天夜晚模式切换（会根据时间自动切换）




### 9、主题色更改 （都在又下角这个模块里面了）




### 10、文章代码块可一键复制，完整html支持直接阅览以及下载成文件。
![一键复制阅览](md_asstes/blog_a-1.png)

#### 10-2、文章阅览 效果
![阅览 效果](md_asstes/blog_a_2.png)




### 11、邮件通知




### 12、起始页大屏翻页时钟，点击时间即可切换全屏，自定义切换背景时间
![输入图片说明](md_asstes/blog-start.png)





### 13、音乐快捷键操作等等
![音乐快捷键操作](md_asstes/blog_kuaijijian.png)




### 14、自定义滚动条（点击置顶， 拖动滚动）
![自定义滚动条](md_asstes/blog_scorll.png)





## 三、项目启动步骤

### 依赖安装
```sh
npm install / yarn
```

### 启动
```sh
npm run dev / yarn dev
```

### 检查TS语法打包
```sh
npm run build / yarn build
```

### 不检查TS语法打包
```sh
npm run build-only / yarn build-only
```