MioMoe主题同款文章分类标题弹窗

鼠子

Typecho

MioMoe,SwAl2

2024-07-11

需要先入SwAl2的前端css、js资源

原理就是检测页面加载完毕后获取相关页面的title使用js+swal2的弹窗显示出来。

以下是MioMoe主题的代码：
```php
/**
 * 提示框
 * Blog.MioMoe.Cn
 */
class ToastNotification
{
    public static function addToastScript($header, $widget)
    {
        $title = '';
        if ($widget->is('post')) { // 检查是否为文章页面
            $title = '文章：' . addslashes($widget->title);
        } elseif ($widget->is('category')) { // 检查是否为分类页面
            $title = '分类：' . addslashes($widget->getArchiveTitle());
        } elseif ($widget->is('tag')) { // 检查是否为标签页面
            $title = '标签：' . addslashes($widget->getArchiveTitle());
        } elseif ($widget->is('author')) { // 检查是否为作者页面
            $title = '作者：' . addslashes($widget->getArchiveTitle());
        } elseif ($widget->is('page')) { // 检查是否为单独页面
            $title = '页面：' . addslashes($widget->title);
        } else {
            return $header;
        }

$script = <<<EOT
<script>
document.addEventListener("DOMContentLoaded", function() {
    const Toast = Swal.mixin({
        toast: true,
        position: "top-end",
        showConfirmButton: false,
        timer: 1500,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.onmouseenter = Swal.stopTimer;
            toast.onmouseleave = Swal.resumeTimer;
        }
    });

Toast.fire({
        icon: "success",
        title: "$title"
    });
});
</script>
EOT;

echo $script;
        return $header;
    }
}
// 注册挂钩
Typecho_Plugin::factory('Widget_Archive')->header = array('ToastNotification', 'addToastScript');
```
![QQ_1720698624515.png](https://blog.miomoe.cn/uploads/2024/07/2203071048.png)

本文链接： https://blog.miomoe.cn/Typecho/SwAl2-Title-pop-up.html

暂无评论

所有评论发表评论