LuvGaze 个人主页项目说明

项目运行过程与部署教程

开发环境运行

环境准备
- 确保已安装 Node.js (推荐 v16.0.0 或更高版本)
- 确保已安装 npm (推荐 v8.0.0 或更高版本)

安装依赖

# 进入项目目录
cd HomePage

# 安装项目依赖
npm install

开发模式运行
```
# 启动开发服务器
npm run dev
```
启动后，开发服务器默认运行在 http://localhost:5173，可以通过浏览器访问该地址查看项目效果。
构建生产版本
```
# 构建生产版本
npm run build
```
构建完成后，生成的静态文件会存放在 dist 目录中。

宝塔面板部署教程

准备工作
- 确保服务器已安装宝塔面板
- 确保已在宝塔面板中创建了网站
上传项目文件
- 在本地构建项目：npm run build
- 将生成的 dist 目录中的所有文件上传到宝塔面板中对应网站的根目录
配置网站
- 登录宝塔面板
- 进入「网站」管理页面
- 找到您的网站，点击「设置」
- 在「网站目录」中确认网站根目录指向上传的文件所在目录
- 在「默认文档」中确保包含 index.html
配置伪静态（可选）
- 在网站设置中，点击「伪静态」
- 选择「Vue」规则或添加以下规则：
```
location / {
  try_files $uri $uri/ /index.html;  
}
```
配置SSL（可选）
- 在网站设置中，点击「SSL」
- 选择「申请Let's Encrypt免费SSL证书」或上传您已有的证书
- 开启「强制HTTPS」选项
访问测试
- 通过您的域名访问网站，确认网站正常运行
- 检查各项功能是否正常工作

常见问题排查

网站无法访问
- 检查服务器防火墙是否开放了80/443端口
- 检查宝塔面板中网站是否正常运行
- 检查域名解析是否正确指向服务器IP
资源加载失败
- 检查网站根目录是否包含所有必要文件
- 检查浏览器控制台是否有资源加载错误
- 确认路径配置正确，特别是图片和视频资源路径
功能异常
- 音乐播放器问题：检查网易云音乐API是否可访问
- 背景加载问题：检查图片/视频资源是否存在且路径正确
- 搜索功能问题：检查网络连接和搜索引擎配置

项目概述

这是一个基于Vue.js和Vuetify构建的个人主页项目，具有现代化的UI设计和丰富的功能。项目采用响应式设计，适配PC端和移动端，提供了多种自定义选项，让用户可以根据自己的喜好进行个性化设置。

主要功能

响应式设计：适配不同设备尺寸，在PC和移动端均有良好的显示效果
- PC端：优雅的卡片式布局，带有圆角边框和毛玻璃效果
- 移动端：紧凑的堆叠式布局，优化触摸交互体验
搜索框功能：支持多种搜索引擎切换和智能URL识别
- 内置Bing、Google、百度、搜狗和360等多种搜索引擎
- 智能识别输入内容是否为URL，如是则直接打开
- 搜索引擎设置保存在Cookie中，下次访问自动应用
打字机效果：首页展示打字机动画文字
- 支持自定义多条文字内容，循环展示
- 打字、删除动画效果，增强页面活力
时钟显示：实时显示当前时间和日期
- 24小时制时间显示，精确到秒
- 完整日期显示，包含年月日和星期
音乐播放器：支持播放网易云音乐歌单
- 悬停头像显示音乐播放控制器
- 支持播放、暂停、上一曲、下一曲操作
- 显示当前播放歌曲的标题和作者
项目展示：展示个人项目卡片
- 支持图片、标题、描述和链接
- 可展开查看详细描述
- 点击按钮直接跳转到项目链接
个人标签：展示个人特点标签
- 以标签云形式展示个性化标签
- 支持自定义标签内容
社交媒体链接：快速链接到各社交平台
- 支持自定义图标和链接
- 悬停效果增强交互体验
技能雷达图：展示个人技能水平
- 使用Chart.js绘制极坐标图
- 支持自定义技能名称和分数
背景设置：支持静态图片和动态视频背景
- 区分PC端和移动端背景设置
- 支持背景亮度和模糊度调整
- 内置多种壁纸选择
主题设置：可自定义颜色、亮度和模糊效果
- 主题颜色自定义
- 标题颜色自定义
- 背景亮度调整
- 毛玻璃效果强度调整

项目结构

├── public/                 # 静态资源
│   ├── css/               # 样式文件
│   │   ├── app.less      # 主要样式
│   │   ├── mobile.less   # 移动端样式
│   │   └── style.css     # 全局样式
│   ├── fonts/             # 字体文件
│   │   ├── Digital-Play-Italic-St-1.ttf  # 数字时钟字体
│   │   └── faken.ttf     # 标题字体
│   └── img/               # 图片资源
│       ├── avatar.jpg    # 头像图片
│       ├── loader.svg    # 加载动画
│       ├── stackicon/    # 技术栈图标
│       └── wallpaper/    # 壁纸资源
│           ├── static/   # PC端静态壁纸
│           ├── static-mobile/ # 移动端静态壁纸
│           ├── dynamic/  # PC端动态壁纸
│           └── dynamic-mobile/ # 移动端动态壁纸
├── src/                   # 源代码
│   ├── components/        # 组件
│   │   ├── hoemright.vue  # 右侧主要内容组件
│   │   ├── loader.vue     # 加载动画组件
│   │   ├── polarchart.vue # 极坐标图组件
│   │   ├── tabs/          # 标签页组件
│   │   │   ├── tab1.vue   # 样式切换选项卡
│   │   │   ├── tab2.vue   # 背景切换选项卡
│   │   │   ├── tab3.vue   # 音乐播放选项卡
│   │   │   └── tab4.vue   # 搜索引擎选项卡
│   │   ├── turntable.vue  # 转盘组件
│   │   └── typewriter.vue # 打字机组件
│   ├── utils/             # 工具函数
│   │   ├── common.js     # 通用工具函数
│   │   └── cookieUtils.js # Cookie操作函数
│   ├── App.vue            # 主应用组件
│   ├── app.js             # 应用逻辑
│   ├── config.js          # 配置文件
│   └── main.js            # 入口文件
├── index.html             # HTML模板
├── package.json           # 项目依赖配置
├── vite.config.js         # Vite构建配置
└── favicon.ico            # 网站图标

可自定义内容

1. 基本信息配置（config.js）

// 网页元数据
metaData: {
    title: '网页标题',
    description: '网页描述',
    keywords: '关键词',
    icon: '网页图标路径'
},

avatar: "头像路径",
welcometitle: "欢迎标题",

2. 颜色和视觉效果

// 颜色配置
color: {
    themecolor: "#FFFFFF", // 主题颜色
    welcometitlecolor: "#FFFFFF", // 标题颜色
},

brightness: 85, // 背景亮度（百分比）
blur: 5, // 毛玻璃模糊效果（像素）

3. 个人标签

tags: ['标签1', '标签2', '标签3', ...],

4. 背景壁纸

background: {
    "pc": {   // PC端
        "type": "pic",   // "pic":静态壁纸; "video":动态壁纸
        "datainfo": {
            "title": "壁纸标题",
            "preview": "预览图路径",
            "url": "壁纸路径",
        },
    },
    "mobile": {   // 移动端
        "type": "pic",
        "datainfo": {
            "title": "壁纸标题",
            "preview": "预览图路径",
            "url": "壁纸路径",
        }
    }
}

5. 技能雷达图

polarChart: {
    skills: ['技能1', '技能2', '技能3', ...],
    skillPoints: [85, 78, 88, ...], // 对应技能的分数（0-100）
},

6. 社交媒体链接

socialPlatformIcons: [
    { icon: "mdi-github", link: "GitHub链接" },
    { icon: "mdi-email", link: "邮箱链接" },
    // 更多社交媒体...
],

7. 打字机文字

typeWriterStrings: [
    "打字机显示的第一行文字",
    "打字机显示的第二行文字",
    // 更多文字...
],

8. 音乐播放器

musicPlayer: {
    server: 'netease',  // 服务提供商（网易云音乐）
    type: 'playlist',   // 歌单类型
    id: '歌单ID'        // 歌单ID
},

9. 壁纸库

可以在wallpaper对象中添加更多壁纸选项：

wallpaper: {
    pic: [ // PC端静态壁纸
        { "title": "壁纸标题", "preview": "预览图路径", "url": "壁纸路径" },
        // 更多壁纸...
    ],
    picMobile: [ // 移动端静态壁纸
        { "title": "壁纸标题", "preview": "预览图路径", "url": "壁纸路径" },
        // 更多壁纸...
    ],
    video: [ // PC端动态壁纸
        {
            "title": "壁纸标题",
            "preview": "预览视频路径",
            "url": "视频路径"
        },
        // 更多视频壁纸...
    ],
    videoMobile: [ // 移动端动态壁纸
        {
            "title": "壁纸标题",
            "preview": "预览视频路径",
            "url": "视频路径"
        },
        // 更多视频壁纸...
    ],
},

10. 项目卡片

projectcards: [
    { 
        go: "按钮文字", 
        img: "项目图片路径", 
        title: "项目标题", 
        subtitle: "项目副标题", 
        text: "项目描述", 
        url: "项目链接", 
        show: false // 是否默认展开
    },
    // 更多项目...
],

11. 页脚声明

statement: ["备案号", "版权信息"],

如何修改

基本配置修改：直接编辑src/config.js文件中的相应配置项
样式修改：
- 全局样式：修改public/css/style.css
- 主要样式：修改public/css/app.less
- 移动端样式：修改public/css/mobile.less
组件修改：编辑src/components/目录下的相应组件文件
逻辑修改：编辑src/app.js文件

特殊功能说明

搜索框

搜索框支持多种搜索引擎切换，并能智能识别URL。当输入内容被识别为URL时，会直接打开该URL；否则会使用选定的搜索引擎进行搜索。搜索引擎可以在设置菜单中的"搜索引擎"选项卡中进行选择，支持Bing、Google、百度、搜狗和360等多种搜索引擎。默认搜索引擎为Bing。

搜索引擎设置与实时更新机制

搜索引擎设置会保存在Cookie中，下次访问时自动应用。在设置菜单中更改搜索引擎后，前台页面会实时更新显示，无需刷新页面。这是通过自定义事件机制实现的：

当在设置菜单中更改搜索引擎并点击"确认"按钮时，会触发searchEngineUpdated自定义事件
同样，点击"恢复"或"取消"按钮也会触发相应的事件
前台页面监听这些事件，并在事件触发时实时更新搜索引擎显示

为确保搜索引擎设置的可靠性，系统实现了以下优化：

使用具名函数处理事件，确保事件监听器能够正确移除
添加计算属性currentEngineName，确保UI能够响应搜索引擎变化
增强了performSearch方法的健壮性，处理了搜索引擎可能为空的边缘情况
改进了URL识别逻辑，使其更加准确
确保搜索引擎配置中的value字段包含完整的搜索URL（如https://www.bing.com/search?q=），而不仅仅是搜索引擎名称

设置菜单中提供了"恢复"、"取消"和"确认"三个按钮，分别用于恢复默认搜索引擎（Bing）、取消修改和保存设置。

音乐播放器

音乐播放器使用MetingJS API获取网易云音乐的歌单数据。可以通过修改config.js中的musicPlayer配置来更换歌单。

音乐播放器功能包括：

自动获取歌单信息，包括歌曲标题、作者、封面和音频URL
支持播放、暂停、上一曲、下一曲操作
显示加载状态，提升用户体验
播放时头像旋转动画效果
自动播放下一曲

背景设置

支持静态图片和动态视频作为背景，并可以为PC端和移动端分别设置不同的背景。背景设置可以通过页面右下角的设置按钮进行更改。

背景设置功能包括：

支持静态图片和动态视频两种背景类型
区分PC端和移动端背景，优化不同设备的体验
背景设置保存在Cookie中，下次访问自动应用
提供预览图，方便用户选择
支持调整背景亮度和模糊效果

主题设置

可以自定义主题颜色、标题颜色、背景亮度和模糊效果。这些设置会被保存在Cookie中，下次访问时自动应用。

主题设置功能包括：

主题颜色选择器，支持任意颜色
标题颜色选择器，支持任意颜色
背景亮度滑块，范围0-100%
模糊效果滑块，范围0-20px
实时预览效果
设置保存在Cookie中，下次访问自动应用

技术栈

Vue.js 3：前端框架，采用Composition API
Vuetify 3：UI组件库，提供美观的Material Design风格组件
Less：CSS预处理器，增强样式编写能力
Chart.js：图表库，用于绘制技能雷达图
TypeIt：打字机效果库，实现文字动画
MetingJS：音乐API，获取网易云音乐数据
Vite：构建工具，提供快速的开发体验和高效的构建过程

部署说明

项目使用Vite构建，可以通过以下命令进行构建和部署：

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

构建后的文件会生成在dist目录中，可以将该目录部署到任何静态文件服务器上，包括宝塔面板、Nginx、Apache等。

环境变量配置

可以通过创建.env文件来设置环境变量，例如：

VITE_CONFIG='{"welcometitle":"自定义标题"}'

这将覆盖config.js中的相应配置。

支持的环境变量文件：

.env：所有环境都会加载
.env.local：所有环境都会加载，但会被git忽略
.env.development：开发环境加载
.env.production：生产环境加载

注意事项

资源优化：图片和视频资源较大，建议进行压缩或使用CDN加速，特别是在宝塔面板部署时
API依赖：音乐播放功能依赖于网易云音乐API，如遇到问题可能需要更换API地址
移动端性能：背景视频在移动设备上可能会影响性能，建议为移动端使用静态图片背景
Cookie存储：Cookie存储的设置在不同浏览器间不共享，用户在不同浏览器访问时需要重新设置
宝塔部署：在宝塔面板部署时，确保网站目录权限正确，通常需要设置为755
HTTPS支持：建议配置HTTPS，特别是使用音乐播放功能时，避免混合内容问题
缓存控制：考虑为静态资源设置适当的缓存策略，提高访问速度

浏览器兼容性

项目使用了现代Web技术，建议使用最新版本的Chrome、Firefox、Edge或Safari浏览器访问。

Chrome 87+
Firefox 84+
Safari 14+
Edge 87+

对于旧版浏览器，可能会出现样式或功能异常。

Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
public		public
src		src
favicon.ico		favicon.ico
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
vite.config.js		vite.config.js
所有文件.md		所有文件.md

LiamBlog/HomePage

Folders and files

Latest commit

History

Repository files navigation