如何为多页Sveltekit站点的每个页面渲染不同的背景图片

Question

我正在使用 Sveltekit 构建一个多页面站点。该设计要求每个页面都有不同的背景图像。我最初的想法是使用 :global 样式属性来设置每个页面上的图像：

<style>
    :global(body) {
        background-image: url('image-for-this-page.png');
    }
</style>

这有效，但仅在第一次呈现每个页面时有效。任何返回到先前呈现页面的导航都不会变回分配给该页面的背景图像，它只会保留最近加载的图像（除非通过浏览器刷新整个网站） . 我对 Sveltekit 还是很陌生，是否有特定的 Sveltekit API 我应该在这种情况下使用？

Answer 1

这不起作用，因为它会一直附加这些样式，导致只使用第一个样式。

如果我想要这个，我会使用辅助生命周期方法，它将背景设置为内联。

import { onMount } from 'svelte';

export function setBackground(background) {
  onMount(() => {
    let current = document.body.style['background-image'];
    document.body.style['background-mage'] = background;
    return () =>  document.body.style['background-image'] = current;
  })
}

您可以像这样在您的页面中简单地使用它：

import { setBackground } from '/background.js';
setBackground('path/to/image');

脚本中的 current 部分确保在离开时，背景将设置为原始版本，如果大多数页面具有相同的背景，但只有一些具有不同的背景，这将很有用.

如何为多页Sveltekit站点的每个页面渲染不同的背景图片

How to render different background image for each page of multi-page Sveltekit site

svelte

sveltekit