对Oyiso主题的魔改记录

	   <!-- 加载更多按钮-->
	  <div class="containerrice" style="
    display: flex;
    justify-content: center; padding-top: 10px;
">
    <button class="show-articles-btn" id="load-more-posts" class="btn btn-primary" data-max="<?php echo $totalPages;?>">加载更多</button>

	<style>
	button.show-articles-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button.show-articles-btn:hover {
    background-color: var(--f-button-hover-bg);
    transform: translateY(0px);

}
button.show-articles-btn {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.5, 0, 0, 1);
    background-color: var(--f-button-bg);
    color: var(--f-button-color);
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
	</style>

• 添加对应的js逻辑

JavaScript

<script>
	function initPage() {
            const loadMoreButton = document.getElementById('load-more-posts');
            const postsContainer = document.getElementById('popular-posts');

            if (!loadMoreButton) {
                console.error('无法获取“显示全部文章”按钮');
                return;
            }

            if (!postsContainer) {
                console.error('无法获取文章容器');
                return;
            }

            // 模拟 pjax 的 navigate 功能
  function customNavigate(url,islastpage) {
	   loadMoreButton.textContent = "加载ing~";
    loadMoreButton.disabled = true;
    fetch(url)
     .then(response => response.text())
     .then(data => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(data, 'text/html');
            const newPostsItems = doc.querySelectorAll('li.main-reveal');
            const fragment = document.createDocumentFragment();

            newPostsItems.forEach((item, index) => {
                const newLi = document.createElement('li');
                newLi.classList.add('main-reveal');
                newLi.dataset.srId = index + 1;
                newLi.style.visibility = 'visible';
                newLi.style.opacity = '1';
                newLi.style.transform ='matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)';
                newLi.style.transition = 'all, opacity 1s cubic - bezier(0.5, 0, 0, 1), transform 1s cubic - bezier(0.5, 0, 0, 1)';

                const aElement = item.querySelector('a');
                if (aElement) {
                    newLi.appendChild(aElement.cloneNode(true));
                }
                fragment.appendChild(newLi);
            });

            postsContainer.appendChild(fragment);

            // 对新插入的图片应用懒加载
            const loadingImg = '修改这里为你的加载图片地址'; // 假设这是加载图片的路径
            lazyLoad(loadingImg);
		//console.log(islastpage);
if (islastpage == true) {
                            loadMoreButton.textContent = "已经是最后一页";
                            loadMoreButton.disabled = true;
                        } else {
							 loadMoreButton.textContent = "加载更多";
                            loadMoreButton.disabled = false;
                        }

        })
     .catch(error => {
		 loadMoreButton.textContent = "加载失败啦";
            console.error('加载文章时出错:', error);
            loadMoreButton.disabled = false;
        });
}
	   //结束

            loadMoreButton.addEventListener('click', function (event) {
                event.preventDefault();
				    // 从 data - page 属性获取当前页码，初始为 1
    const currentPage = parseInt(loadMoreButton.dataset.page) || 1;
				const maxPage = parseInt(loadMoreButton.dataset.max);
				//console.log(maxPage);
    const newPage = currentPage + 1;
    const newUrl =  `收纳箱/page/${newPage}/`;
				 lastpage = false;

    // 更新 data - page 属性为新的页码
    loadMoreButton.dataset.page = newPage;
				if(newPage>=maxPage){
			//		console.log("MAX");
					lastpage = true;
				}
    customNavigate(newUrl,lastpage);

            });
        }

	document.addEventListener("DOMContentLoaded", function() {
       console.log("首次内容已加载");
        initPage();
    });
	 document.addEventListener("pjax:ready", function (event) {
    console.log("PJAX 内容已加载");
    initPage();

    // 清理可能重复的逻辑
    document.removeEventListener("pjax:ready", arguments.callee);
});

</script>

注意修改两个部分：

1.修改const newUrl=后面的内容，这里的地址应该是你可以显示全部文章页面的url路径 我的是https://world.ccrice.com/收纳箱/所以写为const newUrl = 收纳箱/page/${newPage}/;

2.修改对新插入的图片应用懒加载部分，把const loadingImg = '修改这里为你的加载图片地址';

• 编辑文件assets/js/theme.js

  • 找到第2455行左右的注释 //PJAX 修改他的下面一行

JavaScriptconst { Pjax } = window['pjax-api'] window.pjax = new Pjax({ areas: ['#pjax-box, #pjax-box-footer'], link: ':is(a)[href]:not([target],[data-fancybox])', form: ':is(form)[method="get"]', on: { send: function () { // 初始化时的 send 回调逻辑 }, complete: function () { // 初始化时的 complete 回调逻辑 } } })

const { Pjax } = window['pjax-api']
window.pjax = new Pjax({
  areas: ['#pjax-box, #pjax-box-footer'],
  link: ':is(a)[href]:not([target],[data-fancybox])',
  form: ':is(form)[method="get"]',
	on: {
        send: function () {
            // 初始化时的 send 回调逻辑
        },
        complete: function () {
            // 初始化时的 complete 回调逻辑
        }
    }
})

是在 new Pjax前面添加了window.pjax

到这里就修改完成啦~