zuloomine.blogg.se - Vue language switcher

In order to display country flags in language switcher links, you need to: This language switcher works out of the box.

Language switcher link representing currently viewed site has is-active CSS class.

Each language switcher link has hreflang parameter that lets google crawler recognize the multilingual structure of your website.

Aria label text can be provided by static translations.

Language switcher has proper ARIA tags that make it accessible - aria-role and aria-label.

Thanks to flag icon CSS library, a country flag can be appended to language link automatically.

Each language switcher link consists of language name in its native form (for english "english", for german "deutsche" etc.) and country flag.

No need for language switcher if there is nothing to switch to.

If current site is the only site in its site group, language switcher will not be displayed.

If the current element does not have an alternative version (it does not propagate across sites or is not enabled for specific site) or current page is not associated to any element (because it is accessed by custom route or template routing), language switcher link will direct to base URL of another site.

While looping through sites, language switcher performs few checks before outputting proper link.It will work even for elements added by plugins, assuming they have their own URL. If you are on the page associated with element - entry, category, commerce product - language switcher will display links to other versions of this element (belonging to other sites).If a site has "This site has its own base URL" option disabled, it will not appear in language switcher.Only links to sites belonging to same site group as the current site will be displayed. Language switcher will display links to alternative versions of the content on the website - links to other sites.Now, let's sum up how language switcher works. To learn about it, head to documentation. This article assumes you have a basic understanding of Craft CMS multisite functionality.

This post is part of my Craft CMS template components library.