如何为ProcessWire创建AJAX驱动主题

在本教程中，我们将着眼于在ProcessWire中设置一个简单的主题，我们将研究延迟输出（现在是 ProcessWire 中的默认主题策略），并设置我们的站点以使用 ajax 请求新内容。

为了配合本教程，我为 ProcessWire 创建了一个新主题，同时使用了 AJAX 和延迟输出，可以在 Github 上找到。您还可以在此处找到该主题的演示：Artist Profile demo。

直接和延迟输出

ProcessWire (PW) 拥有极其灵活的模板系统；它允许您通过在文件夹中创建 php 文件来编写您选择的任何结构，/site/templates然后在setup > templates > add new中将它们关联到 ProcessWire 管理员中。这就是说，在 PW 论坛中发现了两种常见的模板策略：直接输出和延迟输出。

直接输出

直接输出查看每个 php 文件在特定页面输出的命令。如果每个模板都与其他模板大不相同，这可能会很棒。但是，如果在每个模板中只需要进行微小的更改，我发现这很麻烦。您可能还会发现自己从其他模板复制或包含大量文件。这是一个非常基本的模板（例如 basic-page.php）。

<?php 
include("./_head.php"); 
 
echo "Your html content";
 
include("./_foot.php"); 
?>

延迟输出

延迟输出看到在模板文件（例如）之前调用的公共文件（如 _init.php）和在模板文件之后调用的 _main.php basic-page.php。您_main.php被用作您的标记 (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");
?>

艺术家简介

Artist Profile是使用延迟输出的主题示例。主要的 HTML 结构写在_main.php文件中，包括页眉、页脚、徽标和导航。当前页面模板设置了$content变量——例如我的 basic-page.php。

您可以安装 The Artist Profile 以查看我是如何在main.js文件中组合主题和使用 AJAX 的。我现在将介绍这个主题中的一些概念。

AJAX数据策略

AJAX 允许我们的用户看到来自我们网站的新内容，而无需重新加载常见的页面部分，如徽标、页脚和导航。这也意味着我们的用户在请求新页面时永远不会看到空白的白色浏览器窗口。

使用 AJAX，我们可以从我们的网站请求常见的数据类型，如 HTML、JSON 或 XML。为简单起见，我们将从我们的站点请求 HTML，但是如果您创建或正在使用现有的前端模板库，我们可以请求 JSON，从而减少每个请求的数据量（您有很多库可以在前端使用，一个例子是mustache）。

在我们的主题中，我希望徽标、导航和页脚保持不变，但是当我们单击链接时，主要内容区域会动态（或异步）更改。

在我们的 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
?>

现在我们已经准备好模板，如果是普通页面请求，或者只是$contentAJAX 请求，则可以为我们提供整个页面标记。

使用 jquery AJAX在javascript中请求页面

我正在为我的主题使用 JavaScript 库jQuery。在指向最新版本的 jQuery 库的链接之后，我在我的foot.inc中引用了一个 main.js 文件。

使用 jQuery.on和.ajax函数，我们可以在任何时候单击带有类的链接时创建对新页面内容的 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 ***器绑定以进行点击等，因此除非我们重新初始化页面上需要的任何功能，否则不会触发。

创建已加载的检查对于防止无用的请求很有用。添加快速检查以查看新链接是否已被单击，然后return true;是否阻止用户多次访问同一页面。

最后，但可能最重要的是，我们现在可以使用html5 历史记录来跟踪当前页面并在用户按下后退按钮时重新加载过去的页面内容。