3.2.27: 评论嵌套引导线按层变色(1层浅蓝/2层深蓝/3层点赞色/更深扩展色轮换,深层线恢复绘制);导航多级下拉修复(depth=2 截断改 0,深层父项 dropdown-submenu + hover 右侧弹出,移动端平铺)
This commit is contained in:
+45
-1
@@ -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">';
|
||||
|
||||
Reference in New Issue
Block a user