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

Question

我用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>

你知道怎么做吗?

Answer 1

我的理解是:你想动态设置标题。要实现这一点，您不必使用双向绑定。双向绑定意味着回写父组件中的变量。"variable"您试图绑定的不是一个变量，而是一个不能用于绑定的存储。只要把title作为一个普通的prop传入，它就可以工作了:

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

如果您正在使用路由"那么你必须创建单独的页面，例如"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>