> cd ../archive返回文章档案
SIGNAL_COVER.EXE // 信号封面
POST_816.LOG
对Oyiso主题的魔改记录
正文信号
米饭对Oyiso主题进行一些魔改，下面是魔改的记录。（由于米饭对于Html什么的几乎完全不懂，所以大部分工作是通过AI完成的
让首页文章改为时间顺序显示
首页默认是显示热门文章，但是这样就导致了米饭的博客首页永远是那几篇文章，所以想要修改一下。
只需要编辑主题的templates/tpl-home1.php就可以很简单的实现：
- 找到注释 // 创建 popular 实例
- 进行修改
PHP $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' // 降序排列 )
$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<?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(); ?>
<?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">
- 在列表底部添加 加载更多 按钮
JavaScript <!-- 加载更多按钮--> <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>
<!-- 加载更多按钮-->
<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>
<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
到这里就修改完成啦~
回声留言板 // 1 MESSAGES
> 小稚 :: 2024/12/26 07:21:27
厉害啊大佬✧(≖ ◡ ≖✿)
> compose --reply --post=POST_816.LOG