![图片[1]-子比主题小工具“导航小工具”附svg磨砂图标](https://www.yu158.com/wp-content/uploads/2026/03/20260303124856942-20251219194901937-动画1-2-tuya-1024x348.gif)
工具介绍
多个分类卡片,每个卡片包含多个子分类链接
显示:文章总数、本周/今日发布、浏览量、用户数(可自定义标签和虚拟增量)
实时滚动显示:发布、评论、点赞、收藏、注册
开始美化
插入主题 func.php(或 function.php)
<?php
/**
* 信息<a target="_blank" href="https://www.vsdiy.com/tag/%e5%af%bc%e8%88%aa%e5%b0%8f%e5%b7%a5%e5%85%b7" title="View all posts in 导航小工具">导航小工具</a>组件
* 使用<a target="_blank" href="https://www.vsdiy.com/tag/%e5%ad%90%e6%af%94%e4%b8%bb%e9%a2%98" title="View all posts in 子比主题">子比主题</a> CSF 框架开发
*/
// 创建信息导航小工具
Zib_CFSwidget::create('zib_widget_info_nav', array(
'title' => '信息导航',
'zib_show' => true,
'description' => '显示分类导航、网站统计和用户动态的综合信息组件',
'fields' => array(
// 动态滚动设置
array(
'id' => 'scroll_speed',
'title' => '滚动速度(秒/条)',
'desc' => '数值越大滚动越慢,建议1-5秒',
'default' => 1,
'max' => 10,
'min' => 1,
'step' => 1,
'unit' => '秒',
'type' => 'spinner',
),
array(
'id' => 'activity_num',
'title' => '动态显示数量',
'desc' => '显示多少条用户动态',
'class' => 'compact',
'default' => 15,
'max' => 50,
'min' => 5,
'step' => 1,
'unit' => '条',
'type' => 'spinner',
),
// 位置调整
array(
'id' => 'margin_top',
'title' => '向上偏移距离',
'desc' => '负数向上移动,联动推荐:-115px,覆盖上方内容(0为不偏移)',
'class' => 'compact',
'default' => 0,
'max' => 0,
'min' => -500,
'step' => 1,
'unit' => 'px',
'type' => 'spinner',
),
array(
'id' => 'z_index',
'title' => '层级(z-index)',
'desc' => '数值越大越在上层,建议设置为10-100之间',
'class' => 'compact',
'default' => 10,
'max' => 999,
'min' => 1,
'step' => 1,
'unit' => '',
'type' => 'spinner',
),
// 统计标签配置
array(
'id' => 'stats_labels',
'type' => 'accordion',
'title' => '统计标签配置',
'accordions' => array(
array(
'title' => '自定义统计标签文字',
'icon' => 'fa fa-fw fa-bar-chart',
'fields' => array(
array(
'id' => 'total_label',
'title' => '总量标签',
'default' => '文章总数:',
'type' => 'text',
),
array(
'id' => 'week_label',
'title' => '本周标签',
'class' => 'compact',
'default' => '本周发布:',
'type' => 'text',
),
array(
'id' => 'today_label',
'title' => '今日标签',
'class' => 'compact',
'default' => '今日发布:',
'type' => 'text',
),
array(
'id' => 'views_label',
'title' => '浏览量标签',
'class' => 'compact',
'default' => '总浏览量:',
'type' => 'text',
),
array(
'id' => 'users_label',
'title' => '用户标签',
'class' => 'compact',
'default' => '活跃用户:',
'type' => 'text',
),
),
),
array(
'title' => '数据增量配置',
'icon' => 'fa fa-fw fa-plus-circle',
'fields' => array(
array(
'id' => 'total_add',
'title' => '总量增量',
'desc' => '在实际文章总数基础上增加的数量(可为负数)',
'default' => 0,
'type' => 'number',
),
array(
'id' => 'week_add',
'title' => '本周增量',
'desc' => '在实际本周发布数基础上增加的数量(可为负数)',
'class' => 'compact',
'default' => 0,
'type' => 'number',
),
array(
'id' => 'today_add',
'title' => '今日增量',
'desc' => '在实际今日发布数基础上增加的数量(可为负数)',
'class' => 'compact',
'default' => 0,
'type' => 'number',
),
array(
'id' => 'views_add',
'title' => '浏览量增量',
'desc' => '在实际浏览量基础上增加的数量(可为负数)',
'class' => 'compact',
'default' => 0,
'type' => 'number',
),
array(
'id' => 'users_add',
'title' => '用户增量',
'desc' => '在实际用户数基础上增加的数量(可为负数)',
'class' => 'compact',
'default' => 0,
'type' => 'number',
),
),
),
),
),
// 分类导航配置
array(
'id' => 'categories',
'type' => 'group',
'min' => 1,
'accordion_title_number' => true,
'accordion_title_auto' => true,
'accordion_title_by' => 'title',
'button_title' => '添加分类',
'title' => '分类导航配置',
'subtitle' => '添加分类导航栏目',
'desc' => '每个分类可以包含多个子分类链接,子分类格式为:名称|链接(每行一个)',
'default' => array(
array(
'title' => '资源领域',
'icon' => '',
'color' => '#f4fafe',
'link' => '',
'items' => array(
array('name' => '网站源码', 'link' => '/ziyuan/yuanma'),
array('name' => '网站模板', 'link' => '/ziyuan/muban'),
array('name' => '软件应用', 'link' => '/ziyuan/softapps'),
array('name' => '社区门户', 'link' => '/ziyuan/commport'),
array('name' => 'WP模板', 'link' => '/ziyuan/wordpress'),
array('name' => '设计编辑', 'link' => '/ziyuan/graphicsapp'),
),
),
array(
'title' => '设计大厅',
'icon' => '',
'color' => '#fffaf0',
'link' => '',
'items' => array(
array('name' => '样机模型', 'link' => '/sheji/mockups'),
array('name' => '海报广告', 'link' => '/sheji/postads'),
array('name' => '传统节日', 'link' => '/sheji/tradifest'),
array('name' => '名片简历', 'link' => '/sheji/cardresume'),
array('name' => '画册折册', 'link' => '/sheji/bookfold'),
array('name' => 'LOGO设计', 'link' => '/sheji/logocraft'),
),
),
array(
'title' => '字体文档',
'icon' => '',
'color' => '#fff8f8',
'link' => '',
'items' => array(
array('name' => 'Word模板', 'link' => '/officedocs/word'),
array('name' => 'Excel模板', 'link' => '/officedocs/excel'),
array('name' => 'PPT模板', 'link' => '/officedocs/ppt'),
array('name' => '中文字体', 'link' => '/ziti/c-font'),
array('name' => '英文字体', 'link' => '/ziti/e-font'),
array('name' => '广告字体', 'link' => '/ziti/adfonts'),
),
),
array(
'title' => '拾光画境',
'icon' => '',
'color' => '#f5f3ff',
'link' => '',
'items' => array(
array('name' => 'P站插画', 'link' => '/tuku/pixiilu'),
array('name' => '写真美图', 'link' => '/tuku/glampic'),
array('name' => '写真合集', 'link' => '/tuku/piccomp'),
array('name' => '动漫Cos', 'link' => '/tuku/acos'),
array('name' => '摄影画册', 'link' => '/tuku/photalbum'),
array('name' => '精选壁纸', 'link' => '/tuku/wallpaper'),
),
),
array(
'title' => '功能扩展',
'icon' => '',
'color' => '#f0f6ff',
'link' => '',
'items' => array(
array('name' => '认证达人', 'link' => '/verify'),
array('name' => '帮助中心', 'link' => '/document'),
array('name' => '导航页面', 'link' => '/mtab'),
array('name' => '排行榜单', 'link' => '/ranks'),
array('name' => '社区论坛', 'link' => '/circle'),
array('name' => '关于我们', 'link' => '/about'),
),
),
),
'fields' => array(
array(
'id' => 'title',
'title' => '分类标题',
'desc' => '必填项',
'type' => 'text',
),
array(
'id' => 'icon',
'title' => '分类图标',
'desc' => '可选,填写图片URL',
'class' => 'compact',
'type' => 'upload',
'library' => 'image',
),
array(
'id' => 'color',
'title' => '背景渐变色',
'desc' => '分类卡片的背景渐变起始颜色',
'class' => 'compact',
'default' => '#f4fafe',
'type' => 'color',
),
array(
'id' => 'link',
'title' => '分类链接',
'desc' => '可选,点击分类标题跳转的链接',
'class' => 'compact',
'type' => 'text',
),
array(
'id' => 'items',
'type' => 'group',
'title' => '子分类列表',
'subtitle' => '添加子分类导航链接',
'accordion_title_number' => true,
'accordion_title_auto' => true,
'accordion_title_by' => 'name',
'button_title' => '添加子分类',
'fields' => array(
array(
'id' => 'name',
'title' => '子分类名称',
'type' => 'text',
),
array(
'id' => 'link',
'title' => '子分类链接',
'class' => 'compact',
'type' => 'text',
),
),
),
),
),
),
));
// 小工具输出函数
function zib_widget_info_nav($args, $instance)
{
$show_class = Zib_CFSwidget::show_class($instance);
if (!$show_class) {
return;
}
// 获取配置
$scroll_speed = max(1, intval($instance['scroll_speed'] ?? 3));
$activity_num = max(5, intval($instance['activity_num'] ?? 15));
$margin_top = intval($instance['margin_top'] ?? 0);
$z_index = max(1, intval($instance['z_index'] ?? 1));
$stats_labels = $instance['stats_labels'] ?? array();
$total_label = $stats_labels['total_label'] ?? '文章总数:';
$week_label = $stats_labels['week_label'] ?? '本周发布:';
$today_label = $stats_labels['today_label'] ?? '今日发布:';
$views_label = $stats_labels['views_label'] ?? '总浏览量:';
$users_label = $stats_labels['users_label'] ?? '活跃用户:';
// 获取数据增量配置
$total_add = intval($stats_labels['total_add'] ?? 0);
$week_add = intval($stats_labels['week_add'] ?? 0);
$today_add = intval($stats_labels['today_add'] ?? 0);
$views_add = intval($stats_labels['views_add'] ?? 0);
$users_add = intval($stats_labels['users_add'] ?? 0);
$categories = $instance['categories'] ?? array();
// 获取统计数据
$stats = zib_widget_info_nav_get_stats();
// 应用数据增量
$stats['total_posts'] = max(0, $stats['total_posts'] + $total_add);
$stats['week_posts'] = max(0, $stats['week_posts'] + $week_add);
$stats['today_posts'] = max(0, $stats['today_posts'] + $today_add);
$stats['total_views'] = max(0, $stats['total_views'] + $views_add);
$stats['total_users'] = max(0, $stats['total_users'] + $users_add);
// 获取用户动态
$activities = zib_widget_info_nav_get_activities($activity_num);
// 生成唯一ID
$widget_id = 'zib_act_' . uniqid();
// 开始输出
// 构建自定义样式
$custom_style = '';
if ($margin_top != 0) {
$custom_style .= 'margin-top:' . $margin_top . 'px;';
}
if ($z_index > 1) {
$custom_style .= 'position:relative;z-index:' . $z_index . ';';
}
// 输出容器,如果有自定义样式则添加
if ($custom_style) {
echo '<div style="' . esc_attr($custom_style) . '">';
}
Zib_CFSwidget::echo_before($instance);
echo '<div class="zib-widget box-body">';
// 输出分类导航
if (!empty($categories)) {
echo '<div class="info-widget-top"><ul class="info-cat-list">';
foreach ($categories as $cat) {
if (empty($cat['title'])) continue;
$color = !empty($cat['color']) ? $cat['color'] : '#f4fafe';
$icon = !empty($cat['icon']) ? $cat['icon'] : '';
$link = !empty($cat['link']) ? $cat['link'] : 'javascript:;';
$items = zib_widget_info_nav_parse_items($cat['items'] ?? '');
echo '<li class="info-cat-item b2-radius" style="--cat-color:' . esc_attr($color) . '">';
echo '<div class="cat-header">';
echo '<a href="' . esc_url($link) . '" class="cat-title-link">';
if ($icon) {
echo '<img src="' . esc_url($icon) . '" class="cat-icon">';
}
echo '<span class="cat-title">' . esc_html($cat['title']) . '</span>';
echo '</a>';
echo '<i class="cat-arrow fa fa-angle-right"></i>';
echo '</div>';
if (!empty($items)) {
echo '<div class="cat-items">';
foreach ($items as $item) {
echo '<span class="cat-item"><a href="' . esc_url($item['link']) . '" target="_blank">' . esc_html($item['name']) . '</a></span>';
}
echo '</div>';
}
echo '</li>';
}
echo '</ul></div>';
}
// 输出统计和动态
echo '<div class="info-widget-bottom">';
// 统计数据
echo '<div class="info-stats"><ul class="stats-list">';
echo '<li class="stats-item"><p class="stats-label">' . esc_html($total_label) . '</p><p class="stats-value">' . number_format($stats['total_posts']) . '<i>篇</i></p></li>';
echo '<li class="stats-item"><p class="stats-label">' . esc_html($week_label) . '</p><p class="stats-value">' . number_format($stats['week_posts']) . '<i>篇</i></p></li>';
echo '<li class="stats-item"><p class="stats-label">' . esc_html($today_label) . '</p><p class="stats-value">' . number_format($stats['today_posts']) . '<i>篇</i></p></li>';
echo '<li class="stats-item"><p class="stats-label">' . esc_html($views_label) . '</p><p class="stats-value">' . number_format($stats['total_views']) . '<i>次</i></p></li>';
echo '<li class="stats-item"><p class="stats-label">' . esc_html($users_label) . '</p><p class="stats-value">' . number_format($stats['total_users']) . '<i>人</i></p></li>';
echo '</ul></div>';
// 用户动态
echo '<div class="info-activities">';
echo '<div class="activities-header">网站动态</div>';
echo '<div class="activities-scroll">';
echo '<ul class="activities-list" id="' . $widget_id . '" data-speed="' . $scroll_speed . '">';
foreach ($activities as $act) {
$link_attr = $act['link'] ? ' href="' . esc_url($act['link']) . '" target="_blank"' : ' href="javascript:;"';
echo '<li class="activity-item"><a' . $link_attr . '>';
echo '<img src="' . esc_url($act['avatar']) . '" class="activity-avatar">';
echo '<span class="activity-user"><span class="user-label">用户:</span><span class="user-name">' . esc_html($act['user_name']) . '</span></span>';
echo '<span class="activity-action"><span class="action-text">' . esc_html($act['action']) . '</span>';
if ($act['title']) {
echo '<span class="action-title">' . esc_html($act['title']) . '</span>';
}
echo '</span>';
echo '<span class="activity-time">' . date('m月d日', strtotime($act['time'])) . '</span>';
echo '</a></li>';
}
echo '</ul></div></div>';
echo '</div>'; // info-widget-bottom
echo '</div>'; // zib-widget
// 输出样式和脚本
zib_widget_info_nav_assets($widget_id, $scroll_speed);
Zib_CFSwidget::echo_after($instance);
// 关闭自定义样式容器
if ($custom_style) {
echo '</div>';
}
}
// 解析子分类列表
function zib_widget_info_nav_parse_items($items_data)
{
$items = array();
if (empty($items_data) || !is_array($items_data)) {
return $items;
}
foreach ($items_data as $item) {
if (!empty($item['name']) && !empty($item['link'])) {
$items[] = array(
'name' => trim($item['name']),
'link' => trim($item['link']),
);
}
}
return $items;
}
// 获取网站统计数据
function zib_widget_info_nav_get_stats()
{
global $wpdb;
$total = wp_count_posts('post')->publish;
$week = $wpdb->get_var($wpdb->prepare(
"SELECT COUNT(*) FROM {$wpdb->posts} WHERE post_type='post' AND post_status='publish' AND post_date>=%s",
date('Y-m-d 00:00:00', strtotime('monday this week'))
));
$today = $wpdb->get_var($wpdb->prepare(
"SELECT COUNT(*) FROM {$wpdb->posts} WHERE post_type='post' AND post_status='publish' AND post_date>=%s",
date('Y-m-d 00:00:00')
));
// 获取总浏览量(所有文章的浏览量之和)
$total_views = $wpdb->get_var(
"SELECT SUM(meta_value) FROM {$wpdb->postmeta}
WHERE meta_key = 'views' AND meta_value REGEXP '^[0-9]+$'"
);
$total_views = $total_views ? intval($total_views) : 0;
$users = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->users}");
return array(
'total_posts' => $total,
'week_posts' => $week,
'today_posts' => $today,
'total_views' => $total_views,
'total_users' => $users,
);
}
// 获取用户动态
function zib_widget_info_nav_get_activities($limit = 15)
{
global $wpdb;
$acts = array();
$per_type_limit = ceil($limit / 2); // 每种类型获取的数量
// 1. 获取发布文章
$posts = $wpdb->get_results($wpdb->prepare(
"SELECT ID, post_author, post_title, post_date
FROM {$wpdb->posts}
WHERE post_type = 'post'
AND post_status = 'publish'
ORDER BY post_date DESC
LIMIT %d",
$per_type_limit
));
foreach ($posts as $p) {
if (!$p->post_author) continue;
$user = get_userdata($p->post_author);
if (!$user) continue;
$acts[] = array(
'type' => 'publish',
'user_name' => zib_widget_info_nav_mask_name($user->display_name),
'user_id' => $p->post_author,
'title' => mb_substr($p->post_title, 0, 18) . (mb_strlen($p->post_title) > 18 ? '...' : ''),
'link' => get_permalink($p->ID),
'time' => $p->post_date,
'action' => '发布文章',
'avatar' => zib_widget_info_nav_get_avatar($p->post_author),
);
}
// 2. 获取评论
$comments = $wpdb->get_results($wpdb->prepare(
"SELECT c.comment_author, c.user_id, c.comment_post_ID, c.comment_date, p.post_title
FROM {$wpdb->comments} c
LEFT JOIN {$wpdb->posts} p ON c.comment_post_ID = p.ID
WHERE c.comment_approved = '1'
ORDER BY c.comment_date DESC
LIMIT %d",
$per_type_limit
));
foreach ($comments as $c) {
$name = $c->user_id ? get_userdata($c->user_id)->display_name : $c->comment_author;
$acts[] = array(
'type' => 'comment',
'user_name' => zib_widget_info_nav_mask_name($name),
'user_id' => $c->user_id,
'title' => mb_substr($c->post_title, 0, 18) . (mb_strlen($c->post_title) > 18 ? '...' : ''),
'link' => get_permalink($c->comment_post_ID),
'time' => $c->comment_date,
'action' => '评论文章',
'avatar' => zib_widget_info_nav_get_avatar($c->user_id),
);
}
// 3. 获取点赞文章(从 postmeta 获取最近被点赞的文章)
$likes = $wpdb->get_results($wpdb->prepare(
"SELECT pm.post_id, pm.meta_value as like_data, p.post_title, p.post_date
FROM {$wpdb->postmeta} pm
LEFT JOIN {$wpdb->posts} p ON pm.post_id = p.ID
WHERE pm.meta_key = 'like_data'
AND pm.meta_value != ''
AND p.post_status = 'publish'
ORDER BY pm.meta_id DESC
LIMIT %d",
$per_type_limit
));
foreach ($likes as $like) {
$like_data = maybe_unserialize($like->like_data);
if (!is_array($like_data) || empty($like_data)) continue;
// 获取最后一个点赞的用户
$last_like = end($like_data);
if (!isset($last_like['user_id']) || !isset($last_like['time'])) continue;
$user = get_userdata($last_like['user_id']);
if (!$user) continue;
$acts[] = array(
'type' => 'like',
'user_name' => zib_widget_info_nav_mask_name($user->display_name),
'user_id' => $last_like['user_id'],
'title' => mb_substr($like->post_title, 0, 18) . (mb_strlen($like->post_title) > 18 ? '...' : ''),
'link' => get_permalink($like->post_id),
'time' => $last_like['time'],
'action' => '点赞文章',
'avatar' => zib_widget_info_nav_get_avatar($last_like['user_id']),
);
}
// 4. 获取收藏文章(从 postmeta 获取最近被收藏的文章)
$favorites = $wpdb->get_results($wpdb->prepare(
"SELECT pm.post_id, pm.meta_value as favorite_data, p.post_title, p.post_date
FROM {$wpdb->postmeta} pm
LEFT JOIN {$wpdb->posts} p ON pm.post_id = p.ID
WHERE pm.meta_key = 'favorite_data'
AND pm.meta_value != ''
AND p.post_status = 'publish'
ORDER BY pm.meta_id DESC
LIMIT %d",
$per_type_limit
));
foreach ($favorites as $fav) {
$fav_data = maybe_unserialize($fav->favorite_data);
if (!is_array($fav_data) || empty($fav_data)) continue;
// 获取最后一个收藏的用户
$last_fav = end($fav_data);
if (!isset($last_fav['user_id']) || !isset($last_fav['time'])) continue;
$user = get_userdata($last_fav['user_id']);
if (!$user) continue;
$acts[] = array(
'type' => 'favorite',
'user_name' => zib_widget_info_nav_mask_name($user->display_name),
'user_id' => $last_fav['user_id'],
'title' => mb_substr($fav->post_title, 0, 18) . (mb_strlen($fav->post_title) > 18 ? '...' : ''),
'link' => get_permalink($fav->post_id),
'time' => $last_fav['time'],
'action' => '收藏文章',
'avatar' => zib_widget_info_nav_get_avatar($last_fav['user_id']),
);
}
// 5. 获取签到(从 usermeta 获取最近签到的用户)
$checkins = $wpdb->get_results($wpdb->prepare(
"SELECT user_id, meta_value as checkin_detail
FROM {$wpdb->usermeta}
WHERE meta_key = 'checkin_detail'
AND meta_value != ''
ORDER BY umeta_id DESC
LIMIT %d",
$per_type_limit
));
foreach ($checkins as $checkin) {
$checkin_data = maybe_unserialize($checkin->checkin_detail);
if (!is_array($checkin_data) || empty($checkin_data)) continue;
// 获取最近一次签到
$last_checkin = reset($checkin_data);
if (!isset($last_checkin['time'])) continue;
$user = get_userdata($checkin->user_id);
if (!$user) continue;
$acts[] = array(
'type' => 'checkin',
'user_name' => zib_widget_info_nav_mask_name($user->display_name),
'user_id' => $checkin->user_id,
'title' => '',
'link' => '',
'time' => $last_checkin['time'],
'action' => '完成签到',
'avatar' => zib_widget_info_nav_get_avatar($checkin->user_id),
);
}
// 6. 获取新用户
$users = $wpdb->get_results($wpdb->prepare(
"SELECT ID, display_name, user_registered
FROM {$wpdb->users}
ORDER BY user_registered DESC
LIMIT %d",
$per_type_limit
));
foreach ($users as $u) {
$acts[] = array(
'type' => 'register',
'user_name' => zib_widget_info_nav_mask_name($u->display_name),
'user_id' => $u->ID,
'title' => '',
'link' => '',
'time' => $u->user_registered,
'action' => '加入本站',
'avatar' => zib_widget_info_nav_get_avatar($u->ID),
);
}
// 按时间排序
usort($acts, function ($a, $b) {
return strtotime($b['time']) - strtotime($a['time']);
});
return array_slice($acts, 0, $limit);
}
// 用户名脱敏
function zib_widget_info_nav_mask_name($name)
{
$len = mb_strlen($name);
if ($len <= 2) {
return mb_substr($name, 0, 1) . '*';
}
return mb_substr($name, 0, 1) . '**' . mb_substr($name, -1, 1);
}
// 获取头像 URL
function zib_widget_info_nav_get_avatar($user_id)
{
// 优先获取子比主题的自定义头像
if (function_exists('zib_get_user_meta')) {
$custom_avatar = zib_get_user_meta($user_id, 'custom_avatar', true);
if ($custom_avatar) {
return $custom_avatar;
}
}
// 如果没有自定义头像,使用默认头像
if (function_exists('zib_default_avatar')) {
return zib_default_avatar();
}
// 最后使用 WordPress 默认头像
return get_avatar_url($user_id, array('size' => 40));
}
// 输出样式和脚本
function zib_widget_info_nav_assets($id, $speed)
{
static $css_loaded = false;
if (!$css_loaded) {
$css_loaded = true;
echo '<style>.info-widget-top{margin-bottom:0}.info-cat-list{list-style:none;margin:0;padding:0;display:flex;gap:12px}.info-cat-item{background:linear-gradient(180deg,var(--cat-color) -20%,#ffffff00 100%);padding:12px;position:relative;transition:all .3s;flex:1;min-width:0;border-radius:var(--main-radius,8px)}.info-cat-item:hover .cat-arrow{opacity:1;color:var(--b2-color,#3b82f6)}.cat-header{display:flex;align-items:center;font-weight:700;font-size:16px;line-height:30px;margin-bottom:10px}.cat-title-link{display:flex;align-items:center;flex:1}.cat-title{position:relative;display:inline-block}.info-cat-item:hover .cat-title::before{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:.5rem;background:rgba(255,255,0,.7)}.cat-icon{width:20px;height:20px;margin-right:8px;border-radius:3px}.cat-arrow{opacity:0;transition:opacity .3s;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--b2-light-color,#e0f2fe)}.cat-items{display:flex;flex-wrap:wrap;margin:0 -8px}.cat-item{width:33.333%;padding:0 8px;margin-bottom:10px;position:relative;box-sizing:border-box}.cat-item::after{content:"";display:block;width:1px;height:12px;background:#ddd;position:absolute;right:0;top:50%;transform:translateY(-50%)}.cat-item:nth-child(3n)::after{display:none}.cat-item a{display:block;font-size:13px;line-height:22px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted-color,#666)}.cat-item a:hover{color:var(--b2-color,#3b82f6)}.info-widget-bottom{display:flex;align-items:center;min-height:80px}.info-stats{flex-shrink:0;margin-left:10px}.stats-list{list-style:none;margin:0;padding:0;display:flex}.stats-item{margin-right:40px;text-align:left}.stats-item:last-child{margin-right:0}.stats-label{font-size:12px;color:var(--muted-2-color,#999);margin:0;line-height:20px}.stats-value{font-size:25px;font-weight:500;line-height:30px;margin:6px 2px 0;color:var(--main-color,#333)}.stats-value i{font-style:normal;font-size:14px;margin-left:4px}.info-activities{flex:1;margin-left:130px;position:relative;padding-left:50px}.info-activities::before{content:"";display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:45px;background:#f2f2f8}.activities-header{font-size:13px;font-weight:700;line-height:17px;margin-bottom:10px}.activities-scroll{height:25px;overflow:hidden;position:relative}.activities-list{list-style:none;margin:0;padding:0;opacity:1;transition:transform .5s ease-in-out,opacity .5s ease-in-out}.activities-list:hover{transition-duration:0s}.activity-item{height:25px;line-height:25px}.activity-item a{display:flex;align-items:center;font-size:13px;color:var(--muted-color,#666)}.activity-avatar{width:20px;height:20px;border-radius:50%;margin-right:7px}.activity-user{display:flex;padding-right:5px}.user-label{color:var(--muted-2-color,#999)}.user-name{color:#28a745}.activity-action{display:flex;max-width:340px;overflow:hidden}.action-text{margin-right:5px}.action-title{color:#dc3545;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-time{margin-left:auto;color:var(--muted-3-color,#bbb);background:var(--main-bg-color,#fff)}@media(max-width:992px){.info-cat-list{flex-wrap:wrap}.info-cat-item{flex:0 0 calc(33.333% - 8px);margin-bottom:10px}}@media(max-width:768px){.info-cat-item{flex:0 0 calc(50% - 6px)}.info-widget-bottom{flex-direction:column;align-items:flex-start}.stats-list{flex-wrap:wrap}.stats-item{width:50%;margin-right:0;margin-bottom:10px}.info-activities{margin-left:0;padding-left:0;margin-top:15px;width:100%}.info-activities::before{display:none}}@media(max-width:480px){.info-cat-item{flex:0 0 100%}}</style>';
}
echo '<script>!function(){var l=document.getElementById("' . $id . '");if(!l||l.children.length<=1)return;var s=' . ($speed * 1000) . ',i=0,h=!1,t=null;function n(){if(h)return void(t=setTimeout(n,100));i++;var e=i>=l.children.length;e&&(l.style.transition="opacity 0.5s ease-out",l.style.opacity="0",setTimeout(function(){i=0,l.style.transition="none",l.style.transform="translateY(0)",setTimeout(function(){l.style.transition="opacity 0.5s ease-in, transform 0.5s ease-in-out",l.style.opacity="1"},50)},500)),e||(l.style.transform="translateY(-"+25*i+"px)"),t=setTimeout(n,e?s+1e3:s)}l.addEventListener("mouseenter",function(){h=!0}),l.addEventListener("mouseleave",function(){h=!1}),t=setTimeout(n,s),window.addEventListener("beforeunload",function(){t&&clearTimeout(t)})}();</script>';
}
// 辅助函数
if (!function_exists('_name')) {
function _name($name)
{
return 'Zibll ' . $name;
}
我只放了六个,更多的可以下载Adobe Illustrator 自己导出 图标:https://pan.quark.cn/s/d0a8bde6deb2
![图片[2]-子比主题小工具“导航小工具”附svg磨砂图标](https://www.yu158.com/wp-content/uploads/2026/03/20260303124856980-ScreenShot_2025-12-19_200501_429_7393060d0e650-1024x493.png)
© 版权声明
THE END













