如何在SvelteKit所有页面中引入公共组件？

作为有Django经验的开发者，你可以把SvelteKit的**布局（Layout）**理解成类似Django的base模板——它是所有页面的"骨架"，用来全局复用头部、页脚这类通用组件，同时也能统一插入告警这类全局元素。下面是具体操作步骤：

1. 拆分独立组件 #

先把原来写在app.html里的静态内容拆成单独的Svelte组件，方便复用和维护：

• 在src/lib/components/目录下创建Header.svelte，把app.html里的头部导航代码移进去，比如：

<header class="header">
  <nav>
    <a href="/">首页</a>
    <a href="/dashboard">控制台</a>
    <!-- 原来的导航内容 -->
  </nav>
</header>

<style>
  /* 头部的样式，原来的CSS也移进来 */
  .header {
    padding: 1rem;
    background: #2c3e50;
    color: white;
  }
</style>

• 同理创建Footer.svelte，迁移页脚内容：

<footer class="footer">
  <p>© 2024 你的应用名称</p>
  <!-- 页脚其他内容 -->
</footer>

<style>
  .footer {
    padding: 1rem;
    background: #f8f9fa;
    text-align: center;
  }
</style>

• 创建MaintenanceAlert.svelte作为停机告警组件：

{#if showAlert}
  <div class="alert">
    ⚠️ 系统即将停机维护，时间：2024-05-20 22:00-23:00
  </div>
{/if}

<script>
  export let showAlert = false; // 支持外部传入是否显示的状态
</script>

<style>
  .alert {
    background: #fff3cd;
    color: #856404;
    padding: 0.8rem;
    text-align: center;
  }
</style>

2. 创建全局根布局 #

SvelteKit的+layout.svelte是全局布局文件，所有页面都会自动继承它。在src/routes/目录下创建这个文件，把刚才的组件组合起来：

<script>
  import Header from '$lib/components/Header.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import MaintenanceAlert from '$lib/components/MaintenanceAlert.svelte';
  
  // 如果需要从后端DRF获取告警状态，可以在这里加载数据
  // 比如通过服务器端加载：
  export let data;
</script>

<Header />
<!-- 把告警组件放在头部下方、页面内容上方 -->
<MaintenanceAlert showAlert={data?.isUnderMaintenance ?? false} />

<!-- <slot /> 是页面内容的占位符，每个页面的+page.svelte内容会渲染到这里 -->
<main class="main-content">
  <slot />
</main>

<Footer />

<style>
  .main-content {
    min-height: calc(100vh - 120px); /* 留出头部和页脚的高度 */
    padding: 2rem;
  }
</style>

如果需要动态获取DRF的停机状态，可以在src/routes/+layout.server.js里写服务器端逻辑：

export async function load({ fetch }) {
  // 调用你的DRF接口
  const res = await fetch('https://your-drf-api.com/api/maintenance-status/');
  const status = await res.json();
  
  return {
    isUnderMaintenance: status.is_active
  };
}

3. 清理app.html #

现在app.html只需要保留最基础的HTML结构，把原来的头部、页脚静态代码删掉：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  %sveltekit.head% <!-- SvelteKit自动注入的头部内容 -->
</head>
<body>
  %sveltekit.body% <!-- SvelteKit会把布局和页面内容渲染到这里 -->
</body>
</html>

额外说明 #

• 如果需要给某部分路由单独用不同布局，可以在对应路由目录下创建+layout.svelte，比如src/routes/admin/+layout.svelte，它会覆盖根布局的作用范围（仅admin下的页面使用）。
• 组件里的样式默认是作用域内的，不会污染全局，这和Django的CSS不一样，不用担心样式冲突。

内容的提问来源于stack exchange，提问作者Anirudh Prabhakaran