Potato4096.github.io/index.html at main · Potato4096/Potato4096.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Potato的博客</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 可选：引入图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <h1 class="logo"><a href="/">Potato的博客</a></h1>
            <ul class="nav-links">
                <li><a href="#home" class="active">首页</a></li>
                <li><a href="#posts">文章</a></li>
                <li><a href="#about">关于我</a></li>
            </ul>
            <div class="theme-switcher">
                <select id="theme-select">
                    <option value="default">默认主题</option>
                    <option value="dark">暗色主题</option>
                    <option value="blue">蓝色主题</option>
                    <option value="green">绿色主题</option>
                </select>
            </div>
        </div>
    </nav>

    <!-- 首页头部 -->
    <header id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <img src="images/Potato.png" alt="Potato头像" class="avatar">
                <h2>Hi，我是Potato 👋</h2>
                <p>记录生活、分享技术的小角落</p>
            </div>
        </div>
    </header>

    <!-- 文章列表 -->
    <section id="posts" class="posts-section">
        <div class="container">
            <h2 class="section-title">我的文章</h2>
            <div class="posts-list">
                <!-- 文章卡片 -->
                <div class="post-card">
                    <h3 class="post-title"><a href="posts/post1.html">我的第一篇博客</a></h3>
                    <p class="post-date">发布于 2025-12-10</p>
                    <p class="post-excerpt">这是我用GitHub Pages搭建的第一篇静态博客，简单又好用～</p>
                    <a href="posts/post1.html" class="read-more">阅读全文 <i class="fa fa-arrow-right"></i></a>
                </div>
                <!-- 可添加更多文章卡片 -->
            </div>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="about-section">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <p>我是Potato，一个喜欢分享的程序员/爱好者～</p>
                <p>本博客基于纯HTML/CSS/JS搭建，托管在GitHub Pages上，免费且稳定。</p>
                <div class="social-links">
                    <a href="https://github.com/Potato4096" target="_blank"><i class="fa fa-github"></i> GitHub</a>
                    <a href="#" target="_blank"><i class="fa fa-wechat"></i> 微信</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 Potato的博客 | 托管于 <a href="https://pages.github.com/" target="_blank">GitHub Pages</a></p>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="back-to-top"><i class="fa fa-arrow-up"></i></button>

    <script src="js/script.js"></script>
</body>
</html>