动态更改翻译后的页面标题 - Svelte

Question

我在 Svelte 中创建了一个页面。我提供了两种语言的翻译，效果很好。现在，我希望每个页面上的标题都发生变化，而且我希望将其翻译成页面的当前语言。我试过 two-way 绑定，但我认为我做错了什么。最小示例：

//../components/meta-title.svelte

<svelte:head>
<title>{title}</title>
</svelte:head>

<script>
export let title = "default title for page"
</script>


//../pages/_layout.svelte

<Meta bind:title={$_('title.companyTitle')} />  //doesn't work

<Navigation items={items}/>

<div>
    <slot/>
</div>

<Footer contact={contact}/>

//../pages/company.svelte
<LeadSection classes="lg:flex-row-reverse -mt-24">
    <div slot="header">
        { $_('pages.company.header') }
    </div>
...
</LeadSection>

有什么制作方法吗？

Answer 1

我的理解是：要动态设置标题。为此，您不必使用双向绑定。双向绑定意味着写回 parent 组件中的变量。您尝试绑定的“变量”不是变量，而是不能用于绑定的商店。只需将标题作为普通道具传递即可，它应该可以工作：

//../components/meta-title.svelte

<svelte:head>
   <title>{title}</title>
</svelte:head>

<script>
   export let title = "default title for page"
</script>


//../pages/_layout.svelte

<Meta title="This is a dynamic title" />

...

Answer 2

如果您使用路由“svelte-routing”，那么您必须创建单独的页面，例如“Home.svelte”、“About.svelte”。

在每一页上添加这个；

<svelte:head>
    <title> Title here as a plain text </title>
</svelte:head>

如果您已经有 pageName，则可以使用变量；

<svelte:head>
    <title> {pageName} </title>
</svelte:head>

<script>
    let pageName="Home"; 
</script>

动态更改翻译后的页面标题 - Svelte

Dynamically change translated page title - Svelte

html

svelte