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

fix single-post.css

Browse Source
This commit is contained in:
kate522
2026-09-05 20:10:07 +08:00
parent d86147f406
commit d64c4cf1b4
17 changed files with 696 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tmp-debug/cover-repro.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>cover repro</title>
<link rel="stylesheet" href="../assets/css/main.min.css">
<link rel="stylesheet" href="../assets/css/swiper.css">
<link rel="stylesheet" href="../assets/css/frontend/single-post/cover.css">
<style>
body { padding: 20px; max-width: 800px; }
h4 { margin: 10px 0; }
</style>
</head>
<body>
<h4>A: 当前 markup（--pc-height:100%，无 padding）</h4>
<div class="single-head-cover">
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" data-loop data-autoplay data-interval="5000" style="--pc-height:100%;--m-height:100%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
</div>
<h4>B: 旧状态参考（--pc-height:auto，内层有 padding）</h4>
<div class="single-head-cover">
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" style="--pc-height:auto;--m-height:auto;--scale-ratio:0.35;padding-bottom:35%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
</div>
</body>
</html>
tmp-debug/cover-repro2.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>cover repro2 - with swiper init</title>
<link rel="stylesheet" href="../assets/css/main.min.css">
<link rel="stylesheet" href="../assets/css/swiper.css">
<link rel="stylesheet" href="../assets/css/frontend/single-post/cover.css">
<style> body { padding: 20px; max-width: 800px; } h4 { margin: 10px 0; } </style>
</head>
<body>
<h4>A+Swiper: 当前 markup + 主题同参初始化</h4>
<div class="single-head-cover">
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" data-loop data-autoplay data-interval="5000" style="--pc-height:100%;--m-height:100%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
</div>
<script src="../assets/js/runtime/libs/jquery.min.js"></script>
<script src="../assets/js/runtime/libs/swiper.min.js"></script>
<script>
jQuery(function ($) {
$('.new-swiper').each(function (e) {
var _this = $(this);
_this.addClass('swiper-eq-' + e);
var loop = _this.attr('data-loop') ? true : false;
var autoplay = _this.attr('data-autoplay') ? { delay: 5000, disableOnInteraction: false } : false;
new Swiper('.new-swiper.swiper-eq-' + e, {
loop: loop,
autoHeight: false,
direction: 'horizontal',
spaceBetween: 0,
parallax: false,
effect: 'slide',
lazy: { loadPrevNext: true },
autoplay: autoplay,
speed: 400,
pagination: { el: '.new-swiper.swiper-eq-' + e + ' .swiper-pagination', type: 'bullets', clickable: true },
navigation: { nextEl: '.new-swiper.swiper-eq-' + e + ' .swiper-button-next', prevEl: '.new-swiper.swiper-eq-' + e + ' .swiper-button-prev' },
on: {
init: function () {
if (loop) { _this.find('.swiper-slide-duplicate img').addClass('no-imgbox'); }
}
}
});
});
});
</script>
</body>
</html>
tmp-debug/cover-repro3.html
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>cover repro3 - full runtime</title>
<link rel="stylesheet" href="../assets/css/main.min.css">
<link rel="stylesheet" href="../assets/css/swiper.css">
<link rel="stylesheet" href="../assets/css/frontend/single-post/cover.css">
<style> body { padding: 20px; max-width: 800px; } h4 { margin: 10px 0; } </style>
</head>
<body>
<h4>真实运行时（loader+main+lazysizes+Swiper）+ 懒加载占位形态</h4>
<div class="single-head-cover">
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" data-loop data-autoplay data-interval="5000" style="--pc-height:100%;--m-height:100%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="../assets/img/thumbnail-lg.svg" data-src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="../assets/img/thumbnail-lg.svg" data-src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
</div>
<script src="../assets/js/runtime/libs/jquery.min.js"></script>
<script src="../assets/js/runtime/loader.js"></script>
<script src="../assets/js/runtime/main.min.js"></script>
</body>
</html>
tmp-debug/dbg.out
View File
tmp-debug/dbg.php
+25
View File
@@ -0,0 +1,25 @@
<?php
function wp_parse_args($args, $defaults) { return array_merge($defaults, (array)$args); }
function esc_attr($s) { return htmlspecialchars((string)$s, ENT_QUOTES); }
function esc_url($s) { return $s; }
function sanitize_text_field($s) { return $s; }
function sanitize_hex_color($s) { return $s; }
function aksrt_get_lazy_attr($ctx, $url, $class, $thumb) { return ' class="lazyload"'; }
function aksrt_get_lazy_thumb($size) { return ''; }
require __DIR__ . '/../inc/helpers/aksrt-slider.php';
$args = [
'slides' => [['image' => 'a.jpg'], ['image' => 'b.jpg']],
'scale_height' => true, 'scale_ratio' => 0.35, 'scale_extra' => '50px',
'wrapper_class' => 'w', 'slider_class' => 's', 'overlay_html' => '<div>o</div>',
];
$parsed = wp_parse_args($args, [
'slides' => [], 'effect' => 'slide', 'loop' => true, 'autoplay' => true,
'interval' => 5000, 'speed' => 0, 'direction' => 'horizontal', 'spaceBetween' => 0,
'pagination_type' => 'bullets', 'pc_height' => 'auto', 'm_height' => 'auto',
'scale_height' => false, 'scale_ratio' => 0.45, 'scale_extra' => '',
'wrapper_class' => '', 'slider_class' => '', 'show_nav' => true,
'show_pagination' => true, 'overlay_html' => '',
]);
var_dump($parsed['slides'], $parsed['scale_height'], $parsed['scale_extra']);
$html = aksrt_render_slider($args);
var_dump(strlen($html));
tmp-debug/err.txt
View File
tmp-debug/img-a.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e74c3c"/><stop offset="1" stop-color="#8e44ad"/></linearGradient></defs><rect width="1200" height="800" fill="url(#g)"/><text x="600" y="380" font-size="160" fill="#fff" text-anchor="middle" font-family="sans-serif">IMG-A</text><text x="600" y="520" font-size="60" fill="#fff" text-anchor="middle" font-family="sans-serif">center-crop target</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

tmp-debug/img-b.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><defs><linearGradient id="g2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2980b9"/><stop offset="1" stop-color="#27ae60"/></linearGradient></defs><rect width="1200" height="800" fill="url(#g2)"/><text x="600" y="380" font-size="160" fill="#fff" text-anchor="middle" font-family="sans-serif">IMG-B</text><text x="600" y="520" font-size="60" fill="#fff" text-anchor="middle" font-family="sans-serif">center-crop target</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 533 B

tmp-debug/mini.php
+3
View File
@@ -0,0 +1,3 @@
<?php
fwrite(STDOUT, "START\n");
echo "ECHO-WORKS\n";
tmp-debug/out.html
View File
tmp-debug/page.html
+505
View File
File diff suppressed because one or more lines are too long
tmp-debug/served-main.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
tmp-debug/served-main.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
tmp-debug/slider-harness.php
+28
View File
@@ -0,0 +1,28 @@
<?php
define('ABSPATH', __DIR__ . '/');
function wp_parse_args($args, $defaults) { return array_merge($defaults, (array)$args); }
function esc_attr($s) { return htmlspecialchars((string)$s, ENT_QUOTES); }
function esc_url($s) { return $s; }
function sanitize_text_field($s) { return $s; }
function sanitize_hex_color($s) { return $s; }
function aksrt_get_lazy_attr($ctx, $url, $class, $thumb) {
return ' class="lazyload ' . $class . '" src="ph.png" data-src="' . $url . '"';
}
function aksrt_get_lazy_thumb($size) { return ''; }
require __DIR__ . '/../inc/helpers/aksrt-slider.php';
echo aksrt_render_slider([
'slides' => [
['image' => 'https://example.com/a.jpg', 'alt' => 'a'],
['image' => 'https://example.com/b.jpg', 'alt' => 'b'],
],
'scale_height' => true,
'scale_ratio' => 0.35,
'scale_extra' => '50px',
'wrapper_class' => 'mb20 single-cover-slide imgbox-container',
'slider_class' => 'single-cover single-cover--slide',
'show_nav' => true,
'show_pagination' => true,
'loop' => true,
'autoplay' => true,
'overlay_html' => '<div class="abs-center left-bottom single-cover-con">TITLE</div>',
]), "\n";