HTML合并请求页面制作技巧详解

GitLab 的 Merge Request 页面本质上是依赖完整后端服务的动态 Web 应用，无法通过手写静态 HTML 实现；真正可行的方案是调用 GitLab 官方 API（如 `GET /projects/:id/merge_requests/:mr_iid`）获取实时、结构化的 MR 数据，再结合轻量前端模板（如原生 JavaScript + template literals）安全、准确地渲染精简视图——聚焦真实数据、有效链接和准确状态，而非徒劳模仿 UI 细节，这才是嵌入摘要卡片、生成本地报告或构建 CI/CD 看板的高效务实之道。

GitLab 的 Merge Request 页面不是用 HTML “制作”出来的

你没法靠手写一个 index.html 就“做出” GitLab 的 MR 页面——它本质是 GitLab 服务端动态渲染的 Web 应用，依赖完整的 Rails 后端、数据库、权限系统和前端 JS 框架（如 Vue）。直接套用静态 HTML 模拟 MR 页面，连基础交互（如评论折叠、diff 展开、批准按钮状态）都跑不起来。

如果你实际需要的是：

• 在内部工具或文档中嵌入 MR 的精简视图（比如只展示标题、状态、链接）
• 用脚本自动拉取 MR 数据并生成本地报告页
• 为 CI/CD 看板做一个轻量 MR 摘要面板

那真正可行的路径是调用 GitLab API + 渲染前端模板，而不是“写 HTML 页面”。

GET /projects/:id/merge_requests/:mr_iid 是获取 MR 详情的核心 API

GitLab 提供了标准 REST 接口来读取 MR 元数据。你需要：

• 一个有 read_api 权限的 Personal Access Token（建议 scope 仅设 read_api）
• 项目 ID（可以是 namespace/project-name 或数字 ID）
• MR 的 iid（不是全局 ID，是该项目内自增编号，例如 !42 中的 42）

请求示例：

curl --header "PRIVATE-TOKEN: glpat-xxx" \
  "https://gitlab.example.com/api/v4/projects/mygroup%2Fmyrepo/merge_requests/42"

返回 JSON 包含 title、state、created_at、author、assignees、web_url、changes_count 等字段。注意：diffs 默认不返回，需加 ?include_detailed_diff=true 参数（且受行数限制）。

用 fetch + template literals 渲染简易 MR 卡片最实用

不需要框架，纯前端就能做个可点击、带状态色块的 MR 摘要卡片。关键点：

• 状态映射要准确：opened → ✅绿色，merged → ⚪灰色，closed → ❌红色
• web_url 必须保留，否则用户点不了；不要试图自己拼 URL
• 作者头像用 author.avatar_url，但注意跨域策略（GitLab 通常允许 CORS）
• 避免直接渲染 description 的原始 Markdown——可能含 XSS 风险，至少做 textContent 赋值或用 DOMPurify

片段示意：

const renderMRCard = (mr) => {
  const statusColor = { opened: 'bg-green-100 text-green-800', merged: 'bg-gray-100 text-gray-800', closed: 'bg-red-100 text-red-800' }[mr.state];
  return `
    

      
${mr.title}
      

        ${mr.state}
        by ${mr.author.name}
      
    
  `;
};

别忽略 per_page 和 page 分页参数，MR 列表容易漏数据

如果你要批量拉取 MR（比如看最近 100 个），API 默认只返回 20 条。必须显式传参：

• ?per_page=100&page=1 —— 获取第一页 100 条
• 检查响应头 X-Total-Pages 和 X-Total，决定是否继续翻页
• 频繁请求会触发速率限制（默认 10 req/sec），加 sleep(100) 避免被封

遗漏分页是本地脚本查不到“老 MR”的最常见原因——你以为接口只返回最近几条，其实是没翻页。

MR 页面的“真实感”不在 HTML 结构多像，而在数据是否实时、链接是否有效、状态是否准确。把 API 调通、错误处理写实、URL 不硬编码，比花时间对齐 GitLab 的 CSS 类名重要得多。

到这里，我们也就讲完了《HTML合并请求页面制作技巧详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于html的知识点！