简介

核心改动说明（Turbo 替代 PJAX 的关键）
移除所有 jQuery 依赖：用原生 JS 实现自动加载、事件绑定，更轻量；引入 Turbo 库：替代 jQuery-PJAX，零配置即可实现无刷新加载；

改动方向

核心配置

// ========== Turbo 核心配置 ==========
// Turbo 开始加载：显示进度条
document.addEventListener('turbo:start', () => {
  loadingBar.classList.add('active');
});

// Turbo 加载完成：隐藏进度条 + 重置状态
document.addEventListener('turbo:load', () => {
  loadingBar.classList.remove('active');
  // 重新获取新页面的分页参数
  currentPage = parseInt(document.querySelector('#page-info').dataset.current);
  totalPages = parseInt(document.querySelector('#page-info').dataset.total);
  // 重置加载按钮状态
  resetLoadMoreBtn();
  // 重新绑定事件
  bindLoadMoreEvents();
  // 滚动到页面顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// Turbo 加载失败：兜底处理
document.addEventListener('turbo:error', (e) => {
  loadingBar.classList.remove('active');
  // 非网络错误则不拦截（比如404）
  if (!e.detail.response) return;
  // 加载失败时刷新页面
  window.location.reload();
});

// ========== 自动加载逻辑（原生JS，无jQuery） ==========
// 初始化事件绑定
bindLoadMoreEvents();

// 绑定加载事件（点击 + 滚动）
function bindLoadMoreEvents() {
  // 先解绑旧事件，避免重复触发
  loadMoreBtn.removeEventListener('click', loadMoreHandler);
  window.removeEventListener('scroll', scrollHandler);
  
  // 重新绑定新事件
  loadMoreBtn.addEventListener('click', loadMoreHandler);
  window.addEventListener('scroll', scrollHandler);
}

// 加载更多处理函数
function loadMoreHandler() {
  if (isLoading || currentPage >= totalPages) return;
  
  isLoading = true;
  loadMoreBtn.className = 'loading';
  loadMoreBtn.textContent = '加载中...';
  
  // 请求下一页数据
  fetch(`/page/${currentPage + 1}/`)
    .then(res => {
      if (!res.ok) throw new Error('加载失败');
      return res.text();
    })
    .then(html => {
      // 解析新页面的文章列表
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const newPosts = doc.querySelector('#post-list').innerHTML;
      
      if (newPosts) {
        postList.innerHTML += newPosts;
        currentPage++;
      }
      
      isLoading = false;
      // 更新按钮状态
      if (currentPage >= totalPages) {
        loadMoreBtn.className = 'no-more';
        loadMoreBtn.textContent = '没有更多文章了';
      } else {
        resetLoadMoreBtn();
      }
    })
    .catch(err => {
      console.error(err);
      isLoading = false;
      loadMoreBtn.className = 'load-more';
      loadMoreBtn.textContent = '加载失败，点击重试';
    });
}

// 滚动加载处理函数
function scrollHandler() {
  if (!isLoading && currentPage < totalPages && 
      window.scrollY + window.innerHeight >= document.body.offsetHeight - 100) {
    loadMoreHandler();
  }
}

// 重置加载按钮状态
function resetLoadMoreBtn() {
  loadMoreBtn.className = 'load-more';
  loadMoreBtn.textContent = '滑动鼠标滚轮或点击自动加载';}

总结

• Turbo 是 PJAX 的现代替代方案，无 jQuery 依赖、体积更小、兼容性更好；
• 集成后保留了你主题的所有原有功能和样式，仅替换了无刷新的底层实现；
• 代码完全原生，后续维护更简单，且加载速度更快。