mirror of https://github.com/lissy93/dashy
22 lines
45 KiB
HTML
22 lines
45 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-beta.2">
|
|
<link rel="search" type="application/opensearchdescription+xml" title="Dashy" href="/opensearch.xml">
|
|
<script src="https://no-track.as93.net/js/script.js" defer="defer" data-domain="dashy.to"></script><title data-react-helmet="true">Internationalization | Dashy</title><meta data-react-helmet="true" property="og:url" content="https://dashy.to/docs/multi-language-support"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Internationalization | Dashy"><meta data-react-helmet="true" name="description" content="Internationalization is the process of making an application available in other languages. This is important, as not everyone is a native English speaker. This page explains how you can switch languages, how to add a new language, and how to make text translatable when writing a new component."><meta data-react-helmet="true" property="og:description" content="Internationalization is the process of making an application available in other languages. This is important, as not everyone is a native English speaker. This page explains how you can switch languages, how to add a new language, and how to make text translatable when writing a new component."><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://dashy.to/docs/multi-language-support"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/multi-language-support" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/multi-language-support" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.de060916.css">
|
|
<link rel="preload" href="/assets/js/runtime~main.ac7349e8.js" as="script">
|
|
<link rel="preload" href="/assets/js/main.d13b237a.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script><div id="__docusaurus">
|
|
<div><a href="#main" class="skipToContent_OuoZ">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Live Demo</a><a class="navbar__item navbar__link" href="/docs/quick-start">Quick Start</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Documentation</a></div><div class="navbar__items navbar__items--right"><div class="react-toggle displayOnlyInLargeViewport_cxYs react-toggle--checked react-toggle--disabled"><div class="react-toggle-track" role="button" tabindex="-1"><div class="react-toggle-track-check"><span class="toggle_iYfV">🌙</span></div><div class="react-toggle-track-x"><span class="toggle_iYfV">☀️</span></div><div class="react-toggle-thumb"></div></div><input type="checkbox" checked="" class="react-toggle-screenreader-only" aria-label="Switch between dark and light mode"></div><div class="searchBox_Bc3W"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li><li class="menu__list-item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="menu__link">Live Demo</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/docs">Documentation</a></li></ul></div></div></div></nav><div class="main-wrapper docs-wrapper doc-page"><div class="docPage_lDyR"><aside class="docSidebarContainer_0YBq"><div class="sidebar_LIo8"><nav class="menu menu--responsive thin-scrollbar menu_oAhv menuWithAnnouncementBar_IVfW" aria-label="Sidebar navigation"><button aria-label="Open menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_nrF-" width="24" height="24" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Running Dashy</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/configuring">Configuring</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/management">App Management</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Feature Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/icons">Icons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/widgets">Widgets</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/theming">Theming</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/status-indicators">Status Indicators</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/authentication">Authentication</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/searching">Keyboard Shortcuts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/alternate-views">Alternate Views & Opening Methods</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/multi-language-support">Internationalization</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/backup-restore">Cloud Backup and Restore</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pages-and-sections">Pages and Sections</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Community</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/showcase">*Dashy Showcase* 🌟</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/contributing">Contributing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/developing">Developing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/development-guides">Development Guides</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Misc</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/privacy">Privacy & Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/changelog">Changelog</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/license">license</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/code-of-conduct">Contributor Covenant Code of Conduct</a></li></ul></li></ul></nav><div class="sidebar-ad"><script async="" src="//cdn.carbonads.com/carbon.js?serve=CWYIC53L&placement=dashyto" id="_carbonads_js"></script></div></div></aside><main class="docMainContainer_r8cw"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zHA2"><div class="docItemContainer_oiyr"><article><div class="markdown"><header><h1 class="h1Heading_dC7a">Internationalization</h1></header><p>Internationalization is the process of making an application available in other languages. This is important, as not everyone is a native English speaker. This page explains how you can switch languages, how to add a new language, and how to make text translatable when writing a new component.</p><ul><li><a href="#setting-language">Setting your Language</a></li><li><a href="#adding-a-new-language">Adding a new Language</a></li><li><a href="#adding-new-text-to-a-component">Adding New Text to a Component</a></li></ul><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="setting-language"></a>Setting Language<a class="hash-link" href="#setting-language" title="Direct link to heading">#</a></h2><p>By default, Dashy will attempt to use the language of your browser or system. If a translation for your language does not yet exist, it will fallback to English.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="in-the-ui"></a>In the UI<a class="hash-link" href="#in-the-ui" title="Direct link to heading">#</a></h3><p>You can manually select your language in the UI. Under the Config Menu, click the Language button, and select your language from the dropdown menu. Your preference will be saved in local storage.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="config-file"></a>Config File<a class="hash-link" href="#config-file" title="Direct link to heading">#</a></h3><p>You can also set your language in the config file. Specify the ISO code of one of the supported languages, under <code>appConfig.lang</code>. For example:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI yaml"><pre tabindex="0" class="prism-code language-yaml codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token key atrule">appConfig</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">language</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> de</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="available-languages"></a>Available Languages<a class="hash-link" href="#available-languages" title="Direct link to heading">#</a></h3><p>At the time of writing the following languages are supported: <code>en</code>, <code>zh-CN</code>, <code>nl</code>, <code>fr</code>, <code>de</code>, <code>es</code>, <code>sl</code>, <code>it</code>, <code>pt</code>, <code>ru</code>, <code>ar</code>, <code>hi</code>, <code>ja</code>, but an up-to-date list of all implemented translations can be found in <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/languages.js" target="_blank" rel="noopener noreferrer"><code>./src/utils/languages.js</code></a>. Languages are specified by their 2-digit <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank" rel="noopener noreferrer">ISO-639 code</a>, or sometimes a 4-digit code if it's a regional dialect.</p><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="adding-a-new-language"></a>Adding a new Language<a class="hash-link" href="#adding-a-new-language" title="Direct link to heading">#</a></h2><p>Dashy is using <a href="https://vue-i18n.intlify.dev/guide/" target="_blank" rel="noopener noreferrer">vue-i18n</a> to manage multi-language support.</p><p>Adding a new language is pretty straightforward, with just three steps:</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-create-a-new-language-file"></a>1. Create a new Language File<a class="hash-link" href="#1-create-a-new-language-file" title="Direct link to heading">#</a></h3><p>Create a new JSON file in <code>./src/assets/locales</code> for your language.</p><p>You should name it with the 2-digit <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" target="_blank" rel="noopener noreferrer">ISO-639 code</a> for your locale (e.g. for German <code>de.json</code>, French <code>fr.json</code> or Spanish <code>es.json</code>) - You can find a list of all ISO codes at <a href="https://www.iso.org/obp/ui" target="_blank" rel="noopener noreferrer">iso.org</a>.
|
|
If your language is a specific dialect or regional translation, then use the Posfix <a href="http://cldr.unicode.org/" target="_blank" rel="noopener noreferrer">CLDR</a> format, where, e.g. <code>en-GB.json</code> (British English), <code>es-MX.json</code> (Spanish, in Mexico) or <code>zh-CN.json</code> (Chinese, simplified) - A list of which can be found <a href="https://github.com/unicode-org/cldr-json/blob/master/cldr-json/cldr-core/availableLocales.json" target="_blank" rel="noopener noreferrer">here</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-translate"></a>2. Translate<a class="hash-link" href="#2-translate" title="Direct link to heading">#</a></h3><p>Using <a href="https://github.com/Lissy93/dashy/tree/master/src/assets/locales/en.json" target="_blank" rel="noopener noreferrer"><code>en.json</code></a> as an example, translate the JSON values to your language, while leaving the keys as they are. It's fine to leave out certain items, as if they're missing they will fall-back to English. If you see any attribute which include curly braces (<code>{xxx}</code>), then leave the inner value of these braces as is, as this is for variables.</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"theme-maker"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"export-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Benutzerdefinierte Variablen exportieren"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"reset-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Stile zurücksetzen für"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"show-all-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Alle Variablen anzeigen"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"save-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Speichern"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"cancel-button"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Abbrechen"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"saved-toast"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"{theme} Erfolgreich aktualisiert"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"reset-toast"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Benutzerdefinierte Farben für {theme} entfernt"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="3-add-your-file-to-the-app"></a>3. Add your file to the app<a class="hash-link" href="#3-add-your-file-to-the-app" title="Direct link to heading">#</a></h3><p>In <a href="https://github.com/Lissy93/dashy/tree/master/src/utils/languages.js" target="_blank" rel="noopener noreferrer"><code>./src/utils/languages.js</code></a>, you need to do 2 small things:</p><p>First import your new translation file, do this at the top of the page.
|
|
E.g. <code>import de from '@/assets/locales/de.json';</code></p><p>Second, add it to the array of languages, e.g:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> languages </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'English'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">code</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'en'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">locale</span><span class="token operator">:</span><span class="token plain"> en</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">flag</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'🇬🇧'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'German'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The name of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">code</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'de'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The ISO code of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">locale</span><span class="token operator">:</span><span class="token plain"> de</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// The name of the file you imported (no quotes)</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token literal-property property">flag</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'🇩🇪'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// An optional flag emoji</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>You can also add your new language to the readme, under the <a href="https://github.com/Lissy93/dashy#language-switching-" target="_blank" rel="noopener noreferrer">Language Switching</a> section and optionally include your name/ username if you'd like to be credited for your work. Done!</p><p>If you are not comfortable with making pull requests, or do not want to modify the code, then feel free to instead send the translated file to me, and I can add it into the application. I will be sure to credit you appropriately.</p><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="adding-new-text-to-a-component"></a>Adding New Text to a Component<a class="hash-link" href="#adding-new-text-to-a-component" title="Direct link to heading">#</a></h2><p>If you're working on a new component, then any text that is displayed to the user should be extracted out of the component, and stored in the file. This also applies to any existing components, that might have been forgotten to be translated. Thankfully, everything is already setup, so this is a pretty easy job.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="1-add-translated-text"></a>1. Add Translated Text<a class="hash-link" href="#1-add-translated-text" title="Direct link to heading">#</a></h3><p>Firstly, go to <a href="https://github.com/Lissy93/dashy/blob/master/src/assets/locales/en.json" target="_blank" rel="noopener noreferrer"><code>./src/assets/locales/en.json</code></a>, and either find the appropriate section, or create a new section. Lets say you're new component is called <code>my-widget</code>, you could add <code>"my-widget": {}</code> to store all your text as key-value-pairs. E.g.</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token property">"my-widget"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"awesome-text"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"I am some text, that will be seen by the user"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Note that you <strong>must</strong> add English translations for all text. Missing languages are not a problem, as they will always fallback to English, but if the English is missing, then nothing can be displayed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="2-use-text-within-component"></a>2. Use Text within Component<a class="hash-link" href="#2-use-text-within-component" title="Direct link to heading">#</a></h3><p>Once your text is in the translation file, you can now use it within your component. There is a global <code>$t</code> function, with takes the key of your new translation, and returns the value. For example:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI vue"><pre tabindex="0" class="prism-code language-vue codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain"><p>{{ $t('my-widget.awesome-text') }}</p></span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Note that the <code>{{ }}</code> just tells Vue that this is JavaScript/ dynamic.
|
|
This will render: <code><p>I am some text, that will be seen by the user</p></code></p><p>If you need to display text programmatically, from within the components JavaScript (e.g. in a toast popup), then use <code>this.$t</code>.
|
|
For example: <code>alert(this.$t('my-widget.awesome-text'))</code>.</p><p>You may also need to pass a variable to be displayed within a translation. Vue I18n supports <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html#interpolations" target="_blank" rel="noopener noreferrer">Interpolations</a> using mustache-like syntax.</p><p>For example, you would set your translation to:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"welcome-message"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Hello {name}!"</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>And then pass that variable (<code>name</code>) within a JSON object as the second parameter on <code>$t</code>, like:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token function" style="color:rgb(80, 250, 123)">$t</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">'welcome-message'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'Alicia'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Which will render:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI text"><pre tabindex="0" class="prism-code language-text codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain">Hello Alicia!</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>There are many other advanced features, including Pluralization, Datetime & Number Formatting, Message Support and more, all of which are outlined in the <a href="https://vue-i18n.intlify.dev/guide/" target="_blank" rel="noopener noreferrer">Vue-i18n Docs</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="basic-example"></a>Basic Example<a class="hash-link" href="#basic-example" title="Direct link to heading">#</a></h3><p>Using the search bar as an example, this would look something like:</p><p>In <a href="https://github.com/Lissy93/dashy/blob/master/src/components/Settings/SearchBar.vue" target="_blank" rel="noopener noreferrer"><code>./src/components/Settings/SearchBar.vue</code></a>:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI vue"><pre tabindex="0" class="prism-code language-vue codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token plain"><template></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> <form></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> <label for="search-input">{{ $t('search.search-label') }}</label></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> <input</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> v-model="searchValue"</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> :placeholder="$t('search.search-placeholder')"</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> /></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </form></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></template></span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div><p>Then in <a href="https://github.com/Lissy93/dashy/blob/master/src/assets/locales/en.json" target="_blank" rel="noopener noreferrer"><code>./src/assets/locales/en.json</code></a>:</p><div class="codeBlockContainer_J+bg"><div class="codeBlockContent_csEI json"><pre tabindex="0" class="prism-code language-json codeBlock_rtdJ thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_1zSZ"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token property">"search"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"search-label"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Search"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"search-placeholder"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Start typing to filter"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> ...</span></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_M3SB clean-btn">Copy</button></div></div></div><footer class="row docusaurus-mt-lg"><div class="col"><a href="https://github.com/Lissy93/dashy/edit/gh-pages/docs/docs/multi-language-support.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_mS5F" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_wj+Z"></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/alternate-views"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Alternate Views & Opening Methods</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/backup-restore"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Cloud Backup and Restore »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_vrFS thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#setting-language" class="table-of-contents__link">Setting Language</a><ul><li><a href="#in-the-ui" class="table-of-contents__link">In the UI</a></li><li><a href="#config-file" class="table-of-contents__link">Config File</a></li><li><a href="#available-languages" class="table-of-contents__link">Available Languages</a></li></ul></li><li><a href="#adding-a-new-language" class="table-of-contents__link">Adding a new Language</a><ul><li><a href="#1-create-a-new-language-file" class="table-of-contents__link">1. Create a new Language File</a></li><li><a href="#2-translate" class="table-of-contents__link">2. Translate</a></li><li><a href="#3-add-your-file-to-the-app" class="table-of-contents__link">3. Add your file to the app</a></li></ul></li><li><a href="#adding-new-text-to-a-component" class="table-of-contents__link">Adding New Text to a Component</a><ul><li><a href="#1-add-translated-text" class="table-of-contents__link">1. Add Translated Text</a></li><li><a href="#2-use-text-within-component" class="table-of-contents__link">2. Use Text within Component</a></li><li><a href="#basic-example" class="table-of-contents__link">Basic Example</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Intro</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li><li class="footer__item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="footer__link-item">Live Demo</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/quick-start">Quick Start</a></li><li class="footer__item"><a class="footer__link-item" href="/docs">Documentation</a></li></ul></div><div class="col footer__col"><div class="footer__title">Setup Guide</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/deployment">Deploying</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/configuring">Configuring</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/management">Management</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 1</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/authentication">Authentication</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/alternate-views">Alternate Views</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/backup-restore">Backup & Restore</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/icons">Icons</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 2</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/multi-language-support">Language Switching</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/status-indicators">Status Indicators</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/searching">Searching & Shortcuts</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/theming">Theming</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/developing">Developing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/development-guides">Development Guides</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contributing">Contributing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/showcase">Showcase</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/credits">Credits</a></li></ul></div><div class="col footer__col"><div class="footer__title">Misc</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/privacy">Privacy & Security</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/license">License</a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Legal</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/code-of-conduct">Code of Conduct</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/changelog">Changelog</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright"><a href="https://dashy.to">Dashy</a> - The Self-Hosted Dashboard for your Homelab<br>License under <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">MIT</a>. Copyright © 2024 <a href="https://aliciasykes.com">Alicia Sykes</a></div></div></div></footer></div>
|
|
<script src="/assets/js/runtime~main.ac7349e8.js"></script>
|
|
<script src="/assets/js/main.d13b237a.js"></script>
|
|
</body>
|
|
</html> |