修复GitHub Pages配置，将页面内容移至docs/website目录 #10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Build and Release | |
| on: | |
| push: | |
| branches: [ main, master ] | |
| # 在推送标签时也触发 | |
| tags: | |
| - 'v*' # 匹配格式如 v1.0.0 的标签 | |
| # 允许手动触发工作流 | |
| workflow_dispatch: | |
| # 添加权限配置 | |
| permissions: | |
| contents: write | |
| packages: write | |
| pages: write # 添加Pages权限 | |
| id-token: write # 用于Pages部署验证 | |
| # 环境变量设置 | |
| env: | |
| # 指定GitHub Pages的部署环境 | |
| GITHUB_PAGES_ENV: github-pages | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 检出代码 | |
| uses: actions/checkout@v3 | |
| - name: 设置Node.js环境 | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: '18' # 使用Node.js 18 | |
| cache: 'npm' | |
| - name: 修复npm依赖问题 | |
| run: | | |
| rm -rf package-lock.json node_modules | |
| npm install | |
| - name: 设置私钥 | |
| run: node scripts/setup-private-key.js | |
| env: | |
| EXTENSION_PRIVATE_KEY: ${{ secrets.EXTENSION_PRIVATE_KEY }} | |
| - name: 构建扩展 | |
| run: npm run build:extension | |
| - name: 创建ZIP包 | |
| run: npm run build:zip | |
| - name: 创建CRX包 | |
| run: npm run build:crx | |
| - name: 创建发布文件 | |
| run: npm run build:release | |
| - name: 上传构建产物 | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: built-extension | |
| path: | | |
| dist/release/ | |
| dist/zip/ | |
| dist/crx/ | |
| retention-days: 5 | |
| # 构建和部署GitHub Pages | |
| deploy-pages: | |
| needs: build | |
| runs-on: ubuntu-latest | |
| # 确保在主分支推送或手动触发时运行，但不在标签推送时运行 | |
| if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master') || github.event_name == 'workflow_dispatch' | |
| # 使用GitHub Pages环境 | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| steps: | |
| - name: 检出代码 | |
| uses: actions/checkout@v3 | |
| - name: 设置Node.js环境 | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: '18' | |
| cache: 'npm' | |
| - name: 安装依赖 | |
| run: npm install | |
| - name: 下载构建产物 | |
| uses: actions/download-artifact@v4 | |
| with: | |
| name: built-extension | |
| path: temp-artifacts | |
| - name: 更新docs目录中的演示站点内容 | |
| run: | | |
| # 确保docs/website目录存在 | |
| mkdir -p docs/website | |
| mkdir -p docs/website/assets | |
| # 复制最新的扩展文件到演示站点 | |
| cp -r temp-artifacts/release/* docs/website/ | |
| # 为后续可能添加的媒体文件创建目录 | |
| mkdir -p docs/website/assets/images | |
| mkdir -p docs/website/assets/videos | |
| # 创建demo页面 | |
| cat > docs/website/index.html << EOF | |
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pro Color 浏览器扩展演示</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> | |
| <style> | |
| body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding-top: 2rem; } | |
| .hero { background-color: #f8f9fa; padding: 3rem 0; margin-bottom: 2rem; } | |
| .download-btn { margin-top: 1rem; } | |
| .feature-icon { font-size: 2rem; margin-bottom: 1rem; color: #0d6efd; } | |
| .footer { margin-top: 3rem; padding: 2rem 0; background-color: #f8f9fa; } | |
| .version-badge { background-color: #0d6efd; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="hero text-center"> | |
| <h1>Pro Color 浏览器扩展</h1> | |
| <p class="lead">一个专业的浏览器颜色主题管理扩展</p> | |
| <div class="download-btn"> | |
| <a href="pro-color-latest.zip" class="btn btn-primary btn-lg">下载ZIP包</a> | |
| <a href="pro-color-latest.crx" class="btn btn-secondary btn-lg">下载CRX包</a> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4 text-center"> | |
| <div class="feature-icon">🎨</div> | |
| <h3>丰富的主题</h3> | |
| <p>提供多种精心设计的颜色主题，满足不同用户的审美需求</p> | |
| </div> | |
| <div class="col-md-4 text-center"> | |
| <div class="feature-icon">⚡</div> | |
| <h3>快速切换</h3> | |
| <p>一键切换不同的颜色主题，提升浏览体验</p> | |
| </div> | |
| <div class="col-md-4 text-center"> | |
| <div class="feature-icon">🔧</div> | |
| <h3>自定义选项</h3> | |
| <p>允许用户定制自己的颜色方案</p> | |
| </div> | |
| </div> | |
| <div class="row mt-5"> | |
| <div class="col-md-12"> | |
| <h2>使用说明</h2> | |
| <ol> | |
| <li>下载扩展包（CRX或ZIP文件）</li> | |
| <li>在Chrome浏览器中打开扩展管理页面 (chrome://extensions/)</li> | |
| <li>启用开发者模式</li> | |
| <li>将下载的扩展文件拖放到浏览器窗口中安装</li> | |
| <li>点击工具栏中的扩展图标，选择您喜欢的颜色主题</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="footer text-center"> | |
| <p>Pro Color 浏览器扩展 · <span class="version-badge">最新版本</span></p> | |
| <p><a href="https://github.com/cgbin24/pro_color" target="_blank">GitHub 项目</a></p> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |
| EOF | |
| # 创建重定向到最新版本文件的链接 | |
| VERSION=$(cat temp-artifacts/release/version-info.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[", ]//g') | |
| cp temp-artifacts/release/pro-color-v${VERSION}.zip docs/website/pro-color-latest.zip | |
| cp temp-artifacts/release/pro-color-v${VERSION}.crx docs/website/pro-color-latest.crx | |
| # 复制版本信息 | |
| cp temp-artifacts/release/version-info.json docs/website/version.json | |
| # 提交更改到仓库 | |
| git config --global user.name "GitHub Actions Bot" | |
| git config --global user.email "actions@github.com" | |
| git add docs/website/ | |
| git commit -m "更新GitHub Pages演示站点内容" || echo "没有需要提交的更改" | |
| git push origin ${GITHUB_REF_NAME} || echo "推送失败，可能是权限问题" | |
| - name: 设置Pages | |
| uses: actions/configure-pages@v4 | |
| - name: 构建并部署Pages | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: 'docs/website' | |
| - name: 部署到GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v4 | |
| # 只在标签推送时进行发布 | |
| release: | |
| needs: build | |
| if: startsWith(github.ref, 'refs/tags/v') | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 检出代码 | |
| uses: actions/checkout@v3 | |
| with: | |
| fetch-depth: 0 # 获取完整的Git历史记录，用于生成更新日志 | |
| - name: 下载构建产物 | |
| uses: actions/download-artifact@v4 | |
| with: | |
| name: built-extension | |
| path: dist | |
| - name: 获取版本号 | |
| id: get_version | |
| run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT | |
| - name: 创建更新日志 | |
| id: changelog | |
| run: | | |
| VERSION=${{ steps.get_version.outputs.VERSION }} | |
| echo "## Pro Color 浏览器扩展 v${VERSION}" > CHANGELOG.md | |
| echo "" >> CHANGELOG.md | |
| echo "发布日期: $(date +'%Y-%m-%d')" >> CHANGELOG.md | |
| echo "" >> CHANGELOG.md | |
| echo "### 更新内容" >> CHANGELOG.md | |
| echo "" >> CHANGELOG.md | |
| # 如果有上一个标签，显示自上一个标签以来的提交 | |
| PREV_TAG=$(git tag --sort=-v:refname | grep -A 1 "v${VERSION}" | tail -n 1) | |
| if [ ! -z "$PREV_TAG" ] && [ "$PREV_TAG" != "v${VERSION}" ]; then | |
| echo "自 ${PREV_TAG} 以来的更新:" >> CHANGELOG.md | |
| git log ${PREV_TAG}..HEAD --pretty=format:"- %s" --reverse >> CHANGELOG.md | |
| else | |
| echo "- 首次发布" >> CHANGELOG.md | |
| fi | |
| # 将更新日志内容设置为步骤输出 | |
| CHANGELOG=$(cat CHANGELOG.md) | |
| echo "CHANGELOG<<EOF" >> $GITHUB_OUTPUT | |
| echo "$CHANGELOG" >> $GITHUB_OUTPUT | |
| echo "EOF" >> $GITHUB_OUTPUT | |
| - name: 创建GitHub Release | |
| uses: softprops/action-gh-release@v1 | |
| with: | |
| tag_name: ${{ github.ref }} | |
| name: Pro Color v${{ steps.get_version.outputs.VERSION }} | |
| body: ${{ steps.changelog.outputs.CHANGELOG }} | |
| draft: false | |
| prerelease: false | |
| files: | | |
| ./dist/release/pro-color-v${{ steps.get_version.outputs.VERSION }}.zip | |
| ./dist/release/pro-color-v${{ steps.get_version.outputs.VERSION }}.crx | |
| ./dist/release/version-info.json |