动态加载表达式引擎数据

Question

我正在尝试弄清楚如何从表达式引擎动态获取内容。基本上我有6篇文章摘要作为内容。当页面加载时，我得到 3 个摘要，但我有一个 "show more" 按钮。单击后，我想加载接下来的 3 个摘要，但我不知道该怎么做。

这是我的标签现在的样子：

{exp:channel:entries channel="blogposts" limit="3"}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>

{/exp:channel:entries}

Answer 1

首先，您将在 expressionengine.stackexchange.com

的专用 EE 网站上获得更好的答案

为什么不加载所有六个条目，并隐藏最初不想显示的条目？然后你可以用 javascript 显示它们。这对于性能也会更好。

    {exp:channel:entries channel="blogposts" limit="6" disable=""}
{if count == 3}
    <div class="hidden">
{/if}
        <div class='article-box'>
            <div class="article-image-box">
                <div class="article-image">
                </div>
            </div>
            <article>
                <h4>{title}</h4>
                <p class='author'>{blog_author}</p>
                <p>
                    {blog_body}
                </p>
               <div class="ful-art-but-box">
                    <button class="button green-but">
                        READ FULL ARTICLE
                    </button>
                </div>
            </article>
        </div>
{if total_results == "0"}
    </div>
{/if} 
    {/exp:channel:entries}

Answer 2

如果您希望您的访问者能够随着您的内容的增加而反复 "Load More"，那么 Jelle 的解决方案就不够用了。

为了"future proof"，我会通过创建一个 EE 模板来解决这个问题，该模板 returns 条目以 JSON 格式的三个一组，我们称之为 "more.json"

"Load More" 按钮会向 more.json 发出 AJAX 请求。它需要指定一个偏移量（第一次按下按钮时需要 return 结果 7 - 9 下次按下时需要 return 结果 10 - 12 等等).

您可以像这样将偏移量作为 url 段传递：

your_template_group/more.json/6

模板 more.json 将采用请求 segment_3 中的值并将其传递给频道条目函数，如下所示：

{exp:channel:entries channel="blogposts" limit="3" disable="" offset="segment_3"}

我会使用 jQuery 来处理 AJAX、附加结果、更新按钮状态等。本网站和其他地方有许多教程解释如何完成此操作。

Answer 3

我同意@Jelle Dijkstra："First of all you will get better answers on the dedicated EE site at expressionengine.stackexchange.com"

也就是说，为什么不保持简单，只使用 jQuery "load" 方法？

您可以在这里阅读：http://www.w3schools.com/jquery/jquery_ajax_load.asp 或此处：http://api.jquery.com/load/

基本上，只需添加一个具有点击事件的 link/button。在点击事件中，加载一个模板以获取您需要的信息。你甚至可以在你的模板中做一个单一的条目示例，然后为它提供 "start_on" 或 "limit" 的变量，使其根据用户选择、屏幕尺寸或供你在其他应用程序中使用时更加动态领域也是如此。使用加载还可以让您拥有 "callback" 功能，这样您就可以在内容交付之前显示 "loading" 图标。

这对我来说是最简单的方法。 ;)

动态加载表达式引擎数据

load expressionengine data dynamically

expressionengine