Let’s create our template which is going to be very simple but it will contain all the elements we need in order to demonstrate how to make a Multilanguage web site. We open the Page Template from the Settings section and we replace its contents with the following code.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@Umbraco.Field("title")</title>
<meta name="description" content="@Umbraco.Field("description")">
<meta name="keywords" content="@Umbraco.Field("keywords")">
<link href="/css/Stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="Container">
<div>
<nav id="Menu">
<a href="/en/home">Home</a>
<a href="/en/company">Company</a>
</nav>
<nav id="Lanugages">
<a href="#">Greek</a>
<a href="#">English</a>
</nav>
</div>
<div id="Body">
@Umbraco.Field("pageText")
</div>
<div id="Footer">
Sample multilanguage site
</div>
</div>
</body>
</html>In this template we have the three fields for the SEO which are the Title, the Description and the Keywords and we also added the Page Text which will be the contents of the page.
We have only two pages so that we will keep it as simple as possible. The links to each page are static now but we will make them dynamic later.
We have two links which will be our language selector. At the moment they do nothing but we will fix it as well later.
We also have a footer with a static text in order to demonstrate how to make the static texts Multilanguage.
In the Template we defined a stylesheet file that we have to create and the contents for this file is the following:
#Container {
width: 720px;
margin: auto;
}
#Body {
padding: 20px 0;
clear: both;
}
#Footer {
background-color: gray;
color: white;
padding: 20px;
text-align: center;
}
nav {
margin: 20px 0;
}
nav a {
padding: 10px;
background-color: gray;
color: white;
text-decoration: none;
}
nav a:hover {
background-color: lightgray;
color: gray;
}
#Menu {
float: left;
}
#Lanugages {
float: right;
}