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

feat(frontend): replace lazy loading with zibll lazysizes

Browse Source
This commit is contained in:
kate522
2026-08-18 01:33:38 +08:00
parent 02571eecd6
commit 435ee1daa7
78 changed files with 1515 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Admin/Schema/GlobalSchema.php
+15 -30
View File
@@ -20,8 +20,21 @@ class GlobalSchema {
'version' => '1.0.0',
'option_key' => 'aksrt_settings',
'groups' => [
['key' => 'performance', 'title' => '性能优化', 'fields' => [
['key' => 'lazyload_enabled', 'label' => '图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'performance', 'title' => '图像异步懒加载', 'fields' => [
['key' => 'lazy_posts_thumb', 'label' => '文章缩略图懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_avatar', 'label' => '头像懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_posts_content', 'label' => '文章内容图片懒加载', 'type' => 'switch', 'default' => false],
['key' => 'lazy_comment', 'label' => '评论内容图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_private', 'label' => '私信聊天图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_sider', 'label' => '幻灯片图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_cover', 'label' => '封面图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_other', 'label' => '其它图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazy_animation', 'label' => '懒加载动画效果', 'type' => 'select', 'default' => 'blur', 'options' => [
['label' => '淡出淡入', 'value' => 'fade'],
['label' => '高斯模糊', 'value' => 'blur'],
['label' => '放大缩小', 'value' => 'scale'],
]],
['key' => 'thumbnail', 'label' => '懒加载预载图', 'type' => 'media', 'default' => get_template_directory_uri() . '/assets/img/thumbnail.svg'],
]],
['key' => 'filing', 'title' => '备案信息', 'fields' => [
['key' => 'icp_filing', 'label' => 'ICP 备案号', 'type' => 'input', 'default' => ''],
@@ -93,34 +106,6 @@ class GlobalSchema {
]],
],
],
'lazyload' => [
'key' => 'lazyload',
'title' => '懒加载设置',
'version' => '1.0.0',
'option_key' => 'aksrt_settings',
'groups' => [
['key' => 'basic', 'title' => '懒加载开关', 'fields' => [
['key' => 'lazyload_enabled', 'label' => '图像异步懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_animation', 'label' => '懒加载动画效果', 'type' => 'select', 'default' => 'blur', 'options' => [
['label' => '淡出淡入', 'value' => 'fade'],
['label' => '高斯模糊', 'value' => 'blur'],
['label' => '放大缩小', 'value' => 'scale'],
]],
['key' => 'lazyload_placeholder', 'label' => '懒加载预载图', 'type' => 'media', 'default' => ''],
['key' => 'lazyload_blur', 'label' => '模糊预览', 'type' => 'switch', 'default' => true],
]],
['key' => 'scope', 'title' => '懒加载范围', 'fields' => [
['key' => 'lazyload_avatar', 'label' => '头像懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_content', 'label' => '文章内容图片懒加载', 'type' => 'switch', 'default' => false],
['key' => 'lazyload_comment', 'label' => '评论内容图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_private', 'label' => '私信聊天图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_slider', 'label' => '幻灯片图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_cover', 'label' => '封面图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_other', 'label' => '其它图片懒加载', 'type' => 'switch', 'default' => true],
['key' => 'lazyload_widget', 'label' => '小工具图片懒加载', 'type' => 'switch', 'default' => true],
]],
],
],
'layout' => [
'key' => 'layout',
'title' => '显示&布局',
src/Content/VipServiceModal.php
+1 -1
View File
@@ -164,7 +164,7 @@ trait VipServiceModal {
$icon_url = esc_url((string) ($levels[$level]['img_icon'] ?? ''));
$icon = $icon_url !== ''
? '<img class="aksrt-vip-level-icon" src="' . $icon_url . '" alt="" loading="lazy" decoding="async" />'
? '<img' . aksrt_get_lazy_attr('lazy_other', $icon_url, 'aksrt-vip-level-icon') . ' alt="" decoding="async">'
: '<i class="fas fa-gem" aria-hidden="true"></i>';
$html = '<div class="vip-card pointer level-' . $level . ' vip-theme' . $level . $cls . '" vip-level="' . $level . '">';
$html .= '<div class="vip-baicon" aria-hidden="true">' . $icon . '</div>';
src/Core/ScriptsPart1b.php
+8
View File
@@ -39,6 +39,14 @@ trait ScriptsPart1b {
);
wp_enqueue_style('aksrt-style', get_stylesheet_uri(), ['bootstrap5'], $version);
$lazy_animation = class_exists('\AKSRT\Settings\Settings')
? (string) \AKSRT\Settings\Settings::get_value('lazy_animation', 'blur')
: 'blur';
if ($lazy_animation === 'fade') {
wp_add_inline_style('aksrt-style', '.lazyloaded{--lazy-animation:lazy_fade!important;}');
} elseif ($lazy_animation === 'scale') {
wp_add_inline_style('aksrt-style', '.lazyloaded{--lazy-animation:lazy_scale!important;}');
}
$core_bundle = get_template_directory() . '/assets/css/build/core.min.css';
if (file_exists($core_bundle)) {
src/Core/ScriptsPart1c.php
+29 -6
View File
@@ -90,11 +90,21 @@ trait ScriptsPart1c {
true
);
// Zibll lazySizes is the only media lazy-loading runtime.
$lazysizes_js = get_template_directory() . '/assets/js/lazysizes.js';
wp_enqueue_script(
'aksrt-lazysizes',
$base_uri . '/assets/js/lazysizes.js',
[],
file_exists($lazysizes_js) ? (string) filemtime($lazysizes_js) : $version,
true
);
// Rehydrate system — must load before aksrt-script so AksrtFrontend is available
wp_enqueue_script(
'aksrt-rehydrate',
$base_uri . '/assets/js/rehydrate.js',
[],
['aksrt-lazysizes'],
file_exists(get_template_directory() . '/assets/js/rehydrate.js')
? (string) filemtime(get_template_directory() . '/assets/js/rehydrate.js')
: $version,
@@ -597,13 +607,26 @@ trait ScriptsPart1c {
'floatActionsId' => 'float-right-btns',
'tabbarId' => 'footer-tabbar',
],
'themeUri' => get_template_directory_uri(),
'codeHighlight' => class_exists('\AKSRT\Settings\Settings')
'themeUri' => get_template_directory_uri(),
'lazyScopes' => [
'lazy_posts_thumb' => aksrt_is_lazy('lazy_posts_thumb'),
'lazy_avatar' => aksrt_is_lazy('lazy_avatar'),
'lazy_posts_content' => aksrt_is_lazy('lazy_posts_content'),
'lazy_comment' => aksrt_is_lazy('lazy_comment'),
'lazy_private' => aksrt_is_lazy('lazy_private'),
'lazy_sider' => aksrt_is_lazy('lazy_sider'),
'lazy_cover' => aksrt_is_lazy('lazy_cover'),
'lazy_other' => aksrt_is_lazy('lazy_other'),
],
'lazyThumbs' => [
'default' => aksrt_get_lazy_thumb(),
'sm' => aksrt_get_lazy_thumb('sm'),
'lg' => aksrt_get_lazy_thumb('lg'),
],
'lazyAvatar' => aksrt_get_default_avatar_url(),
'codeHighlight' => class_exists('\AKSRT\Settings\Settings')
? \AKSRT\Settings\Settings::get_code_highlight_config()
: ['enabled' => true, 'lightTheme' => 'enlighter', 'darkTheme' => 'monokai', 'lineNumbers' => false, 'showButtons' => true, 'maxHeight' => 500],
'lazyload' => class_exists('\AKSRT\Settings\Settings')
? \AKSRT\Settings\Settings::get_lazyload_config()
: ['enabled' => true, 'animation' => 'blur', 'placeholder_url' => '', 'blur' => true],
'systemNotice' => class_exists('\AKSRT\Settings\Settings')
? \AKSRT\Settings\Settings::get_system_notice_config()
: ['enabled' => false],
src/Frontend/NavWalker.php
+2 -2
View File
@@ -143,7 +143,7 @@ class NavWalker extends \Walker_Nav_Menu {
? '<div class="img-badg-box"><span class="badg badg-sm ' . esc_attr((string) ($args['badge_class'] ?? '')) . '">'
. esc_html((string) $args['badge']) . '</span></div>'
: '';
$img_html = '<div class="img-box hover-zoom-img"><img src="' . esc_url((string) $args['img']) . '" alt="" loading="lazy">' . $badge . '</div>';
$img_html = '<div class="img-box hover-zoom-img"><img' . aksrt_get_lazy_attr('lazy_other', (string) $args['img']) . ' alt="">' . $badge . '</div>';
$title_html = $title !== '' ? '<div class="title mt10 text-ellipsis">' . esc_html($title) . '</div>' : '';
return '<div class="menu-graphic-card-item"><a href="' . $link_url . '"' . $link_target . '>'
. $img_html . $title_html . '</a></div>';
@@ -201,7 +201,7 @@ class NavWalker extends \Walker_Nav_Menu {
$icon = aksrt_render_menu_icon((string) $args['icon'], true);
}
if (!empty($args['img_icon'])) {
$icon = '<img class="menu-item-icon mr3 fa-fw" src="' . esc_url((string) $args['img_icon']) . '" alt="" loading="lazy">';
$icon = '<img' . aksrt_get_lazy_attr('lazy_other', (string) $args['img_icon'], 'menu-item-icon mr3 fa-fw') . ' alt="">';
}
$title_html = $icon . $title;
$class = trim(($class ? $class . ' ' : '') . 'link-item');
src/Settings/FacadeBulk.php
-37
View File
@@ -271,43 +271,6 @@ trait FacadeBulk {
/**
* 获取懒加载配置
*
* 返回 schema 定义的全部字段：全局开关、动画、占位图、模糊预览、
* 以及 8 项粒度范围开关。
*
* @return array {enabled, animation, placeholder_url, blur, avatar, content, comment, private, slider, cover, other, widget}
*/
public static function get_lazyload_config(): array {
$s = self::get_all();
// placeholder 兼容：schema 存 lazyload_placeholder，REST/Vue 存 lazyload_placeholder_url
$placeholder = '';
if (!empty($s['lazyload_placeholder'])) {
$placeholder = $s['lazyload_placeholder'];
} elseif (!empty($s['lazyload_placeholder_url'])) {
$placeholder = $s['lazyload_placeholder_url'];
}
return [
'enabled' => !isset($s['lazyload_enabled']) || !empty($s['lazyload_enabled']),
'animation' => $s['lazyload_animation'] ?? 'blur',
'placeholder_url' => (string) $placeholder,
'blur' => !isset($s['lazyload_blur']) || !empty($s['lazyload_blur']),
'avatar' => !isset($s['lazyload_avatar']) || !empty($s['lazyload_avatar']),
'content' => !empty($s['lazyload_content']),
'comment' => !isset($s['lazyload_comment']) || !empty($s['lazyload_comment']),
'private' => !isset($s['lazyload_private']) || !empty($s['lazyload_private']),
'slider' => !isset($s['lazyload_slider']) || !empty($s['lazyload_slider']),
'cover' => !isset($s['lazyload_cover']) || !empty($s['lazyload_cover']),
'other' => !isset($s['lazyload_other']) || !empty($s['lazyload_other']),
'widget' => !isset($s['lazyload_widget']) || !empty($s['lazyload_widget']),
];
}
/**
* 获取备案配置。
* @return array {icp_enabled, icp_filing, police_enabled, police_filing}
src/User/Level.php
+1 -1
View File
@@ -156,7 +156,7 @@ class Level {
$name = self::get_level_name($level);
$icon = self::get_level_icon_url($level);
if ($icon !== '') {
return '<img class="aksrt-user-level-icon img-icon ' . esc_attr($class) . '" src="' . esc_url($icon) . '" alt="' . esc_attr($name) . '" title="' . esc_attr($name) . '" loading="lazy" decoding="async">';
return '<img' . aksrt_get_lazy_attr('lazy_other', $icon, 'aksrt-user-level-icon img-icon ' . $class) . ' alt="' . esc_attr($name) . '" title="' . esc_attr($name) . '" decoding="async">';
}
return '<span class="badg badg-sm aksrt-user-level-badge ' . esc_attr($class) . '" title="' . esc_attr($name) . '">LV' . esc_html((string) $level) . '</span>';
}
src/WidgetSystem/FormRenderer.php
+1 -1
View File
@@ -151,7 +151,7 @@ final class FormRenderer {
private static function upload(string $id, string $name, string $value): void {
echo '<div class="aksrt-widget-upload">';
if ($value !== '') {
echo '<img src="' . esc_url($value) . '" alt="" loading="lazy">';
echo '<img src="' . esc_url($value) . '" alt="">';
}
echo '<input class="widefat" type="url" id="' . esc_attr($id) . '" name="' . esc_attr($name) . '" value="' . esc_attr($value) . '">';
echo '<button type="button" class="button aksrt-widget-upload__choose">' . esc_html__('选择媒体', 'aksrt') . '</button> <button type="button" class="button-link-delete aksrt-widget-upload__remove">' . esc_html__('移除', 'aksrt') . '</button></div>';
src/WidgetSystem/PostRenderer.php
+3 -1
View File
@@ -90,6 +90,8 @@ final class PostRenderer {
return $html . '</nav>';
}
$label = $mode === 'infinite' ? __('继续加载', 'aksrt') : __('加载更多', 'aksrt');
return '<button class="aksrt-widget-load-more" type="button" data-next-page="' . (int) ($page + 1) . '" data-mode="' . esc_attr($mode) . '">' . esc_html($label) . '</button>';
$class = $mode === 'infinite' ? 'aksrt-widget-load-more ias-btn lazyload' : 'aksrt-widget-load-more';
$action = $mode === 'infinite' ? ' lazyload-action="ias"' : '';
return '<button class="' . $class . '"' . $action . ' type="button" data-next-page="' . (int) ($page + 1) . '" data-mode="' . esc_attr($mode) . '">' . esc_html($label) . '</button>';
}
}
src/WidgetSystem/RendererHelpers.php
+7 -4
View File
@@ -20,12 +20,11 @@ final class RendererHelpers {
return $link['target'] === '_blank' ? ' target="_blank" rel="noopener noreferrer"' : '';
}
public static function image(string $url, string $alt = '', string $class = ''): string {
public static function image(string $url, string $alt = '', string $class = '', string $key = 'lazy_other', string $lazy_src = ''): string {
if ($url === '') {
return '';
}
return '<img' . ($class !== '' ? ' class="' . esc_attr($class) . '"' : '')
. ' src="' . esc_url($url) . '" alt="' . esc_attr($alt) . '" loading="lazy">';
return '<img' . aksrt_get_lazy_attr($key, $url, $class, $lazy_src) . ' alt="' . esc_attr($alt) . '">';
}
public static function lines(string $value): array {
@@ -49,7 +48,11 @@ final class RendererHelpers {
}
$media .= self::image((string) ($item['image'] ?? ''), $title, 'aksrt-media-card__image');
if (!empty($item['video'])) {
$media .= '<video class="aksrt-media-card__video" src="' . esc_url((string) $item['video']) . '" muted loop playsinline preload="metadata"></video>';
$video = esc_url((string) $item['video']);
$video_attr = aksrt_is_lazy('lazy_other')
? ' class="aksrt-media-card__video lazyload" src="" data-src="' . $video . '"'
: ' class="aksrt-media-card__video" src="' . $video . '"';
$media .= '<video' . $video_attr . ' muted loop playsinline preload="metadata"></video>';
}
$body = '<span class="aksrt-media-card__body"><strong>' . esc_html($title) . '</strong>';
if (!empty($item['description'])) {
src/WidgetSystem/Renderers/GeneralRenderer.php
+12 -2
View File
@@ -67,14 +67,24 @@ final class GeneralRenderer {
return RendererHelpers::empty_state(__('请配置视频地址', 'aksrt'));
}
$ratio = (string) $i['ratio'];
return '<div class="aksrt-widget-video aksrt-widget-video--' . esc_attr(str_replace(':', '-', $ratio)) . '" data-video-url="' . $url . '" data-video-poster="' . esc_url((string) $i['poster']) . '" data-autoplay="' . (!empty($i['autoplay']) ? '1' : '0') . '" data-muted="' . (!empty($i['muted']) ? '1' : '0') . '"><video controls playsinline preload="metadata"' . (!empty($i['autoplay']) ? ' autoplay' : '') . (!empty($i['muted']) ? ' muted' : '') . (!empty($i['poster']) ? ' poster="' . esc_url((string) $i['poster']) . '"' : '') . '><source src="' . $url . '"></video><p class="aksrt-widget-media-error" role="alert" aria-live="assertive" hidden>' . esc_html__('视频加载失败，请稍后重试。', 'aksrt') . '</p></div>';
if (aksrt_is_lazy('lazy_other')) {
$video_attr = ' class="lazyload" src="" data-src="' . $url . '"';
$poster_attr = !empty($i['poster']) ? ' data-poster="' . esc_url((string) $i['poster']) . '"' : '';
} else {
$video_attr = ' src="' . $url . '"';
$poster_attr = !empty($i['poster']) ? ' poster="' . esc_url((string) $i['poster']) . '"' : '';
}
return '<div class="aksrt-widget-video aksrt-widget-video--' . esc_attr(str_replace(':', '-', $ratio)) . '" data-video-url="' . $url . '" data-video-poster="' . esc_url((string) $i['poster']) . '" data-autoplay="' . (!empty($i['autoplay']) ? '1' : '0') . '" data-muted="' . (!empty($i['muted']) ? '1' : '0') . '"><video controls playsinline preload="metadata"' . $video_attr . $poster_attr . (!empty($i['autoplay']) ? ' autoplay' : '') . (!empty($i['muted']) ? ' muted' : '') . '></video><p class="aksrt-widget-media-error" role="alert" aria-live="assertive" hidden>' . esc_html__('视频加载失败，请稍后重试。', 'aksrt') . '</p></div>';
}
private static function render_embed(array $i): string {
if (empty($i['url'])) {
return RendererHelpers::empty_state(__('请配置嵌入地址', 'aksrt'));
}
return '<div class="aksrt-widget-embed" style="--aksrt-embed-ratio:' . esc_attr((string) (float) $i['ratio']) . '%"><iframe src="' . esc_url((string) $i['url']) . '" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"' . (!empty($i['allow_fullscreen']) ? ' allowfullscreen' : '') . ' title="' . esc_attr__('嵌入内容', 'aksrt') . '"></iframe></div>';
$src_attr = aksrt_is_lazy('lazy_other')
? ' class="lazyload" src="" data-src="' . esc_url((string) $i['url']) . '"'
: ' src="' . esc_url((string) $i['url']) . '"';
return '<div class="aksrt-widget-embed" style="--aksrt-embed-ratio:' . esc_attr((string) (float) $i['ratio']) . '%"><iframe' . $src_attr . ' referrerpolicy="strict-origin-when-cross-origin"' . (!empty($i['allow_fullscreen']) ? ' allowfullscreen' : '') . ' title="' . esc_attr__('嵌入内容', 'aksrt') . '"></iframe></div>';
}
private static function render_media_cards(array $i): string {
src/WidgetSystem/Renderers/SliderRenderer.php
+10 -4
View File
@@ -16,13 +16,19 @@ final class SliderRenderer {
continue;
}
$link = RendererHelpers::link((array) ($slide['link'] ?? []));
$media = !empty($slide['background_video'])
? '<video src="' . esc_url((string) $slide['background_video']) . '" muted loop playsinline preload="metadata"></video>'
: RendererHelpers::image((string) $slide['background'], (string) ($slide['title'] ?? ''), 'swiper-lazy');
if (!empty($slide['background_video'])) {
$video = esc_url((string) $slide['background_video']);
$video_attr = aksrt_is_lazy('lazy_sider')
? ' class="lazyload" src="" data-src="' . $video . '"'
: ' src="' . $video . '"';
$media = '<video' . $video_attr . ' muted loop playsinline preload="metadata"></video>';
} else {
$media = RendererHelpers::image((string) $slide['background'], (string) ($slide['title'] ?? ''), '', 'lazy_sider', aksrt_get_lazy_thumb('lg'));
}
$layers = '';
foreach ((array) ($slide['layers'] ?? []) as $layer) {
if (!empty($layer['image'])) {
$layers .= '<img class="aksrt-slide-layer" src="' . esc_url((string) $layer['image']) . '" alt="" data-swiper-parallax="' . (int) ($layer['parallax'] ?? 0) . '" data-swiper-parallax-scale="' . esc_attr((string) ((float) ($layer['scale'] ?? 100) / 100)) . '">';
$layers .= '<img' . aksrt_get_lazy_attr('lazy_sider', (string) $layer['image'], 'aksrt-slide-layer', aksrt_get_lazy_thumb('lg')) . ' alt="" data-swiper-parallax="' . (int) ($layer['parallax'] ?? 0) . '" data-swiper-parallax-scale="' . esc_attr((string) ((float) ($layer['scale'] ?? 100) / 100)) . '">';
}
}
$copy = '<div class="aksrt-slide-copy is-' . esc_attr((string) ($slide['text_align'] ?? 'left-bottom')) . '"><h3>' . esc_html((string) ($slide['title'] ?? '')) . '</h3><p>' . esc_html((string) ($slide['description'] ?? '')) . '</p></div>';