# blog

**Repository Path**: IamPAM/blog

## Basic Information

- **Project Name**: blog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-19
- **Last Updated**: 2026-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 古韵乐坊 · 葫芦丝艺术培训官网

基于 **Vue 3 + Vite** 的单页应用（SPA），`<script setup>` 组合式 API + Vue Router，构建产物为纯静态文件，可部署到任意静态托管。

## 技术栈

| 项 | 说明 |
|---|---|
| 框架 | Vue 3.5（`<script setup>` 语法糖） |
| 构建 | Vite 6 |
| 路由 | Vue Router 4（hash 模式，无需服务端重写） |
| 样式 | 原生 CSS + CSS 变量（浅色/深色双主题） |

## 目录结构

```
Blog/
├── index.html                 # 入口 HTML（仅挂载点）
├── vite.config.js             # 构建配置（base './'，兼容子路径部署）
├── package.json
└── src/
    ├── main.js                # 应用入口
    ├── App.vue                # 根组件（页头 + 路由出口 + 页脚）
    ├── router/index.js        # 路由表
    ├── components/
    │   ├── SiteHeader.vue     # 导航（菜单集中在 navs 数组）
    │   ├── SiteFooter.vue
    │   ├── PostCard.vue       # 动态卡片
    │   └── ThemeToggle.vue    # 深色模式切换
    ├── views/
    │   ├── HomeView.vue       # 首页
    │   ├── CoursesView.vue    # 课程体系（courses 数组）
    │   ├── TeachersView.vue   # 师资团队
    │   ├── NewsView.vue       # 动态列表（搜索 + 标签筛选）
    │   ├── NewsDetailView.vue # 动态详情
    │   └── AboutView.vue      # 关于我们 + 联系方式 + 教学点
    ├── data/posts.js          # 动态数据（★ 发新动态改这里）
    └── assets/
        ├── styles/style.css   # 全局样式
        └── img/               # 图片资源
```

## 本地开发

```bash
npm install        # 首次安装依赖
npm run dev        # 启动开发服务器 http://localhost:5173（热更新）
npm run build      # 构建到 dist/
npm run preview    # 本地预览构建产物
```

## 发布新动态

1. 打开 `src/data/posts.js`，在数组**最前面**追加一条：

```js
{
  slug: 'spring-camp',              // 唯一标识，会出现在链接 /#/news/spring-camp
  title: '2027 春季班招生简章',
  date: '2026-11-01',
  tags: ['招生'],                    // 建议从 招生/活动/知识/通知 中选
  excerpt: '一句话摘要，显示在列表与首页卡片。',
  content: `
    <p>正文段落</p>
    <h2>小标题</h2>
    <ul><li>列表项</li></ul>
  `
}
```

2. 保存即可，列表、首页卡片、详情页自动生成，无需改其他文件。

## 常见内容修改位置

| 想改什么 | 文件 |
|---|---|
| 机构简介、首页文案 | `src/views/HomeView.vue` |
| 课程内容、课时班型 | `src/views/CoursesView.vue` 的 `courses` 数组 |
| 教师介绍 | `src/views/TeachersView.vue` |
| 电话、微信、教学点地址 | `src/views/AboutView.vue` 的 `contacts` / `campuses` 数组 |
| 导航菜单 | `src/components/SiteHeader.vue` 的 `navs` 数组 |
| 主题色 | `src/assets/styles/style.css` 的 `:root` → `--accent` |

## 构建与部署

```bash
npm run build        # 产物在 dist/
```

把 **`dist` 文件夹**上传即可（不是整个项目，node_modules 和 src 都不需要上传）。

| 平台 | 操作 |
|---|---|
| **腾讯 EdgeOne Pages** | 控制台 → EdgeOne → Makers → 直接上传 → 拖入 `dist` 文件夹 |
| **Cloudflare Pages** | Workers 和 Pages → 创建 → 直接上传 → 拖入 `dist` 文件夹 |

> 路由使用 **hash 模式**（地址形如 `/#/courses`），静态托管无需任何 404 重写配置。若改用 history 模式，需要主机支持 SPA 回退。

## 更新上线的完整流程

```bash
git add -A && git commit -m "更新说明" && git push   # ① 备份到 Gitee
npm run build                                        # ② 重新构建 dist/
# ③ 把 dist 文件夹重新上传到 EdgeOne / Cloudflare
```

## 换电脑继续开发（A → B）

项目代码已备份在 Gitee，对话记录保存在你的 WorkBuddy 账号云端，所以换电脑可以继续，无需手动拷贝文件。

**在 A 电脑（切换前）**

```bash
git add -A && git commit -m "切换前备份" && git push   # 确保最新代码已在 Gitee
```

**在 B 电脑**

1. 安装 WorkBuddy，用**同一账号**登录（历史对话会自动出现在云端，可继续）。
2. 安装 Git 与 Node.js 18+。
3. 克隆并安装依赖：

   ```bash
   git clone https://gitee.com/IamPAM/blog.git
   cd blog
   npm install      # 安装依赖（node_modules 不进 Git，需重新装）
   npm run build    # 生成 dist/
   ```

4. 用 WorkBuddy 打开 `blog` 文件夹，识别为 Vue 项目后继续开发。
5. 接续对话：在 WorkBuddy 历史里打开本项目对话，或新建对话说"继续古韵乐坊官网项目"，助手会从云端历史恢复上下文。

**在 B 改完要回到 A（或任意电脑）**

```bash
git add -A && git commit -m "更新说明" && git push
```

然后在另一台电脑 `git pull`（或重新克隆）即可拿到最新代码。

> 原则：**切换电脑前先 `push`，到新电脑先 `pull` / 克隆**。代码以 Gitee 为准，对话以 WorkBuddy 账号云端为准，两者都不用手动拷。
> 注：本项目 `.workbuddy/` 目录已加入 `.gitignore`（含本地记忆与缓存），不随克隆移动；项目关键上下文已写在本 README，历史对话也在云端，不影响接续。