从变量名称加载 HTML 作为 SvelteKit 中的页面内容

Question

如何在 SvelteKit 项目中使用

[slug]

参数作为页面名称加载 HTML？

我有一个非常简单的 SvelteKit 项目，其中包含一些基本的数据加载。该项目的结构（与问题相关）如下所示：

src
  lib
    cms
      projects
        slug1.html
        slug2.html
  routes
    projects
      [slug]
        +page.server.svelte
        +page.svelte

当用户访问

https://example.com/projects/slug1

时，我想加载

slug1.html

内容并将其显示为页面内容。

在

+page.server.js

我有以下内容：

/** @type {import ('./$types').PageServerLoad } */
export async function load({ params }) {
  console.log(params);
  return {
    project: await import(`../../../lib/cms/projects/${params.slug}.html?raw`),
  };
}

我的目标是在

{@html data.project}

中提供

+page.svelte

。但这并没有按照我希望的方式进行，并且我收到以下错误：

Error: Data returned from `load` while rendering /projects/[slug] is not serializable: Cannot stringify POJOs with symbolic keys (data.project)
    at get_data (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:592:9)
    at Module.render_response (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:264:27)
    at async Module.render_page (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:286:10)
    at async resolve (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/respond.js:446:18)
    at async Module.respond (/Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/runtime/server/respond.js:319:20)
    at async file:///Users/me/Documents/Repositories/site/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:524:22

我缺少对正确加载数据的概念的理解。如何正确加载

slug1.html

内容以供使用？

Answer 1

这是因为导入的格式不同。您可以更改代码以获取导入的 default：

return {
    project: (await import(`../../lib/cms/${params.slug}.html?raw`)).default,
};