Html 动态更改翻译页面标题-苗条
我用苗条的语言写了一页。我提供了两种语言的翻译,效果很好。现在,我希望每个页面上的标题都能改变,而且,我希望它能被翻译成页面的当前语言。我试过双向装订,但我认为我弄错了什么。最简单的例子:Html 动态更改翻译页面标题-苗条,html,svelte,Html,Svelte,我用苗条的语言写了一页。我提供了两种语言的翻译,效果很好。现在,我希望每个页面上的标题都能改变,而且,我希望它能被翻译成页面的当前语言。我试过双向装订,但我认为我弄错了什么。最简单的例子: //../components/meta-title.svelte <svelte:head> <title>{title}</title> </svelte:head> <script> export let title = "def
//../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>
/../components/meta-title.svelte
{title}
export let title=“页面的默认标题”
//../pages/_layout.svelte
//不起作用
//../pages/company.svelte
{$(('pages.company.header')}
...
有什么办法吗?我的理解是:您想动态设置标题。要实现这一点,您不必使用双向绑定。双向绑定意味着写回父组件中的变量。您试图绑定到的“变量”不是一个变量,而是一个不能用于绑定的存储。只需将标题作为普通道具传递进来,它就可以工作了:
//../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" />
...
/../components/meta-title.svelte
{title}
export let title=“页面的默认标题”
//../pages/_layout.svelte
...
如果您使用的是路由“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>
{pageName}
让pageName=“Home”;
您好,谢谢您的回答。我想知道是否可以只将元标题组件添加到布局页面,而只将标题传递到其他页面?或者我必须添加到每个页面?这取决于您是否要在其他页面上设置新标题。如果是这种情况,您必须将元组件添加到每个页面。如果您想在其他页面上跟踪当前标题,我建议使用。