3.2.27: 评论嵌套引导线按层变色(1层浅蓝/2层深蓝/3层点赞色/更深扩展色轮换,深层线恢复绘制);导航多级下拉修复(depth=2 截断改 0,深层父项 dropdown-submenu + hover 右侧弹出,移动端平铺)

This commit is contained in:
2026-10-25 09:52:07 +08:00
parent 92ffced7cf
commit 0239cbeb2a
7 changed files with 139 additions and 10 deletions
+45 -1
View File
@@ -106,6 +106,37 @@ function yang_comments_plugin_active()
* 否则子评论会被挤到 </li> 外面(详见下方注释)
* @return string
*/
/**
* 嵌套引导线的按层配色(3.2.27)。
*
* $depth 是「线里装着的评论」的深度:
* 2 = 直接回复(第 1 层嵌套)→ 返回 '',CSS 回落到主题浅蓝(保持现状);
* 3 = 第 2 层嵌套 → 深蓝;
* 4 = 第 3 层嵌套 → 点赞按钮背景色(.btn-thumbs 的 #fb5235);
* 5+ → 扩展色板按层循环:确定性的"随机"——同层恒同色、相邻层必异色,
* 页面刷新不变(真随机会让同一层的线各页各色,层级信号反而乱)。
*
* 颜色都取饱和偏深的中明度色:线上是白底,太浅的(如淡黄)贴白底看不见。
*
* @param int $depth 评论深度(最小 2,即第 1 层嵌套)
* @return string 颜色值;'' 表示用 CSS 默认(主题浅蓝)
*/
function yang_comment_guide_color($depth)
{
if ($depth <= 2) {
return '';
}
if ($depth === 3) {
return '#0057b8'; // 深蓝:与浅蓝同色相,明度拉开
}
if ($depth === 4) {
return '#fb5235'; // 点赞按钮(.btn-thumbs)的背景/描边色
}
$pool = array('#7c4dff', '#00a77a', '#e91e63', '#f59e0b', '#5b8def', '#8bc34a');
return $pool[($depth - 5) % count($pool)];
}
function yang_comment_html($comment, $args = array(), $depth = 1, $is_ajax = false, $close_li = true)
{
if (!($comment instanceof WP_Comment)) {
@@ -151,9 +182,22 @@ function yang_comment_html($comment, $args = array(), $depth = 1, $is_ajax = fal
}
$o = array();
/* 嵌套引导线按层配色(3.2.27):
线画在子容器 ol.yang-children 的 ::before 上,颜色从 --yq-guide-c 取。
给本 li 注入的值 = 「本条的直接回复那一层」该用的颜色:
第 1 层嵌套(直接回复)→ 不注入,CSS 回落到主题浅蓝(保持现状);
第 2 层 → 深蓝;第 3 层 → 点赞按钮背景色 #fb5235;
更深 → 扩展色板按层循环(确定性的"随机",同层同色、跨层异色)。
自定义属性沿 DOM 继承:内层 li 自己注入的值会覆盖继承值,
所以每个 ol 读到的都是离它最近的那个父 li 注入的颜色。 */
$guide_c = yang_comment_guide_color($depth + 1);
$style_attr = '';
if ($guide_c !== '') {
$style_attr = ' style="--yq-guide-c:' . esc_attr($guide_c) . ';"';
}
$o[] = '<li id="comment-' . $comment_id . '" class="' . esc_attr(implode(' ', $classes)) . '"'
. ' data-comment-id="' . $comment_id . '"'
. ' data-depth="' . $depth . '">';
. ' data-depth="' . $depth . '"' . $style_attr . '>';
// ── 头像列 ──
$o[] = '<div class="yang-comment-avatar">';