如何提升Sapper开发效率？规避设计系统页面的代码重复

嘿，我刚好在Sapper项目里碰到过一模一样的问题——每个页面都要重复写Layout的导入和注册代码，简直烦死人！下面这几个方案能帮你彻底摆脱这种重复劳动：

1. 用Sapper内置的嵌套布局（首推！） #

Sapper本身就有专门的布局复用机制，完全不用自己手动重复导入。核心就是利用_layout.html这个特殊命名的文件：

具体怎么做： #

• 去routes/design-foundations目录下新建一个_layout.html文件，把Layout的导入和注册逻辑都放这里：

<Layout>
  <!-- 这里的slot会自动填充子页面的内容 -->
  <slot></slot>
</Layout>

<script>
  import Layout from '../_components/helpers/Layout.html';
  export default {
    components: { Layout }
  };
</script>

• 然后把你所有design-foundations下的页面（比如buttons.html、inputs.html）里的Layout导入和注册代码全删掉，只留页面的核心内容就行：

<h1>Buttons</h1>

• 更灵活的是，如果子目录（比如interactions）需要自己的专属布局，还能在interactions里再建一个_layout.html，形成嵌套布局，完全不冲突。

2. 全局注册Layout组件 #

要是你的整个应用几乎所有页面都要用这个Layout，那全局注册也是个省事的办法：

操作步骤： #

• 打开src/client.js，添加这段代码把Layout注册成全局组件：

import Layout from './_components/helpers/Layout.html';
import { registerComponent } from 'svelte';

registerComponent('Layout', Layout);

• 之后所有页面直接用<Layout>标签就行，再也不用写导入和注册的代码了：

<Layout>
  <h1>Buttons</h1>
</Layout>

<script>
  <!-- 空的就行，不用管Layout了 -->
  export default {};
</script>

⚠️ 小提醒：这个方案适合全局通用的布局，如果之后有部分页面不需要这个Layout，可能得额外处理，所以还是嵌套布局更灵活。

3. 模板继承（进阶玩法） #

如果你的Layout有好几个变体，还可以搞个基础布局文件，让页面继承它。比如先建src/_components/helpers/BaseLayout.html，然后页面通过extends来复用，但这个方式在Sapper里不如嵌套布局常用，优先推荐第一种方案就好。

总的来说，嵌套布局是最贴合Sapper路由设计的方案，既能省掉重复代码，又能灵活控制不同目录页面的布局差异，用起来特别顺手～

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