svelte.dev：全面改版

四年前，Svelte v3 的初始版本发布时，包含了大家熟悉的单页文档。随着 Svelte 的 API 表面稳步增加以及添加了更多详细信息，该文档结构一直保持不变。结果，单页文档变得越来越大，以至于很难找到需要的内容。社区一直呼吁进行改版，现在它终于来了！

欢迎来到新的 svelte.dev——旧网站的全面改版。

多页文档

目录已经变得非常庞大，您需要滚动五六个屏幕才能看到全部内容。我们听到了您的心声！现在，文档被拆分成了多个页面，所有页面都在右侧边栏中列出了其各个部分。

Svelte 公开的全部模块也列在边栏的 Runtime 部分下

• svelte
• svelte/store
• svelte/motion
• svelte/transition
• svelte/animate
• svelte/easing
• svelte/action

svelte/compiler 位于 编译器和 API 部分

我们还格外注意确保旧网站的所有链接都会重定向到正确的新的页面。

搜索

由于缺乏搜索功能，查找内容可能会很麻烦，因为 Ctrl+F 仅按出现的顺序返回结果，而不是按重要性顺序返回结果。虽然 Ctrl+F 确实有其优点，例如不需要 JS，但现在网站有多个页面，它不再是一种选择。

为此，新网站配备了一个搜索栏，该搜索栏会搜索文档和 API 表面。按 Ctrl+K（或 Mac 用户按 CMD+K）并开始搜索——它甚至无需 JavaScript 即可工作！

灯光、TypeScript、Action！

新网站提供了一个 JavaScript/TypeScript 切换按钮，因此您可以以自己喜欢的风格查看文档。每个模块导出的类型都列在页面底部，方便参考。这些类型是从 Svelte 的源代码自动生成的，因此始终是最新的。

所有 JavaScript 和 TypeScript 代码片段都提供了类型提示。只需将鼠标悬停在变量上即可查看其类型。这使得可以在构建时对文档进行类型检查，从而确保它们永远不会过时。

我们还（终于！）为 Actions 添加了文档。Svelte Actions 是一种与 DOM 交互的方式，是为您的应用添加交互性的绝佳方法。Actions 的文档也提供 TypeScript 版本。

<script lang="ts">
	import type { Action } from 'svelte/action';

	const foo: Action = (node) => {
		// the node has been mounted in the DOM

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	};
</script>

<div use:foo />

深色模式

经过多年用户要求在网站上启用深色模式以便在夜间编码时阅读文档后，我们终于添加了它！网站现在提供了一个深色模式切换按钮，该按钮还与操作系统的深色模式设置同步。它可以通过顶部导航栏（手机上的底部导航栏）切换。

更新后的 REPL

REPL 已从头重写，以确保完全类型安全，并具有深色模式等功能。它重新实现为升级到 CodeMirror 6，后者具有许多无障碍改进、多选模式、性能改进、tree-shaking 以及更多功能。

重新设计的首页

如果首页没有得到同样的关注，那算得上是网站重新设计吗？🙃

首页也已更新，使其与 kit.svelte.dev 保持一致，并以 @vedam 设计的精美的 Svelte 机器为特色。

底部导航！

我们发布了一条 推文，讨论在移动设备上使用底部导航栏而不是传统的顶部导航栏进行实验。反响非常积极，因此我们继续添加了它！这使得只需一只手即可轻松地在移动设备上浏览网站。我们还确保您可以尽可能少地进行交互即可到达目标位置。如果您在网站的文档部分，您可能希望浏览其他文档页面，这就是为什么在打开导航栏时，它默认会显示这些页面，并提供返回上一级到一般网站导航的选项。

如果您使用的是移动设备，您现在就可以在底部看到它。如果您使用的是台式机，可以通过将浏览器窗口调整为较小的尺寸来查看它。

Svelte 网站的统一

现在，svelte.dev、kit.svelte.dev 和 learn.svelte.dev 都使用相同的設計系統，并且彼此更加一致。这使得在网站之间导航更加容易，也使维护更加容易。我们在这些网站之间共享了一个名为 @sveltejs/site-kit 的包，在过去 4 个月中，我们对它进行了严格的更改，因为我们一直在将所有通用代码移到此包中。

例如，我们在 @sveltejs/site-kit 中实现了深色模式切换按钮。然后，我们只需更新 learn.svelte.dev 和 kit.svelte.dev 上的包，这些网站就会自动获得深色模式切换按钮（这也是这些网站在 svelte.dev 重新发布之前就获得深色模式切换按钮的原因）。

下一步

我们计划在发布后做更多的事情。其中一些是

• 重新设计的博客页面
• 改进的搜索
• 游乐场：统一的 REPL 和示例页面
• 通过创建一个基于 webcontainer 的 REPL 并以 rollup 作为回退方案，统一 Svelte REPL 和 教程 的基础架构
• 处理任何反馈