Question

我正在尝试在wordpress网站上使用asap.js（docs：http://formstone.it/components/asap/）组件。这个插件提供了一组有用的脚本。但是，我无法弄清楚如何使用此脚本正确处理我的wordpress内容。

我试过这段代码，但它似乎没有用，也没有在chrome控制台中出现任何错误。任何人都可以给我一个简单的例子，我可以从这开始吗？

jQuery(document).ready(function ($) {
var $content,
    $deferred;

$(document).ready(function() {
    // Bind ASAP events
    $(window).on("request.asap", pageRequested)
        .on("progress.asap", pageLoadProgress)
        .on("load.asap", pageLoaded)
        .on("render.asap", pageRendered)
        .on("error.asap", pageLoadError);

    $content = $(".myPageWrapper");

    // Init ASAP
    $.asap({
        cache: false,
        selector: "a:not(.no-asap)",
        transitionOut: function() {
            if ($deferred) {
                $deferred.reject();
            }

            $deferred = $.Deferred();

            $content.animate({ opacity: 0 }, 1000, function() {
                console.log("Animate complete");

                $deferred.resolve();
            });

            return $deferred;
        }
    });

    // Remember to init first page
    pageRendered();
});

function pageRequested(e) {
    // update state to reflect loading
    console.log("Request new page");
}

function pageLoadProgress(e, percent) {
    // update progress to reflect loading
    console.log("New page load progress", percent);
}

function pageLoaded(e) {
    // unbind old events and remove plugins
    console.log("Destroy old page");
}

function pageRendered(e) {
    // bind new events and initialize plugins
    console.log("Render new page");

    $content.animate({ opacity: 1 }, 1000);
}

function pageLoadError(e, error) {
    // watch for load errors
    console.warn("Error loading page: ", error);
}



});

班级=＆＃34; myPageWrapper＆＃34;用于我的wordpress主题文件 content-page.php ：

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article class="myPageWrapper">
  <?php the_content(); ?>
 </article>
<?php endwhile; endif; ?>

Answer 1

在发出ASAP请求时，您需要返回仅包含要替换的内容的json对象。我认为像这样的东西可以在WordPress中运行，尽管可能有更好的方法来连接核心过滤器：

<?php 

$isASAP = (isset($_GET["fs-asap"]) && $_GET["fs-asap"] == "true");
ob_start();

if (have_posts()) : 
    while (have_posts()) : 
        the_post(); 

        if (!$isASAP) :
?>
<article class="myPageWrapper">
<?php
        endif;

        the_content(); 

        if (!$isASAP) :
?>
</article>
<?php
        endif;
    endwhile; 
endif; 

if ($isASAP) :
    // If ASAP request, return json object with page pieces
    $page_content = ob_get_clean();

    $asap_content = json_encode(array(
        ".myPageWrapper" => $page_content
    ));

    header("Content-length: " . strlen($asap_content));
    die($asap_content);
endif;
?>

Formstone asap.js在wordpress中的正确用法

1 个答案: