增加Html

2025-03-05 15:31:27 +08:00
parent b2fdc882ea
commit 1b2d74008e
3 changed files with 301 additions and 16 deletions
--- a/about.html
+++ b/about.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>蓝莓派</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+    <style>
+        body {
+            padding-top: 20px;
+            padding-bottom: 20px;
+        }
+        .header {
+            border-bottom: 1px solid #e5e5e5;
+            margin-bottom: 20px;
+        }
+        .footer {
+            padding-top: 1px;
+            color: #777;
+            margin-top: 20px;
+            border-top: 1px solid #e5e5e5;
+            text-align: center;
+            font-size: 0.9em;
+        }
+        /* 固定左侧导航栏样式 */
+        .toc {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            width: 200px;  /* 固定宽度，可根据需要调整 */
+            height: calc(100vh - 40px);  /* 高度为视口高度减去上下边距 */
+            overflow-y: auto;
+            border-right: 1px solid #e5e5e5;
+            padding-right: 10px;
+        }
+        .toc a {
+            
+            text-decoration: none;
+            color: #333;
+        }
+        .toc a:hover,
+        .toc a.active {
+            color: #0d6efd;
+            font-weight: bold;
+        }
+
+        /* 主体内容区域预留左侧空间 */
+        .main-content {
+            margin-left: 240px;  /* 固定导航宽度 + 20px 间隙 */
+            padding: 20px;
+        }
+        /* 代码块样式 */
+        pre {
+            background-color: #2d2d2d;
+            color: #ccc;
+            padding: 10px;
+            border-radius: 5px;
+            overflow-x: auto;
+        }
+        /* 响应式调整：小屏幕下隐藏固定导航 */
+        @media (max-width: 768px) {
+            .toc {
+                display: none;
+            }
+            .main-content {
+                margin-left: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 固定左侧导航栏 -->
+        <nav class="toc">
+            <h4>导航</h4>
+            <ul class="list-unstyled">
+                <li><a href="index.html">首页</a></li>
+                <li><a href="https://blueberry.aixiao.me/images/" target="_blank">预编译系统下载</a></li>
+                <li><a href="https://github.com/niuyuling/Blueberry" target="_blank">源码</a></li>
+                <li><a href="about.html">关于作者</a></li>
+            </ul>
+        </nav>
+
+        <!-- 主体内容 -->
+        <main>
+
+            <section>
+                <h2>个人简介</h2>
+                <p>
+                    作者是一名热衷于开源硬件与软件开发的工程师，专注于嵌入式系统、Linux 内核以及物联网应用的研究与实践。凭借多年的开发经验，作者致力于为广大开发者提供实用、开源的技术方案，并积极分享项目经验。
+                </p>
+            </section>
+
+            <section>
+                <h2>联系方式</h2>
+                <p>如果你对作者的工作感兴趣，欢迎通过以下方式与作者取得联系：</p>
+                <ul>
+                    <li>电子邮件：<a href="mailto:aixiao@aixiao.me">aixiao@aixiao.me</a></li>
+                    <li>GitHub：<a href="https://github.com/niuyuling" target="_blank">https://github.com/niuyuling</a></li>
+                    <li>Gitea：<a href="https://git.aixiao.me/" target="_blank">https://git.aixiao.me/</a></li>
+                </ul>
+            </section>
+        </main>
+
+        <!-- 页脚 -->
+        <footer class="footer">
+            <p>Copyright &copy; 2019 - 2025 AIXIAO.ME. All Rights Reserved.</p>
+        </footer>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>