如何在 Blocksy 中添加 Ajax 分类筛选？

在 Blocksy 主题中，添加 Ajax 分类筛选功能可以显著提升用户体验，使用户在不刷新页面的情况下快速筛选内容。以下是实现这一功能的详细步骤。

首先，确保你已经安装并激活了 Blocksy 主题，并且使用的是 WordPress 5.0 或更高版本，因为 Blocksy 依赖于 Gutenberg 编辑器。

接下来，你需要创建一个自定义的分类筛选组件。你可以通过 Blocksy 的“自定义区块”功能来实现这一点。进入 WordPress 后台，导航到“区块”>“自定义区块”，然后选择“新建区块”。

在编辑器中，添加一个“按钮组”或“下拉菜单”区块，用于显示不同的分类选项。每个按钮或下拉选项对应一个特定的分类。然后，添加一个“查询列表”区块，用于显示筛选后的文章内容。

为了实现 Ajax 筛选功能，你需要编写自定义的 JavaScript 代码。在 Blocksy 中，可以通过“自定义代码”功能添加脚本。进入“主题设置”>“自定义代码”>“自定义 JavaScript”，然后输入以下代码：

“`javascript
document.addEventListener(‘DOMContentLoaded’, function () {
const filters = document.querySelectorAll(‘.blocksy-filter-button’);
const queryList = document.querySelector(‘.blocksy-query-list’);

filters.forEach(filter => {
filter.addEventListener(‘click’, function () {
const categoryId = this.dataset.categoryId;
const url = new URL(window.location.href);
url.searchParams.set(‘category’, categoryId);
window.history.pushState({}, ”, url);
fetch(url)
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const html = parser.parseFromString(data, ‘text/html’);
const newContent = html.querySelector(‘.blocksy-query-list’).innerHTML;
queryList.innerHTML = newContent;
});
});
});
});
“`