Svelte 5如何在+layout.svelte中实现类似Svelte 4的多命名插槽？

直接利用Svelte原生的命名插槽功能即可，无需上下文传递snippet，完全满足静态插入内容的需求：

1. 在布局组件（+layout.svelte）中定义命名插槽 #

在布局的对应位置声明带name属性的<slot>标签，可设置默认内容：

<!-- src/routes/+layout.svelte -->
<div class="app-layout">
  <!-- 头部命名插槽 -->
  <header class="layout-header">
    <slot name="header">默认全局头部</slot>
  </header>

  <!-- 主内容默认插槽（渲染页面核心内容） -->
  <main class="layout-main">
    <slot />
  </main>

  <!-- 侧边栏命名插槽 -->
  <aside class="layout-sidebar">
    <slot name="sidebar">默认全局侧边栏</slot>
  </aside>
</div>

2. 在页面组件（+page.svelte）中填充指定插槽 #

用<svelte:fragment slot="插槽名">包裹需要插入布局对应位置的内容，主内容直接写在组件根层级即可：

<!-- src/routes/blog/+page.svelte -->
<!-- 填充布局的header插槽 -->
<svelte:fragment slot="header">
  <h1>博客专区</h1>
  <nav>
    <a href="/blog">首页</a>
    <a href="/blog/tags">标签</a>
  </nav>
</svelte:fragment>

<!-- 填充布局的sidebar插槽 -->
<svelte:fragment slot="sidebar">
  <div class="blog-sidebar">
    <h3>热门文章</h3>
    <ul>
      <li><a href="/blog/post1">文章1</a></li>
      <li><a href="/blog/post2">文章2</a></li>
    </ul>
  </div>
</svelte:fragment>

<!-- 页面主内容（会渲染到布局的默认<slot>） -->
<div class="blog-content">
  <p>欢迎来到博客页面...</p>
</div>

注意事项 #

• 该方式完全基于Svelte原生插槽机制，静态渲染时性能无损耗，无需额外状态管理
• 若某个页面不需要自定义某个插槽，布局会自动使用插槽的默认内容
• 支持多层路由布局嵌套，子布局同样可以给父布局传递命名插槽内容

内容的提问来源于stack exchange，提问作者Lux HK