AJAX 통합을 사용하여 ProcessWire 테마 만들기-PHP 튜토리얼-php.cn

이 튜토리얼에서는 ProcessWire에서 간단한 테마를 설정하는 방법을 살펴보고, 지연된 출력(현재 ProcessWire의 기본 테마 정책)을 살펴보고 AJAX를 사용하여 새 콘텐츠를 요청하도록 사이트를 설정합니다.

이 튜토리얼을 진행하기 위해 Github에서 찾을 수 있는 AJAX 및 지연 출력을 사용하여 ProcessWire용 새 테마를 만들었습니다. 아티스트 프로필 데모에서 이 테마의 데모를 찾을 수도 있습니다.

ProcessWire 설치에 대한 지침과 AJAX의 기본 사항을 이해하려면 다음 리소스를 확인하세요.

ProcessWire CMS 설치 및 설정 방법 벤 바이포드 2016년 1월 18일
프런트엔드 디자이너를 위한 AJAX 소개 조지 마초코스 2016년 2월 2일

직접 출력과 지연 출력

ProcessWire(PW)는 매우 유연한 템플릿 시스템을 갖추고 있어 /site/templates 폴더에 PHP 파일을 생성한 다음 ProcessWire 관리자의 setup > 즉, PW 포럼에는 직접 출력과 지연 출력이라는 두 가지 일반적인 템플릿 전략이 있습니다.

직접 출력

각 PHP 파일의 특정 페이지의 출력을 보려면 명령을 직접 출력하십시오. 각 템플릿이 다른 템플릿과 크게 다르다면 좋을 것입니다. 그러나 각 템플릿에 대해 사소한 변경만 필요한 경우에는 이것이 번거롭다는 것을 알았습니다. 다른 템플릿에서 복사하거나 수많은 파일을 포함할 수도 있습니다. 이는 매우 기본적인 템플릿입니다(예: basic-page.php).

으아아아

지연된 출력

지연된 출력에는 템플릿 파일(예: basic-page.php)

앞 basic-page.php）之后看到名为之前的公共文件（如 _init.php）和 _main.php。您的 _main. 用作标记 (html) 的母舰，并且特定模板被降级为将内容添加到 _main.php 뒤에 이름이 지정된 공개 파일(예: _init.php) 및 _main.php가 표시됩니다. _main.은 마크업(html)의 모체로 사용되며 특정 템플릿은 _main.php에 콘텐츠를 추가하는 데 사용됩니다. 파일에 미리 정의된 변수 출력

아래 예시에서는 템플릿 페이지의 body, video 필드를 변수에 추가했습니다. $content 并在我的 _main.php 페이지 마크업은 항상 이후에 실행되기 때문에 파일에 출력합니다.

기본 페이지.php:

으아아아

_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 历史记录来跟踪当前页面，并在用户按下后退按钮时重新加载过去的页面内容。