标签: sveltekit

我正在使用 SvelteKit，出于 SEO 的原因，我想使用完整的 SSR 并确保所有数据在传递到浏览器之前都在服务器端获取和渲染。换句话说，对后端 API 的所有调用都应该在传递初始页面响应之前完成。

但是，从文档中我不清楚如何实现这一点。（我可能错过了一些东西。）

我已经尝试过以下操作，但这只会提供一个完全空的主体：

<script>
    let promise = fetch('https://swapi.dev/api/people/1/')
        .then((response) => response.json());
</script>

{#await promise then character}
<main>
    <h1>Your character</h1>
    Name is {character.name}
</main>
{/await}

有谁知道如何使用 SvelteKit 阻止服务器端渲染，直到获取数据为止？

这是一个非常简单的 SvelteKit 程序：

<img src="static/bird.jpg" alt="a bird"/>

当我使用 运行它时npm run dev，会显示图像。但是当我使用npm run buildand时npm run preview，仅显示替代文本。

可能是什么原因？看起来是这样的。

我使用 SvelteKit v1.0.0-next.107

我尝试GOOGLE_APPLICATION_CREDENTIALS在 Netlify 上配置环境变量以便使用firebase-admin，但如何在那里获取实际的 JSON 文件？

显然我不能将它包含在 git 中。

我开始使用 Svelte(Kit)，到目前为止我真的很喜欢它。然而，我遇到了一个无法解决的问题。

我正在尝试动态显示图像，并且希望有一个备用图像，以防正常图像不存在。

对于普通的 HTML/JS，我会使用这个源：

<img src="imagefound.gif" onerror="this.onerror=null;this.src='imagenotfound.gif';" />

我试图在我的 Svelte 项目中实现它，但它要么不起作用（例如 A），要么有时起作用（短暂或直到我刷新（例如 B））。

这是我的代码（A）：

<script>
let profileImg = person.profile;
const missingProfile = () => {
    console.log('image does not exist');
    profileImg = '../default.png';
};
</script>

...

<img
    src={profileImg}
    on:error={missingProfile}
    alt={person.name}
/>

或者只是硬编码版本 (B)

<img 
    src="imagefound.gif" 
    onerror="console.log('image not found');this.onerror=null;this.src='./person.png';" 
/>

有这个问题，但我相信答案就是我正在做的事情。使用 SvelteKit 与使用 Svelte 有什么区别吗？

添加

看起来 Svelte 甚至没有设置src，<img />如果带有图像 url 的原始变量是undefined（在我的示例中person.profile）。在这种情况下，接受的答案将不起作用。

我编辑了这一行以防止出现这种情况：

let profileImg = person.profile === undefined …

开发 Svelte/kit 应用程序时是否可以使用 CloudFlare 的 Workers KV？

wrangler dev使用 CloudFlare Workers 适配器时可以构建应用程序然后运行：

npm build
wrangler dev

但是，我还没有进行热模块重新加载工作：

npm dev & wrangler dev

我正在尝试在 SvelteKit 中创建一个动态更新的导航栏，并相应地设置当前打开的部分的格式。我试图根据路径的第一部分识别页面，如下所示：

__layout.svelte：

<script context="module">
    export const load = ({ page }) => {
        return {
            props: {
                currentSection: `${page.path}`.split('/')[0],
                sections: ['home', 'dashboard', 'settings']
            }
        };
    }
</script>

<div class="min-h-screen bg-gray-100">
    <Header {...props} />
    <slot />
</div>

Header.svelte

<script>
    import Menu from "$lib/nav/menu.svelte"
</script>

<Menu {...props}></Menu>

Menu.svelte

<script>
    export let sections;
    export let currentSection;
</script>

{#each sections as { section }}
    <a
        href="/{section}"
        class="{section == currentSection
            ? 'bg-gray-900 text-white'
            : 'text-gray-300 hover:bg-gray-700'} other-classes"
        >{section}</a
    >
{/each}

这会导致props …

如何删除 VS Code 未使用的 CSS 选择器警告？此警告存在于我使用的所有文件中<style lang="scss">。我知道我不在.btn某些组件中使用类，但我希望这个类作为全局 css。

我的svelte.config.js：

const config = {
    onwarn: (warning, handler) => {
        const { code, frame } = warning;
        if (code === "css-unused-selector")
                return;

        handler(warning);
    },
    preprocess: [
        preprocess({
            defaults: {
                style: 'scss'
            },
            postcss: true,
            scss: {
                prependData: `@import 'src/scss/global.scss';`
            }
        })
    ],
};

请问有人可以帮助我吗？

SvelteKit / Svelte：无法从上下文模块中的“存储”获取或设置（读取或写入）值。

import {selectedStore} from "src/storelocation";

<script context="module">
  export const load = async ({params})=> {
    
     $selectedStore.value // throwing error
  }

我正在尝试在 Svelte Kit 中创建一个自定义元素，就像<svelte:options tag="my-element" /> 文档中的一行所说，您必须添加此行，customElemet:true但是在哪里？Svelte Kit 没有带rollup.config.js插件，但svelte.config.js没有插件。

你知道在 Svelte Kit 中的哪里添加它吗？

我正在使用 SvelteKit 开发一个网站，我希望每个页面都有一个带有导航栏的布局。导航栏具有链接，活动链接是您所在的页面。有没有办法可以将道具从每个页面传递到模板来更改哪个链接处于活动状态？

谢谢！