Быстрый старт - Шаг 7
Использование тегов EE

Цель:  Изучить модули (особенно о модуль разделов сайта EE), изучить одиночные теги EE, изучить парные теги EE, изучить параметры тегов EE, узнать, как использовать переменные в тегах EE, изучить основы URL EE, узнать о глобальной переменной path, и закончить создание раздела Getting Started Tutorial!

Обзор

Давайте сделаем обзор того, чему мы научились к настоящему моменту. Сначала вы создали HTML страницу с группой шаблонов и шаблонами для вашего веб сайта. Затем вы создали новый раздел для вашего сайта, чтобы добавлять контент. И вы только что закончили публикацию четырех записей в новом разделе. Теперь вы должны настроить шаблоны для отображения содержимого сайта. Для этого, необходимо использовать теги EE.

Что такое тег ExpressionEngine?

Тег EE сообщает вашей базе данных EE, как отображать информацию на вашем сайте. Теги предоставляют вам большое количество возможностей для гибкого управления тем, какая информация и каким образом отображается, и даже когда информация будет отображена.

На что похож тег EE?

Тег просто узнать, так как он окружен фигурными скобками и всегда начинается с "exp:" Вот пример.

{exp:weblog:weblog_name}

Первая часть тега exp:, сообщает ExpressionEngine, что это тег. Вторая часть, weblog, обозначает модуль, к которому принадлежит тег, в нашем случае это модуль разделов. Третья часть (которая существует не в каждом теге), weblog_name, является определенной функцией внутри модуля, которую вы вызываете; в нашем случае это функция, для вывода "Имени раздела".

Важное понятие: Большинство функциональных возможностей ExpressionEngine достигнуто благодаря использованию "Добавочных Модулей", которые являются компонентами, обеспечивающими определенные особенности и возможности. ExpressionEngine в настоящее время имеет свыше 20 различных модулей, включая модули разделов сайта и управление содержимым, списки рассылки, модуль поиска, модуль Email, Mobile Blogging, галерея изображений и модуль форума. Каждый модуль имеет набор тегов EE, которые вставляются в шаблоны для получения доступа к функциональным возможностям модуля.

Параметры

Но постойте! У вас два раздела. Один, - раздел по умолчанию, другой, - новый раздел "Getting Started Tutorial", который вы создали для изучения. Как тег EE определит, имя какого раздела нужно отобразить? Хороший вопрос. Суть в том, что тег EE не знает, имя раздела для отображения. Вы должны указать тегу EE, что вы хотите отобразить название раздела Getting Started Tutorial. Для этого используются параметры.

Параметры позволяют вам управлять и изменять поведение тега EE. В вашем случае, вы должны указать имя раздела, который будет отображаться, таким образом, вы должны добавить параметр как указано ниже:

{exp:weblog:weblog_name weblog="gst_blog"}

Параметры состоят из имени параметра, в нашем случае weblog, и значения, в нашем случае "gst_blog" (так как это короткое имя раздела Getting Started Tutorial). Значение должно указывается всегда. Имени присваивается значение с помощью знака =.

Важное понятие: Всякий раз, для получения информации из определенного раздела EE, вы всегда должны использовать короткое имя раздела. Вы можете найти короткое имя, щелкая Admin --> Администрирование разделов --> Управление разделами сайта.

Пробуйте это!

Скопируйте код, приведенный ниже в шаблон "index" в вашей группе шаблонов "tutorial".

<h1>The name of my weblog is {exp:weblog:weblog_name weblog="gst_blog"}</h1>

Поместите код сразу после открытия HTML - тега "body", как показано ниже.

<html>
<head>
<title>My First EE Site</title>
</head>
<body>

<h1>The name of my weblog is {exp:weblog:weblog_name weblog="gst_blog"}</h1>

<h2>The title of my post</h2>

<div class="entry">

<p>Hello world! This is where my entry should show up.</p>

</div>

</body>
</html>

При просмотре шаблона в браузере, тег {exp:weblog:weblog_name weblog="gst_blog"} будет обработан, и выведет полное имя раздела, как подсвечено на рисунке ниже.

Помните о том, как тег EE weblog_name был заменен фактическим именем раздела, указанным нами в параметре.

Одиночные и парные теги

Тег {exp:weblog:weblog_name} это пример одиночного тега. Одиночные теги разработаны для того, чтобы возвращать одно значение или одну часть информации.

Парные теги разработаны для возвращения нескольких частей информации. Парные теги имеют два отличия от одиночных тегов. Во-первых, парный тег должен быть закрыт. Во-вторых, парный тег может содержать некоторый контент между секциями открытия и закрытия.

Рассмотрим, например тег weblog entry.

{exp:weblog:entries weblog="gst_blog"}

Some content goes here.

{/exp:weblog:entries}

Как и одиночные теги, парные теги могут использовать параметры. В парных тегах параметры всегда расположены в открывающей секции, как показано выше. Закрывающая секция парного тега всегда повторяет открывающую. Необходимо только добавить "/" перед названием тега. Обратите внимание, что параметры не повторяются в закрывающей секции, в ней указывается только название тега.

Действительно полезная возможность парных тегов - то, что вы можете использовать переменные которые позволяют вам размещать еще более подробную информацию для использования на вашем сайте.

Переменные

Обратите внимание, что параметр управляет и изменяет, а переменная заменяется. Самый легкий способ понять это попробовать. Вы уловите смысл сразу же.

В шаблоне "index" в группе шаблонов "tutorial", найдите следующий код HTML:

<h1>The title of my post</h1>

<div class="entry">

<p>Hello world! This is where my entry should show up.</p>

</div>

Теперь вам необходимо интегрировать тег записи раздела в HTML. Это позволит вам отображать контент раздела Getting Started Tutorial, созданного вами на сайте.

Сначала откройте тег записи раздела. Помните, так как вы имеете больше чем один раздел, вы должны использовать параметр weblog, чтобы сообщить EE какой раздел выводить.

{exp:weblog:entries weblog="gst_blog"}

<h1>The title of my post</h1>

<div class="entry">

<p>Hello world! This is where my entry should show up.</p>

</div>

Во вторых, замените "The title of my post" на переменную {title}. После обработки шаблона, в браузере, переменная {title} будет заменена фактическим заголовком статьи вашего раздела. В руководстве пользователя описывается, какие переменные могут использоваться в определенных тегах EE. Вскоре мы узнаем, как это делать.

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

<p>Hello world! This is where my entry should show up.</p>

</div>

В третьих, замените "Hello world! This is where my entry should show up." на переменную {summary}. После обработки шаблона, в браузере, переменная {summary} будет заменена содержимым поля Summary вашей записи раздела.

Обратите внимание, что здесь вы также заменили HTML тег <p>. По умолчанию все записи раздела EE форматируются как корректный код xhtml, таким образом, соответствующие теги <p> будут добавлены автоматически. (Вы можете изменить эту настройку непосредственно на страницах "Публиковать" и "Редактировать". Также вы можете изменить форматирование текста по умолчанию.)

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

{summary}

</div>

В четвертых, закройте тег weblog entry.

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

{summary}

</div>

{/exp:weblog:entries}

Ваш шаблон "index" в группе шаблонов "tutorial" сейчас должен содержать этот код.

<html>
<head>
<title>My First EE Site</title>
</head>
<body>

<h2>The name of my weblog is {exp:weblog:weblog_name weblog="gst_blog"}</h2>

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

{summary}

</div>

{/exp:weblog:entries}

</body>
</html>

Теперь, обновите шаблон и просмотрите его в браузере. Вы должны увидеть что-то подобное рисунку приведенному ниже.

Ваш шаблон index в группе шаблонов tutorial, должен выглядеть приблизительно так.

Обратите внимание, что по умолчанию тег weblog entry отображает все записи в указанном разделе, начиная с самой новой. Вы можете использовать параметры, для изменения этого поведения. Вскоре мы узнаем, как это делать.

Ссылка на "Полную" запись

Стандартная практика в традиционных веб журналах, сайтах новостей, и множестве других сайтов, - они должны иметь список "пояснений" или "резюме" статей, записей, выпусков новостей, и т.д. на странице со ссылкой "read more" (читать далее), которая ведет на страницу с "полной" статьей, записью, страницей, и т.д.

Сейчас ваш шаблон index показывает резюме (поле Summary) ваших записей раздела. Последний шаг создания вашего сайта это создание ссылки "read more" в вашем шаблоне index, которая ведет на страницу просмотра "полной версии" записи.

Ссылка на шаблон "article"

Есть множество способов, создания ссылки на шаблон "article". Рассмотрим способ, который является наиболее дружественным для поисковых серверов: переменная {title_permalink} доступна для тега weblog entry.

Переменная {title_permalink} использует поле URL заголовка, для создания красивых, дружественных для поисковых серверов, URL, которые также являются легко читаемыми на английском языке. Переменные, как и параметры, могут иметь значения. В нашем случае вы хотите указать переменной {title_permalink} ссылку, для связи с шаблоном "articles", так что определите значение так:

{title_permalink="tutorial/article"}

Обратите внимание, что значение - название группы шаблонов, сопровождается названием шаблона, с которым вы хотите установить связь. Вообще, URL в EE всегда пишутся в этом формате. Пример использования этого в стандартной ссылке HTML:

<a href="{title_permalink="tutorial/article"}">Read More</a>

Код будет обработан следующим образом:

<a href="http://example.com/index.php/tutorial/article/url_title_of_entry/">Read more</a>

Теперь обновите ваш шаблон "index" с кодом, приведенным ниже (изменения выделены полужирным шрифтом).

<html>
<head>
<title>My First EE Site</title>
</head>
<body>

<h2>The name of my weblog is {exp:weblog:weblog_name weblog="gst_blog"}</h2>

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

{summary}

<p><a href="{title_permalink="tutorial/article"}">Read More</a></p>

</div>

{/exp:weblog:entries}

</body>
</html>

После обновления и просмотра шаблона "index" в браузере, вы увидите, что добавлена ссылка "Read More", подсвечена на рисунке ниже.

Шаблон index со ссылкой Read More на шаблон article.

Подготовка шаблона "article"

Теперь, когда вы установили связь с шаблоном с "article", вы должны подготовить этот шаблон, для того чтобы он выводил "полную" запись раздела. "Полная" запись, в нашем случае, является страницей, которая отображает поля Summary, Body, и Extended вашего раздела Getting Started Tutorial.

Откройте окно редактирования вашего шаблона "article" в группе шаблонов "tutorial" и замените существующий код, кодом, приведенным ниже. Единственное различие между кодом, приведенным ниже и кодом шаблона "index", это добавление переменных {body} и {extended}, которые отобразят содержимое полей Body и Extended вашего раздела Getting Started Tutorial. Также добавлена ссылка внизу страницы, чтобы легко возвратиться к странице "index". Изменения выделены полужирным шрифтом.

<html>
<head>
<title>My First EE Site</title>
</head>
<body>

<h2>The name of my weblog is {exp:weblog:weblog_name weblog="gst_blog"}</h2>

{exp:weblog:entries weblog="gst_blog"}

<h1>{title}</h1>

<div class="entry">

{summary}

{body}

{extended}


</div>

{/exp:weblog:entries}

<p><a href="{path="tutorial/index"}">Back to the main page</a>.</p>

</body>
</html>

Краткое примечание: Переменная {path="tutorial/index"}, которую вы использовали для создания ссылки на шаблон "index", это глобальная переменная, значит, ее можно использовать в любом шаблоне. Это самый простой способ создания ссылок на любой шаблон в системе EE. Как было упомянуто ранее, формат записи для ссылок всегда template_group/template. Более подробно это описано в руководстве пользователя в главах глобальная переменная Path и концепция URL ExpressionEngine.

Далее:  Основы построения

Наверх страницы