对Oyiso主题的魔改记录

348天前 · 技术, 分享 · Oyiso主题, 魔改

米饭对Oyiso主题进行一些魔改，下面是魔改的记录。（由于米饭对于Html什么的几乎完全不懂，所以大部分工作是通过AI完成的

让首页文章改为时间顺序显示

首页默认是显示热门文章，但是这样就导致了米饭的博客首页永远是那几篇文章，所以想要修改一下。

只需要编辑主题的templates/tpl-home1.php就可以很简单的实现：

找到注释 // 创建 popular 实例
进行修改

PHP

$popular=newWP_Query(
array(
'post_type'=>'post',// 文章类型
'posts_per_page'=>10,// 每页显示的文章数量
'ignore_sticky_posts'=>1,// 排除置顶文章
'paged'=>$paged,
//'meta_key' => 'post_heat', // 按照浏览量自定义字段排序
// 'orderby' =>'meta_value_num', // 数值类型的排序
// 'orderby' => 'date',
// 'order' => 'DESC' // 降序排列
)

把meta_key那一行注释掉即可

让首页的文章支持无限加载

既然已经改成了显示最新文章，所以就想要试试实现无限加载的功能。

修改整个创建实例的代码

PHP

<?php
// 获取当前页码
$paged= (get_query_var('paged'))?get_query_var('paged') :1;
// 创建 popular 实例
$popular=newWP_Query(
array(
'post_type'=>'post',// 文章类型
'posts_per_page'=>10,// 每页显示的文章数量
'ignore_sticky_posts'=>1,// 排除置顶文章
'paged'=>$paged,
//'meta_key' => 'post_heat', // 按照浏览量自定义字段排序
// 'orderby' =>'meta_value_num', // 数值类型的排序
// 'orderby' => 'date',
// 'order' => 'DESC' // 降序排列
)
);
$totalPages=$popular->max_num_pages;

if($popular->have_posts()) :
while($popular->have_posts()) :$popular->the_post();
$categories=get_the_category();
?>

为列表添加id
- 找到<ul>这里为他添加id修改为：<ul id="popular-posts">
在列表底部添加 加载更多按钮

JavaScript

<!--加载更多按钮-->
<divclass="containerrice"style="
display: flex;
justify-content: center; padding-top: 10px;
">
   <buttonclass="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:02px4pxrgba(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:all0.3scubic-bezier(0.5,0,0,1);
background-color:var(--f-button-bg);
color:var(--f-button-color);
border:none;
border-radius: 30px;
padding: 10px20px;
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>

<script>
function initPage(){
constloadMoreButton=document.getElementById('load-more-posts');
constpostsContainer=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
constcurrentPage=parseInt(loadMoreButton.dataset.page) ||1;
constmaxPage=parseInt(loadMoreButton.dataset.max);
//console.log(maxPage);
constnewPage=currentPage+1;
   constnewUrl=  `收纳箱/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 修改他的下面一行

JavaScript

const{Pjax} =window['pjax-api']
window.pjax=newPjax({
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

到这里就修改完成啦~

对Oyiso主题的魔改记录

https://world.ccrice.com/2024/12/25/%E5%AF%B9oyiso%E4%B8%BB%E9%A2%98%E7%9A%84%E9%AD%94%E6%94%B9%E8%AE%B0%E5%BD%95

本文作者

ccrice

发布时间

348天前

许可协议

CC BY-NC-SA 4.0

CC米饭的小世界

导航

分类

对Oyiso主题的魔改记录

让首页文章改为时间顺序显示

让首页的文章支持无限加载

评论

新的评论