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) => {
		// 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 Machine 為特色。

底部導覽！

我們發佈了一條 推文，討論在行動裝置上實驗底部導覽列而不是傳統的頂部導覽列。反應非常積極，因此我們繼續新增了它！這使得只需一隻手即可輕鬆地在行動裝置上瀏覽網站。我們還確保您盡可能以最少的互動次數到達您想去的地方。如果您位於網站的文件區段，您可能會想瀏覽其他文件頁面，這就是為什麼當開啟時導覽列預設會顯示這些頁面，並可選擇向上移動一層到一般網站導覽。

如果您在行動裝置上，您已經可以在底部看到它。如果您在桌上型電腦上，您可以將瀏覽器視窗調整為較小的尺寸來查看它。

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 為基礎、以 rollup 作為後備的 REPL，統一 Svelte REPL 和 教學課程 的基礎架構
• 處理任何回饋