欢迎来到 AstroBlog 🚀

这是一篇用于全面测试 Markdown 语法排版、Shiki 代码高亮、Tailwind Typography (.prose) 样式以及双链支持的测试文章。

1. 标题测试 (Headings)

我们支持从 H1 到 H6 的所有层级标题排版：

一级标题 (H1)

二级标题 (H2)

三级标题 (H3)

四级标题 (H4)

五级标题 (H5)

六级标题 (H6)

2. 文本格式 (Text Formatting)

各种行内文本样式测试：

• 粗体文本 (Bold)：使用双星号 **粗体**
• 斜体文本 (Italic)：使用单星号 *斜体*
• 粗斜体 (Bold & Italic)：使用三星号 ***粗斜体***
• 删除线 (Strikethrough)：使用双波浪线 ~~删除线~~
• 行内代码 (Inline Code)：使用反引号 `行内代码`
• 外部链接 (Link)：带悬浮过渡动画的链接样式。
• 加粗行内代码混合：测试嵌套渲染样式。

3. 引用板块 (Blockquotes)

引言与段落引用排版测试：

这是一个标准的引用区块。它具有侧边装饰线和稍微淡化的字体颜色，非常适合引用他人的话或者经典语录。

引用也可以进行多层嵌套。这是第二层引用的效果。 —— 嵌套引用出处

4. 列表与任务清单 (Lists)

无序列表

• 极速的 Astro 6.x 渲染引擎
• 精准的 TailwindCSS 4 样式方案
• 支持以下多款前端框架的水合：
  • React 19 (动态组件)
  • Vue 3.5 (富交互界面)

有序列表

1. 第一步：在本地拉取或编写 Markdown 文章。
2. 第二步：在 Obsidian 双链工作流中维护关联。
3. 第三步：触发自动化 CI/CD 构建静态页面。

任务列表 (Task Lists)

• 完成 AstroBlog 脚手架搭建
• 重构全局样式为 SCSS 嵌套规范
• 接入 Obsidian 自动同步插件

5. 代码块高亮与复制 (Code Blocks)

下面展示了不同编程语言在 Shiki 双主题（亮色/暗色模式）下的语法高亮，并且每个代码块右上角都会自动附带垂直居中、带悬浮动画的 Copy 复制按钮：

JavaScript (ES6+)

// 测试一个现代 JS 类和异步函数的高亮
class AstroBlog {
    constructor(theme = "Minimal") {
        this.theme = theme;
        this.status = "active";
    }

    async renderPage(slug) {
        const response = await fetch(`/api/post/${slug}`);
        const data = await response.json();
        console.log(`Rendering ${data.title} using ${this.theme}...`);
        return data.content;
    }
}

const blog = new AstroBlog();
blog.renderPage("hello-astroblog");

CSS / SCSS (Style Layers)

/* 测试 SCSS 嵌套高亮 */
.prose {
    h2 {
        color: var(--color-brand-primary);
        font-weight: 800;

        span.anchor {
            opacity: 0;
            transition: opacity 0.2s ease-in-out;

            &:hover {
                opacity: 1;
            }
        }
    }
}

6. 表格排版 (Tables)

表格样式包括对齐、表头和斑马纹对比度：

7. Obsidian 双链接测试 (Wiki Links)

通过 Remark 插件，本站原生支持 Obsidian 风格的内部双向链接：

• 链接到已有文章：MacBook小技巧
• 链接并指定显示别名：点此查看Mac常用窍门
• 链接到尚未创建的文章（显示为灰色/失效状态）：不存在的文章链接

8. 图片展示 (Images)

这是一张来自本站静态资源的图片展示，支持响应式圆角和阴影排版：

(上面是 favicon.svg 图标的展示样例)