# live2d-website-template

**Repository Path**: j326598/live2d-website-template

## Basic Information

- **Project Name**: live2d-website-template
- **Description**: 带 Live2D 看板娘的静态官网模板，包含首页、欢迎页、下载页、音乐播放器和公告弹窗。
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-24
- **Last Updated**: 2026-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 静态官网源码简介

这是一个带 Live2D 形象、视频背景、音乐播放器和下载弹窗的静态官网项目。项目不依赖后端服务，也没有构建流程，直接通过浏览器或本地 HTTP 服务即可访问。

## 页面入口

| 页面 | 文件 | 说明 |
| --- | --- | --- |
| 首页 | `index.html` | 视频背景、宣传文案、进入官网按钮、本地音乐播放器 |
| 欢迎页 | `welc/index.html` | 官网介绍、Demo 联系方式、三块说明区域、Live2D 形象、公告弹窗 |
| 下载页 | `status/index.html` | 下载卡片、下载说明弹窗、确认下载按钮 |

## 当前主要功能

- 首页视频背景
- 首页本地音乐播放器
- 欢迎页站点运行时间展示
- 欢迎页三块说明区域：安全性、易用性、时效性
- 欢迎页 Live2D 看板娘
- 欢迎页公告弹窗
- 下载页多项目下载卡片
- 下载页 Tailwind 风格弹窗
- Demo 联系方式：`demo@example.com`

## 目录结构

```text
.
├─ index.html                  # 首页
├─ welc/index.html              # 欢迎页
├─ status/index.html            # 下载页
├─ assets/
│  ├─ 64lan.png                 # 网站图标/Logo
│  ├─ notice.jpg                # 公告图片
│  ├─ iiiw.pdf                  # 使用说明 PDF
│  ├─ status-bg.png             # 下载页背景图
│  ├─ uouo520.mp3               # 背景音乐
│  ├─ css/                      # 页面专属样式
│  └─ js/                       # 页面专属脚本
├─ dist/
│  ├─ css/style.css             # 公共布局样式
│  ├─ images/                   # 欢迎页功能图标
│  └─ js/                       # 公共脚本占位文件
├─ live2d/                      # Live2D 模型资源
├─ home-template/                    # 首页模板依赖
└─ status/                      # 下载页模板依赖
```

## 本地预览

建议使用本地 HTTP 服务访问，避免 `file://` 导致 Live2D 模型资源加载失败。

在项目根目录运行：

```cmd
python -m http.server 8092 --bind 127.0.0.1
```

然后访问：

```text
http://127.0.0.1:8092/index.html
http://127.0.0.1:8092/welc/index.html
http://127.0.0.1:8092/status/index.html
```

## 外部依赖

项目中仍使用了少量 CDN：

- `https://unpkg.com/live2d-widget@3.1.4/lib/L2Dwidget.min.js`
- `https://cdn.tailwindcss.com`
- `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css`

如果需要离线部署，需要把这些 CDN 资源下载到本地并修改 HTML 引用。

## 备注

当前项目是静态展示源码，适合用于 Demo、官网模板、本地展示或二次改造。上线前建议根据实际用途替换文案、下载链接、联系方式和说明文档。