个性化Open-WebUI近期版本新增的展览页

开发调优
1

由于0.4版本的open-webui更新了一个进入网站会自动开启一个展览页面，但是作者做的实在不敢恭维：

image
image1922×1082 141 KB

是自己让Claude临时搓了一个相对还算看得过去的：

image
image1920×1096 74 KB

文件路径:

src\lib\components\OnBoarding.svelte

替换12和48行的图片路径，修改28行的主标题，就可以了

<script>
    import { getContext } from 'svelte';
    const i18n = getContext('i18n');

    import { WEBUI_BASE_URL } from '$lib/constants';

    import ArrowRightCircle from './icons/ArrowRightCircle.svelte';

    export let show = true;
    export let getStartedHandler = () => {};

    const backgroundImageUrl = "https://XXXX.com/yourimage.jpg";
</script>

{#if show}
    <div class="background-container">
        <div class="content-overlay">
            <div class="logo-container">
                <img
                    crossorigin="anonymous"
                    src="{WEBUI_BASE_URL}/static/favicon.png"
                    class="w-6 rounded-full"
                    alt="logo"
                />
            </div>

            <div class="flex flex-col justify-center items-center h-full text-center text-white">
                <h1 class="text-5xl lg:text-7xl font-secondary mb-4">Open-WebUI</h1>
                <div class="text-xl mb-8">{$i18n.t(`wherever you are`)}</div>

                <button
                    class="flex items-center justify-center px-6 py-3 rounded-full bg-white/20 hover:bg-white/30 transition font-medium text-lg"
                    on:click={getStartedHandler}
                >
                    <ArrowRightCircle className="size-6 mr-2" />
                    <span>{$i18n.t(`Get started`)}</span>
                </button>
            </div>
        </div>
    </div>
{/if}

<style>
    .background-container {
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url('https://XXXX.com/yourimage.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .content-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logo-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 50;
    }

    @media (max-width: 768px) {
        .background-container {
            background-position: center center;
        }
    }
</style>
19 个赞
2

高级，明天试试，感谢佬！

2 个赞
3

这个可以诶。

2 个赞