如果您正在寻找一种现代建立博客的方式，那么Svelte和Sveltekit是不错的选择。 Svelte是一个轻巧的反应性框架，可编译您的代码为高度优化的香草JavaScript。 Sveltekit是构建在Svelte顶部建立Web应用程序的框架，提供服务器端渲染，路由和其他功能。

在本教程中，我们将向您展示如何使用Sveltekit构建一个简单的博客，以及如何使用Jest和Svelte-Jester为其编写单元测试。在教程结束时，您将拥有一个功能齐全的博客，可以进行部署，并且您将拥有对其进行测试并确保其质量的工具。

建立博客

创建一个新的Sveltekit项目
首先，您需要创建一个新的Sveltekit项目。最简单的方法是使用DEGIT，即克隆存储库的工具。

打开终端并运行以下命令：

npx degit
sveltejs/sveltekit
my-blog

这将创建一个称为My-B-B-B-Blog的新目录，然后将Sveltekit启动器模板克隆到其中。

创建基本页面和路由
接下来，我们将为博客创建基本页面和路线。在Sveltekit中，在SRC/ROUTES目录中创建了页面为.svelte文件。

让我们从创建主页开始。在src/routes目录中创建一个名为index.svelte的新文件，并添加以下代码：

<script>
  export let posts = [];
</script>

<h1>Welcome to my blog!</h1>

{#if posts.length}
  <ul>
    {#each posts as post}
      <li>
        <a href={`blog/${post.id}`}>
          {post.title}
        </a>
      </li>
    {/each}
  </ul>
{:else}
  <p>No posts yet.</p>
{/if}

此代码定义了显示博客文章列表的Svelte组件。 Export Let Poste Line定义了可以从父组件或路由定义传递给组件的属性。

接下来，让我们为主页创建路由定义。在SRC/ROUTES目录中创建一个名为index.json.js的新文件，并添加以下代码：

import posts from './_posts.js';

export async function get() {
  return {
    body: {
      posts
    }
  };
}

此代码定义了一条路由，该路由返回包含博客文章列表的JSON对象。帖子数组是从名为_posts.js的文件导入的，我们将下一步创建。

现在创建_posts.js文件。在SRC/ROUTES目录中创建一个名为_posts.js的新文件，并添加以下代码：

export default [
  {
    id: '1',
    title: 'My First Blog Post',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  },
  {
    id: '2',
    title: 'My Second Blog Post',
    content: 'Vivamus euismod metus sit amet arcu consectetur, vel ultricies dolor fringilla.'
  }
];

此代码定义了两个博客文章对象的数组。每个对象都有ID，标题和内容属性。

现在，我们有了一个基本主页，显示博客文章列表。让我们为博客创建更多页面

创建单个博客文章页面

接下来，我们将为每个博客文章创建单个页面。在SRC/ROUTES目录中创建一个名为[_id] .svelte的新文件，并添加以下代码：

<script>
  export let post = {};
</script>

<h1>{post.title}</h1>

<p>{post.content}</p>

此代码定义了一个显示单个博客文章的Svelte组件。导出LET POST LINE定义了可以从父组件或路由定义传递给组件的属性。

接下来，让我们为单个博客文章页面创建路由定义。在SRC/ROUTES目录中创建一个名为[_id] .json.js的新文件，并添加以下代码：

import posts from './_posts.js';

export async function get({ params }) {
  const post = posts.find(p => p.id === params.id);
  if (post) {
    return {
      body: {
        post
      }
    };
  } else {
    return {
      status: 404
    };
  }
}

此代码定义了从URL获取ID参数的动态路由。然后，它在帖子数组中搜索带有该ID的博客文章对象，并将其返回为JSON对象。如果ID不匹配任何博客文章，则返回404状态。

样式博客
现在，我们已经设置了基本页面和路线，让我们在博客中添加一些样式。 Sveltekit随时支持CSS模块的支持，因此我们将使用它来设计我们的组件。

在src目录中创建一个名为global.css的新文件，并添加以下代码：

h1 {
  font-size: 2.5rem;
  margin: 2rem 0;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 1rem 0;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

此代码定义了博客的一些基本样式，例如字体大小，边距和文本装饰。

接下来，我们将将此CSS文件导入到我们的Svelte组件中。在每个.svelte文件中，在顶部添加以下行：

<style global>
  @import './global.css';
</style>

此代码将global.css文件导入组件的样式。

建立和测试博客

现在我们已经构建了博客，让我们构建和测试它。要构建博客，请在终端中运行以下命令：

npm run build

这将编译Svelte代码并在“构建目录”中创建一个可以生产的构建。

要测试博客，我们将使用Jest和Svelte-Jester。 Jest是一个流行的JavaScript测试框架，Svelte-Jester是一个插件，允许我们为Svelte组件编写单元测试。

首先，让我们安装依赖项。在终端中运行以下命令：

npm install --save-dev jest svelte-jester

接下来，在src目录中创建一个名为example.test.js的新文件，并添加以下代码：

import { render } from '@testing-library/svelte';
import Example from './Example.svelte';

test('renders the text "Hello, world!"', () => {
  const { getByText } = render(Example);
  expect(getByText('Hello, world!')).toBeInTheDocument();
});

此代码定义了一个称为示例的Svelte组件的单元测试。它使用 @testing-library/svelte的渲染函数来渲染组件，而getByText函数可以找到带有文本“ Hello，World！”的元素。期望功能检查该元素是否在文档中。

您可以通过在终端中运行以下命令来运行测试：

npm run test

这将在SRC目录中运行所有测试。

在本教程中，我们看到了如何使用Svelte和Sveltekit构建博客。我们创建了一个主页，该页面显示了博客文章列表，每个博客文章的单个页面，并在博客中添加了一些基本样式。我们还学会了如何使用Jest和Svelte-Jester测试我们的Svelte组件。

Svelte和Sveltekit提供了一种强大而简单的构建Web应用程序的方法，它们的尺寸小和性能使其非常适合现代Web开发。