mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-28 03:03:18 +00:00
183 lines
13 KiB
HTML
183 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.108.0">
|
|
<meta name="generator" content="Relearn 5.8.0+tip">
|
|
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
|
<meta name="author" content="Sören Weber">
|
|
<title>Multilingual and i18n :: Hugo Relearn Theme</title>
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
|
|
<link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
|
|
<link href="../../images/logo.svg?1670797203" rel="icon" type="image/svg+xml">
|
|
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
|
<link href="../../css/fontawesome-all.min.css?1670797204" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1670797204" rel="stylesheet"></noscript>
|
|
<link href="../../css/featherlight.min.css?1670797204" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/featherlight.min.css?1670797204" rel="stylesheet"></noscript>
|
|
<link href="../../css/auto-complete.css?1670797204" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1670797204" rel="stylesheet"></noscript>
|
|
<link href="../../css/perfect-scrollbar.min.css?1670797204" rel="stylesheet">
|
|
<link href="../../css/nucleus.css?1670797204" rel="stylesheet">
|
|
<link href="../../css/fonts.css?1670797204" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1670797204" rel="stylesheet"></noscript>
|
|
<link href="../../css/theme.css?1670797204" rel="stylesheet">
|
|
<link href="../../css/theme-relearn-light.css?1670797204" rel="stylesheet" id="variant-style">
|
|
<link href="../../css/ie.css?1670797204" rel="stylesheet">
|
|
<link href="../../css/variant.css?1670797204" rel="stylesheet">
|
|
<link href="../../css/print.css?1670797204" rel="stylesheet" media="print">
|
|
<link href="../../css/format-print.css?1670797204" rel="stylesheet">
|
|
<script src="../../js/url.js?1670797204"></script>
|
|
<script src="../../js/variant.js?1670797204"></script>
|
|
<script>
|
|
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
|
|
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
|
|
window.index_js_url="../../index.search.js";
|
|
var root_url="../../";
|
|
var baseUri=root_url.replace(/\/$/, '');
|
|
// translations
|
|
window.T_Copy_to_clipboard = 'Copy to clipboard';
|
|
window.T_Copied_to_clipboard = 'Copied to clipboard!';
|
|
window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
|
|
window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
|
|
window.T_No_results_found = 'No results found for \u0022{0}\u0022';
|
|
window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
|
|
// some further base stuff
|
|
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
|
window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
|
|
</script>
|
|
<script src="../../js/jquery.min.js?1670797204" defer></script>
|
|
<style>
|
|
#body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/i18n/index.html">
|
|
<div id="body" class="default-animation">
|
|
<div id="sidebar-overlay"></div>
|
|
<div id="toc-overlay"></div>
|
|
<nav id="topbar" class="highlightable" dir="ltr">
|
|
<div>
|
|
<div id="breadcrumbs">
|
|
<span id="sidebar-toggle-span">
|
|
<a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
|
|
</span>
|
|
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
|
|
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../index.html"><span itemprop="name">Hugo Relearn Theme</span></a><meta itemprop="position" content="1"> > </li>
|
|
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="2"> > </li>
|
|
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Multilingual and i18n</span><meta itemprop="position" content="3"></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main id="body-inner" class="highlightable default" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<div id="head-tags">
|
|
</div>
|
|
<article class="default">
|
|
<h1 id="multilingual-and-i18n">Multilingual and i18n</h1>
|
|
|
|
<p>The Relearn theme is fully compatible with Hugo multilingual mode.</p>
|
|
<p>It provides:</p>
|
|
<ul>
|
|
<li>Translation strings for default values (English, Arabic, Simplified Chinese, Traditional Chinese, Dutch, Finnish (Suomi), French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese). Feel free to contribute!</li>
|
|
<li>Support for languages written right to left</li>
|
|
<li>Automatic menu generation from multilingual content</li>
|
|
<li>In-browser language switching</li>
|
|
</ul>
|
|
<p>
|
|
|
|
<a href="../../cont/i18n/i18n-menu.gif?classes=shadow&width=300px" data-featherlight="image">
|
|
<img src="../../cont/i18n/i18n-menu.gif?classes=shadow&width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
|
|
</a></p>
|
|
<h2 id="basic-configuration">Basic configuration</h2>
|
|
<p>After learning <a href="https://gohugo.io/content-management/multilingual">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
|
|
<p>For example with current English and Piratized English website.</p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="c"># English is the default language</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">defaultContentLanguage</span> <span class="p">=</span> <span class="s2">"en"</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">Languages</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">Languages</span><span class="p">.</span><span class="nx">en</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Hugo Relearn Theme"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">1</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">languageName</span> <span class="p">=</span> <span class="s2">"English"</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">Languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Cap'n Hugo Relearrrn Theme"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">2</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">languageName</span> <span class="p">=</span> <span class="s2">"Arrr! Pirrrates"</span>
|
|
</span></span></code></pre></div><p>Then, for each new page, append the <em>id</em> of the language to the file.</p>
|
|
<ul>
|
|
<li>Single file <code>my-page.md</code> is split in two files:
|
|
<ul>
|
|
<li>in English: <code>my-page.md</code></li>
|
|
<li>in Piratized English: <code>my-page.pir.md</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>Single file <code>_index.md</code> is split in two files:
|
|
<ul>
|
|
<li>in English: <code>_index.md</code></li>
|
|
<li>in Piratized English: <code>_index.pir.md</code></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="box notices cstyle info">
|
|
<div class="box-label"><i class="fa-fw fas fa-info-circle"></i> Info</div>
|
|
<div class="box-content">
|
|
<p>Be aware that only translated pages are displayed in menu. It’s not replaced with default language content.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box notices cstyle tip">
|
|
<div class="box-label"><i class="fa-fw fas fa-lightbulb"></i> Tip</div>
|
|
<div class="box-content">
|
|
<p>Use <a href="https://gohugo.io/content-management/multilingual/#translate-your-content">slug</a> frontmatter parameter to translate urls too.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="search">Search</h2>
|
|
<p>In case each page’s content is written in one single language only, the above configuration will already configure the site’s search functionality correctly.</p>
|
|
|
|
<div class="box notices cstyle warning">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Warning</div>
|
|
<div class="box-content">
|
|
<p>Although the theme supports a wide variety of supported languages, the site’s search does not.
|
|
You’ll see error reports in your browsers console log for each unsupported language. Currently unsupported are:</p>
|
|
<ul>
|
|
<li>Indonesian</li>
|
|
<li>Polish</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h3 id="search-with-mixed-language-support">Search with mixed language support</h3>
|
|
<p>In case your page’s content contains text in multiple languages (e.g. you are writing a Russian documentation for your english API), you can add those languages to your <code>config.toml</code> to broaden search.</p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">additionalContentLanguage</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"en"</span> <span class="p">]</span>
|
|
</span></span></code></pre></div><p>As this is an array, you can add multiple additional languages.</p>
|
|
|
|
<div class="box notices cstyle note">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
|
<div class="box-content">
|
|
<p>Keep in mind that the language code required here, is the base language code. E.g. if you have additional content in <code>zh-CN</code>, you have to add just <code>zh</code> to this parameter.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="overwrite-translation-strings">Overwrite translation strings</h2>
|
|
<p>Translations strings are used for common default values used in the theme (<em>Edit</em> button, <em>Search placeholder</em> and so on). Translations are available in English and Piratized English but you may use another language or want to override default values.</p>
|
|
<p>To override these values, create a new file in your local i18n folder <code>i18n/<idlanguage>.toml</code> and inspire yourself from the theme <code>themes/hugo-theme-relearn/i18n/en.toml</code></p>
|
|
<h2 id="disable-language-switching">Disable language switching</h2>
|
|
<p>Switching the language in the browser is a great feature, but for some reasons you may want to disable it.</p>
|
|
<p>Just set <code>disableLanguageSwitchingButton=true</code> in your <code>config.toml</code></p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="c"># When using multilingual website, disable the switch language button.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">disableLanguageSwitchingButton</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span></code></pre></div>
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="../../js/clipboard.min.js?1670797204" defer></script>
|
|
<script src="../../js/perfect-scrollbar.min.js?1670797204" defer></script>
|
|
<script src="../../js/featherlight.min.js?1670797204" defer></script>
|
|
<script src="../../js/theme.js?1670797204" defer></script>
|
|
</body>
|
|
</html>
|