Nebula 是一款面向 Typecho 的响应式博客主题，采用深空、星云与极光风格，适用于个人博客、技术博客和长期内容归档。

功能特性

• 响应式文章卡片，适配桌面、平板和移动端
• 深色与浅色模式切换，并记忆访客偏好
• Canvas 动态星空背景与轻量滚动动画
• 文章自定义封面、正文首图回退和渐变占位封面
• 文章、独立页面、搜索、分类、标签和作者归档
• 时间线归档、分类目录、标签云和友情链接页面
• 嵌套评论、评论回复和移动端评论布局
• macOS 风格代码块、语言标识、代码复制和长代码换行
• 长链接与连续字符串自动换行，避免内容超出容器
• 页脚 RSS 订阅、附加文字和自定义统计代码
• 静态资源自动追加主题版本号，便于刷新 CDN 缓存
• GitHub Release 在线检查与主题目录覆盖升级

技术栈

主题不依赖 Node.js、npm、Composer 或前端构建工具，上传源码后即可由 Typecho 直接加载。

环境要求

• Typecho 1.2 或更高版本
• PHP 8.0 或更高版本
• PHP mbstring 扩展
• 推荐启用 dom 扩展，用于可靠提取正文首图
• 检查在线更新需要 PHP curl 扩展
• 安装在线更新需要 PHP zip 扩展和可写的主题目录
• 服务器需要能够访问 api.github.com、github.com 和 raw.githubusercontent.com

安装主题

下载 Release

1. 打开 GitHub Releases。
2. 下载最新版本的源码压缩包并解压。
3. 将主题目录上传到 Typecho 的 usr/themes/ 目录。
4. 登录 Typecho 后台，进入“控制台 -> 外观”。
5. 启用 Nebula，并打开“设置外观”完成主题配置。

主题目录可以命名为 nebula 或 typecho-theme-nebula，但目录中应直接包含 index.php、functions.php 和其他主题文件，不能额外嵌套一层压缩包目录。

使用 Git

在 Typecho 的主题目录中执行：

git clone https://github.com/jkjoy/typecho-theme-nebula.git nebula

然后在 Typecho 后台启用 Nebula。

创建独立页面

导航中的归档、标签、友链和关于页面需要在 Typecho 后台创建对应的独立页面。页面缩略名必须与下表一致，主题会根据缩略名自动加载对应页面。

操作步骤：

1. 进入 Typecho 后台“管理 -> 独立页面”。
2. 新建页面并填写标题。
3. 展开页面高级选项，将“缩略名”设置为上表中的值。
4. 发布页面。

归档页面会显示文章数、分类数、评论数和建站天数。建站天数从最早一篇已发布文章的发布时间开始计算。

主题设置

进入 Typecho 后台“控制台 -> 外观 -> 设置外观”进行配置。

站点名称、站点地址和站点描述使用 Typecho 的全局设置，无需在主题中重复填写。

设置文章封面

编辑文章时，主题会在“自定义字段”区域提供以下字段：

封面读取顺序：

1. 使用文章自定义字段 cover。
2. cover 为空时，使用文章正文中的第一张图片。
3. 正文没有图片时，显示主题内置渐变封面。

coverLabel 为空时使用文章的第一个分类；文章没有分类时显示 NEBULA。

配置友情链接

主题优先读取 Links 插件使用的 links 数据表。只有数据表不存在或没有有效记录时，才会读取主题设置中的备用内容。

主题设置中的友链每行一条，格式如下：

站点名称|https://example.com|站点描述|https://example.com/logo.png

头像地址和描述可以留空，例如：

示例博客|https://example.com
另一个站点|https://example.org|记录技术与生活

当主题设置中填写了 Logo 地址时，友链页面的“交换友链”区域也会显示本站 Logo 地址。

使用代码块

使用 Markdown 围栏代码块并在反引号后填写语言名称：

```php
echo 'Hello, Nebula!';
```

渲染后代码块会显示语言名称和复制按钮。未指定语言时显示 TEXT。长代码会保留原始空格和换行，并在达到容器边缘时自动折行。

在线更新

主题设置页顶部提供“检查更新”按钮。

1. 点击“检查更新”连接 GitHub 获取最新版本。
2. 有新版本时页面会显示版本号和“立即升级”按钮。
3. 点击“立即升级”后，主题会下载、校验并解压升级包。
4. 校验通过后使用升级包中的同名文件覆盖当前主题目录。

更新器优先读取最新 GitHub Release；Release 不可用时才回退读取 main 分支。为了让已安装主题稳定识别新版本，正式版本应同时更新 index.php 中的 @version 并发布对应的 GitHub Release。

升级前建议自行备份主题目录，特别是直接修改过主题源码的站点。在线升级会覆盖升级包中存在的同名文件。

静态资源缓存

主题自动在 CSS 和 JavaScript 地址后添加版本参数，例如：

assets/css/style.css?v=1.0.2
assets/js/main.js?v=1.0.2

发布新版本时修改 index.php 中的 @version，CDN 和浏览器就会请求新的资源 URL。

目录结构

nebula/
|-- assets/
|   |-- css/                 # 前台与更新面板样式
|   `-- js/                  # 前台交互与更新面板逻辑
|-- inc/
|   `-- NebulaThemeUpdater.php
|-- archive.php              # 搜索、分类、标签等归档列表
|-- comments.php             # 评论与回复
|-- footer.php               # 页脚与前台脚本
|-- functions.php            # 设置、字段和主题辅助函数
|-- header.php               # 页面 head、导航与搜索
|-- index.php                # 首页文章列表及主题元信息
|-- nebula-update.php        # 管理员更新接口
|-- page.php                 # 普通独立页面与特殊页面分发
|-- page-archives.php        # 时间线归档
|-- page-categories.php      # 分类目录
|-- page-links.php           # 友情链接
|-- page-tags.php            # 标签云
|-- post.php                 # 文章详情
`-- screenshot.png           # Typecho 主题预览图

常见问题

独立页面打开后没有使用专用布局

检查页面缩略名是否严格使用 archives、categories、tags 或 links，不要填写中文缩略名。

文章列表没有封面图片

确认 cover 是可公开访问的完整图片 URL，或在正文中插入至少一张图片。两者都没有时显示渐变封面属于正常行为。

友情链接没有读取插件数据

确认数据库中存在 links 表，并且记录的 state 为 1、url 是有效的 HTTP 或 HTTPS 地址。没有有效记录时主题会自动使用设置外观中的备用友链。

无法检查或安装更新

依次检查服务器是否可以访问 GitHub、PHP 是否启用 curl、当前后台登录状态是否有效。安装阶段还需要 ZipArchive 和主题目录写权限。

如果从 1.0.3 升级时提示“下载主题升级包失败：HTTP 415”，请先用新版
inc/NebulaThemeUpdater.php 覆盖主题中的同名文件，再返回主题设置页执行升级。
这是旧版升级器请求 GitHub 压缩包时使用了已不受支持的请求头导致的，仅需手动修复一次。

项目地址

• GitHub：https://github.com/jkjoy/typecho-theme-nebula
• 作者网站：https://imsun.org

https://dash.infinityfree.com/login

特点

可以使用github或者google快速登录

可以创建无限量的域名/站点

可以创建无限量的mysql数据库

演示地址

演示地址 https://da.xo.je/

从 halo 开源主题 Clarity 移植..

保留大多数设置

使用

建议配合插件Enhancement一起使用过 效果更佳

预览

本站

下载地址

https://github.com/jkjoy/theme-clarity

配置文档

https://www.imsun.org/Clarity-theme-docs/

依旧是从bigfa大佬的同名wordpress主题移植而来

保留大部分原汁原味的设置

预览

暂无

演示站点

https://blog.sgcd.net

下载地址

[github=jkjoy/Typecho-Theme-Jaguar]

[info]喜欢就随手点个star 谢谢[/info]

老孙 手搓出来的主题 纯原创
主打的就是一个简洁无太多功能专注于写作本身

预览

开源地址

https://github.com/jkjoy/typecho-theme-timellow
希望多多点点star,谢谢~

演示地址

https://www.imsun.org

本插件进行了常用插件缝合,并针对主题进行了优化

功能

融合怪插件 —— 友链增强 + 瞬间 + 标签助手 + 站点地图 + 评论增强 + 外链跳转 + 视频链接解析 + QQ通知 + 邮件提醒 + 主题插件在线上传/删除等多功能于一体的 Typecho 插件。

• 使用 typecho_links 数据表存储友链信息
  输出方式：模板函数调用 + 文章内标签解析
  三种输出模式：SHOW_TEXT / SHOW_IMG / SHOW_MIX，可在插件配置中自定义规则
  管理面板：分类、拖拽排序、审核通过/驳回
  游客提交：前台提交后默认待审核，仅通过审核的记录会输出
• 瞬间功能：新增 typecho_moments 表并提供 JSON API
• 评论同步：游客/登录用户评论时自动同步历史评论中的网址/昵称/邮箱
• 标签助手：后台写文章时显示标签快捷选择列表
• 站点地图：提供 /sitemap.xml
• QQ评论通知：评论通过时通过 QQ 机器人推送
• 评论邮件提醒：支持 SMTP 推送，支持模板管理
• 可选Gravatar头像镜像加速
• 可选视频链接解析：自动将 YouTube / Bilibili / 优酷链接替换为播放器
• 可选音乐链接解析：自动将网易云音乐 / QQ音乐 / 酷狗音乐链接替换为 APlayer 播放器
  禁用插件时可选择删除友情链接表/说说表/QQ通知队列表
• 可选外链新窗口打开：自动为 a 标签补充 target 与安全 rel
• 外链跳转提醒：文章/评论内外链及评论者网站地址统一走 /go/ 中转提醒页
• 可选 Turnstile 人机验证：统一保护评论与友情链接提交
  插件设置支持一键备份与一键恢复（数据库快照）
• 支持在线上传安装 ZIP 插件/主题，支持删除未启用插件和未启用主题
• 支持AI摘要
• 评论表情面板

安装

上传到 usr/plugins/Enhancement
后台启用插件

项目地址

https://github.com/jkjoy/Enhancement

代码来自于泽泽社长的插件tagshelper

Typecho_Plugin::factory('admin/write-post.php')->bottom = array('tagshelper', 'tagslist');
class tagshelper{
    public static function tagslist(){   
        ?>
        <style>.tagshelper a{cursor: pointer; padding: 0px 6px; margin: 2px 0;display: inline-block;border-radius: 2px;text-decoration: none;}
.tagshelper a:hover{background: #ccc;color: #fff;}</style>
        <script> $(document).ready(function(){
        $('#tags').after('<div style="margin-top: 35px;" class="tagshelper"><ul style="list-style: none;border: 1px solid #D9D9D6;padding: 6px 12px; max-height: 240px;overflow: auto;background-color: #FFF;border-radius: 2px;"><?php
        $i=0;
        Typecho_Widget::widget('Widget_Metas_Tag_Cloud', 'sort=count&desc=1&limit=200')->to($tags);
            while ($tags->next()) {
                echo "<a id=".$i." onclick=\"$(\'#tags\').tokenInput(\'add\', {id: \'".$tags->name."\', tags: \'".$tags->name."\'});\">".$tags->name."</a>";
                    $i++;}?></ul></div>');});</script>
        <?php
    }
}

https://github.com/typecho/typecho

下载地址

[download file='typecho.zip' size='586kb']https://github.com/typecho/typecho/releases/latest/download/typecho.zip[/download]

本主题移植自开源项目
https://github.com/Licoy/wordpress-theme-puock
原项目为WordPress主题.

预览

本站

使用指南

适用于Typecho 1.2.0 以上版本

[danger]注意事项[/danger]

部分功能需要使用插件Puock来实现
插件地址 Puock

项目地址

https://github.com/jkjoy/Typecho-Theme-Puock

功能特点

• 全文输出: 支持输出文章全文或摘要
• 多种主题: 提供 4 种精美样式主题供选择
• 美化显示: 在浏览器中直接打开 RSS 链接时显示美观的界面
• 灵活配置: 可自定义文章数量、输出内容、版权信息等
• 响应式设计: 完美适配桌面和移动设备
• 接管原生路由: 完全接管 Typecho 的 /feed 路由

安装方法

1. 下载插件到 Typecho 插件目录：

   /usr/plugins/Rss/

2. 在 Typecho 后台启用插件：

   • 进入 控制台 → 插件 → 已安装插件
   • 找到 Rss 插件，点击 启用

3. 配置插件（可选）：

   • 点击插件的 设置 按钮
   • 根据需要调整配置选项

配置选项

RSS 文章数量

• 设置 RSS 输出的文章数量
• 默认为 20 篇
• 设置为 0 则输出全部文章

RSS 内容输出

• 输出全文: 在 RSS 中显示文章完整内容
• 输出摘要: 仅显示文章摘要（前 200 字符）

RSS 样式美化

• 启用: 在浏览器中访问时显示美化界面
• 禁用: 输出纯 XML 格式

样式主题

插件提供 4 种不同风格的主题供选择：

1. 渐变风格 (gradient) - 默认主题

   • 紫色渐变背景
   • 现代感强，视觉冲击力强
   • 卡片式布局，悬停动画
   • 适合个人博客、创意类网站

2. 简洁风格 (minimal)

   • 黑白配色，简约设计
   • 清爽干净，专注内容
   • 类似报纸排版
   • 适合技术博客、文字类内容

3. 现代风格 (modern)

   • 蓝色系商务风格
   • 专业大气，层次分明
   • 卡片阴影，渐变头部
   • 适合企业博客、专业网站

4. 暗黑风格 (dark)

   • 深色主题，护眼舒适
   • GitHub 风格配色
   • 自定义滚动条美化
   • 适合夜间阅读、开发者

版权信息

• 在每篇文章末尾添加自定义版权信息
• 支持 HTML 标签

• 示例：

  <p>本文由 <a href="https://example.com">我的博客</a> 原创发布</p>
  <p>转载请注明出处</p>

使用方法

启用插件后，可以通过以下 URL 访问 RSS：

主要访问地址

https://你的域名/feed

插件会自动接管 Typecho 原生的 /feed 路由，使用美化后的 RSS 输出。

在 RSS 阅读器中订阅

将上述任一地址复制到您的 RSS 阅读器（如 Feedly、Inoreader 等）中即可订阅。

在浏览器中访问

直接在浏览器中打开上述地址，将看到美化后的 RSS 页面。根据你在插件设置中选择的主题，会显示不同风格：

• 渐变风格: 紫色渐变背景 + 白色卡片
• 简洁风格: 纯白背景 + 黑白排版
• 现代风格: 蓝色渐变头部 + 灰白背景
• 暗黑风格: 深色背景 + 蓝色点缀

主题样式预览

渐变风格 (Gradient)

• 视觉特点: 紫色渐变背景，白色圆角卡片
• 配色方案: #667eea → #764ba2
• 适用场景: 个人博客、创意网站
• 设计元素: 悬停动画、阴影效果、圆角设计

简洁风格 (Minimal)

• 视觉特点: 黑白配色，线条分割
• 配色方案: #000 + #fff + #666
• 适用场景: 技术博客、专业内容
• 设计元素: 极简排版、下划线链接、报纸式布局

现代风格 (Modern)

• 视觉特点: 蓝色系商务风格
• 配色方案: #0066cc → #0052a3
• 适用场景: 企业网站、专业机构
• 设计元素: 卡片悬停效果、徽章标签、渐变头部

暗黑风格 (Dark)

• 视觉特点: GitHub 式深色主题
• 配色方案: #0d1117 + #58a6ff
• 适用场景: 开发者博客、夜间阅读
• 设计元素: 自定义滚动条、蓝色链接、暗色卡片

常见问题

Q: 启用插件后无法访问 RSS？

A: 请检查您的 Typecho 是否开启了路由重写功能。

Q: RSS 中图片无法显示？

A: 请确保文章中的图片使用的是绝对路径。

Q: 如何关闭样式美化？

A: 在插件设置中将"RSS 样式美化"设置为"禁用"即可。

Q: 可以自定义样式吗？

A: 可以，直接修改 rss.xsl 文件中的 CSS 部分。

版本历史

v1.0.0

• 初始版本发布
• 支持全文 RSS 输出
• 支持 XSL 样式美化
• 提供灵活的配置选项

许可证

本插件遵循 MIT 许可证开源。

反馈与支持

如有问题或建议，欢迎通过以下方式反馈：

• 提交 Issue
• 发送邮件
• 在博客留言

项目地址

https://github.com/jkjoy/Typecho-Plugin-Rss

享受优雅的 RSS 订阅体验！

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Nginx

    if (!-e $request_filename) {
        rewrite ^(.*)$ /index.php$1 last;
    }

要如何开启GZIP压缩呢？

找到网站根目录下的index.php文件，直接在<?php下面加入以下代码

ob_start('ob_gzhandler');

即可..

免费用户支持

• 赠送5美元每月
• 最高10G持久化硬盘
• 若干流量
• 多个区域可选择
• 最多4个容器

注册地址

https://console.run.claw.cloud/signin?link=99YV1E2JD76E

可通过google账号或者github账号直接登录

部署

点此开始

创建应用

填写信息
Application Name自己填写 如blog
Image Name 就写Docker镜像的地址

jkjoy/php83

Usage则根据你的需要选择,不要超过额度

Port 填写 80

此处需要设置好端口以及绑定域名

添加硬盘挂载路径

/app

点击Deploy部署

演示

本站地址

创建一个随机阅读的独立页面

演示

https://typecho.team/random.html

实现

<?php
/**
 * 随机阅读
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$db = Typecho_Db::get();

// 统计符合条件的文章总数
$countSql = $db->select('COUNT(*) AS count')
    ->from('table.contents')
    ->where('status = ?', 'publish')
    ->where('type = ?', 'post')
    ->where('created <= ?', time());
$countResult = $db->fetchRow($countSql);
$total = $countResult['count'];

if ($total > 0) {
    // 随机选择一个偏移量
    $offset = mt_rand(0, $total - 1);

    // 根据偏移量获取一篇文章
    $sql = $db->select()
        ->from('table.contents')
        ->where('status = ?', 'publish')
        ->where('type = ?', 'post')
        ->where('created <= ?', time())
        ->limit(1)
        ->offset($offset);

    $result = $db->fetchRow($sql);

    if (!empty($result)) {
        $target = Typecho_Widget::widget('Widget_Abstract_Contents')->filter($result);
        $this->response->redirect($target['permalink'], 307);
    }
}

// 如果没有找到文章，重定向到首页
$this->response->redirect($this->options->siteUrl, 307);
?>

然后在后台的独立页面处选择模板.

/**
* 页面加载时间
*/
function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime() );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
    timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime() );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display ) {
    echo $r;
    }
    return $r;
}

在主题合适位置引入

<?php _e('页面加载耗时'); ?><?php echo timer_stop();?>

Sitemap v1.0.5 - 社区维护版

说明

Sitemap 可方便站长通知搜索引擎网站上有哪些可供抓取的网页。最简单通行的就是Google制定的XML格式标准，其中可列出网址及其元数据（上次更新时间、更改频率和优先级权重等），便于搜索引擎更高效智能地抓取网站内容。
使用方法：

1. 下载本插件，放在 usr/plugins/ 目录中，确保文件夹名为 Sitemap；
2. 激活插件；
3. 访问http://[example].com/sitemap.xml即可看到页面效果。

下载

https://github.com/typecho-fans/plugins/tree/master/Sitemap

在前台调用

💻️ <?php $this->author();//用户名 ?> <?php get_last_login(1); ?> 在线

function onlinePeople() {
    // 使用 Helper 类获取主题路径
    $theme_dir = Helper::options()->themeFile(Helper::options()->theme);
    $filename = $theme_dir . '/online.txt'; // 存储文件路径
    $cookie_name = 'Typecho_Online_UID';    // Cookie名称
    $timeout = 30;                          // 超时时间（秒）

    try {
        // 确保目录存在
        if (!is_dir(dirname($filename))) {
            if (!mkdir(dirname($filename), 0755, true)) {
                throw new Exception("无法创建目录: " . dirname($filename));
            }
        }

        // 读取当前在线用户数据
        $online = file_exists($filename) ? file($filename) : array();
        $now = time();
        $active_users = array();

        // 过滤超时用户
        foreach ($online as $line) {
            $parts = explode('|', trim($line));
            if (count($parts) == 2 && ($now - $parts[1]) <= $timeout) {
                $active_users[$parts[0]] = $parts[1];
            }
        }

        // 生成或获取用户唯一标识（Cookie）
        if (isset($_COOKIE[$cookie_name])) {
            $uid = $_COOKIE[$cookie_name];
        } else {
            $vid = 0;
            do {
                $vid++;
                $uid = 'U' . $vid;
            } while (isset($active_users[$uid]));
            setcookie($cookie_name, $uid, $now + 86400, '/'); // 24小时有效期
        }

        // 更新当前用户活跃时间
        $active_users[$uid] = $now;
        $online_count = count($active_users);

        // 写入文件（原子操作）
        $fp = fopen($filename, 'w');
        if (!$fp || !flock($fp, LOCK_EX)) {
            throw new Exception("无法锁定文件");
        }

        foreach ($active_users as $user => $time) {
            fwrite($fp, "$user|$time\n");
        }

        flock($fp, LOCK_UN);
        fclose($fp);

        return $online_count;

    } catch (Exception $e) {
        error_log("在线人数统计错误: " . $e->getMessage());
        return false;
    }
}

在主题模板（如 footer.php）中直接调用：

<?php if ($count = onlinePeople()): ?>
    <span><?php echo $count; ?>人在线</span>
<?php endif; ?>

// 获取站点统计信息（带缓存）
function getSiteStatsWithCache() {
    // 使用文件缓存（兼容性最好）
    $cacheFile = __TYPECHO_ROOT_DIR__ . '/usr/cache/site_stats.cache';
    $cacheTime = 3600; // 1小时缓存

    if (file_exists($cacheFile)) {
        $cacheData = json_decode(file_get_contents($cacheFile), true);
        if (time() - $cacheData['cache_time'] < $cacheTime) {
            return $cacheData;
        }
    }
    
    $db = Typecho_Db::get();
    
    // 1. 正确的总分类数
    $stats['totalCategories'] = $db->fetchObject($db->select('COUNT(*) AS cnt')
        ->from('table.metas')
        ->where('type = ?', 'category'))->cnt;
    
    // 2. 正确的总标签数
    $stats['totalTags'] = $db->fetchObject($db->select('COUNT(*) AS cnt')
        ->from('table.metas')
        ->where('type = ?', 'tag'))->cnt;
    
    // 3. 总文章数
    $stats['totalPosts'] = $db->fetchObject($db->select('COUNT(*) AS cnt')
        ->from('table.contents')
        ->where('type = ?', 'post')
        ->where('status = ?', 'publish'))->cnt;
    
    // 4. 总文章字数
    $stats['totalWords'] = $db->fetchObject($db->select('SUM(LENGTH(text)) AS total')
        ->from('table.contents')
        ->where('type = ?', 'post')
        ->where('status = ?', 'publish'))->total;
    
    // 5. 建站时间
    $oldestPost = $db->fetchObject($db->select('MIN(created) AS created')
        ->from('table.contents')
        ->where('type = ?', 'post')
        ->where('status = ?', 'publish'));
    $stats['siteCreationDate'] = date('Y-m-d', $oldestPost->created);
    $stats['siteDays'] = ceil((time() - $oldestPost->created) / 86400);
    
    // 6. 友情链接数量
    $stats['totalLinks'] = 0;
    if (class_exists('Links_Plugin')) {
        $stats['totalLinks'] = $db->fetchObject($db->select('COUNT(*) AS cnt')
            ->from('table.links'))->cnt;
    }
    
    // 7. 总留言数量
    $stats['totalComments'] = $db->fetchObject($db->select('COUNT(*) AS cnt')
        ->from('table.comments')
        ->where('status != ?', 'spam'))->cnt;
    
    // 保存缓存
    $stats['cache_time'] = time();
    if (!is_dir(dirname($cacheFile))) {
        mkdir(dirname($cacheFile), 0755, true);
    }
    file_put_contents($cacheFile, json_encode($stats));
    
    return $stats;
}

在前端调用

<?php $stats = getSiteStatsWithCache(); ?>

<span>文章总数</span><small><?php echo $stats['totalPosts']; ?></small>

<span>撰写字数</span><small><?php echo number_format($stats['totalWords']); ?>字</small>

<span>友情链接数量</span><small><?php echo $stats['totalLinks']; ?></small>

<span>留言总数</span><small><?php echo $stats['totalComments']; ?></small>

<span>标签数量</span><small><?php echo $stats['totalTags']; ?></small>

<span>分类数量</span><small><?php echo $stats['totalCategories']; ?></small>

<span>运营时间至今有</span><small><?php echo $stats['siteDays']; ?>天</small>
 

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有图片（如果主题默认输出 src，可以动态替换为 data-src）
    const images = document.querySelectorAll('img[src]:not([data-src])');
    
    // 防止重复处理
    images.forEach(img => {
        if (!img.getAttribute('data-src')) {
            img.setAttribute('data-src', img.src); // 把 src 存到 data-src
            img.removeAttribute('src'); // 移除 src，避免立即加载
        }
    });

    // 懒加载逻辑
    const lazyLoad = (targets) => {
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        observer.unobserve(img); // 加载后停止观察
                    }
                });
            });
            targets.forEach(img => observer.observe(img));
        } else {
            // 兼容旧浏览器（滚动监听）
            const checkImages = () => {
                targets.forEach(img => {
                    const rect = img.getBoundingClientRect();
                    if (rect.top < window.innerHeight + 100) { // 提前 100px 加载
                        img.src = img.dataset.src;
                    }
                });
            };
            window.addEventListener('scroll', checkImages);
            checkImages(); // 初始检查
        }
    };

    // 对所有 data-src 图片应用懒加载
    lazyLoad(document.querySelectorAll('img[data-src]'));
});
</script>

方法2 使用php

仅支持现代浏览器

$content = preg_replace('/<img(.*?)src="(.*?)"(.*?)>/i', '<img$1src="$2" loading="lazy"$3>', $this->content);
echo $content;

方法3 使用第三方库

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
<img data-src="image.jpg" class="lazyload" alt="示例图片">

.lazyload {
    background: #f0f0f0;
}

方法3可与方法2同时使用以提高兼容性