英文:
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]/
只要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 '@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;
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]/
As long as Svelte can detect a static link to the dynamic page route in another page (e.g. <a href="{base}/fahrenheit-451/1">Fahrenheit 451</a>
) 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 '404.html'
. (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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论