【原创】一个博客年度数据统计单页
Typecho 年终总结独立页面使用教程
这个精心设计的 PHP 文件可以为您的 Typecho 博客生成一个炫酷的年度数据报告页面。它包含了文章统计、评论分析、浏览量统计、月度发布图表、热门文章、活跃评论者等多种数据可视化功能,并且拥有现代化的响应式设计,在手机和电脑上都有出色的显示效果。
✨ 功能亮点
- 数据概览:直观展示年度文章数、总字数、评论数、浏览量等核心数据。
- 月度图表:以柱状图形式展示每月的文章发布和评论情况。
- 深度分析:分析最活跃的发布月份、评论最多的月份、周几发布文章最多。
- 内容排行:列出按评论数和浏览量排序的热门文章。
- 互动分析:展示最活跃的评论者,感谢他们的支持。
- 分类与标签:可视化展示您的分类和标签使用情况。
- 博客时间线:记录年度第一篇/最后一篇文章、最长/最短文章等里程碑事件。
- 响应式设计:完美适配桌面和移动设备。
- 无需外部依赖:CSS 和 JavaScript 都已内嵌,开箱即用。
📋 准备工作
在开始之前,请确保您已经准备好以下内容:
- 一个正在运行的 Typecho 博客。
- 能够访问并修改您网站文件的权限(通常通过 FTP、SFTP 或主机商提供的文件管理器)。
(强烈推荐)安装一个浏览量统计插件。本页面支持显示浏览量数据,但这依赖于您的 Typecho 数据库中
contents表存在一个views字段。如果没有,相关数据将无法显示。 Joe主题及二开的都可以直接使用推荐插件:您可以在 Typecho 官方论坛或 GitHub 搜索并安装类似
Views、PostViews等插件。安装并启用后,插件通常会自动为新文章记录浏览量,并为旧文章创建该字段。
🚀 安装步骤
请按照以下步骤操作,整个过程大约需要 5 分钟。
第一步:创建新页面
- 登录您的 Typecho 后台管理面板。
- 在左侧导航栏中,点击 管理 -> 独立页面。
- 点击右上角的 撰写新页面 按钮。
第二步:上传模板文件
将您得到的 PHP 文件(例如,命名为
annual-summary.php)上传到您当前所用主题的目录下。- 路径通常是:
/usr/themes/您当前的主题文件夹/ - 例如,如果您的主题是
default,那么路径就是/usr/themes/default/
- 路径通常是:
确认文件头信息:请确保文件顶部的注释块完整无误,特别是
@package custom这一行,这是 Typecho 识别其为独立页面模板的关键。/** * 年终总结独立页面 * * @package custom * @author 毒蛊博客 * @version 1.0.0 * @since 2025-12-06 * @link https://blog.idg8.cn/annual.html */
第三步:应用模板并发布
- 回到您刚才在后台创建的新页面编辑界面。
- 在页面编辑器的右侧,找到 高级选项 并展开它。
- 在 自定义模板 下拉菜单中,您应该能看到一个名为 年终总结独立页面 的选项。请选择它。
- 在 标题 处输入页面名称,例如
2024 年度总结。 - 正文内容可以留空,因为所有内容都由模板文件自动生成。
- 设置好 网址缩略名(可选,例如
annual),然后点击右上角的 发布 按钮。
现在,访问您刚刚发布的页面,就能看到精美的年度总结报告了!
⚙️ 自定义与配置
您可以根据自己的需求对页面进行一些简单的自定义。
1. 修改统计年份
默认情况下,页面会显示当前年份($year = date('Y');)的数据。如果您想回顾过去年份的数据,可以这样做:
- 打开
annual-summary.php文件。 找到下面这行代码:
$year = date('Y');将其修改为您想要的年份,例如:
$year = 2023; // 查看 2023 年的总结- 保存文件并重新上传。刷新页面即可看到指定年份的数据。
2. 解决浏览量不显示问题
如果您在页面上看到 📊 符号或者 "浏览量统计功能未启用" 的警告,这说明您的数据库中没有 views 字段。
解决方案:
- 最佳方案:安装并启用一个浏览量统计插件。这不仅能解决此页面的问题,还能为您的博客其他部分提供浏览量功能。
- 手动方案(不推荐,除非您熟悉数据库操作):通过数据库管理工具(如 phpMyAdmin),为
typecho_contents表添加一个名为views、类型为INT、默认值为0的新字段。
3. 修改样式(高级)
页面的所有样式都内嵌在 <style> 标签中。如果您熟悉 CSS,可以直接修改这部分代码来调整颜色、字体、布局等。为了保持主题文件整洁,您也可以:
- 将
<style>和</style>之间的所有 CSS 代码复制到一个新文件,例如annual.css。 - 将
annual.css上传到主题目录。 在 PHP 文件的
<head>部分,用下面的代码替换掉原来的<style>块:<link rel="stylesheet" href="<?php $this->options->themeUrl('annual.css'); ?>">
❓ 常见问题 (FAQ)
Q: 我在后台的“自定义模板”下拉菜单里找不到“年终总结独立页面”选项。
A: 这通常意味着文件没有上传到正确的目录,或者文件的注释头(特别是 @package custom)被意外删除或修改。请检查文件路径和内容是否正确。
Q: 页面显示 "数据加载失败" 的错误信息。
A: 这可能是数据库连接问题或文件权限问题。请确保 Typecho 本身运行正常,并且 annual-summary.php 文件有被服务器正确读取的权限。
Q: 页面样式很乱,完全不像演示效果。
A: 这可能是由于您当前的主题 CSS 与本页面的 CSS 发生了冲突。尝试在浏览器中按 Ctrl + F5 (Windows) 或 Cmd + Shift + R (Mac) 强制刷新页面,清除缓存。如果问题依旧,可能需要检查主题的 CSS 是否有全局样式影响了页面元素。
希望这份教程能帮助您成功部署年度总结页面!祝您使用愉快!
下载地址:
{hide}
{cloud title="毒蛊博客2025-年终总结独立页面" type="lz" url="https://dugu.lanzoue.com/imb6Z3czh93a" password=""/}
{/hide}
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »