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

Posted 2023-03-10

【中文标题】动态更改翻译页面标题 - Svelte

【英文标题】：Dynamically change translated page title - Svelte

【发布时间】：2021-06-07 11:35:15

【问题描述】：

我在 Svelte 中创建了一个页面。我提供了两种语言的翻译，效果很好。现在，我希望改变每一页的标题，更重要的是，我希望将它翻译成页面的当前语言。我尝试过双向绑定，但我认为我做错了。最小的例子：

//../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>

任何想法如何制作这个？

【参考方案1】：

如果您使用路由“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>

【参考方案2】：

我的理解是：你要动态设置标题。要实现这一点，您不必使用两种方式绑定。双向绑定意味着写回父组件中的变量。您尝试绑定的“变量”不是变量，而是不能用于绑定的存储。只需将标题作为普通道具传递，它应该可以工作：

//../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" />

...

【讨论】：

您好，感谢您的回答。我想知道是否可以只将元标题组件添加到布局页面，而只将标题传递给其他页面？或者我必须将 添加到每个 pagr？

这取决于您是否想在其他页面上设置新标题。如果是这种情况，您必须将元组件添加到每个页面。如果您想跟踪其他页面上的当前标题，我建议使用svelte store。