Commit 4f0148d

@@ -11,7 +11,8 @@ Here is an example of a Markdown blog post.
 # Heading Level 1
 
 You can use GitHub Flavored Markdown to format your blog posts. For example, you can use **bold**, _italic_ and ~~strikethrough~~ text, create a [link](https://example.com) or just write a raw URL like https://example.com, and add images:
-![Example Image](https://example.com/image.jpg)
+
+![Example Image](../../assets/img/avatar.jpg)
 
 common Markdown features like:
 
@@ -56,10 +57,27 @@ And tables:
 | A looooooooooong row | A looooooooooong row |
 | A very loooooooooooooooooooooooooooooooooooooooooooooooooong row | |
 
-You can also add footnotes[^1] or [reference links][1] .
+You can also add footnotes[^1] or [reference links][1].
 
 [^1]: This is a footnote.
 
 [1]: https://example.com
 
+[GitHub blockquote alerts](https://github.com/orgs/community/discussions/16925) is also supported:
+
+> [!NOTE]
+> This is a note.
+
+> [!TIP]
+> This is a tip.
+
+> [!IMPORTANT]
+> This is important.
+
+> [!WARNING]
+> This is a warning.
+
+> [!CAUTION]
+> This is a caution.
+
 And that's it!

@@ -208,7 +208,58 @@ article {
   blockquote {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
-    @apply rounded-sm border-l-4 border-primary bg-primary/10;
+    @apply my-2 rounded-sm border-l-4 border-primary bg-primary/10;
+  }
+
+  // GitHub Alert 样式
+  .admonition {
+    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+
+    @apply my-4 rounded-sm border-l-4;
+
+    .admonition-title {
+      font-weight: bold;
+    }
+
+    &-note {
+      @apply border-info bg-info/10;
+
+      .admonition-title {
+        @apply text-info;
+      }
+    }
+
+    &-tip {
+      @apply border-success bg-success/10;
+
+      .admonition-title {
+        @apply text-success;
+      }
+    }
+
+    &-important {
+      @apply border-accent bg-accent/10;
+
+      .admonition-title {
+        @apply text-accent;
+      }
+    }
+
+    &-warning {
+      @apply border-warning bg-warning/10;
+
+      .admonition-title {
+        @apply text-warning;
+      }
+    }
+
+    &-caution {
+      @apply border-error bg-error/10;
+
+      .admonition-title {
+        @apply text-error;
+      }
+    }
   }
 
   // 折叠块样式

@@ -7,6 +7,7 @@ import icon from 'astro-icon';
 import pagefind from 'astro-pagefind';
 import { defineConfig } from 'astro/config';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import remarkGithubBlockQuote from 'remark-github-beta-blockquote-admonitions';
 
 // https://astro.build/config
 export default defineConfig({
@@ -28,7 +29,20 @@ export default defineConfig({
       },
       defaultColor: false,
     },
-    remarkPlugins: [remarkReadingTime],
+    remarkPlugins: [
+      remarkReadingTime,
+      // @ts-expect-error - types are not up to date
+      [
+        remarkGithubBlockQuote,
+        {
+          classNameMaps: {
+            block: (/** @type {string} */ title) =>
+              `admonition admonition-${title.toLowerCase()}`,
+            title: 'admonition-title',
+          },
+        },
+      ],
+    ],
     rehypePlugins: [
       rehypeHeadingIds,
       [

@@ -29,6 +29,7 @@
     "postcss-load-config": "^6.0.1",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
+    "remark-github-beta-blockquote-admonitions": "^3.1.1",
     "sass": "^1.84.0",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.17",