Skip to content

Commit 53aa7ea

Browse files
committed
Moved API guide to multilanguage-setup.md
Added a guide for creating a basic language switching navigation
1 parent 7252a91 commit 53aa7ea

File tree

2 files changed

+105
-36
lines changed

2 files changed

+105
-36
lines changed

14/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -89,39 +89,6 @@ To view the language variant on the browser, follow these steps:
8989
5. Click on the link to view the new language node in the browser.
9090
6. Alternatively, you can add the domain name to your localhost in the browser. For example: [http://localhost:xxxx/da/](http:/localhost:xxxx/da/)
9191

92-
## Using Muli languages across APIs
93-
94-
When requesting content over an API, the culture will fallback to the default, unless explicitly set.
95-
96-
To do this, we can use the IVariationContextAccessor.
97-
98-
```csharp
99-
public class TimelineController : SurfaceController
100-
{
101-
private readonly ILocalizationService _localizationService;
102-
private readonly IVariationContextAccessor _variationContextAccessor;
103-
104-
public TimelineController(IUmbracoContextAccessor umbracoContextAccessor, IUmbracoDatabaseFactory databaseFactory, ServiceContext services, AppCaches appCaches, IProfilingLogger profilingLogger, IPublishedUrlProvider publishedUrlProvider, ILocalizationService localizationService, IVariationContextAccessor variationContextAccessor) : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider)
105-
{
106-
_localizationService = localizationService;
107-
_variationContextAccessor = variationContextAccessor;
108-
}
109-
110-
public IActionResult LoadTimelineItems(string culture = null)
111-
{
112-
IEnumerable<ILanguage> UmbracoLanguages = _localizationService.GetAllLanguages(); //a helpful method to get all configured languages
113-
var requestedCulture = UmbracoLanguages.FirstOrDefault(l => l.IsoCode == culture);
114-
115-
if (requestedCulture != null)
116-
{
117-
_variationContextAccessor.VariationContext = new VariationContext(requestedCulture.IsoCode);
118-
}
119-
120-
//this will now be in the requested culture
121-
var content = UmbracoContext.Content.GetAtRoot();
122-
123-
//Content requested in this View Component will now be in the requested culture
124-
return ViewComponent("TimelineItems");
125-
}
126-
}
127-
```
92+
##More Information
93+
94+
Further information on multi language setups can be found [here](../multilanguage-setup.md)

14/umbraco-cms/tutorials/multilanguage-setup.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,3 +262,105 @@ Danish Version:
262262
German Version:
263263

264264
<figure><img src="../../../10/umbraco-cms/tutorials/images/final-result-da.png" alt=""><figcaption></figcaption></figure>
265+
266+
267+
## Using Muli languages across APIs
268+
269+
When requesting content over an API, the culture will fallback to the default, unless explicitly set.
270+
271+
To do this, we can use the IVariationContextAccessor.
272+
273+
```csharp
274+
public class ExampleController : SurfaceController
275+
{
276+
private readonly ILocalizationService _localizationService;
277+
private readonly IVariationContextAccessor _variationContextAccessor;
278+
279+
public ExampleController(IUmbracoContextAccessor umbracoContextAccessor, IUmbracoDatabaseFactory databaseFactory, ServiceContext services, AppCaches appCaches, IProfilingLogger profilingLogger, IPublishedUrlProvider publishedUrlProvider, ILocalizationService localizationService, IVariationContextAccessor variationContextAccessor) : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider)
280+
{
281+
_localizationService = localizationService;
282+
_variationContextAccessor = variationContextAccessor;
283+
}
284+
285+
public IActionResult Index(string culture = null)
286+
{
287+
IEnumerable<ILanguage> UmbracoLanguages = _localizationService.GetAllLanguages(); //a helpful method to get all configured languages
288+
var requestedCulture = UmbracoLanguages.FirstOrDefault(l => l.IsoCode == culture);
289+
290+
if (requestedCulture != null)
291+
{
292+
_variationContextAccessor.VariationContext = new VariationContext(requestedCulture.IsoCode);
293+
}
294+
295+
//this will now be in the requested culture
296+
var content = UmbracoContext.Content.GetAtRoot();
297+
298+
//Content requested in this View Component will now be in the requested culture
299+
return ViewComponent();
300+
}
301+
}
302+
```
303+
304+
##Creating a Language Switching Navigation
305+
306+
To navigate between languages, we need to do two key things:
307+
308+
1. Get all the languages that the site can provide
309+
2. Identify the language used on the current page
310+
311+
Once we have these, we need to loop through the languages, and provide links to each home node.
312+
313+
#Getting all the languages for a site
314+
315+
There are two ways to achive this. One is to use ```localizationService.GetAllLanguages();``` to call the database, which is expensive and ideally includes caching.
316+
317+
The alternative is to get the Home node, and find all of the cultures associated to it. This has a few benifits including speed and easily providing us with a link to show the user. It is the process we will use.
318+
319+
#Identify the language for the current page
320+
321+
This is easily achived in ```cs.html``` files using ```umbracoHelper.AssignedContentItem.GetCultureFromDomains();```
322+
323+
#Steps
324+
325+
Now we have what we need, create a view called ```Navigation.cshtml``` , and paste in the following:
326+
327+
```cshtml
328+
@using Umbraco.Cms.Web.Common
329+
@inject IUmbracoHelperAccessor _umbracoHelperAccessor;
330+
331+
@{
332+
_umbracoHelperAccessor.TryGetUmbracoHelper(out var umbracoHelper);
333+
334+
var homePage = umbracoHelper.ContentAtRoot().FirstOrDefault(c => c.ContentType.Alias == "{{homeNodeContentAlias}}");
335+
var cultures = homePage?.Cultures;
336+
}
337+
338+
@if (cultures.Count > 1)
339+
{
340+
<ul aria-label="Language switcher">
341+
@foreach (var cult in cultures)
342+
{
343+
//get the settings for this culture
344+
System.Globalization.CultureInfo culture = new System.Globalization.CultureInfo(cult.Key);
345+
//if the current page has a langauage variant, otherwise link to the homepage language variant
346+
string langUrl = umbracoHelper.AssignedContentItem.Url(cult.Key, UrlMode.Relative) ?? homePage.Url(cult.Key, UrlMode.Relative);
347+
348+
<li>
349+
@if (cult.Key.ToLower() == umbracoHelper.AssignedContentItem.GetCultureFromDomains().ToLower())
350+
{
351+
<span aria-current="true" >@culture.NativeName</span>
352+
}
353+
else
354+
{
355+
<a href="@langUrl" hreflang="@cult.Key" lang="@cult.Key" >@culture.NativeName</a>
356+
}
357+
</li>
358+
}
359+
</ul>
360+
}
361+
```
362+
363+
You will need to replace ```{{homeNodeContentAlias}}``` with the Document Type alias of your Home node.
364+
365+
This will look at all the cultures available on the home node, and render links to either the language variant of the current page, or the home node for the language variant. If the home node for a language variant is removed, it will not appear in the list.
366+
Additionally, ```System.Globalization.CultureInfo``` is used to obtain the native name of the language being rendered. This is useful if a user does not speak the default language of the site.

0 commit comments

Comments
 (0)