Make Your Hugo Blog Multilingual

Preface

First of all, Hugo cannot achieve automatic redirection because it is essentially a static site generator.
https://discourse.gohugo.io/t/auto-detect-browser-preferred-language/8391

Implementation

The theme I’m using is https://github.com/CaiJimmy/hugo-theme-stack. Others can be modified as needed.
Add language configuration in config.toml:

languages:
  zh-cn:
    languageName: Chinese
    weight: 1
  en:
    languageName: English
    title: "seth-shi"
    weight: 2

add a switch language button layouts/partials/sidebar/left.html

<li id="lang-switcher">
    {{ range .Site.Languages }}
    <a data-url="{{ .Lang | relURL }}"
       href="javascript:void(0);"
       class="lang-item {{ if eq .Lang $.Site.Language.Lang }}active{{ end }}"
    >
        {{ .LanguageName }}
    </a>
    {{ end }}
</li>

add js script(It is used to automatically jump to the corresponding language homepage based on the language selected by the user)

<script
    const langOptions = {{ .Site.Languages }}.map(l => l.Lang)
const langStoreKey = '__lang__';
const defaultLang = 'zh';
const homePages = langOptions.map(l => `/${l}`).concat('/');

document.addEventListener('DOMContentLoaded', function() {
    initLangHomePage();

    listenLangSwitchEvent()
});

function listenLangSwitchEvent() {
    const currentLang = localStorage.getItem(langStoreKey);
    const currentPathList = window.location.pathname.split('/').filter(v => v.length > 0);
    document.querySelectorAll('#lang-switcher a').forEach(link => {
        link.onclick = function() {
            let lang = this.getAttribute('data-url').replace('/', '');
            localStorage.setItem(langStoreKey, lang);
            // /{currentLang?}/posts/xxx => /{lang?}/posts/xxx
            const langRedirectPathList = Array.from(currentPathList);
            if (langOptions.includes(langRedirectPathList[0])) {
                langRedirectPathList[0] = lang;
            } else {
                langRedirectPathList.unshift(lang);
            }

            if (langRedirectPathList[0].includes(defaultLang)) {
                langRedirectPathList.shift();
            }

            langRedirectPathList.unshift('');
            langRedirectPathList.push('');
            window.location.href = langRedirectPathList.join('/');
        };
    });
}

function initLangHomePage() {
    const currentPath = window.location.pathname;
    if (! homePages.includes(currentPath)) {
        return;
    }

    const redirectPath = getInitRedirectPath('zh')
    console.log(`redirect:${redirectPath}`);
    if (redirectPath !== currentPath) {
        window.location.href = redirectPath;
    }
}


function getInitRedirectPath() {
    let lang = localStorage.getItem(langStoreKey);
    if (lang === null) {
        // from default browser language
        lang = navigator.language.substring(0, 2);
    }

    let mapLang = langOptions[0];
    const index = langOptions.findIndex(l => l.includes(lang))
    if (index >= 0) {
        mapLang = langOptions[index];
    }

    let redirectPath = `/${mapLang}`;
    if (mapLang.includes(defaultLang)) {
        redirectPath = '/';
    }

    return redirectPath;
}
</script>

Translate content

The corresponding categories, labels, and contents can be named according to the rules (for example, ‘index.md’, copy a file and name it ‘index.en.md’).
For now, GPT will automatically translate all the content on my blog

<?php


$rootDir = __DIR__ . '/content/posts';
$dir = opendir($rootDir);
$postsDir = [];
while (($filename = readdir($dir)) !== false) {
    if ($filename !== "." && $filename !== "..")
    {
        $postsDir[] = $filename ;
    }
}

info(sprintf("total dir: %d", count($postsDir)));
foreach ($postsDir as $i => $dir) {
    $index = "{$rootDir}/$dir/index.md";
    $enIndex = "{$rootDir}/$dir/index.en.md";
    if (! file_exists($index)) {
        info("error {$index}");
        continue;
    }

    if (file_exists($enIndex)) {
        info("exists {$enIndex} skip");
        continue;
    }

    $content = file_get_contents($index);
    $res = chat($content);
    $len = strlen($res);
    if ($len > 0) {
        file_put_contents($content, $enIndex);
    }
    info("{$i} success [{$len}]{$enIndex} skip");
}


function info($msg) {
    echo $msg . PHP_EOL;
}

function chat($content, $model = 'gpt-40') {
    $apiKey = "YOUR_OPENAI_API_KEY";

    $endpoint  = 'https://api.openai.com/v1/chat/completions';

    $data = [
        "messages" => [
            ["role" => "system", "content" => "According to the hugo format, translate the title, description, tags and content of the file into English. When encountering professional terms or those in English, skip these keywords"],
            ["role" => "user", "content" => $content]
        ],
        "model" => $model,
    ];

    $headers = array(
        'Content-Type: application/json',
        'Authorization: Bearer ' . $apiKey
    );

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $endpoint);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data,JSON_UNESCAPED_UNICODE));
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

    $response = curl_exec($ch);

    curl_close($ch);

    $decodedResponse = json_decode($response, true);
    $ret = '';
    if (isset($decodedResponse['choices'][0]['message']['content'])) {
        $ret = $decodedResponse['choices'][0]['message']['content'];
    }
    return $ret;
}

Achievement