Shirone × Znfooe

1. Markdown 与 MDX 能力对照#

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

MDX 允许在文件顶部使用 export const 声明作用域常量，既可在行内求值，也可在模板中做数据映射：

• 核心框架：Astro 7
• UI 引擎：Svelte 5
• 设计令牌：M3E Design Tokens
• 架构模式：Islands Architecture

数组与集合可动态渲染为网格布局：

3. M3E 展示与布局原语（仅 SSR）#

依据 Shirone 的组件架构（docs/atomic-structure.md），无状态展示组件会输出干净、可访问的语义化 HTML，且不带任何客户端运行时负担。

4. 反馈与加载指示器#

Shirone 内置了高度还原 Material 3 Expressive 动效的反馈原子组件：

5. 交互式 Svelte 5 交互岛#

使用 client:visible 声明的组件，会在进入视口时通过 IntersectionObserver 执行懒水合：

6. Markdown 扩展兼容性#

Shirone 的 SSOT 统一插件管线与所有 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 令牌设计体系，确保一致性、可访问性与视觉和谐。