Svelte Kit在Github Pages上使用动态路由的静态网站生成器

huangapple go评论87阅读模式
英文:

Svelte Kit SSG with dynamic routes on Github Pages

问题

这是我用来将我的Svelte网站部署到GitHub Pages的步骤:

npm create svelte@latest svelte-test
cd svelte-test
pnpm i
pnpm i -D @sveltejs/adapter-static

然后,在static文件夹中创建一个空的*.nojekyll文件,并在src/routes文件夹中创建一个名为+layout.ts*的文件,内容如下:

export const prerender = true;

接下来,我修改了svelte.config.js文件,如下所示:

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

const dev = process.argv.includes('dev');

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: undefined,
            precompress: false,
            strict: true
        }),
        paths: {
            base: dev ? '' : process.env.BASE_PATH,
        }
    }
};

export default config;

最后,我从Svelte文档中复制了部署脚本,设置了GitHub Actions的部署,现在我的静态网站已经部署好了。

现在,我想要一个动态路由,根据我在数据库中的数据显示不同的内容。

所以我创建了*/[book]/

/+page.svelte*页面。

只要Svelte能在另一个页面中检测到对动态页面路由的静态链接(例如<a href="{base}/fahrenheit-451/1">Fahrenheit 451</a>),一切都正常工作。

然而,如果链接到该页面的链接是动态的(例如,我从数据库获取数据并基于此创建链接),当我刷新页面时,会出现404文件未找到的错误。

阅读Svelte的文档,我找到的唯一解决方案是使用entries

缺点是,如果我理解正确的话,如果我的数据库中的数据经常更改,我将在新的和修改过的页面上继续遇到同样的问题。

是否有更好的解决方案来解决这个问题,或者我必须使用另一个适配器?

英文:

These are the steps I followed to deploy my Svelte website to GitHub Pages:

npm create svelte@latest svelte-test
cd svelte-test
pnpm i
pnpm i -D @sveltejs/adapter-static

then proceeded to create an empty .nojekyll file in the static folder and a +layout.ts file inside of src/routes with the following content:

export const prerender = true;

then I modified the svelte.config.js file as follows:

import adapter from &#39;@sveltejs/adapter-static&#39;;
import { vitePreprocess } from &#39;@sveltejs/kit/vite&#39;;

const dev = process.argv.includes(&#39;dev&#39;);

/** @type {import(&#39;@sveltejs/kit&#39;).Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            pages: &#39;build&#39;,
            assets: &#39;build&#39;,
            fallback: undefined,
            precompress: false,
            strict: true
        }),
        paths: {
            base: dev ? &#39;&#39; : process.env.BASE_PATH,
        }
    }
};

export default config;

finally, I copied the deploy script from the Svelte documentation, set up the deployment from GitHub actions and I have my static website.

Now I'd like to have a dynamic route that shows different content based on the data I have on my db.

So I created the /[book]/

/+page.svelte page.

As long as Svelte can detect a static link to the dynamic page route in another page (e.g. &lt;a href=&quot;{base}/fahrenheit-451/1&quot;&gt;Fahrenheit 451&lt;/a&gt;) everything works fine.

However, if the link to that page is dynamic (e.g. I get the data from my db and I create the link based on that) once I get to the page if I refresh the page I get a 404 file not found error.

Reading Svelte's documentation, the only solution I found is to use entries.

The downside is, if I understand correctly, that if the data in my db changes quite often, I will keep having the same issue on new and modified pages.

Is there a better solution to this problem or am I forced to use another adapter?

答案1

得分: 1

你应该使用适配器的fallback选项来处理动态路由;将其设置为'404.html'。(不确定它与静态路由的兼容性如何。文档中说明它适用于SPA模式。)

如果没有静态文件存在,GitHub页面将返回该文件,而SvelteKit将确定路由/参数并加载/执行正确的JS代码。

英文:

You are supposed to use the fallback option of the adapter for dynamic routes; set it to &#39;404.html&#39;. (Not sure how well it can coexist with static routes, though. The docs state that it is for SPA mode.)

The file will be returned by GitHub pages if no static file exists and SvelteKit will determine the route/parameters and load/execute the correct JS code.

huangapple
  • 本文由 发表于 2023年8月8日 23:47:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76861204.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定