Initial commit: 个人博客网站模板

2026-09-27 18:36:11 +08:00
commit 7fdfb7c738
2 changed files with 80 additions and 0 deletions
@@ -0,0 +1,22 @@
+# Blog Template
+
+响应式个人博客网站模板，简洁优雅的设计风格。
+
+## 特点
+
+- 🎨 简洁优雅的设计
+- 📱 响应式布局，适配移动端
+- 🚀 纯静态页面，无需后端
+- 🎯 易于自定义
+
+## 使用方式
+
+直接用浏览器打开 `index.html` 即可预览。
+
+修改 `index.html` 中的文章内容即可发布自己的博客。
+
+## 自定义
+
+- 修改 `<header>` 中的博客名称和描述
+- 在 `<div class="post">` 中添加或修改文章
+- 调整 CSS 变量来改变配色方案
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>我的博客</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:system-ui,sans-serif;background:#f8f9fa;color:#333;line-height:1.6}
+header{background:#1e2227;color:#c4c7cb;padding:20px 0;text-align:center}
+header h1{font-size:1.8em;color:#fff}
+header p{color:#6c727a;margin-top:4px}
+nav{background:#fff;border-bottom:1px solid #e5e5e5;padding:12px 0;text-align:center}
+nav a{color:#41873f;text-decoration:none;margin:0 16px;font-weight:500}
+nav a:hover{text-decoration:underline}
+.container{max-width:800px;margin:0 auto;padding:30px 20px}
+.post{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:24px;margin-bottom:20px}
+.post h2{font-size:1.3em;margin-bottom:8px}
+.post h2 a{color:#333;text-decoration:none}
+.post h2 a:hover{color:#41873f}
+.post .meta{color:#999;font-size:.85em;margin-bottom:12px}
+.post p{color:#555}
+footer{text-align:center;padding:30px;color:#999;font-size:.85em}
+</style>
+</head>
+<body>
+<header>
+<h1>📝 我的博客</h1>
+<p>记录思考，分享知识</p>
+</header>
+<nav>
+<a href="#">首页</a>
+<a href="#">归档</a>
+<a href="#">关于</a>
+<a href="#">RSS</a>
+</nav>
+<div class="container">
+<div class="post">
+<h2><a href="#">使用 AI Code Factory 自动生成项目</a></h2>
+<div class="meta">2026-09-27 · 技术 · 5 分钟阅读</div>
+<p>AI Code Factory 是一个创新的平台，只需描述需求，AI 就能自动生成完整的项目代码并推送到代码仓库。本文将介绍如何使用这个强大的工具来提升开发效率。</p>
+</div>
+<div class="post">
+<h2><a href="#">为什么每个开发者都应该有自己的博客</a></h2>
+<div class="meta">2026-09-20 · 随笔 · 3 分钟阅读</div>
+<p>在信息爆炸的时代，拥有一个独立博客不仅是展示技术能力的窗口，更是整理思路、沉淀知识的最佳方式。本文分享我对技术写作的一些思考。</p>
+</div>
+<div class="post">
+<h2><a href="#">Hello World：我的第一篇文章</a></h2>
+<div class="meta">2026-09-15 · 随笔 · 2 分钟阅读</div>
+<p>欢迎来到我的博客！这里将记录我在编程、技术和生活中的所见所思。希望这些内容能对你有所帮助。</p>
+</div>
+</div>
+<footer>
+<p>© 2026 我的博客 · Powered by AI Code Factory</p>
+</footer>
+</body>
+</html>