Bricks 自带 AJAX Load More
你知道吗？Bricks Builder 其实开箱自带查询循环文章的 AJAX 点击加载功能，不需要安装任何第三方插件，也不需要写一行 JavaScript。很多新手在社区里问“怎么给 Query Loop 加加载更多”，答案往往就是：Bricks 已经帮你做好了，只是入口藏得比较深。
这个功能的价值在于：当你的文章列表很长（比如几十上百篇）时，一次性全部渲染会拖慢页面加载，而“加载更多”模式可以先展示前面几篇，访客点击按钮后再异步拉取下一批。和分页（Pagination）相比，加载更多更符合现代内容站的浏览习惯，尤其适合博客列表、作品集、产品目录这类场景。
本文就来讲清楚：如何在 Bricks 中配置 AJAX Load More 功能，让访客点击按钮后动态加载下一批文章，全程无刷新、无插件。
Step 1：搭建查询循环与按钮
- 用 Bricks 编辑你的页面或模板。
- 复制上面演示里完整搭好的 Section 的 JSON（链接见原文），粘贴到你的页面中。注意：演示用到了少量 ACSS（Automatic CSS）工具类和变量，没有 ACSS 的话按常规方式设置容器样式即可。
- 在按钮上设置一个点击（click）交互，方式如下：
- 交互类型选点击；
- 在 Query 控制项中，选择你启用了查询循环的那个元素的标签（label）或 ID。这一步是关键——按钮必须知道它要驱动的是哪一个循环。如果你的页面有多个查询循环，一定要选对对应的那个，否则点击后加载的是错误的列表。
- 加载动画：把加载动画放在按钮下方的 AJAX Loader div 里，Bricks 会在 AJAX 请求期间自动显示它。
这样配置后，访客点击按钮，Bricks 就会向服务器发起 AJAX 请求，取回下一页的文章并追加到循环末尾，同时显示加载动画，整个过程页面不刷新，浏览器的前进后退也不受影响。
Step 2：ACSS 用户的全局 CSS
如果你使用了 ACSS（Automatic CSS），会遇到一个常见的坑：按钮在“没有更多文章可加载”时会被 Bricks 加上 brx-load-more-hidden 类来隐藏，但 ACSS 的按钮样式（btn--*）优先级更高，会覆盖隐藏规则，导致按钮加载完后仍然显示在那里。需要在全局 CSS 里加上：
a[class*="btn--"].brx-load-more-hidden {
display: none;
}如果你有 Advanced Themer 插件，也可以直接在构建器里完成这个设置，不必手写 CSS。没有用 ACSS 的普通按钮一般不会遇到这个问题，但写上这行 CSS 也无妨，属于保险操作。
保存后到前端测试即可：点击按钮，更多文章出现；加载完所有文章后，按钮自动隐藏。整个过程无需刷新页面，体验很顺滑。
参考
小结：Bricks 的 Load More 是内置能力，配置只需要“按钮 + 指向查询循环的交互 + 一个 AJAX Loader”三件套。唯一的常见坑是 ACSS 用户需要一行 CSS 来让按钮在加载完毕后正确隐藏。如果你想要更复杂的加载逻辑（比如按分类加载、无限滚动），可以再参考我们站内其他的 Query Loop 进阶教程。