米饭对Oyiso主题进行一些魔改，下面是魔改的记录。（由于米饭对于Html什么的几乎完全不懂，所以大部分工作是通过AI完成的
让首页文章改为时间顺序显示
首页默认是显示热门文章，但是这样就导致了米饭的博客首页永远是那几篇文章，所以想要修改一下。
只需要编辑主题的templates/tpl-home1.php就可以很简单的实现：
- 找到注释 // 创建 popular 实例
- 进行修改
$popular = new WP_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
// 获取当前页码
$paged = (get_query_var('paged'))? get_query_var('paged') : 1;
// 创建 popular 实例
$popular = new WP_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">
- 在列表底部添加 加载更多 按钮
<!-- 加载更多按钮-->
<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逻辑
<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 修改他的下面一行
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
到这里就修改完成啦~
参与讨论