В этом руководстве мы рассмотрим настройку простой темы в ProcessWire , исследуем задержку вывода (теперь это стратегия по умолчанию в ProcessWire) и настроим наш сайт для запроса нового контента с использованием AJAX.
В дополнение к этому уроку я создал новую тему для ProcessWire, используя как AJAX, так и задержанный вывод, который можно найти на Github . Вы также можете найти демо-версию темы здесь: Artist Profile demo .
Для получения инструкций по установке ProcessWire и для изучения основ AJAX ознакомьтесь со следующими ресурсами:
-
CMSКак установить и настроить ProcessWire CMS -
AjaxВведение в AJAX для дизайнеров внешнего интерфейса
Прямой и задержанный вывод
ProcessWire (PW) имеет невероятно гибкую систему шаблонов; он позволяет вам кодировать любую структуру по вашему выбору, создавая файлы php в папке /site/templates а затем связывать их с администратором ProcessWire в разделе setup> templates> add new . При этом на форумах PW были найдены две общие стратегии шаблонирования: прямой вывод и задержанный вывод .
Прямой вывод
Прямой вывод видит каждый php-файл в команде вывода конкретной страницы. Это может быть здорово, если каждый шаблон сильно отличается от других. Тем не менее, я нашел это громоздким, если в каждом шаблоне нужны только незначительные изменения. Вы также можете копировать из других шаблонов или включать много файлов. Вот очень простой шаблон (например, basic-page.php).
|
1
2
3
4
5
6
7
|
<?php
include(«./_head.php»);
echo «Your html content»;
include(«./_foot.php»);
?>
|
Задержка вывода
Отложенный вывод видит общие файлы (например, _init.php), вызываемые до , и _main.php после файла шаблона (например, basic-page.php ). Ваш _main.php используется в качестве _main.php для вашей разметки (html), а специальный шаблон добавляется для добавления содержимого в предопределенные переменные, выводимые в файле _main.php .
В приведенном ниже примере я добавляю поля body и video со страницы шаблона в переменную $content и _main.php разметку страницы в моем файле _main.php как это всегда выполняется впоследствии.
базовый page.php:
|
1
2
3
|
<?php
$content = $page->body .
?>
|
_main.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?php
include(«./head.inc»);
?>
<div id=»page»>
<header class=»»>
<a id=»logo» href=»<?php echo $pages->get(‘/’)->url; ?>»>
<h1>
<?php echo $pages->get(‘/’)->title;
</h1>
</a>
</header>
<aside>
<nav>
<?php
// echo nav links
$children = $pages->get(‘/’)->children;
foreach($children as $child){
echo ‘<a name=»‘.$child->title.'» class=»ajax-link’.$class.'» href=»‘. $child->url .'»>’.
}
?>
</nav>
</aside>
<div class=»content-container cf»>
<div class=»content current-content»>
<?php
// add content to page from template file
echo $content;
?>
</div>
</div>
<?php
include(«./foot.inc»);
?>
|
Профиль художника
Профиль Исполнителя является примером темы, которая использует задержку вывода . Основная структура HTML написано в файле _main.php и включает в себя заголовок страницы, нижний колонтитул, логотип и навигацию. Текущий шаблон страницы устанавливает переменную $content — например, мой basic-page.php.
Вы можете установить The Artist Profile, чтобы увидеть, как я собрал тему и использовал AJAX в файле main.js. Сейчас я расскажу о некоторых концепциях в рамках этой темы.
Стратегии данных AJAX
AJAX позволяет нашим пользователям показывать новый контент с нашего сайта без перезагрузки общих частей страницы, таких как логотип, нижний колонтитул и навигация. Это также означает, что наш пользователь никогда не увидит пустое белое окно браузера, пока запрашивается новая страница.
Используя AJAX, мы можем запрашивать общие типы данных с нашего сайта, такие как HTML, JSON или XML. Для простоты мы будем запрашивать HTML с нашего сайта, однако, если вы создали или использовали существующую библиотеку шаблонов внешнего интерфейса, мы могли бы вместо этого запросить JSON, сократив объем данных на запрос (существует множество библиотек, которые вы можно использовать на веб-интерфейсе, например, усы ).
В нашей теме я бы хотел, чтобы логотип, навигация и нижний колонтитул оставались неизменными, но чтобы основная область содержимого изменялась динамически (или асинхронно) при нажатии на ссылку.
Использование AJAX в нашей теме ProcessWire
Для этого нам нужно создать два контейнерных HTML-элемента, в которые мы можем добавить наш новый контент. Элемент контейнера не изменится, но будет содержать внутренний элемент и контент, добавленный к нему. Новый контент будет добавлен, пока старый контент анимирован, а затем удален. Это создаст плавный внешний вид.
С моим файлом _main.php контейнеры выглядят так:
|
1
2
3
4
5
6
7
|
<div class=»content-container cf»>
<div class=»content current-content»>
<?php
echo $content;
?>
</div>
</div>
|
Хорошо, пока все хорошо. Теперь давайте добавим проверку удобной переменной ProcessWire $ajax . $ajax объявляет, был ли запрос от AJAX. Вот пример проверки, если не AJAX:
|
1
|
if(!$ajax):
|
В файле _main.php моей темы я могу обернуть содержимое, которое мне не нужно для запроса AJAX, то есть все, кроме echo $content . Это выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<?php
// include page structure if not an ajax request
if(!$ajax):
include(«./head.inc»);
?>
<div id=»page»>
<header class=»»>
<a id=»logo» href=»<?php echo $pages->get(‘/’)->url; ?>»>
<h1>
<?php echo $pages->get(‘/’)->title;
</h1>
</a>
</header>
<aside>
<nav>
<?php
// nav content here
?>
</nav>
</aside>
<div class=»content-container cf»>
<div class=»content current-content»>
<?php endif;
<?php
// if ajax then only return $content
echo $content;
?>
<?php if(!$ajax): ?>
</div>
</div>
<?php
include(«./foot.inc»);
endif;
?>
|
Теперь у нас есть готовый шаблон, чтобы дать нам полную разметку страницы, если запрос обычной страницы, или только $content если запрос AJAX.
Запрос страницы в JavaScript с помощью jQuery AJAX
Я использую библиотеку JavaScript jQuery для своей темы. Я ссылался на файл main.js в моем файле foot.inc после ссылки на последнюю версию библиотеки jQuery.
Используя функции .on и .ajax jQuery, мы можем создавать AJAX-запрос к новому содержимому страницы каждый раз, когда .ajax-link ссылку с классом .ajax-link .
Пока наш код main.js выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
$(function() {
var href;
var title;
$(‘body’).on(‘click’,’a.ajax-link’,function(e) { // nav link clicked
href = $(this).attr(«href»);
title = $(this).attr(«name»);
// load content via AJAX
loadContent(href);
// prevent click and reload
e.preventDefault();
});
function loadContent(url){ // Load content
// variable for page data
$pageData = »;
// send Ajax request
$.ajax({
type: «POST»,
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful
// construct new content
$pageData = ‘<div class=»content no-opacity ajax»>’ + $pageData + ‘</div>’;
// add content to page
$(‘.content-container’).append($pageData);
// remove old content
$(‘.content.current-content’).remove();
// show new content and clean up classes
$(this).removeClass(‘no-opacity’).removeClass(‘ajax’).addClass(‘current-content’);
});
} // end of loadContent()
});
|
В приведенном выше коде есть .on('click','a.ajax-link', function(){ OUR FUNCTIONS HERE }) которая позволяет нам запускать нашу loadContent() каждый раз, когда loadContent() ссылку. В функции loadContent() мы используем URL-адрес из ссылки для отправки ajax-запроса, а затем, когда .done() добавляем data в элемент .content-container .
Все вышеперечисленное будет работать нормально, но мы можем добавить множество небольших дополнений, чтобы все было гладко.
Трюки, советы и логика AJAX
Во-первых, мы можем анимировать наш контент и выходить из него (это ссылка на анимированную часть файла main.js). Анимация отлично подходит для создания привлекательных веб-сайтов, но также может служить психологическим стимулом, чтобы подчеркнуть, что что-то изменилось.
Затем мы хотим переинициализировать любые функции JavaScript, которые нам нужны для страницы, например, лайтбоксы, слайд-шоу, кладку и т. Д., И мы добавляем это после добавления новых HTML-данных на страницу. Поскольку новый контент был получен через AJAX, он не может быть связан с прослушивателями JavaScript за клики и т. Д. И поэтому не сработает, если мы не переинициализировали какие-либо функции, которые нам нужны на странице.
Создание уже загруженной проверки полезно для предотвращения бесполезных запросов. Добавление быстрой проверки, чтобы увидеть, была ли нажата новая ссылка, а затем return true; если он запрещает пользователям доступ к одной и той же странице несколько раз.
Наконец, но, вероятно, самое главное, теперь мы можем использовать историю html5 для отслеживания текущей страницы и перезагрузки содержимого прошлой страницы, когда пользователь нажимает кнопку «Назад» .
-
JavaScriptПрекрасные, плавные переходы страниц с помощью веб-API History
Завершение
Используя некоторые из вышеперечисленных стратегий, мы можем создать беспрепятственный интерфейс AJAX для нашего веб-сайта, а используя ProcessWire, мы можем в кратчайшие сроки интегрировать запросы AJAX в нашу тему.
Чтобы узнать больше о ProcessWire и AJAX, ознакомьтесь с нашими руководствами по Envato Tuts +.