Svelte SEO动态页面标题设置问题求助

你之前的方法无效是因为直接import单个页面的title变量，无法适配不同路由的动态页面，下面是两种可行的方案：

方案一：通过页面load函数传递标题 #

1. 给每个页面创建对应的+page.js文件，在其中导出load函数返回页面标题：

// 根目录 +page.js
export function load() {
  return {
    pageTitle: "首页"
  };
}

// 子页面 /about/+page.js
export function load() {
  return {
    pageTitle: "关于我们"
  };
}

2. 在+layout.svelte中，利用$page.data获取当前页面的标题，拼接后传给SvelteSEO：

<script>
  import { page } from '$app/stores';
  import SvelteSEO from 'svelte-seo';
</script>

<SvelteSEO
  title={`Example | ${$page.data.pageTitle || '默认标题'}`}
  canonical={`https://example.com{$page.url.pathname}`}
  // 保留你原有的其他SEO配置
/>

<slot />

方案二：通过页面组件导出标题，结合slot props传递 #

1. 在每个+page.svelte中导出title变量：

<script>
  export let title = "首页";
</script>

<!-- 页面内容 -->

2. 在+layout.svelte中通过slot绑定接收页面的title：

<script>
  import SvelteSEO from 'svelte-seo';
  import { page } from '$app/stores';
  
  let pageTitle = '默认标题';
</script>

<SvelteSEO
  title={`Example | ${pageTitle}`}
  canonical={`https://example.com{$page.url.pathname}`}
  // 保留你原有的其他SEO配置
/>

<slot bind:title={pageTitle} />

两种方案都能实现每个页面动态生成Example | 页面标题格式的标题，推荐方案一，因为load函数还可以处理异步获取标题的场景（比如从接口拉取）。

内容的提问来源于stack exchange，提问作者KenMatsuo