kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(widgets): category tabs lazy load + ranking extras

Browse Source 
SSR first category panel; remaining tabs fetch grid HTML via
/widgets/category-tabs. User ranking adds zibll-like desc modes.
This commit is contained in:
kate522 committed 2026-07-20 21:05:23 +08:00
1 parent d508a9aef8
commit 90d84af2f5
3 files changed
+175 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/AKSRT/Widgets/CategoryTabsWidget.php
+81 -18
View File
@@ -38,7 +38,7 @@ class CategoryTabsWidget extends \WP_Widget {
$tabs = $this->resolve_tabs($instance);
echo $args['before_widget'];
echo '<section class="aksrt-home-widget aksrt-home-widget--tabs widget-tab-posts">';
echo '<section class="aksrt-home-widget aksrt-home-widget--tabs widget-tab-posts" data-aksrt-home-cat-tabs>';
if (empty($tabs)) {
echo function_exists('aksrt_get_widget_null') ? aksrt_get_widget_null(__('暂无可用分类', 'aksrt')) : '<p class="widget-empty">' . esc_html__('暂无可用分类', 'aksrt') . '</p>';
@@ -69,33 +69,96 @@ class CategoryTabsWidget extends \WP_Widget {
<?php
foreach ($tabs as $index => $tab) {
$query = new \WP_Query([
'post_type' => aksrt_home_widget_post_types(),
'post_status' => 'publish',
'posts_per_page' => $count,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'cat' => (int) $tab['id'],
]);
?>
<div class="widget-tab-posts__panel<?php echo 0 === $index ? ' active' : ''; ?>" data-tab-panel="cat-<?php echo (int) $tab['id']; ?>" role="tabpanel"<?php echo 0 === $index ? '' : ' hidden'; ?>>
<?php aksrt_home_widget_render_post_grid($query, $layout, $columns, $context); ?>
<?php if ($show_more) : ?>
<div class="aksrt-home-widget__footer">
<a class="aksrt-home-widget__more" href="<?php echo esc_url($tab['link']); ?>">
<?php esc_html_e('查看更多', 'aksrt'); ?>
</a>
</div>
<div class="widget-tab-posts__panel<?php echo 0 === $index ? ' active' : ''; ?>"
data-tab-panel="cat-<?php echo (int) $tab['id']; ?>"
data-loaded="<?php echo 0 === $index ? '1' : '0'; ?>"
data-cat="<?php echo (int) $tab['id']; ?>"
data-more="<?php echo esc_url($tab['link']); ?>"
role="tabpanel"<?php echo 0 === $index ? '' : ' hidden'; ?>>
<?php if (0 === $index) :
$query = new \WP_Query([
'post_type' => aksrt_home_widget_post_types(),
'post_status' => 'publish',
'posts_per_page' => $count,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'cat' => (int) $tab['id'],
]);
aksrt_home_widget_render_post_grid($query, $layout, $columns, $context);
wp_reset_postdata();
if ($show_more) : ?>
<div class="aksrt-home-widget__footer">
<a class="aksrt-home-widget__more" href="<?php echo esc_url($tab['link']); ?>">
<?php esc_html_e('查看更多', 'aksrt'); ?>
</a>
</div>
<?php endif;
else : ?>
<div class="post_ajax_loader" data-aksrt-ajax-loader></div>
<?php endif; ?>
</div>
<?php
}
$rest = rest_url('aksrt/v1/widgets/category-tabs');
?>
<script>
(function(){
var section=document.currentScript?document.currentScript.parentElement:null;
if(!section||section._aksrtCatTabs)return; section._aksrtCatTabs=1;
var rest=<?php echo wp_json_encode($rest); ?>;
var count=<?php echo (int) $count; ?>;
var layout=<?php echo wp_json_encode($layout); ?>;
var columns=<?php echo (int) $columns; ?>;
var context=<?php echo wp_json_encode($context); ?>;
var showMore=<?php echo $show_more ? 'true' : 'false'; ?>;
var tabs=[].slice.call(section.querySelectorAll('.widget-tab-posts__tab'));
var panels=[].slice.call(section.querySelectorAll('.widget-tab-posts__panel'));
function load(panel){
if(!panel||panel.getAttribute('data-loaded')==='1')return;
var cat=panel.getAttribute('data-cat')||'0';
var more=panel.getAttribute('data-more')||'';
var qs=new URLSearchParams({cat:cat,count:String(count),layout:layout,columns:String(columns),context:context});
var url=rest+(rest.indexOf('?')>-1?'&':'?')+qs.toString();
panel.classList.add('is-ajax-loading');
var headers={Accept:'application/json'};
if(window.aksrtData&&aksrtData.restNonce)headers['X-WP-Nonce']=aksrtData.restNonce;
fetch(url,{credentials:'same-origin',headers:headers}).then(function(r){return r.json()}).then(function(j){
var d=(j&&j.data)||j||{};
var html=d.html||'';
if(showMore&&more){
html+='<div class="aksrt-home-widget__footer"><a class="aksrt-home-widget__more" href="'+more+'">查看更多</a></div>';
}
panel.innerHTML=html||'<p class="widget-empty">暂无文章</p>';
panel.setAttribute('data-loaded','1');
panel.classList.remove('is-ajax-loading');
}).catch(function(){panel.classList.remove('is-ajax-loading');});
}
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
var target=tab.getAttribute('data-tab');
tabs.forEach(function(item){
var active=item===tab;
item.classList.toggle('active',active);
item.setAttribute('aria-selected',active?'true':'false');
});
panels.forEach(function(panel){
var active=panel.getAttribute('data-tab-panel')===target;
panel.classList.toggle('active',active);
if(active){panel.removeAttribute('hidden');load(panel);} else {panel.setAttribute('hidden','');}
});
});
});
})();
</script>
<?php
echo '</section>';
echo $args['after_widget'];
}
public function form($instance): void {
public function form($instance): void {
$title = (string) ($instance['title'] ?? '');
$category_ids = aksrt_home_widget_normalize_category_ids($instance['category_ids'] ?? [], 6);
$count = (int) ($instance['count'] ?? 6);