1 把部分CSS移入style.css
2 加入点击加载的文章列表展示方式
3 修改了nopic.svg的大小
4 修复特定分类下的显示功能
This commit is contained in:
浪子 2025-03-21 09:17:15 +08:00
parent 077bd0f720
commit 5ca790f631
7 changed files with 103 additions and 111 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -1,48 +1,70 @@
// 加载更多文章
$(document).on('click', '.post-read-more a', function(e){
document.addEventListener('click', function (e) {
// 检查点击的元素是否是 .post-read-more a
if (e.target.closest('.loadmore a')) {
e.preventDefault();
var $btn = $(this);
var nextPage = $btn.attr('href');
if($btn.hasClass('loading')) return false;
$btn.addClass('loading').text('加载中...');
$.ajax({
url: nextPage,
type: 'GET',
dataType: 'html',
success: function(data){
// 创建一个临时的DOM元素来解析返回的HTML
var $html = $('<div></div>').html(data);
var btn = e.target.closest('.loadmore a');
var nextPage = btn.getAttribute('href');
// 防止重复点击
if (btn.classList.contains('loading')) return false;
btn.classList.add('loading');
btn.textContent = '加载中...';
// 发起 AJAX 请求
fetch(nextPage)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
// 创建一个临时的 DOM 元素来解析返回的 HTML
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
// 找到新的文章
var $newPosts = $html.find('.post_loop');
var newPosts = htmlDoc.querySelectorAll('.post--item');
// 找到新的"加载更多"按钮
var $newBtn = $html.find('.post-read-more a');
// 将新文章添加到页面
if ($newPosts.length > 0) {
$('.post_box').append($newPosts);
var newBtn = htmlDoc.querySelector('.nav-links a');
// 获取文章列表容器和加载更多按钮
var postReadMore = document.querySelector('.nav-links');
var articleList = document.querySelector('.articleList');
if (newPosts.length > 0) {
newPosts.forEach(post => {
articleList.insertBefore(post, postReadMore);
});
// 新文章淡入效果
$newPosts.hide().fadeIn(500);
Array.from(newPosts).forEach(post => {
post.style.opacity = 0;
setTimeout(() => {
post.style.transition = 'opacity 0.5s';
post.style.opacity = 1;
}, 10);
});
}
// 更新"加载更多"按钮或移除它
if($newBtn.length > 0){
$btn.attr('href', $newBtn.attr('href'))
.removeClass('loading')
.text('加载更多');
if (newBtn) {
btn.setAttribute('href', newBtn.getAttribute('href'));
btn.classList.remove('loading');
btn.textContent = '加载更多';
} else {
$('.post-read-more').remove();
// 如果没有更多的按钮,移除 .post-read-more
if (postReadMore) {
postReadMore.remove();
}
}
},
error: function(xhr, status, error){
console.error("AJAX Error:", status, error);
$btn.removeClass('loading').text('加载失败,点击重试');
}
});
return false;
});
})
.catch(error => {
console.error("AJAX Error:", error);
btn.classList.remove('loading');
btn.textContent = '加载失败,点击重试';
});
}
});

View File

@ -19,20 +19,6 @@ function themeConfig($form) {
$form->addInput($twitterurl);
$mastodonurl = new Typecho_Widget_Helper_Form_Element_Text('mastodonurl', NULL,'https://jiong.us/', _t('mastodon'), _t('会在个人信息显示'));
$form->addInput($mastodonurl);
$sitemapurl = new Typecho_Widget_Helper_Form_Element_Text('sitemapurl', NULL, NULL, _t('sitemap'), _t('会在页脚显示'));
$form->addInput($sitemapurl);
$cnavatar = new Typecho_Widget_Helper_Form_Element_Text('cnavatar', NULL, 'https://cravatar.cn/avatar/', _t('Gravatar镜像'), _t('默认https://cravatar.cn/avatar/,建议保持默认'));
$form->addInput($cnavatar);
$midimg = new Typecho_Widget_Helper_Form_Element_Text('midimg', NULL, '/img/', _t('填写分类图片路径,以"/"结尾'), _t('默认使用网站根目录下的img文件夹,也可以填写绝对或者CDN地址,自动匹配目录下以分类ID为文件名的mid.jpg格式的图片'));
$form->addInput($midimg);
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'), _t('不填写则不显示'));
$form->addInput($donate);
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'), _t('不填写则不显示'));
$form->addInput($twikoo);
$addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('添加head'), _t('支持HTML'));
$form->addInput($addhead);
$tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'), _t('支持HTML'));
$form->addInput($tongji);
$showProfile = new Typecho_Widget_Helper_Form_Element_Radio('showProfile',
array('0'=> _t('否'), '1'=> _t('是')),
'0', _t('是否在文章页面显示作者信息'), _t('选择“是”将在文章页面包含显示作者信息。'));
@ -53,6 +39,24 @@ function themeConfig($form) {
array('0'=> _t('否'), '1'=> _t('是')),
'0', _t('是否显示页面加载时间'), _t('选择“是”将在页脚显示加载时间。'));
$form->addInput($showtime);
$loadmore = new Typecho_Widget_Helper_Form_Element_Radio('loadmore',
array('0'=> _t('加载更多'), '1'=> _t('页码模式')),
'0', _t('加载文章列表方式'), _t('加载更多将在文章列表底部显示加载更多按钮'));
$form->addInput($loadmore);
$sitemapurl = new Typecho_Widget_Helper_Form_Element_Text('sitemapurl', NULL, NULL, _t('sitemap'), _t('会在页脚显示'));
$form->addInput($sitemapurl);
$cnavatar = new Typecho_Widget_Helper_Form_Element_Text('cnavatar', NULL, 'https://cravatar.cn/avatar/', _t('Gravatar镜像'), _t('默认https://cravatar.cn/avatar/,建议保持默认'));
$form->addInput($cnavatar);
$midimg = new Typecho_Widget_Helper_Form_Element_Text('midimg', NULL, '/img/', _t('填写分类图片路径,以"/"结尾'), _t('默认使用网站根目录下的img文件夹,也可以填写绝对或者CDN地址,自动匹配目录下以分类ID为文件名的mid.jpg格式的图片'));
$form->addInput($midimg);
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'), _t('不填写则不显示'));
$form->addInput($donate);
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'), _t('不填写则不显示'));
$form->addInput($twikoo);
$addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('添加head'), _t('支持HTML'));
$form->addInput($addhead);
$tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'), _t('支持HTML'));
$form->addInput($tongji);
}
function saveThemeConfig($config) {
// 可以在这里添加额外的验证或处理逻辑

View File

@ -164,6 +164,7 @@ foreach ($normalPosts as $normalPost) {
<?php endif; ?>
</article>
<?php endwhile; ?>
<?php if ($this->options->loadmore): ?>
<?php
$this->pageNav(
' ',
@ -181,4 +182,15 @@ foreach ($normalPosts as $normalPost) {
'nextClass' => 'hidden'
)
);
?>
?>
<?php else:?>
<?php
$nextPage = $this->_currentPage + 1;
$totalPages = ceil($this->getTotal() / $this->parameter->pageSize);
if ($this->_currentPage < $totalPages): ?>
<div class="nav-links">
<span class="loadmore"><?php $this->pageLink('加载更多', 'next'); ?></span>
</div>
<?php endif; ?>
<script src="<?php $this->options->themeUrl('assets/js/loadmore.js'); ?>"></script>
<?php endif; ?>

View File

@ -146,33 +146,6 @@ img {
height: 480px;
}
}
.load-more-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.load-more-btn:hover {
background-color: #0056b3;
}
.nav-links .loadmore {
border: 1px solid var(--farallon-border-color);
cursor: pointer;
position: relative;
padding: 5px 30px;
border-radius: 8px;
font-size: 14px;
color: var(--farallon-text-gray)
}
.nav-links .loadmore:hover {
border-color: var(--farallon-hover-color);
color: var(--farallon-hover-color)
}
</style>
</div>
<?php $this->need('./module/footer.php'); ?>

View File

@ -166,34 +166,7 @@ img {
.resimg {
grid-template-columns: 1fr; /* 修改为一列 */
}
}
.load-more-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.load-more-btn:hover {
background-color: #0056b3;
}
.nav-links .loadmore {
border: 1px solid var(--farallon-border-color);
cursor: pointer;
position: relative;
padding: 5px 30px;
border-radius: 8px;
font-size: 14px;
color: var(--farallon-text-gray)
}
.nav-links .loadmore:hover {
border-color: var(--farallon-hover-color);
color: var(--farallon-hover-color)
}
</style>
</div>
<?php $this->need('./module/footer.php'); ?>