卓越飞翔博客
在本教程中，我们将着眼于在 ProcessWire 中设置一个简单的主题，我们将研究延迟输出（现在是 ProcessWire 中的默认主题策略），并设置我们的站点以使用以下命令请求新内容： AJAX。
为了配合本教程，我使用 AJAX 和延迟输出为 ProcessWire 创建了一个新主题，可以在 Github 上找到该主题。您还可以在此处找到该主题的演示：艺术家简介演示。
有关安装 ProcessWire 的说明以及了解 AJAX 的基础知识，请查看以下资源：
-
如何安装和设置 ProcessWire CMS
本·拜福德
2016 年 1 月 18 日
-
前端设计师 AJAX 简介
乔治·马特索科斯
2016 年 2 月 2 日
直接输出和延迟输出
ProcessWire (PW) 拥有极其灵活的模板系统；它允许您通过在 /site/templates 文件夹中创建 php 文件来对您选择的任何结构进行编码，然后在 ProcessWire 管理中的 setup > templates > add new。也就是说，PW 论坛中有两种常见的模板策略：直接输出和延迟输出。
直接输出
直接输出看到每个php文件中的具体页面输出的命令。如果每个模板都与其他模板有很大不同，这会很棒。然而，如果每个模板只需要进行微小的更改，我发现这很麻烦。您可能还会发现自己从其他模板复制或包含大量文件。这是一个非常基本的模板（例如 basic-page.php）。
<?php
include("./_head.php");
echo "Your html content";
include("./_foot.php");
?>
延迟输出
延迟输出会在模板文件（例如 basic-page.php）之后看到名为之前的公共文件（如 _init.php）和 _main.php。您的 _main. 用作标记 (html) 的母舰，并且特定模板被降级为将内容添加到 _main.php 文件中的预定义变量输出.
在下面的示例中，我将模板页面中的正文和视频字段添加到变量 $content 并在我的 _main.php 文件中输出页面标记因为它总是在之后执行。
基本页面.php：
<?php
$content = $page->body . $page->video;
?>
_main.php：
<?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 .'">'. $child->title .'</a>';
}
?>
</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 来查看我如何组合主题并在 main.js 文件中使用 AJAX。我现在将介绍该主题中的一些概念。
AJAX 数据策略
AJAX 允许我们的用户显示我们网站上的新内容，而无需重新加载徽标、页脚和导航等常见页面部分。这也意味着我们的用户在请求新页面时永远不会看到空白的白色浏览器窗口。
使用 AJAX，我们可以从我们的网站请求常见的数据类型，例如 HTML、JSON 或 XML。为了简单起见，我们将从我们的网站请求 HTML，但是，如果您创建或正在使用现有的前端模板库，我们可以请求 JSON，从而减少每个请求的数据量（您可以使用很多库）可以在前端使用，一个例子是小胡子）。
在我们的主题中，我希望徽标、导航和页脚保持不变，但当我们单击链接时，主要内容区域会动态（或异步）更改。
在 ProcessWire 主题中使用 AJAX
为此，我们需要创建两个容器 HTML 元素，我们可以在其中添加新内容。容器元素不会改变，但会保存内部元素和附加到其上的内容。新内容将被添加，同时旧内容将被动画化，然后被删除。这将创造出流畅的外观和感觉。
使用我的 _main.php 文件，容器如下所示：
<div class="content-container cf">
<div class="content current-content">
<?php
echo $content;
?>
</div>
</div>
好的，到目前为止一切顺利。现在让我们添加一个对方便的 ProcessWire 变量 $ajax 的检查。 $ajax 声明请求是否来自 AJAX。下面是检查是否不是 AJAX 的示例：
if(!$ajax):
在我的主题的 _main.php 文件中，我可以包装 AJAX 请求不需要的内容，即除了 echo $content 之外的所有内容。看起来像这样：
<?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; // end if ajax ?>
<?php
// if ajax then only return $content
echo $content;
?>
<?php if(!$ajax): ?>
</div>
</div>
<?php
include("./foot.inc");
endif; // end if ajax
?>
现在我们已经准备好了模板，如果是普通页面请求，则可以为我们提供整个页面标记；如果是 AJAX 请求，则可以为我们提供 $content。
使用 jQuery AJAX 在 JavaScript 中请求页面
我的主题使用 JavaScript 库 jQuery。在指向最新版本的 jQuery 库的链接之后，我在 foot.inc 中引用了 main.js 文件。
使用 jQuery 的 .on 和 .ajax 函数，我们可以在每次单击带有类 .ajax-link。
到目前为止，我们的 main.js 代码如下所示：
$(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 ajax().done()
} // end of loadContent()
});
上面的代码有一个 .on('click','a.ajax-link', function(){ OUR FUNCTIONS HERE }) ，它允许我们触发我们的 loadContent() 函数只要单击链接即可。在 loadContent() 函数中，我们使用链接中的 url 发送 ajax 请求，然后当 .done() 时，我们附加 data 到 .content-container 元素。
以上所有内容都可以正常工作，但是我们可以添加许多额外的小功能以使一切变得无缝。
AJAX 技巧、技巧和逻辑
首先，我们可以对内容进行动画输入和输出（这链接到 main.js 文件的动画部分）。动画非常适合制作漂亮的网站，但也可以作为心理触发点来强调某些事情已经发生了变化。
接下来，我们要重新初始化页面所需的任何 JavaScript 函数，例如灯箱、幻灯片、砌体等，我们在将新的 HTML 数据添加到页面后将其放入。由于新内容是通过 AJAX 检索的，因此它可能不会与用于点击等的 JavaScript 侦听器绑定，因此除非我们重新初始化页面上所需的任何功能，否则不会触发。
创建已加载的检查对于防止无用的请求很有用。添加快速检查以查看新链接是否已被单击，然后返回 true; 如果它阻止用户多次访问同一页面。
最后，但可能是最重要的，我们现在可以使用 html5 历史记录来跟踪当前页面，并在用户按下后退按钮时重新加载过去的页面内容。
-
使用 History Web API 实现可爱、流畅的页面转换
托里克·菲尔道斯
2016 年 4 月 28 日
总结
使用上述一些策略，我们可以为我们的网站创建无缝的 AJAX 体验，并且使用 ProcessWire，我们可以立即将 AJAX 请求集成到我们的主题中。
有关 ProcessWire 和 AJAX 的更多信息，请查看我们的 Envato Tuts+ 教程。
