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 位于 Compiler and API 部分

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

搜索功能

缺乏搜索功能可能导致查找内容变得令人厌烦，因为Ctrl+F 只能按照出现的顺序返回结果，而不是重要性顺序。尽管Ctrl+F 有其优势，例如不需要使用 JavaScript，但现在网站已有多个页面，这显然不再适用。

为此，新网站带来了一个搜索栏，可以对文档和 API 进行搜索。按下Ctrl+K（Mac 用户按CMD+K）即可开始搜索——它甚至在没有 JavaScript 的情况下也能工作！

明亮、TypeScript、行动！

新网站带来了 JavaScript / TypeScript 切换功能，因此你可以以你偏好的方式查看文档。每个模块的导出类型都列在页面底部，方便参考。这些类型是自动从 Svelte 的源代码生成的，因此始终保持最新。

所有 JavaScript 和 TypeScript 的代码片段都提供了类型提示功能。只需将鼠标悬停在变量上，即可看到其类型。这使得文档可以在构建时进行类型检查，从而确保其始终与最新内容保持一致。

我们还（最终！）为 Actions 添加了文档。Svelte Actions 是一种与 DOM 交互的方式，是为应用增加互动性的绝佳途径。这些 Actions 的文档同样也可用 TypeScript 查看。

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

	const foo: Action = (node) => {
		// 该节点已挂载到 DOM 中

		return {
			destroy() {
				// 该节点已从 DOM 中移除
			}
		};
	};
</script>

<div use:foo />

暗模式

在多年用户请求为网站添加暗模式以便于他们在夜间进行编码后，我们终于实现了！网站现在提供暗模式切换功能，同时与您的操作系统暗模式设置同步。您可以通过顶部导航栏（移动端为底部导航栏）进行切换。

更新的 REPL

REPL 完全从零开始重写，现已完全类型安全，并新增了暗模式等功能。它进行了重新实现，以便升级到 CodeMirror 6，后者带来了许多无障碍改进、多选模式、性能提升、tree-shaking 等诸多新功能。

全新设计的主页

如果主页没有获得相同的关注，那它还算得上是网站的重设计吗？🙃

主页也进行了更新，与 kit.svelte.dev 保持一致，并展现了由 @vedam 创作的美丽的 Svelte Machine。

底部导航！

我们发布了一个 推文，内容是关于在移动端尝试使用底部导航栏而非传统顶部导航栏。这一改动收到了极其正面的反馈，于是我们推进并完成了！这样可以更轻松地在移动设备上一只手就完成网站导航。我们还确保用户能够以尽可能少的交互实现目标。如果您位于网站的文档部分，大概率会希望浏览其他文档页面，因此打开导航栏时默认显示的就是文档页面，并且可以选择返回一级到一般的站点导航。

如果您使用移动设备，您已经可以在底部看到它了。如果您使用桌面设备，只需将浏览器窗口调整到更小的尺寸即可看见。

Svelte 网站的统一

现在 svelte.dev、kit.svelte.dev 和 learn.svelte.dev 都采用了相同的设计系统，彼此之间更为统一。这使得跨网站导航更容易，同时也使得维护这些网站变得更加方便。我们在这些网站间共享的一个包叫作 @sveltejs/site-kit，它在过去的四个月中经历了大量的改动，因为我们将所有通用代码搬进了这个包中。

比如，我们在 @sveltejs/site-kit 中实现了暗模式切换功能。之后，我们只需更新 learn.svelte.dev 和 kit.svelte.dev 上这个包，这些网站就会自动获得暗模式切换功能（这也是为什么那些网站在 svelte.dev 完全重新上线之前就有了暗模式切换功能的原因）。

接下来

上线后我们还有很多计划要完成。其中一些包括：

• 重新设计的博客页面
• 改进的搜索功能
• Playground：一个集成 REPL 和示例页面的功能
• 统一 Svelte REPL 和 教程 的基础架构，创建一个基于 webcontainer 的 REPL，以 rollup 作为后备选项
• 处理所有用户反馈