Skip to content

[WIP] Replace index.html with new blog homepage#3

Merged
zlun10 merged 1 commit into
mainfrom
copilot/replace-index-html-with-blog-home
Feb 3, 2026
Merged

[WIP] Replace index.html with new blog homepage#3
zlun10 merged 1 commit into
mainfrom
copilot/replace-index-html-with-blog-home

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 3, 2026 •
edited
Loading

  • Review current index.html (personal introduction page)
  • Replace index.html with new blog homepage design
  • Verify the new HTML file is properly formatted and functional
  • Ensure UTF-8 encoding
  • Validate changes with browser preview if possible
  • Complete task with appropriate PR description
Original prompt

替换仓库根目录的 index.html 为新的博客版主页。

变更说明（任务要点）：

  • 将现有的 index.html 替换为一个博客首页风格的静态 HTML 文件（包含文章列表、侧边栏、搜索、标签过滤、文章阅读面板等交互），保留原有视觉风格与渐变配色并增强响应式。
  • 新的 index.html 内容已准备好（见下方文件块）。
  • 确保新文件默认编码为 UTF-8，文件路径为仓库根目录的 index.html（替换现有文件）。
  • 在 PR 描述中说明这是将个人介绍页面改为博客首页的重构，列出主要改动点和后续建议（例如把文章从内嵌数组迁移到 Markdown 并使用静态站点生成器）。

所要写入的文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>博客 - 我的技术与生活</title>
    <meta name="description" content="嵌入式软件工程师的技术博客，记录学习笔记、项目心得与生活点滴。" />
    <style>
        :root{
            --bg-gradient-1: #667eea;
            --bg-gradient-2: #764ba2;
            --accent: #667eea;
            --muted: #666;
            --card-bg: #fff;
            --soft-bg: #f7f9ff;
            --radius: 12px;
            --max-width: 1100px;
        }

        *{box-sizing:border-box;margin:0;padding:0}
        html,body{height:100%}
        body{
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
            background: linear-gradient(135deg,var(--bg-gradient-1) 0%,var(--bg-gradient-2) 100%);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            padding:40px 20px;
            display:flex;
            justify-content:center;
            align-items:flex-start;
            min-height:100vh;
        }

        .site {
            width:100%;
            max-width:var(--max-width);
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
            border-radius:18px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            overflow:hidden;
            display:grid;
            grid-template-columns: 1fr 320px;
            gap:24px;
            padding:28px;
            animation:fadeIn 0.5s ease;
        }

        @media (max-width: 900px){
            .site{grid-template-columns:1fr; padding:20px}
        }

        @keyframes fadeIn {
            from{opacity:0;transform:translateY(12px)}
            to{opacity:1;transform:none}
        }

        /* Header */
        .masthead{
            grid-column: 1 / -1;
            display:flex;
            align-items:center;
            gap:18px;
            margin-bottom:6px;
        }

        .avatar{
            width:72px;height:72px;border-radius:14px;
            background:linear-gradient(135deg,var(--bg-gradient-1),var(--bg-gradient-2));
            display:flex;align-items:center;justify-content:center;
            color:white;font-size:36px;cursor:pointer;flex:0 0 72px;
            transition:transform .25s ease;
        }
        .avatar:active{transform:scale(.98) rotate(6deg)}

        .site-title{
            display:flex;flex-direction:column;
        }
        .site-title h1{color:#222;font-size:20px;margin-bottom:6px}
        .site-title p{color:var(--muted);font-size:14px}

        .nav{
            margin-left:auto;
            display:flex;
            gap:8px;
            align-items:center;
        }
        .nav button{
            background:transparent;border:1px solid rgba(0,0,0,0.06);
            padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer;
        }
        .nav button.primary{
            background:linear-gradient(135deg,var(--bg-gradient-1),var(--bg-gradient-2));
            color:#fff;border:none;
        }

        /* Main & Sidebar */
        main{
            padding:8px 6px 18px 6px;
        }

        .search-bar{
            display:flex;gap:8px;margin-bottom:18px;
        }
        .search-bar input{
            flex:1;padding:10px 12px;border-radius:10px;border:1px solid #e6e9f2;
            font-size:15px;
        }
        .search-bar button{
            padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#fff;cursor:pointer;
        }

        .posts {
            display:flex;
            flex-direction:column;
            gap:14px;
        }

        .post-card{
            background:var(--card-bg);
            border-radius:var(--radius);
            padding:16px;
            box-shadow: 0 8px 24px rgba(20,20,50,0.05);
            border-left:4px solid var(--accent);
            transition:transform .18s ease, box-shadow .18s ease;
            cursor: pointer;
        }
        .post-card:hover{transform:translateY(-6px);box-shadow: 0 14px 40px rgba(20,20,50,0.08)}
        .post-card h2{font-size:18px;color:#222;margin-bottom:6px}
        .post-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
        .post-excerpt{color:#444;font-size:14px;line-height:1.6}

        .post-tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
        .tag{background:#eef3ff;color:var(--accent);padding:6px 10px;border-radius:999px;font-size:12px;cursor:pointer}

   ...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for you](https://github.com/messi6199/messi6199.github.io/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

@zlun10 zlun10 marked this pull request as ready for review February 3, 2026 13:41
@zlun10 zlun10 merged commit ad11c71 into main Feb 3, 2026
1 check failed
Copilot AI requested a review from zlun10 February 3, 2026 13:41
Copilot stopped work on behalf of zlun10 due to an error February 3, 2026 13:41
The session was cancelled by the user.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@zlun10 zlun10 Awaiting requested review from zlun10

Assignees

@zlun10 zlun10

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@zlun10