SvelteKit中如何为不同页面动态设置<html lang>属性？

方法1：通过全局布局组件+layout.svelte实现 #

app.html是静态模板无法绑定动态变量，可借助全局布局组件修改根元素的lang属性：

• 在src/routes下创建或修改+layout.svelte文件
• 从路由参数、页面元数据或全局状态中获取当前语言标识
• 用响应式语句或onMount钩子实时更新document.documentElement.lang的值

示例代码：

<script>
  import { page } from '$app/stores';
  import { onMount } from 'svelte';

  // 从页面元数据读取语言，无数据时默认用英文
  $: lang = $page.data.lang || 'en';

  // 组件挂载时初始化lang属性
  onMount(() => {
    document.documentElement.lang = lang;
  });

  // 监听语言变化，实时更新
  $: {
    document.documentElement.lang = lang;
  }
</script>

<slot />

方法2：服务端渲染场景用handle钩子修改响应 #

如果应用启用SSR，可在src/hooks.server.js中通过handle钩子动态修改HTML的lang属性：

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  
  // 从路由参数或自定义逻辑中获取当前语言，默认英文
  const lang = event.params.lang || 'en';
  
  // 替换响应内容中的lang属性值
  return new Response(
    response.body.replace('<html lang="en">', `<html lang="${lang}">`),
    {
      headers: response.headers,
      status: response.status
    }
  );
}

方法3：结合页面元数据指定语言 #

在各页面的+page.js/+page.server.js中定义语言数据，再在全局布局中读取：

• 英文页面的+page.js：

export function load() {
  return {
    lang: 'en'
  };
}

• 波斯语页面的+page.js：

export function load() {
  return {
    lang: 'fa'
  };
}

之后在+layout.svelte中通过$page.data.lang获取语言值，按方法1的逻辑更新lang属性即可。

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