README

使用 OctoberCMS AJAX 框架将单页应用程序功能添加到 OctoberCMS 前端。具体来说，它通过添加组件到您的布局中，启用通过 AJAX 加载和更新页面内容。

要求

此插件需要将 Ajax 框架包含到您的布局/页面中，以便处理请求。

当前支持

目前仅支持加载新页面（静态页面或 CMS 页面，任何由 CMS 控制的 URL）。动态加载页面上的组件也将正常工作，并且会根据需要动态添加和删除资源。

安装

要从 Marketplace 安装，单击“添加到项目”按钮，然后选择您想要添加的项目，在更新项目以拉入插件之前。

要从后端安装，转到 设置 -> 更新和插件 -> 安装插件，然后搜索 LukeTowers.EasySPA。

要从存储库安装，将其克隆到 plugins/luketowers/easyspa，然后从您的项目根目录运行 composer update 以拉入依赖项。

要使用 Composer 安装，从您的项目根目录运行 composer require luketowers/oc-easyspa-plugin。

用法

要使用此插件，只需将 [easySPA] 组件附加到您想要通过 AJAX 加载页面内容的任何布局上。加载器需要附加到包含锚标签的页面元素，这些锚标签包含要加载的页面的 URL。这是通过在包含元素上添加 data-control="easy-spa-loader" 属性来完成的。还有一个可选的属性 data-refresh-partials，可以用来定义在页面加载时应该刷新的额外部分，格式为 partialPath1:#partialSelector1，额外的部分可以附加 & 符号。

示例布局

description="Default layout"
[easySPA]
==
<html>
    <head>
        ...
    </head>
    <body data-control="easy-spa-loader" data-refresh-partials="site/header:#site-header">
        <header id="site-header">
            {% partial 'site/header' %}
        </header>

        {% page %}

        <footer>
            ...
        </footer>
    </body>
</html>

第三方/自定义 JavaScript 的使用

由于此插件使用 Ajax 框架动态更改 DOM，因此在页面更新时，并非所有第三方 JavaScript 库/脚本都能正常工作。这是因为许多此类脚本依赖于 (window).load，而在 Ajax 更新期间不会触发。如果您有此类脚本，您可能需要在您的代码中使用 $(document).render 事件监听器重新实例化一些 JavaScript 对象。

示例（带有假第三方库）

 $(document).render(function(){
    $('.example-slider').slider({transition: 30});
    $('.example-carousel').carousel();
 });

注意：包含 $(document).render 事件监听器的脚本文件必须包含在 {% framework extras %} 之后（使用 script 标签）才能正常工作。

luketowers / oc-easyspa-plugin

维护者

详细信息

README

要求

当前支持

安装

用法

第三方/自定义 JavaScript 的使用