mirror of https://github.com/lissy93/dashy
21 lines
40 KiB
HTML
21 lines
40 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">
|
|
<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="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="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."><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."><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 rel="stylesheet" href="/assets/css/styles.dd50695d.css">
|
|
<link rel="preload" href="/assets/js/runtime~main.e7540d76.js" as="script">
|
|
<link rel="preload" href="/assets/js/main.e0f631c7.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:"light")}()</script><div id="__docusaurus">
|
|
<div><a href="#main" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">Dashy</b></a></div><div class="navbar__items navbar__items--right"><div class="react-toggle displayOnlyInLargeViewport_GrZ2 react-toggle--disabled"><div class="react-toggle-track" role="button" tabindex="-1"><div class="react-toggle-track-check"><span class="toggle_71bT">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_71bT">🌞</span></div><div class="react-toggle-thumb"></div></div><input type="checkbox" class="react-toggle-screenreader-only" aria-label="Switch between dark and light mode"></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_1VuW themedImage--light_3UqQ navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">Dashy</b></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"></ul></div></div></div></nav><div class="main-wrapper docs-wrapper doc-page"><div class="docPage_31aa"><aside class="docSidebarContainer_3Kbt"><div class="sidebar_15mo"><nav class="menu menu--responsive thin-scrollbar menu_Bmed menuWithAnnouncementBar_2WvA" 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_fgN0" 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">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 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">User 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"><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/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></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></aside><main class="docMainContainer_3ufF"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_3FnS"><div class="docItemContainer_33ec"><article><div class="markdown"><header><h1 class="h1Heading_27L5">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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="available-languages"></a>Available Languages<a class="hash-link" href="#available-languages" title="Direct link to heading">#</a></h2><p>An up-to-date list of all currently supported languages 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> (e.g. <code>en</code>, <code>fr</code>, <code>de</code>, <code>es</code>, etc)</p><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="how-to-change-language"></a>How to change Language<a class="hash-link" href="#how-to-change-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><p>You can also manually select your language. This can be done, either through the UI (Config --> Language), or by setting it in your config file: </p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly yaml"><pre tabindex="0" class="prism-code language-yaml codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">appConfig</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">lang</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> de</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><hr><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" 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><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" 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></h5><p>Create a new JSON file in <code>./src/assets/locales</code> name is a 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 language, 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 language, 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), <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><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="2-translate"></a>2. Translate!<a class="hash-link" href="#2-translate" title="Direct link to heading">#</a></h5><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_K1bP"><div class="codeBlockContent_hGly json"><pre tabindex="0" class="prism-code language-json codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"theme-maker"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"export-button"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Benutzerdefinierte Variablen exportieren"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"reset-button"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Stile zurücksetzen für"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"show-all-button"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Alle Variablen anzeigen"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"save-button"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Speichern"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"cancel-button"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Abbrechen"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"saved-toast"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"{theme} Erfolgreich aktualisiert"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"reset-toast"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Benutzerdefinierte Farben für {theme} entfernt"</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" 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></h5><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_K1bP"><div class="codeBlockContent_hGly javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> languages </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'English'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> code</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'en'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> locale</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> en</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> flag</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'🇬🇧'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'German'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// The name of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> code</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'de'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// The ISO code of your language</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> locale</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> de</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// The name of the file you imported (no quotes)</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> flag</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'🇩🇪'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// An optional flag emoji</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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_2LWZ" id="adding-text"></a>Adding Text<a class="hash-link" href="#adding-text" 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.</p><p>Thankfully, everything is already setup, and so is as easy as adding text to the JSON file, and pasting the key to that text in your component.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" 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></h4><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_K1bP"><div class="codeBlockContent_hGly json"><pre tabindex="0" class="prism-code language-json codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token property" style="color:#36acaa">"my-widget"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"awesome-text"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"I am some text, that will be seen by the user"</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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 Enslish, but if the English is missing, then nothing can be displayed.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" 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></h4><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_K1bP"><div class="codeBlockContent_hGly vue"><pre tabindex="0" class="prism-code language-vue codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><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_Ue-o 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_K1bP"><div class="codeBlockContent_hGly json"><pre tabindex="0" class="prism-code language-json codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"welcome-message"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Hello {name}!"</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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_K1bP"><div class="codeBlockContent_hGly javascript"><pre tabindex="0" class="prism-code language-javascript codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">$t</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'welcome-message'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Alicia'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Which will render:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly text"><pre tabindex="0" class="prism-code language-text codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">Hello Alicia!</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="basic-example"></a>Basic Example<a class="hash-link" href="#basic-example" title="Direct link to heading">#</a></h4><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_K1bP"><div class="codeBlockContent_hGly vue"><pre tabindex="0" class="prism-code language-vue codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain"><template></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> <form></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> <label for="search-input">{{ $t('search.search-label') }}</label></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> <input</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> id="search-input"</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> v-model="searchValue"</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> :placeholder="$t('search.search-placeholder')"</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> /></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </form></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></template></span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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_K1bP"><div class="codeBlockContent_hGly json"><pre tabindex="0" class="prism-code language-json codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token property" style="color:#36acaa">"search"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"search-label"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Search"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"search-placeholder"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Start typing to filter"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> ...</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o 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_2_ui" 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_3DPF"></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_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#available-languages" class="table-of-contents__link">Available Languages</a></li><li><a href="#how-to-change-language" class="table-of-contents__link">How to change Language</a></li><li><a href="#adding-a-new-language" class="table-of-contents__link">Adding a new Language</a></li><li><a href="#adding-text" class="table-of-contents__link">Adding Text</a></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 © 2021 <a href="https://aliciasykes.com">Alicia Sykes</a></div></div></div></footer></div>
|
|
<script src="/assets/js/runtime~main.e7540d76.js"></script>
|
|
<script src="/assets/js/main.e0f631c7.js"></script>
|
|
</body>
|
|
</html> |