Skip to content

Commit 95bb899

Browse files
cgbin24cgbin24
committed
修复GitHub Pages配置，将页面内容移至docs/website目录
1 parent 503a9ca commit 95bb899

File tree

5 files changed

+184
-52
lines changed

5 files changed

+184
-52
lines changed

‎.github/workflows/build-and-release.yml‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -99,19 +99,21 @@ jobs:
9999
name: built-extension
100100
path: temp-artifacts
101101

102-
- name: 设置Pages
103-
uses: actions/configure-pages@v4
104-
105-
- name: 构建演示网站
102+
- name: 更新docs目录中的演示站点内容
106103
run: |
107-
# 创建pages目录
108-
mkdir -p pages
104+
# 确保docs/website目录存在
105+
mkdir -p docs/website
106+
mkdir -p docs/website/assets
109107
110108
# 复制最新的扩展文件到演示站点
111-
cp -r temp-artifacts/release/* pages/
109+
cp -r temp-artifacts/release/* docs/website/
110+
111+
# 为后续可能添加的媒体文件创建目录
112+
mkdir -p docs/website/assets/images
113+
mkdir -p docs/website/assets/videos
112114
113115
# 创建demo页面
114-
cat > pages/index.html << EOF
116+
cat > docs/website/index.html << EOF
115117
<!DOCTYPE html>
116118
<html lang="zh-CN">
117119
<head>
@@ -182,32 +184,26 @@ jobs:
182184
183185
# 创建重定向到最新版本文件的链接
184186
VERSION=$(cat temp-artifacts/release/version-info.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[", ]//g')
185-
cp temp-artifacts/release/pro-color-v${VERSION}.zip pages/pro-color-latest.zip
186-
cp temp-artifacts/release/pro-color-v${VERSION}.crx pages/pro-color-latest.crx
187+
cp temp-artifacts/release/pro-color-v${VERSION}.zip docs/website/pro-color-latest.zip
188+
cp temp-artifacts/release/pro-color-v${VERSION}.crx docs/website/pro-color-latest.crx
187189
188190
# 复制版本信息
189-
cp temp-artifacts/release/version-info.json pages/version.json
190-
191-
# 创建README文件用于GitHub Pages
192-
cat > pages/README.md << EOF
193-
# Pro Color 浏览器扩展
194-
195-
这是Pro Color浏览器扩展的演示网站。您可以在这里下载最新版本的扩展，并了解其使用方法。
196-
197-
## 链接
191+
cp temp-artifacts/release/version-info.json docs/website/version.json
198192
199-
- [主页](https://cgbin24.github.io/pro_color/)
200-
- [GitHub仓库](https://github.com/cgbin24/pro_color)
201-
202-
## 最新版本
203-
204-
当前版本: v${VERSION}
205-
EOF
193+
# 提交更改到仓库
194+
git config --global user.name "GitHub Actions Bot"
195+
git config --global user.email "actions@github.com"
196+
git add docs/website/
197+
git commit -m "更新GitHub Pages演示站点内容" || echo "没有需要提交的更改"
198+
git push origin ${GITHUB_REF_NAME} || echo "推送失败，可能是权限问题"
206199
207-
- name: 上传GitHub Pages构建产物
200+
- name: 设置Pages
201+
uses: actions/configure-pages@v4
202+
203+
- name: 构建并部署Pages
208204
uses: actions/upload-pages-artifact@v3
209205
with:
210-
path: 'pages'
206+
path: 'docs/website'
211207

212208
- name: 部署到GitHub Pages
213209
id: deployment

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,4 +179,4 @@ https://cgbin24.github.io/pro_color/
179179
- 查看使用说明
180180
- 下载最新版本的扩展包（ZIP和CRX格式）
181181

182-
演示站点由 GitHub Pages 提供支持，每次推送到主分支后自动更新。更多关于演示站点的信息，请参阅 [GitHub Pages 部署说明](docs/github-pages.md)。
182+
演示站点内容位于 `docs/website` 目录中，由 GitHub Pages 提供支持，每次推送到主分支后自动更新。更多关于演示站点的信息，请参阅 [GitHub Pages 部署说明](docs/github-pages.md)。

‎docs/github-pages.md‎

Lines changed: 60 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,36 @@
22

33
Pro Color 浏览器扩展使用 GitHub Pages 提供在线演示网站，展示扩展的功能和使用方法。
44

5+
## 目录结构
6+
7+
GitHub Pages 内容存放在 `docs/website` 目录中，这种结构有以下优势：
8+
- 与文档内容分离，便于管理
9+
- 支持添加媒体文件如图片和视频
10+
- 便于本地测试和开发
11+
12+
目录结构如下：
13+
14+
```
15+
docs/
16+
├── website/ # GitHub Pages 网站根目录
17+
│ ├── index.html # 主页面
18+
│ ├── assets/ # 资源文件目录
19+
│ │ ├── images/ # 图片资源
20+
│ │ └── videos/ # 视频资源
21+
│ ├── pro-color-latest.zip # 最新版本的ZIP包
22+
│ ├── pro-color-latest.crx # 最新版本的CRX包
23+
│ └── version.json # 版本信息
24+
└── github-pages.md # 本文档（部署说明）
25+
```
26+
527
## 自动部署流程
628

729
每当代码推送到 `main` 或 `master` 分支时，GitHub Actions 工作流程会自动执行以下步骤：
830

931
1. 构建浏览器扩展
10-
2. 创建演示网站
11-
3. 部署到 GitHub Pages
32+
2. 更新 `docs/website` 目录中的演示站点内容
33+
3. 将更改提交到仓库
34+
4. 部署到 GitHub Pages
1235

1336
## 访问演示网站
1437

@@ -27,19 +50,6 @@ https://cgbin24.github.io/pro_color/
2750
- 最新版本下载链接（ZIP和CRX格式）
2851
- 版本信息
2952

30-
## 文件结构
31-
32-
GitHub Pages 部署的文件结构如下：
33-
34-
```
35-
/
36-
├── index.html # 主页面
37-
├── pro-color-latest.zip # 最新版本的ZIP包
38-
├── pro-color-latest.crx # 最新版本的CRX包
39-
├── version.json # 版本信息
40-
└── README.md # 仓库说明
41-
```
42-
4353
## 手动触发部署
4454

4555
除了自动部署外，还可以通过 GitHub Actions 页面手动触发工作流程部署：
@@ -59,19 +69,46 @@ GitHub Pages 部署的文件结构如下：
5969
git clone https://github.com/cgbin24/pro_color.git
6070
cd pro_color
6171

62-
# 安装依赖
63-
npm install
64-
65-
# 构建扩展
66-
npm run build:extension
67-
6872
# 在本地启动测试服务器
69-
cd dist/source
73+
cd docs/website
7074
npx http-server
7175
```
7276

7377
然后在浏览器中访问 `http://localhost:8080` 查看效果。
7478

79+
## 添加媒体文件
80+
81+
如需添加图片或视频等媒体文件：
82+
83+
1. 将图片文件放在 `docs/website/assets/images/` 目录下
84+
2. 将视频文件放在 `docs/website/assets/videos/` 目录下
85+
3. 在HTML中通过相对路径引用：
86+
```html
87+
<!-- 图片示例 -->
88+
<img src="assets/images/screenshot.png" alt="截图">
89+
90+
<!-- 视频示例 -->
91+
<video controls>
92+
<source src="assets/videos/demo.mp4" type="video/mp4">
93+
您的浏览器不支持视频标签
94+
</video>
95+
```
96+
7597
## 自定义演示网站
7698

77-
如需修改演示网站的内容或样式，请编辑 `.github/workflows/build-and-release.yml` 文件中的 `构建演示网站` 步骤。
99+
如需修改演示网站的内容或样式：
100+
101+
1. 直接编辑 `docs/website/` 目录中的文件
102+
2. 或修改 `.github/workflows/build-and-release.yml` 文件中的 `更新docs目录中的演示站点内容` 步骤
103+
104+
## 重要配置
105+
106+
为了正确部署GitHub Pages，您需要在仓库设置中进行以下配置：
107+
108+
1. 在GitHub仓库页面，点击 `Settings` 标签
109+
2. 在左侧导航栏中，点击 `Pages`
110+
3. 在 `Build and deployment` 部分，配置如下：
111+
- Source: 选择 `GitHub Actions`
112+
- 不要选择任何分支，因为我们使用Actions来部署
113+
114+
如果您的GitHub Pages部署失败，请检查以上配置是否正确。

‎docs/website/assets/images/screenshot-placeholder.png‎

Loading

‎docs/website/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pro Color 浏览器扩展演示</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8+
<style>
9+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding-top: 2rem; }
10+
.hero { background-color: #f8f9fa; padding: 3rem 0; margin-bottom: 2rem; }
11+
.download-btn { margin-top: 1rem; }
12+
.feature-icon { font-size: 2rem; margin-bottom: 1rem; color: #0d6efd; }
13+
.footer { margin-top: 3rem; padding: 2rem 0; background-color: #f8f9fa; }
14+
.version-badge { background-color: #0d6efd; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
15+
</style>
16+
</head>
17+
<body>
18+
<div class="container">
19+
<div class="hero text-center">
20+
<h1>Pro Color 浏览器扩展</h1>
21+
<p class="lead">一个专业的浏览器颜色主题管理扩展</p>
22+
<div class="download-btn">
23+
<a href="pro-color-latest.zip" class="btn btn-primary btn-lg">下载ZIP包</a>
24+
<a href="pro-color-latest.crx" class="btn btn-secondary btn-lg">下载CRX包</a>
25+
</div>
26+
</div>
27+
28+
<div class="row">
29+
<div class="col-md-4 text-center">
30+
<div class="feature-icon">🎨</div>
31+
<h3>丰富的主题</h3>
32+
<p>提供多种精心设计的颜色主题，满足不同用户的审美需求</p>
33+
</div>
34+
<div class="col-md-4 text-center">
35+
<div class="feature-icon">⚡</div>
36+
<h3>快速切换</h3>
37+
<p>一键切换不同的颜色主题，提升浏览体验</p>
38+
</div>
39+
<div class="col-md-4 text-center">
40+
<div class="feature-icon">🔧</div>
41+
<h3>自定义选项</h3>
42+
<p>允许用户定制自己的颜色方案</p>
43+
</div>
44+
</div>
45+
46+
<div class="row mt-5">
47+
<div class="col-md-12">
48+
<h2>使用说明</h2>
49+
<ol>
50+
<li>下载扩展包（CRX或ZIP文件）</li>
51+
<li>在Chrome浏览器中打开扩展管理页面 (chrome://extensions/)</li>
52+
<li>启用开发者模式</li>
53+
<li>将下载的扩展文件拖放到浏览器窗口中安装</li>
54+
<li>点击工具栏中的扩展图标，选择您喜欢的颜色主题</li>
55+
</ol>
56+
</div>
57+
</div>
58+
59+
<div class="row mt-4">
60+
<div class="col-md-12">
61+
<h2>媒体资源</h2>
62+
<p>以下是 Pro Color 浏览器扩展的使用截图：</p>
63+
<div class="row">
64+
<div class="col-md-6 mb-3">
65+
<div class="card">
66+
<div class="card-body">
67+
<h5 class="card-title">功能截图 1</h5>
68+
<p class="card-text">演示扩展的主题设置功能</p>
69+
<div class="text-center">
70+
<img src="assets/images/screenshot-placeholder.png" class="img-fluid" alt="功能截图">
71+
<p class="text-muted mt-2">（实际图片将在后续更新）</p>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
<div class="col-md-6 mb-3">
77+
<div class="card">
78+
<div class="card-body">
79+
<h5 class="card-title">功能截图 2</h5>
80+
<p class="card-text">演示扩展的自定义配置功能</p>
81+
<div class="text-center">
82+
<img src="assets/images/screenshot-placeholder.png" class="img-fluid" alt="功能截图">
83+
<p class="text-muted mt-2">（实际图片将在后续更新）</p>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="footer text-center">
93+
<p>Pro Color 浏览器扩展 · <span class="version-badge">最新版本</span></p>
94+
<p><a href="https://github.com/cgbin24/pro_color" target="_blank">GitHub 项目</a></p>
95+
</div>
96+
</div>
97+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)