# Blog

**Repository Path**: snows_l/Blog

## Basic Information

- **Project Name**: Blog
- **Description**: 【个人博客】vue3 + nodejs + mySQL  移动端适配BLOG。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://snows-l.site
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 5
- **Created**: 2024-08-07
- **Last Updated**: 2025-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, 个人博客, 移动端适配, 响应式, 原生开发

## README

snows_l's BLOG

 **如果有帮助到你，记得点一个 start 以及 fork ** 

**声明：如果用了我这个当作模板 做了自己的博客， 请自主添加 我的博客 为友链 谢谢，友联信息如下；**

    名称：snows_l's BLOG

    简介：渔得鱼心满意足，樵得樵眼笑眉舒！

    地址：http://snows-l.site

    LOGO：https://q1.qlogo.cn/g?b=qq&nk=37523953&s=640


## 一、项目介绍


本项目是基于前端（vue3+vite+pinia）  后端（nodejs+exporess） + mysql 的全手搓个人博客，没有用任何BLOG框架，95%的代码都纯原生标签。

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

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

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




### 全套BLOG相关代码仓库地址可以访问BLOG查看 


博库仓库地址页面：[code仓库 | snows_l's BLOG](http://snows-l.site/code-store)

后台管理仓库：[open-blog-backstage](https://gitee.com/snows_l/open-blog-backstage)

后端服务仓库：[open-node-server](https://gitee.com/snows_l/open-node-server)

数据库 基础表结构仓库：[open-base-sql](https://gitee.com/snows_l/open-base-sql)

看板娘仓库（别个大佬代码，根据自己项目自定义之后的）：[live2d-source](https://gitee.com/snows_l/live2d-source)





## 二、项目特色

### 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
```