Add infinite-scroll pagination to home page and publish new blog posts

content/blog/svelte-first-look.md

@@ -0,0 +1,45 @@
+---
+title: "Svelte 初体验：不一样的思路"
+date: 2026-05-10T09:30:00+08:00
+draft: false
+description: "试用了 Svelte 5 的 runes 语法和 SvelteKit 框架。没有虚拟 DOM，编译时直接把组件转成 DOM 操作代码，打包体积小得惊人。"
+tags:
+  - Svelte
+  - 前端
+  - JavaScript
+---
+
+用惯了 React 和 Vue，第一次接触 Svelte 的时候确实有种新鲜感。最直观的感受：**代码量少了很多**。
+
+## Runes 语法
+
+Svelte 5 引入了 runes 语法，让响应式声明更显式：
+
+- **`$state`** — 声明响应式变量，替代了之前靠赋值触发响应式的隐式规则。
+- **`$derived`** — 衍生值，类似 Vue 的 computed。
+- **`$effect`** — 副作用，自动追踪依赖并在变化时执行。
+
+```svelte
+<script>
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+
+  $effect(() => {
+    console.log(`count is now ${count}`);
+  });
+</script>
+```
+
+逻辑清晰，没有 `useEffect` 的依赖数组心智负担。
+
+## 编译时魔法
+
+Svelte 的核心理念：没有虚拟 DOM，编译器在构建时直接把组件转成高效的 DOM 操作代码。打包体积小得惊人，一个简单的组件可能只有几百字节。对移动端场景尤其友好。
+
+## SvelteKit
+
+SvelteKit 是 Svelte 的全栈框架，文件路由设计简洁。约定优于配置——新建一个 `src/routes/about/+page.svelte`，就自动有了 `/about` 路由。内置 SSR、SSG、CSR 多种渲染模式，服务器端数据加载用 `load` 函数，类型安全做得不错。
+
+## 总结
+
+Svelte 适合想要减少样板代码、追求小打包体积的项目。React 和 Vue 的生态更成熟，但 Svelte 的思路值得关注。下一步打算用 SvelteKit 重写个人博客试试看。