#Chrome Translation

8 messages · Page 1 of 1 (latest)

frail pivot
#

I want to add <html lang="ja"> for all page.

sinful folioBOT
#

Hi @frail pivot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To set <html lang="ja"> for all pages in your Astro site, you should use a layout component that wraps your pages and sets the lang attribute on the <html> tag. Here’s how you can do it:

  1. Create a layout file (e.g., src/layouts/Base.astro) with the following content:
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <slot />
  </body>
</html>
  1. Wrap your pages with this layout. For example, in src/pages/about.astro:
---import Base from '../layouts/Base.astro';---
<Base>
  <h1>About me</h1>
  ...
</Base>

This ensures that every page using this layout will have <html lang="ja"> set, which helps Chrome and other browsers recognize the page language for translation and accessibility purposes. This approach is recommended in the Astro documentation for setting the lang attribute per page or globally via a layout component Migrating Layout Files.

If you want to support multiple languages, you can dynamically set the lang attribute based on the current route or language configuration, but for a site that is entirely in Japanese, the above method is sufficient.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@frail pivot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

frail pivot
#

I use starlight theme

#

@sinful folio I use starlight theme

sinful folioBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

If you are using the Starlight theme for Astro and want to set <html lang="ja"> for all pages, you should configure the Japanese locale in your Starlight integration settings.

In your astro.config.mjs, set up the locales option with Japanese as the root locale. This will ensure that the generated HTML uses lang="ja" for all pages:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      locales: {
        root: {
          label: '日本語',
          lang: 'ja', // This sets <html lang="ja">
        },
      },
    }),
  ],
});

By setting lang: 'ja' for the root locale, Starlight will generate your site with <html lang="ja"> on every page. This is the recommended way to set the language for all pages when using Starlight, and you do not need to manually edit your layout files for this purpose Use a root locale locales.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: