Страница Главная страница

Рассмотрим пример создания главной страницы.

Для начала в панели управления сайтом нужно создать главную страницу с адресом страницы / и с шаблоном страницы Главная страница (index.html). В шаблон index.html нужно вставить следующий html код:

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<div id="my_wrapper">
	<nav class="top-nav">
		<div class="shell">
			<ul class="iceverticalmenu">
				<li>
					<a href="{{link('/')}}">
						<span>Главная</span>
					</a>
				</li>
				<li>
					<a href="{{link('/uslugi')}}">
						<span>Услуги</span>
					</a>
				</li>
			</ul>
		</div>
	</nav>
	<header id="header">
		<div class="shell">
			<div class="header-inner">
				<div class="header-cnt">
					<h1 id="logo">{{widgetRender('logo_h1_t2')}}</h1>	
					<div class="mobile">
						{{widgetRender('logo_text_t2')}}
					</div>
				</div>
				<div class="slider-holder">
					<div class="flexslider">
						<div id="slider">
							<div class="slider-image" rel="section1">
								<img src="images/kung-fu-panda.jpg" width="500" height="400" />
							</div>
							<div class="slider-image" rel="section2">
								<img src="images/the-dark-knight.jpg" width="500" height="400" />
							</div>
							<div class="slider-image" rel="section3">
								<img src="images/hot-fuzz.jpg" width="500" height="400" />
							</div>
						</div>
					</div>
				</div>
				<div class="cl"> </div>
			</div>
			<div class="cl"> </div>
		</div>
	</header>
	<div class="main">
		<h3>Заголовок</h3>
		<p>Текст</p>
	</div>
</div>	
<div id="footer">
	<div class="footer-bottom">
		<div class="shell">
			<div class="copy">футер</div>
		</div>
	</div>
</div>

Затем изменить путь к подключаемым файлам, добавив к нему константу /template/bmcdocs, а также заменить меню, блоки текстов, картинок, слайдеров и т.д.

У нас получится файл со следующим содержанием:

<link rel="stylesheet" href="{{template.path}}/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="{{template.path}}/css/flexslider.css" type="text/css" media="all" />
<div id="wrapper">
	<nav class="top-nav">
		<div class="shell">
			{% set widgetname = 'mainmenu'%}
			{% set data = widgetData(widgetname) %}
			<ul class="iceverticalmenu">
				{% for child in data.menu['0'].childs %}
				{% set text = getLangData(data.menu[child].lang) %}
				{% set uri = link(data.menu[child].uri) %}
					<li>
						<a href="{{uri}}" target="{{data.menu[child].target}}">
							<span>{{text}}</span>
						</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	</nav>
	<header id="header">
		<div class="shell">
			<div class="header-inner">
				<div class="header-cnt">
					<h1 id="logo">{{widgetRender('logo_h1_t2')}}</h1>
					<div class="mobile">
						{{widgetRender('logo_text_t2')}}
					</div>
				</div>
				<div class="slider-holder">
					<div class="flexslider">
						{{widgetRenderByType(
							'slider',
							{
								widget_name: 'slider1',
							}
						)}}
					</div>
				</div>
				<div class="cl"> </div>
			</div>
			<div class="cl"> </div>
		</div>
	</header>
	<div class="main">
		<h3>{{widgetRender('content_h_t2')}}</h3>
		{{widgetRender('content_t2')}}
	</div>
</div>
<div id="footer">
	<div class="footer-bottom">
		<div class="shell">
			<div class="copy">{{widgetRender('footer_t2')}}</div>
		</div>
	</div>
</div>

Теперь код этого шаблона нужно разбить на несколько частей:

links.html со следующим содержимым:

<link rel="stylesheet" href="{{template.path}}/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="{{template.path}}/css/flexslider.css" type="text/css" media="all" />

menu.html со следующим содержимым:

<nav class="top-nav">
	<div class="shell">
		{% set widgetname = 'mainmenu'%}
		{% set data = widgetData(widgetname) %}
		<ul class="iceverticalmenu">
			{% for child in data.menu['0'].childs %}
			{% set text = getLangData(data.menu[child].lang) %}
			{% set uri = link(data.menu[child].uri) %}
				<li>
					<a href="{{uri}}" target="{{data.menu[child].target}}">
						<span>{{text}}</span>
					</a>
				</li>
			{% endfor %}
		</ul>
	</div>
</nav>

header.html со следующим содержимым:

<header id="header">
	<div class="shell">
		<div class="header-inner">
			<div class="header-cnt">
				<h1 id="logo">{{widgetRender('logo_h1_t2')}}</h1>	
				<div class="mobile">
					{{widgetRender('logo_text_t2')}}
				</div>
			</div>
			<div class="slider-holder">
				<div class="flexslider">
					{{widgetRenderByType(
						'slider',
						{
							widget_name: 'slider1',
						}
					)}}
				</div>
			</div>
			<div class="cl"> </div>
		</div>
		<div class="cl"> </div>
	</div>
</header>

footer.html со следующим содержимым:

<div id="footer">
	<div class="footer-bottom">
		<div class="shell">
			<div class="copy">{{widgetRender('footer_t2')}}</div>
		</div>
	</div>
</div>

Теперь эти части нужно подключить к шаблону. Главная страница index.html приобрела следующий вид:

{% include concat(template.path, '/links.html') %}
<div id="wrapper">
	{% include concat(template.path, '/menu.html') %}
	{% include concat(template.path, '/header.html') %}
	<div class="main">
		<h3>{{widgetRender('content_h_t2')}}</h3>
		{{widgetRender('content_t2')}}
	</div>
</div>
{% include concat(template.path, '/footer.html') %}

Страница "Главная страница"