Lambent's Blog

1. Markdown 与 MDX 功能对比#

2. 动态表达式与数据映射#

MDX 支持在文件顶部使用 export const 声明作用域内常量，并在正文中直接求值或映射到模板中：

• Core Framework: Astro 7
• UI Engine: Svelte 5
• Design Tokens: M3E Design Tokens
• Architecture Pattern: Islands Architecture

数组和集合也可以动态渲染为网格布局：

3. M3E Display and Layout Primitives (SSR-Only)#

根据 Shirone 的组件架构（docs/atomic-structure.md），无状态展示组件会输出简洁、易访问的语义化 HTML，且不会附带客户端运行时负载。

4. 反馈与加载指示器#

Shirone 提供完整实现 Material 3 Expressive 动效规范的反馈原子组件：

5. 交互式 Svelte 5 岛屿#

声明为 client:visible 的组件会在进入视口时通过 IntersectionObserver 延迟 hydration：

6. Markdown 扩展兼容性#

Shirone 的 SSOT unified 插件处理流程与所有 Markdown 扩展保持完整兼容：

6.1 GitHub 仓库卡片#

saicaca/fuwari

flowchart TD
    MDX[MDX Source Entry] --> Compiler["@astrojs/mdx Compiler"]
    Compiler --> Plugins["Remark / Rehype SSOT Pipeline"]
    Plugins --> Islands["Svelte 5 Interactive Islands"]
    Islands --> Swup["Swup Client Navigation Shell"]
    Swup --> Screen["M3E Expressive Article View"]

7. 总结#

MDX 的原生集成让技术作者能够构建丰富的交互式文档，同时保留 Shirone 极快的静态性能。所有组件都遵循 Material 3 Expressive 设计令牌体系，确保一致性、无障碍性和视觉协调。