-
-
-
+
+ {
+ config.social.map((social) => (
+
+
+
+ ))
+ }
+ {
+ config.rss && (
+
+
+
+ )
+ }
diff --git a/src/components/astro/intro.astro b/src/components/astro/intro.astro
new file mode 100644
index 0000000..f9b02a9
--- /dev/null
+++ b/src/components/astro/intro.astro
@@ -0,0 +1,5 @@
+---
+import { config } from "~/config"
+---
+
+
{config.intro}
diff --git a/src/components/astro/nav.astro b/src/components/astro/nav.astro
new file mode 100644
index 0000000..6f22311
--- /dev/null
+++ b/src/components/astro/nav.astro
@@ -0,0 +1,54 @@
+---
+import { config } from "~/config"
+
+const { home, archive, category, tags, custom, about } = config.navigation
+---
+
+
+ {
+ home && (
+
+ 首页
+
+ )
+ }
+ {
+ archive && (
+
+ 归档
+
+ )
+ }
+ {
+ category && (
+
+ 分类
+
+ )
+ }
+ {
+ tags && (
+
+ 标签
+
+ )
+ }
+ {
+ custom?.map((tab) => (
+
+ {tab.label}
+
+ ))
+ }
+ {
+ about && (
+
+ 关于
+
+ )
+ }
+
diff --git a/src/config.ts b/src/config.ts
index cfa6050..7f25412 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,28 +1,40 @@
-export const site = {
- name: "小孙同学",
- favicon: "/avatar.png",
- title: "小孙同学",
- url: "https://blog.sunguoqi.com",
- slogan: "一个浪漫的理性主义者",
- description:
- "🖥️ 前端小学生(React)｜📸 摄影爱好者(Nikon Zfc)｜🛸 旅行探索家（体验派）｜🚴 骑行蹭风选手（ Java 鱼雷 6-top ）｜🍎 科技产品发烧友（苹果&小米）
✨ 路虽远行则将至，事虽难做则必成。热爱可抵岁月漫长。山高路远，独善其身，看世界，也找自己。希望能成为一个有趣的人～",
-}
+import { Github, Twitter } from "lucide-react"
-export const tabs = [
- // {
- // label: "归档",
- // link: "./archive",
- // },
- // {
- // label: "标签",
- // link: "./tags",
- // },
- {
- label: "影集",
- link: "https://camlife.cn",
+export const config = {
+ meta: {
+ favicon: "",
+ title: "小孙同学",
+ url: "https://blog.sunguoqi.com",
+ slogan: "一个浪漫的理性主义者",
+ description: "读书、摄影、编程、旅行",
},
- {
- label: "关于",
- link: "https://sunguoqi.com",
+ siteName: "小孙同学",
+ social: [
+ {
+ icon: Twitter,
+ label: "X",
+ link: "https://x.com/sun0225SUN",
+ },
+ {
+ icon: Github,
+ label: "GitHub",
+ link: "https://github.com/sun0225SUN",
+ },
+ ],
+ rss: true,
+ navigation: {
+ home: true,
+ archive: true,
+ category: false,
+ tags: false,
+ about: true,
+ custom: [
+ {
+ label: "影集",
+ link: "https://camlife.cn",
+ },
+ ],
},
-]
+ intro: `🖥️ 前端小学生｜📸 摄影爱好者｜🛸 旅行探索家｜🚴 骑行蹭风选手｜🍎 科技产品发烧友`,
+ latestPosts: 8,
+}
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..5b5800a
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,14 @@
+import { defineCollection, z } from "astro:content"
+
+const posts = defineCollection({
+ type: "content",
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.coerce.date(),
+ updatedDate: z.coerce.date().optional(),
+ heroImage: z.string().optional(),
+ }),
+})
+
+export const collections = { posts }
diff --git a/src/content/posts/post-1.md b/src/content/posts/post-1.md
new file mode 100644
index 0000000..fd5de91
--- /dev/null
+++ b/src/content/posts/post-1.md
@@ -0,0 +1,28 @@
+---
+title: "我的第一篇博客文章"
+pubDate: 2024-07-01
+description: "这是我 Astro 博客的第一篇文章。"
+author: "Astro 学习者"
+image:
+ url: "https://docs.astro.build/assets/rose.webp"
+ alt: "The Astro logo on a dark background with a pink glow."
+tags: ["astro", "blogging", "learning in public"]
+---
+
+# 我的第一篇博客文章
+
+发表于：2022-07-01
+
+欢迎来到我学习关于 Astro 的新博客！在这里，我将分享我建立新网站的学习历程。
+
+## 我做了什么
+
+1. **安装 Astro**：首先，我创建了一个新的 Astro 项目并设置好了我的在线账号。
+
+2. **制作页面**：然后我学习了如何通过创建新的 `.astro` 文件并将它们保存在 `src/pages/` 文件夹里来制作页面。
+
+3. **发表博客文章**：这是我的第一篇博客文章！我现在有用 Astro 编写的页面和用 Markdown 写的文章了！
+
+## 下一步计划
+
+我将完成 Astro 教程，然后继续编写更多内容。关注我以获取更多信息。
diff --git a/src/content/posts/post-2.md b/src/content/posts/post-2.md
new file mode 100644
index 0000000..cd2f8b3
--- /dev/null
+++ b/src/content/posts/post-2.md
@@ -0,0 +1,12 @@
+---
+title: 我的第二篇博客文章
+author: Astro 学习者
+description: "学习了一些 Astro 后，我根本停不下来！"
+image:
+ url: "https://docs.astro.build/assets/arc.webp"
+ alt: "The Astro logo on a dark background with a purple gradient arc."
+pubDate: 2024-07-08
+tags: ["astro", "blogging", "learning in public", "successes"]
+---
+
+在学习 Astro 大约一周后，我决定尝试些新的东西。我编写并导入了一个小组件！
diff --git a/src/content/posts/post-3.md b/src/content/posts/post-3.md
new file mode 100644
index 0000000..7fdafd6
--- /dev/null
+++ b/src/content/posts/post-3.md
@@ -0,0 +1,12 @@
+---
+title: 我的第三篇博客文章
+author: Astro 学习者
+description: "我遇到了一些问题，但是在社区里面提问真的很有帮助！"
+image:
+ url: "https://docs.astro.build/assets/rays.webp"
+ alt: "The Astro logo on a dark background with rainbow rays."
+pubDate: 2024-07-15
+tags: ["astro", "learning in public", "setbacks", "community"]
+---
+
+尽管这并不总是一帆风顺，但我很享受使用 Astro 进行搭建。并且，[Discord 社区](https://astro.build/chat)真的很友好而且乐于助人！
diff --git a/src/content/posts/post-4.md b/src/content/posts/post-4.md
new file mode 100644
index 0000000..f07dcb3
--- /dev/null
+++ b/src/content/posts/post-4.md
@@ -0,0 +1,12 @@
+---
+title: "我的第四篇博客文章"
+author: "Astro 学习者"
+description: "这篇文章会自己出现在列表中！"
+image:
+ url: "https://docs.astro.build/default-og-image.png"
+ alt: "The word astro against an illustration of planets and stars."
+pubDate: 2024-08-08
+tags: ["astro", "successes"]
+---
+
+这篇文章应该会与其他的博客文章一起显示，因为 `Astro.glob()` 会返回一个包含所有文章的列表，以创建这个文章列表。
diff --git a/src/content/posts/post-5.md b/src/content/posts/post-5.md
new file mode 100644
index 0000000..a182eec
--- /dev/null
+++ b/src/content/posts/post-5.md
@@ -0,0 +1,29 @@
+---
+title: "探索前端新技术"
+author: "Guoqi Sun"
+description: "记录一下最近学习的一些前端新技术和心得体会"
+image:
+ url: "https://docs.astro.build/assets/rays.webp"
+ alt: "Colorful abstract background"
+pubDate: 2024-08-15
+tags: ["前端", "技术", "学习笔记"]
+---
+
+最近在学习和探索一些前端新技术，感觉收获颇丰。前端技术栈的发展真是日新月异，每天都有新的工具和框架出现。
+
+## 新技术探索
+
+1. Astro 框架
+
+ - 零 JS 优先
+ - 出色的性能表现
+ - 灵活的组件集成
+
+2. Tailwind CSS
+ - 原子化 CSS
+ - 快速开发
+ - 暗黑模式支持
+
+## 学习心得
+
+持续学习是前端工程师的必修课。在技术快速迭代的今天，保持对新技术的热情和学习的动力很重要。同时也要注意技术选型要符合实际需求，不要盲目追求新技术。
diff --git a/src/content/posts/post-6.md b/src/content/posts/post-6.md
new file mode 100644
index 0000000..0f935a8
--- /dev/null
+++ b/src/content/posts/post-6.md
@@ -0,0 +1,42 @@
+---
+title: "我的摄影之旅"
+author: "Guoqi Sun"
+description: "分享一些摄影经验和心得体会"
+image:
+ url: "https://docs.astro.build/assets/arc.webp"
+ alt: "A beautiful landscape photo"
+pubDate: 2024-09-01
+tags: ["摄影", "旅行", "生活"]
+---
+
+作为一个摄影爱好者，总是希望能够用镜头记录下生活中的美好瞬间。今天想和大家分享一些摄影心得。
+
+## 器材选择
+
+虽然说器材不是最重要的，但合适的器材确实能帮助我们更好地表达：
+
+1. 相机选择
+
+ - 轻便为主
+ - 操控要顺手
+ - 画质适中即可
+
+2. 镜头搭配
+ - 35mm 街拍定焦
+ - 85mm 人像利器
+ - 16-35mm 风光广角
+
+## 拍摄技巧
+
+1. 构图要点
+
+ - 三分法则
+ - 引导线条
+ - 框架构图
+
+2. 光线运用
+ - 黄金时间
+ - 顺光逆光
+ - 自然光影
+
+摄影最重要的不是技术，而是发现美的眼睛。希望通过不断练习，能够拍出更多打动人心的照片。
diff --git a/src/content/posts/post-7.md b/src/content/posts/post-7.md
new file mode 100644
index 0000000..7c05b84
--- /dev/null
+++ b/src/content/posts/post-7.md
@@ -0,0 +1,42 @@
+---
+title: "骑行的乐趣"
+author: "Guoqi Sun"
+description: "分享骑行运动的快乐和一些个人经验"
+image:
+ url: "https://docs.astro.build/assets/rose.webp"
+ alt: "A scenic cycling route"
+pubDate: 2024-09-15
+tags: ["骑行", "运动", "生活"]
+---
+
+骑行是一项既能锻炼身体又充满乐趣的运动。今天想和大家分享一下我的骑行经历和心得。
+
+## 装备选择
+
+合适的装备能让骑行更加安全和舒适：
+
+1. 自行车
+
+ - 车架材质：铝合金/碳纤维
+ - 变速系统：禧玛诺套件
+ - 轮胎选择：防扎耐磨
+
+2. 骑行装备
+ - 头盔（安全第一）
+ - 骑行服（速干透气）
+ - 手套和眼镜
+
+## 骑行技巧
+
+1. 基础要点
+
+ - 正确的骑行姿势
+ - 变速时机的把握
+ - 体力分配
+
+2. 安全建议
+ - 路况观察
+ - 夜骑装备
+ - 天气考虑
+
+骑行不仅是一项运动，更是一种生活方式。在路上，你可以感受风的轻抚，欣赏沿途的风景，让身心都得到放松。希望更多的人能够加入骑行的行列，体验这项运动的魅力。
diff --git a/src/content/posts/post-8.md b/src/content/posts/post-8.md
new file mode 100644
index 0000000..c1cd2f1
--- /dev/null
+++ b/src/content/posts/post-8.md
@@ -0,0 +1,53 @@
+---
+title: "科技产品使用体验"
+author: "Guoqi Sun"
+description: "分享一些常用科技产品的使用体验和选购建议"
+image:
+ url: "https://docs.astro.build/assets/arc.webp"
+ alt: "Modern tech devices"
+pubDate: 2024-10-01
+tags: ["科技", "数码", "生活"]
+---
+
+作为一个科技产品爱好者，经常会尝试各种新的数码产品。今天想和大家分享一下我的使用体验。
+
+## 苹果生态
+
+1. iPhone 体验
+
+ - Face ID的便捷
+ - 相机系统的提升
+ - iOS生态的流畅
+
+2. MacBook 使用感受
+ - M系列芯片的性能
+ - 续航能力
+ - 系统集成度
+
+## 小米产品
+
+1. 智能家居
+
+ - 米家自动化
+ - 设备互联
+ - 语音控制
+
+2. 周边配件
+ - 充电设备
+ - 智能手环
+ - 蓝牙耳机
+
+## 选购建议
+
+1. 需求为先
+
+ - 实际使用场景
+ - 预算考虑
+ - 长期价值
+
+2. 生态集成
+ - 设备互通
+ - 数据同步
+ - 使用便利性
+
+科技产品应该服务于生活，而不是成为负担。在选择产品时，要考虑实际需求，不要盲目追求新品。好的产品应该能够提升生活品质，带来便利和愉悦的体验。
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 55427b2..5bf4475 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,6 +1,6 @@
---
import "~/styles/globals.css"
-import { site } from "~/config"
+import { config } from "~/config"
---
@@ -8,10 +8,10 @@ import { site } from "~/config"
-
+
-
{site.title} - {site.slogan}
-
+
{config.meta.title} - {config.meta.slogan}
+
-
-
+
+
diff --git a/src/layouts/home.astro b/src/layouts/home.astro
index dd41fa4..ad6dd5a 100644
--- a/src/layouts/home.astro
+++ b/src/layouts/home.astro
@@ -1,9 +1,13 @@
---
+import Header from "~/components/astro/header.astro"
+import Nav from "~/components/astro/nav.astro"
import BaseLayout from "./base.astro"
---
+
+
diff --git a/src/layouts/post.astro b/src/layouts/post.astro
new file mode 100644
index 0000000..b0b7a29
--- /dev/null
+++ b/src/layouts/post.astro
@@ -0,0 +1,14 @@
+---
+import type { CollectionEntry } from "astro:content"
+import HomeLayout from "~/layouts/home.astro"
+import "~/styles/post.css"
+type Props = CollectionEntry<"posts">["data"]
+
+const { title, description, pubDate, updatedDate } = Astro.props
+---
+
+
+
+
+
+
diff --git a/src/pages/about.md b/src/pages/about.md
new file mode 100644
index 0000000..b06f5bb
--- /dev/null
+++ b/src/pages/about.md
@@ -0,0 +1,56 @@
+---
+layout: ../layouts/post.astro
+title: "关于我"
+description: "前端开发者 | 摄影爱好者 | 骑行爱好者"
+---
+
+# 👋 你好，我是小孙同学
+
+一名热爱技术、热爱生活的前端开发者。喜欢尝试新事物，记录生活点滴。
+
+## 🎯 关于我
+
+- 🖥️ 前端开发者，持续学习各种新技术
+- 📸 摄影爱好者，喜欢用镜头记录美好瞬间
+- 🚴 骑行爱好者，享受风吹过脸庞的感觉
+- 🛸 喜欢旅行，探索世界的每个角落
+- 🍎 科技产品发烧友，特别钟爱苹果生态
+
+## 💻 技术栈
+
+- 前端：HTML, CSS, JavaScript, TypeScript
+- 框架：React, Vue, Astro
+- 工具：Git, Webpack, Vite
+- 其他：Node.js, 响应式设计
+
+## 📸 摄影装备
+
+- 相机：Sony A7M3
+- 镜头：
+ - 35mm f1.8 (风景、街拍)
+ - 85mm f1.8 (人像)
+ - 16-35mm f4 (广角风景)
+
+## 🚲 骑行装备
+
+- 公路车：Specialized Allez
+- 装备：头盔、手套、骑行服
+
+## 📫 联系我
+
+- GitHub: [github.com/sun0225SUN](https://github.com/sun0225SUN)
+- Blog: [sunguoqi.com](https://sunguoqi.com)
+
+## 🎯 未来计划
+
+1. 继续深入学习前端技术
+2. 多写技术博客，分享经验
+3. 参与开源项目
+4. 探索更多有趣的地方
+5. 拍更多好看的照片
+
+---
+
+> 热爱可抵岁月漫长。山高路远，独善其身，看世界，也找自己。
+
+这个博客将记录我在技术、摄影、骑行等方面的心得体会和生活感悟。希望能在这里遇见志同道合的朋友！
diff --git a/src/pages/archive.astro b/src/pages/archive.astro
new file mode 100644
index 0000000..4289a82
--- /dev/null
+++ b/src/pages/archive.astro
@@ -0,0 +1,7 @@
+---
+import HomeLayout from "~/layouts/home.astro"
+---
+
+
+ archive
+
diff --git a/src/pages/category.astro b/src/pages/category.astro
new file mode 100644
index 0000000..41932da
--- /dev/null
+++ b/src/pages/category.astro
@@ -0,0 +1,7 @@
+---
+import HomeLayout from "~/layouts/home.astro"
+---
+
+
+ category
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 10264b3..a535729 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,12 @@
---
+import Blog from "~/components/astro/blog.astro"
import Footer from "~/components/astro/footer.astro"
-import Header from "~/components/astro/header.astro"
-import { Test } from "../components/react/test"
-import HomeLayout from "../layouts/home.astro"
+import Intro from "~/components/astro/intro.astro"
+import HomeLayout from "~/layouts/home.astro"
---
-
-
+
+
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
new file mode 100644
index 0000000..9132ccc
--- /dev/null
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content"
+import Post from "~/layouts/post.astro"
+
+export async function getStaticPaths() {
+ const posts = await getCollection("posts")
+ return posts.map((post: { slug: string; [key: string]: any }) => ({
+ params: { slug: post.slug },
+ props: post,
+ }))
+}
+type Props = CollectionEntry<"posts">
+
+const post = Astro.props
+const { Content } = await post.render()
+---
+
+
+
+
diff --git a/src/pages/tags.astro b/src/pages/tags.astro
new file mode 100644
index 0000000..a7ab0ef
--- /dev/null
+++ b/src/pages/tags.astro
@@ -0,0 +1,7 @@
+---
+import HomeLayout from "~/layouts/home.astro"
+---
+
+
+ tag
+
diff --git a/src/styles/post.css b/src/styles/post.css
new file mode 100644
index 0000000..e3befd8
--- /dev/null
+++ b/src/styles/post.css
@@ -0,0 +1,8 @@
+article code {
+ @apply rounded bg-gray-100 px-1 dark:bg-gray-900;
+}
+
+article code::before,
+article code::after {
+ content: none !important;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..00d0522
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,17 @@
+import type { CollectionEntry } from "astro:content"
+import { getCollection } from "astro:content"
+
+export const formatDate = (date: Date): string => {
+ const year = date.getFullYear()
+ const month = String(date.getMonth() + 1).padStart(2, "0")
+ const day = String(date.getDate()).padStart(2, "0")
+ return `${year}-${month}-${day}`
+}
+
+export const getPosts = async () => {
+ const posts = await getCollection("posts")
+ return posts.sort(
+ (a: CollectionEntry<"posts">, b: CollectionEntry<"posts">) =>
+ b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+ )
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index fc5055a..fe76266 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -5,5 +5,5 @@ export default {
theme: {
extend: {},
},
- plugins: [],
+ plugins: [require("@tailwindcss/typography")],
}