О файлах layout.ftl
Обратите внимание, в приведенном примере папки напрямую отображаются в структурные разделы. Каждая папка также содержит файл layout.ftl
, определяющий компоновку этого раздела и включающий компоновку предыдущего уровня. Корневой layout.ftl
обычно содержит самые базовые элементы. Однако, мы избавили вас от необходимости самим вносить эти данные. Каждое сообщество уже имеет свой корневой layout.ftl
, с типичными для всех страниц элементами: <head>
c css и js файлами и различной метаинформацией, а также <body>
с минимумом общей разметки (например, outer и нижний колонтитул footer).
Ознакомиться с примерным содержанием корневого файла layout.ftl
[#ftl]
<!doctype html>
<html>
<head>
<title>SAVANT.PRO Sites Development Kit</title>
<link type="text/css"
rel="stylesheet"
href="/css/themes/cx.css"/>
<script type="text/javascript" src="/js/jquery.js">
</script>
<script type="text/javascript" src="/js/jquery.ui.min.js">
</script>
<script type="text/javascript" src="/svc/locale.js">
</script>
<script type="text/javascript" src="/js/ea.ui.js">
</script>
<script type="text/javascript">
$(function() {
eaui.init();
});
</script>
</head>
<body>
<div id="outer">
<div id="header"
class="heavy">
<div class="cell logo no-mobile">
<img src="/img/savant-owl.png"/>
</div>
<div class="cell">
<div class="title">savant.pro/dev</div>
<div class="subtitle">Sites development toolkit</div>
</div>
</div>
<div id="content">
${main}
</div>
<div id="footer">
<div class="centered">
<a href="http://savant.pro/"
class="sav-logo no-icon"
title="SAVANT.PRO"
target="_blank">
<img src="/img/savant-logo-small.png"/>
</a>
</div>
<div>
<span>2012</span>
<span>©</span>
<a href="http://savant.pro"
class="no-icon"
target="_blank">Territoriya Obrazovaniya OOO</a>
</div>
<div class="powered-by">
<span>Powered by</span>
<a class="cx no-icon"
href="http://circumflex.ru"
target="_blank">Circumflex</a>
</div>
</div>
</div>
</body>
</html>
Важным является то, что файлы layout.ftl
сами по себе не могут быть обработаны с помощью FreeMarker. С помощью переменных в них определяются фрагменты, которые должны быть определены для успешной отрисовки. Можно сказать, что они предназначены только для использования с директивой include
.
Вернемся к практике. Вы можете создать у себя все описанные файлы и заполнить их приведенной информацией. В нашем случае файл templates/test/layout.ftl
может выглядеть следующим образом:
[#ftl]
<header>
<h1 id="logo">Сайт сообщества</h1>
</header>
<nav>
<ul>
<li id="nav-news">
<a href="/news">Новости</a>
</li>
<li id="nav-contacts">
<a href="/contacts">Контакты</a>
</li>
<li id="nav-about">
<a href="/about">О нас</a>
</li>
</ul>
</nav>
<section id="content">
${content}
</section>
<footer>
${footer!}
</footer>
Обратите внимание на ${content}
и ${footer!}
— это те самые фрагменты, которые должны быть определены где-то еще (восклицательный знак позволяет объявить необязательные фрагменты). Иными словами, в этим места будут вставлены «порции» разметки из других фалов. Теперь рассмотрим файлы templates/test/pages/layout.ftl
и templates/test/news/layout.ftl
, каждый из них добавляет к ${content}
свою разметку и делегирует оставшуюся отрисовку компоновочному файлу предыдущего уровня.
Вот пример файла templates/test/news/layout.ftl
:
[#ftl]
[#assign content]
<section id="news">
<h2>
Новости сообщества
</h2>
${content}
</section>
[/#assign]
[#assign footer]
<p id="footer">
Новости будут регулярно обновляться
</p>
[/#assign]
[#include "../layout.ftl"/]
А вот так может выглядеть файл templates/pages/layout.ftl
:
[#ftl]
[#assign content]
<article id="page">
<h2>
Информационная страничка
</h2>
${content}
</article>
[/#assign]
[#include "../layout.ftl"/]