Handsome 主题导航栏添加热榜聚合功能教程

## 前言

在 Typecho Handsome 主题的导航栏添加"热榜聚合"功能，以下拉菜单形式展示"历史上的今天"、"抖音热榜"和"CSDN热榜"的实时内容，提升博客吸引力。

效果：鼠标悬停或点击导航栏上的"火焰"图标，弹出包含三列热榜的窗口。
![][1]

## 操作步骤

### 第一步

找到并打开：`/usr/themes/handsome/component/headnav.php`文件

### 第二步：添加代码

将以下代码复制到 `headnav.php` 文件中。

**粘贴位置：** 在文件中找到 `<?php endif; ?>` 这一行（约在 517 行，统计信息功能的结束标签），将代码粘贴在其**后面**。
![][2]
[hide]
```php

<ul class="nav navbar-nav hidden-sm">
    <li class="dropdown pos-stc" id="HotTopicsPos">
        <a id="HotTopics" href="#" data-toggle="dropdown" class="dropdown-toggle feathericons dropdown-toggle">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-fire">
                <path d="M9 14c1.5-2-1-4-2-5 1.5 3-2 6-2 8 0 .5 0 1 .5 1C8 19 13 16 9 14zm1-5c0-2-2-3-3-4 1 2-1 3-1 5s2 4 3 2v-3z"></path>
            </svg>
            <span class="caret"></span>
        </a>
        <div class="dropdown-menu wrapper w-full bg-white">
            <div class="row">
                <div class="col-sm-4 b-l b-light">
                    <div class="m-t-xs m-b-xs font-bold">
                        <i class="fas fa-history" style="color: #4395FF;"></i>
                        历史上的今天
                        <a href="https://baike.baidu.com/calendar/" target="_blank" class="pull-right text-xs" style="color:#999;">
                            <i class="fa fa-external-link"></i> 查看更多
                        </a>
                    </div>
                    <ul class="history-today list-unstyled" style="max-height:450px;overflow-y:auto;">
                        <li class="loading-item"><i class="fas fa-spinner fa-spin"></i> 加载中...</li>
                    </ul>
                </div>
                <div class="col-sm-4 b-l b-light">
                    <div class="m-t-xs m-b-xs font-bold">
                        <i class="fab fa-tiktok" style="color: #000000;"></i>
                        抖音热榜
                        <a href="https://www.douyin.com/hot" target="_blank" class="pull-right text-xs" style="color:#999;">
                            <i class="fa fa-external-link"></i> 查看更多
                        </a>
                    </div>
                    <ul class="douyin-hot-topics list-unstyled" style="max-height:450px;overflow-y:auto;">
                        <li class="loading-item"><i class="fas fa-spinner fa-spin"></i> 加载中...</li>
                    </ul>
                </div>
                <div class="col-sm-4 b-l b-light">
                    <div class="m-t-xs m-b-xs font-bold">
                        <i class="fab fa-cuttlefish" style="color: #CA0C16;"></i>
                        CSDN热榜
                        <a href="https://www.csdn.net/nav/news" target="_blank" class="pull-right text-xs" style="color:#999;">
                            <i class="fa fa-external-link"></i> 查看更多
                        </a>
                    </div>
                    <ul class="csdn-hot-topics list-unstyled" style="max-height:450px;overflow-y:auto;">
                        <li class="loading-item"><i class="fas fa-spinner fa-spin"></i> 加载中...</li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

// 从localStorage加载缓存数据
            try {
                var savedCache = localStorage.getItem('hotDataCache');
                var savedTime = localStorage.getItem('hotDataCacheTime');

if (savedCache && savedTime) {
                    var now = new Date().getTime();
                    savedTime = parseInt(savedTime);

// 检查缓存是否过期
                    if (now - savedTime < cacheExpire) {
                        hotDataCache = JSON.parse(savedCache);
                        cacheTime = savedTime;
                        hotDataLoaded = true;
                    }
                }
            } catch (e) {
                console.log('读取缓存失败:', e);
            }

// 点击热榜图标时加载数据
            $('#HotTopicsPos').on('show.bs.dropdown', function() {
                var now = new Date().getTime();
                // 数据未加载或缓存已过期，重新加载
                if (!hotDataLoaded || (now - cacheTime > cacheExpire)) {
                    loadAllHotData();
                    hotDataLoaded = true;
                    cacheTime = now;

// 保存缓存到localStorage
                    try {
                        localStorage.setItem('hotDataCache', JSON.stringify(hotDataCache));
                        localStorage.setItem('hotDataCacheTime', cacheTime);
                    } catch (e) {
                        console.log('保存缓存失败:', e);
                    }
                } else {
                    // 使用缓存数据渲染
                    renderAllCachedData();
                }
            });

// 渲染所有缓存数据
            function renderAllCachedData() {
                if (hotDataCache['history']) {
                    renderHistoryList(hotDataCache['history'], '.history-today');
                }
                if (hotDataCache['douyin']) {
                    renderHotList(hotDataCache['douyin'], '.douyin-hot-topics');
                }
                if (hotDataCache['csdn']) {
                    renderHotList(hotDataCache['csdn'], '.csdn-hot-topics');
                }
            }

// 加载所有热搜数据
            function loadAllHotData() {
                // 历史上的今天
                loadHotListByType('history', '.history-today');

// 抖音热榜
                loadHotListByType('douyin', '.douyin-hot-topics');

// CSDN热榜
                loadHotListByType('csdn', '.csdn-hot-topics');
            }

// 根据类型加载热榜数据
            function loadHotListByType(type, selector) {
                // 有缓存数据，直接使用
                if (hotDataCache[type]) {
                    if (type === 'history') {
                        renderHistoryList(hotDataCache[type], selector);
                    } else {
                        renderHotList(hotDataCache[type], selector);
                    }
                    return;
                }

// 请求API
                $.ajax({
                    url: "https://api.guiguiya.com/api/hotlist?type=" + type,
                    type: "GET",
                    dataType: "json",
                    timeout: 8000, // 8秒超时
                    success: function(res) {
                        if (res && res.success && res.data && res.data.length > 0) {
                            var validData = res.data.filter(function(item) {
                                return item && item.title && item.url;
                            });

if (validData.length > 0) {
                                hotDataCache[type] = validData;
                                if (type === 'history') {
                                    renderHistoryList(validData, selector);
                                } else {
                                    renderHotList(validData, selector);
                                }
                            } else {
                                $(selector).html('<li>数据解析失败</li>');
                            }
                        } else {
                            $(selector).html('<li>暂无数据</li>');
                        }
                    },
                    error: function(xhr, status, error) {
                        $(selector).html('<li>获取数据失败</li>');
                        // 对"历史上的今天"提供备用数据
                        if (type === 'history') {
                            var today = new Date();
                            var backupData = [{
                                index: 1,
                                title: "今天是" + (today.getMonth() + 1) + "月" + today.getDate() + "日，历史数据加载失败",
                                url: "https://baike.baidu.com/calendar/"
                            }, {
                                index: 2,
                                title: "请稍后刷新页面重试",
                                url: "#"
                            }];
                            hotDataCache[type] = backupData;
                            renderHistoryList(backupData, selector);
                        }
                    }
                });
            }

// 为历史上的今天渲染列表
            function renderHistoryList(data, selector) {
                var html = '';
                $.each(data.slice(0, 15), function(index, item) {
                    var rank = item.index || (index + 1);
                    var rankClass = rank <= 3 ? 'hot-rank hot-rank-' + rank : 'hot-rank';
                    var title = item.title || '';
                    var url = item.url || '#';
                    var yearMatch = title.match(/^(\d+)年-/);
                    var year = yearMatch ? yearMatch[1] : '';
                    var content = yearMatch ? title.substring(title.indexOf('-') + 1) : title;

html += '<li class="hot-item"><span class="' + rankClass + '">' + rank + '</span> ';
                    if (year) {
                        html += '<span style="color:#999;margin-right:5px;">(' + year + '年)</span>';
                    }
                    html += '<a href="' + url + '" target="_blank" title="' + title + '">' + content + '</a>';
                    html += '</li>';
                });
                $(selector).html(html || '<li>暂无数据</li>');
            }

// 渲染通用热榜列表
            function renderHotList(data, selector) {
                var html = '';
                $.each(data.slice(0, 15), function(index, item) {
                    var rank = item.index || (index + 1);
                    var rankClass = rank <= 3 ? 'hot-rank hot-rank-' + rank : 'hot-rank';
                    var title = item.title || '';
                    var url = item.url || '#';
                    var hot = item.hot || item.hot_zh || '';

html += '<li class="hot-item"><span class="' + rankClass + '">' + rank + '</span> ';
                    html += '<a href="' + url + '" target="_blank" title="' + title + '">' + title + '</a>';
                    if (hot) {
                        html += ' <span class="hot-count">' + (item.hot_zh || formatNumber(hot)) + '</span>';
                    }
                    html += '</li>';
                });
                $(selector).html(html || '<li>暂无数据</li>');
            }
            
            // 格式化数字
            function formatNumber(num) {
                if (!num) return '';
                num = parseInt(num);
                if (isNaN(num)) return '';
                if (num >= 100000000) return (num / 100000000).toFixed(1) + '亿';
                if (num >= 10000) return (num / 10000).toFixed(1) + '万';
                return num;
            }

// 有缓存，预先渲染
            if (hotDataLoaded) {
                renderAllCachedData();
            }
        });
    })(jQuery);
</script>
```
[/hide]
### 第三步：保存并刷新

保存 `headnav.php` 文件，刷新博客页面。导航栏会出现新的火焰图标，点击即可看到热榜内容。

## 代码解析

代码由三部分组成：HTML 结构、CSS 样式和 JavaScript 逻辑。

* **HTML**：定义下拉菜单框架，包括三个板块展示不同热榜。
* **CSS**：为热榜列表提供样式，前三名设置醒目颜色。
* **JavaScript**：
  * **数据获取**：通过 `ajax` 请求 `https://api.guiguiya.com/api/hotlist` 接口获取实时热榜数据。
  * **懒加载**：数据仅在用户首次点击图标时加载，减少性能开销。
  * **浏览器缓存**：数据缓存在 `localStorage` 中，缓存时间 30 分钟，提高加载速度，减轻 API 服务器压力。

## 注意事项

* 功能依赖第三方 API (`api.guiguiya.com`)，API 服务中断可能导致功能失效。
* 代码使用 Font Awesome 图标库，Handsome 主题通常已包含，若图标未显示，请确认主题已加载该库。
* 修改文件前请做好备份。

## 结语

通过此教程，可为 Handsome 主题博客添加热榜聚合功能，美化网站并为访客提供更多价值。

[1]: https://static.blog.ybyq.wang/usr/uploads/2025/07/31/2025-07-31T07:33:03.png?x-oss-process=style/shuiyin
  [2]: https://static.blog.ybyq.wang/usr/uploads/2025/07/31/2025-07-31T07:38:19.png?x-oss-process=style/shuiyin

AI摘要

本文提供了一个教程，教如何在Typecho Handsome主题的导航栏添加“热榜聚合”功能，以弹出窗口的形式展示“历史上的今天”、“抖音热榜”和“CSDN热榜”的实时内容。操作步骤包括找到并打开`/usr/themes/handsome/component/headnav.php`文件，复制并粘贴提供的代码到文件中，保存并刷新博客页面。代码由HTML结构、CSS样式和JavaScript逻辑组成，依赖第三方API获取实时热榜数据，并使用浏览器缓存提高加载速度。注意事项包括API服务中断可能导致功能失效，以及代码使用FontAwesome图标库。

前言

在 Typecho Handsome 主题的导航栏添加"热榜聚合"功能，以下拉菜单形式展示"历史上的今天"、"抖音热榜"和"CSDN热榜"的实时内容，提升博客吸引力。

效果：鼠标悬停或点击导航栏上的"火焰"图标，弹出包含三列热榜的窗口。

操作步骤

第一步

找到并打开：/usr/themes/handsome/component/headnav.php文件

第二步：添加代码

将以下代码复制到 headnav.php 文件中。

粘贴位置： 在文件中找到 <?php endif; ?> 这一行（约在 517 行，统计信息功能的结束标签），将代码粘贴在其后面。

此处内容需要评论回复后（审核通过）方可阅读。

第三步：保存并刷新

保存 headnav.php 文件，刷新博客页面。导航栏会出现新的火焰图标，点击即可看到热榜内容。

代码解析

代码由三部分组成：HTML 结构、CSS 样式和 JavaScript 逻辑。

HTML：定义下拉菜单框架，包括三个板块展示不同热榜。
CSS：为热榜列表提供样式，前三名设置醒目颜色。
JavaScript：
- 数据获取：通过 ajax 请求 https://api.guiguiya.com/api/hotlist 接口获取实时热榜数据。
- 懒加载：数据仅在用户首次点击图标时加载，减少性能开销。
- 浏览器缓存：数据缓存在 localStorage 中，缓存时间 30 分钟，提高加载速度，减轻 API 服务器压力。

注意事项

功能依赖第三方 API (api.guiguiya.com)，API 服务中断可能导致功能失效。
代码使用 Font Awesome 图标库，Handsome 主题通常已包含，若图标未显示，请确认主题已加载该库。
修改文件前请做好备份。

结语

通过此教程，可为 Handsome 主题博客添加热榜聚合功能，美化网站并为访客提供更多价值。

如果觉得我的文章对你有用，请随意赞赏

END

本文作者： xuan
文章标题：Handsome 主题导航栏添加热榜聚合功能教程
本文地址：https://blog.ybyq.wang/archives/815.html
版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。

Handsome 主题导航栏添加热榜聚合功能教程

前言

操作步骤

第一步

第二步：添加代码

第三步：保存并刷新

代码解析

注意事项

结语

※最新文章推荐※

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho添加文章AI摘要功能（Handsome等全主题适配）

Typecho handsome访客统计插件最新版VistorLoggerPro

Typecho handsome添加顶部服务器状态栏

Uniapp 自定义 Tabbar 实现教程

Typecho高级IP访问控制插件：自动拉黑和频率限制

解决宝塔Linux面板打不开 - 404 Not Found(Nginx)

Uniapp 自定义 Tabbar 实现教程

Ajax和axios有什么区别？

handsome主题添加服务器状态栏最新版（Linux通用版）

Typecho博客部署Umami网站访问统计工具

无妄海

前言

操作步骤

第一步

第二步：添加代码

第三步：保存并刷新

代码解析

注意事项

结语

※最新文章推荐※

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款