diff --git a/src/components/ScrollToTop.vue b/src/components/ScrollToTop.vue
new file mode 100644
index 0000000..c2b2256
--- /dev/null
+++ b/src/components/ScrollToTop.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/src/content/blog/note/post-1.md b/src/content/blog/note/post-1.md
new file mode 100644
index 0000000..6f26b24
--- /dev/null
+++ b/src/content/blog/note/post-1.md
@@ -0,0 +1,7 @@
+---
+title: Note Name
+duration: 5min
+date: 2022-12-01
+---
+
+Writing...
diff --git a/src/content/blog/note/post-2.md b/src/content/blog/note/post-2.md
new file mode 100644
index 0000000..17b4696
--- /dev/null
+++ b/src/content/blog/note/post-2.md
@@ -0,0 +1,7 @@
+---
+title: Note Name
+duration: 5min
+date: 2018-01-01
+---
+
+Writing...
diff --git a/src/content/blog/note/post-3.md b/src/content/blog/note/post-3.md
new file mode 100644
index 0000000..9916de2
--- /dev/null
+++ b/src/content/blog/note/post-3.md
@@ -0,0 +1,7 @@
+---
+title: Note Name
+duration: 5min
+date: 2022-02-01
+---
+
+Writing...
diff --git a/src/content/blog/note/post-4.md b/src/content/blog/note/post-4.md
new file mode 100644
index 0000000..f5c6e81
--- /dev/null
+++ b/src/content/blog/note/post-4.md
@@ -0,0 +1,7 @@
+---
+title: Note Name
+duration: 5min
+date: 2024-03-01
+---
+
+Writing...
diff --git a/src/content/blog/post-1.md b/src/content/blog/post-1.md
new file mode 100644
index 0000000..b7e5647
--- /dev/null
+++ b/src/content/blog/post-1.md
@@ -0,0 +1,7 @@
+---
+title: Blog Name
+description: Your blog description, which is long text, can be an introduction to the post or a paragraph of the post.
+date: 2024-05-01
+---
+
+Writing...
diff --git a/src/content/blog/post-2.md b/src/content/blog/post-2.md
new file mode 100644
index 0000000..c8df847
--- /dev/null
+++ b/src/content/blog/post-2.md
@@ -0,0 +1,8 @@
+---
+title: Blog Name
+description: If you set the lang field to include zh, it will display an identifier.
+date: 2024-04-01
+lang: zh
+---
+
+Writing...
diff --git a/src/content/blog/post-3.md b/src/content/blog/post-3.md
new file mode 100644
index 0000000..f415db8
--- /dev/null
+++ b/src/content/blog/post-3.md
@@ -0,0 +1,8 @@
+---
+title: Blog Name
+description: A tag field is provided, which can be used to display custom information.
+date: 2024-03-01
+tag: Tag Text
+---
+
+Writing...
diff --git a/src/content/blog/post-4.md b/src/content/blog/post-4.md
new file mode 100644
index 0000000..df91822
--- /dev/null
+++ b/src/content/blog/post-4.md
@@ -0,0 +1,6 @@
+---
+title: Blog Name
+description: If you need to link to an external address, you can set the redirect field.
+date: 2024-02-01
+redirect: '/'
+---
diff --git a/src/content/blog/post-5.md b/src/content/blog/post-5.md
new file mode 100644
index 0000000..bc391b0
--- /dev/null
+++ b/src/content/blog/post-5.md
@@ -0,0 +1,6 @@
+---
+title: Blog Name
+description: If you want to tell the visitor that there is a video, you can set the video field to true.
+date: 2024-02-01
+video: true
+---
diff --git a/src/content/blog/post-6.md b/src/content/blog/post-6.md
new file mode 100644
index 0000000..a739d34
--- /dev/null
+++ b/src/content/blog/post-6.md
@@ -0,0 +1,5 @@
+---
+title: Blog Name
+description: Vitesse theme groups posts by year and displays them sorted by date.
+date: 2023-08-01
+---
diff --git a/src/content/blog/post-7.md b/src/content/blog/post-7.md
new file mode 100644
index 0000000..89a5d42
--- /dev/null
+++ b/src/content/blog/post-7.md
@@ -0,0 +1,6 @@
+---
+title: Blog Name
+description: You can set a duration to tell the viewer how long it will take to watch it。
+duration: 20min
+date: 2023-05-01
+---
diff --git a/src/content/blog/post-8.md b/src/content/blog/post-8.md
new file mode 100644
index 0000000..65fbed6
--- /dev/null
+++ b/src/content/blog/post-8.md
@@ -0,0 +1,5 @@
+---
+title: Blog Name
+description: The date and title fields are required.
+date: 2022-11-01
+---
diff --git a/src/content/pages/page-1.md b/src/content/pages/page-1.md
new file mode 100644
index 0000000..340a51d
--- /dev/null
+++ b/src/content/pages/page-1.md
@@ -0,0 +1,6 @@
+---
+title: Sponsor
+description: How to sponsor for me.
+---
+
+Writing...
diff --git a/src/content/pages/page-2.md b/src/content/pages/page-2.md
new file mode 100644
index 0000000..340a51d
--- /dev/null
+++ b/src/content/pages/page-2.md
@@ -0,0 +1,6 @@
+---
+title: Sponsor
+description: How to sponsor for me.
+---
+
+Writing...
diff --git a/src/pages/blog/[...path].astro b/src/pages/blog/[...path].astro
new file mode 100644
index 0000000..238c63b
--- /dev/null
+++ b/src/pages/blog/[...path].astro
@@ -0,0 +1,49 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import ListPosts from '@/components/ListPosts.vue'
+import { getPosts } from '@/utils/posts'
+import siteConfig from '@/site-config'
+import { uniqBy } from 'lodash-es'
+
+export async function getStaticPaths() {
+ const blogEntries = await getPosts()
+ return uniqBy(
+ blogEntries.map((entry) => {
+ return {
+ params: {
+ path: entry.slug.includes('/')
+ ? entry.slug.split('/').shift()
+ : undefined,
+ },
+ }
+ }),
+ 'params.path',
+ )
+}
+
+const { path } = Astro.params
+
+const posts = await getPosts(path)
+---
+
+
+