Cipta tema ProcessWire menggunakan penyepaduan AJAX

Dalam tutorial ini kita akan melihat untuk menyediakan tema ringkas dalam ProcessWire, kita akan melihat pada output tertunda (kini dasar tema lalai dalam ProcessWire) dan menyediakan tapak kami untuk meminta kandungan baharu menggunakan arahan berikut : AJAX.

Untuk mengiringi tutorial ini, saya mencipta tema baharu untuk ProcessWire menggunakan AJAX dan output tertunda, yang boleh didapati di Github. Anda juga boleh mencari demo tema ini di sini: Demo Profil Artis.

Untuk arahan tentang memasang ProcessWire dan memahami asas AJAX, lihat sumber berikut:

• Cara memasang dan menyediakan ProcessWire CMS Ben Byford 18 Januari 2016
• Pengenalan kepada AJAX untuk Pereka Hadapan George Matsokos 2 Februari 2016

Output langsung dan output tertunda

ProcessWire (PW) mempunyai sistem templat yang sangat fleksibel yang membolehkan anda mencipta sebarang struktur pilihan anda dengan mencipta fail php dalam kod folder /site/templates, kemudian sediakan > tambahkan baharu dalam Pentadbiran ProcessWire. Maksudnya, terdapat dua strategi templat biasa dalam forum PW: output langsung dan output tertunda. /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

Output langsung

Terus keluarkan arahan untuk melihat keluaran halaman tertentu dalam setiap fail php. Alangkah baiknya jika setiap templat berbeza dengan ketara daripada yang lain. Walau bagaimanapun, saya mendapati ini menyusahkan jika hanya perubahan kecil diperlukan untuk setiap templat. Anda juga mungkin mendapati diri anda menyalin daripada templat lain atau memasukkan banyak fail. Ini adalah templat yang sangat asas (cth. basic-page.php).

<?php
    $content = $page->body . $page->video;
?>

Output tertunda#🎜🎜#

#🎜🎜# Output tertunda akan melihat fail awam bernama sebelum (seperti _init) selepas fail templat (seperti basic-page.php) .php) dan _main.php. _main. anda digunakan sebagai induk untuk markup (html) dan templat khusus diturunkan kepada menambahkan kandungan pada _main.php Output pembolehubah yang dipratakrifkan dalam fail.#🎜🎜# #🎜🎜#Dalam contoh di bawah, saya menambahkan medan isi dan video daripada halaman templat pada pembolehubah $content dan dalam _main The penanda halaman dikeluarkan dalam fail .php kerana ia sentiasa dilaksanakan selepas itu. #🎜🎜##🎜🎜##🎜🎜# #🎜🎜#Halaman asas.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");
?>

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

• Gunakan API Web Sejarah untuk peralihan halaman yang indah dan lancar Torik Firdaus 28 April 2016

ringkasan

Menggunakan beberapa strategi di atas, kami boleh mencipta pengalaman AJAX yang lancar untuk tapak web kami, dan menggunakan ProcessWire, kami boleh menyepadukan permintaan AJAX ke dalam tema kami dalam masa yang singkat.

Untuk maklumat lanjut tentang ProcessWire dan AJAX, lihat tutorial Envato Tuts+ kami.

Atas ialah kandungan terperinci Cipta tema ProcessWire menggunakan penyepaduan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!