登录 注册 VIP特权 提交收录
Search Engine Optimization,不撸代码不修BUG
主页 » 教程 » 正文

typecho模板实现桌面通知功能,并增加功能设置

这是昨晚上在一个typecho交流群里群主提到的,他说要做一个桌面通知插件,但是后来又发现没有那么麻烦,准备用一些比较高深的技术实现更好的效果。然后我也跟着百度了一下,确实不算太难,我也不知道用websocket之类的这种实时推送的,所以觉得就实现个简单的效果。当看到这篇文章的时候,如果用支持Web Notifications API的浏览器访问我的网站,就可以看到桌面通知了,还算可以,有些小问题以后修复吧。

桌面通知js部分代码完全参考web喵神的博客

1.修改functionphp

需要在模板的控制文件,function.php的function themeConfig($form) {}的方法里,添加以下代码:

$suportNotify= new Typecho_Widget_Helper_Form_Element_Radio('suportNotify',array('1' => _t('关闭桌面通知'),'2' => _t('开启桌面通知')),'1',_t('桌面通知'),_t("开启将可以设置桌面通知功能显示在首页,帮助你更好的推送内容"));
$form->addInput($suportNotify);
$Notifytitle = new Typecho_Widget_Helper_Form_Element_Text('Notifytitle', NULL, NULL, _t('桌面通知标题'), _t('填写指定桌面通知标题,将在通知弹窗显示。'));
    $form->addInput($Notifytitle);
$Notifylink = new Typecho_Widget_Helper_Form_Element_Text('Notifylink', NULL, NULL, _t('桌面通知链接'), _t('填写指定桌面通知链接,点击通知栏后将跳转到所设置的路径。'));
$form->addInput($Notifylink);
$Notifypic = new Typecho_Widget_Helper_Form_Element_Text('Notifypic', NULL, NULL, _t('桌面通知图片'), _t('开启桌面通知后必填,设置指定桌面通知图片,在通知弹窗中显示缩略图。'));
$form->addInput($Notifypic);

保存之后,在typecho的模板设置里就会出现这三条表单内容,代表前期准备完成了。我这是已经设置好的,默认是空的,等你设置。

2.给模板添加代码

在设置之前,请注意之前添加的三个自定义字段,调用的方式如下:

<?php $this->options->suportNotify(); ?>  //是否开启
<?php $this->options->Notifytitle(); ?>  //通知标题
<?php $this->options->Notifylink(); ?>  //通知跳转链接
<?php $this->options->Notifypic(); ?>  //通知缩略图

如果你想全局显示就添加到模板的全局header.php中,但是我建议首页就好,因为这段js不怎么完善,弹来弹去也会让用户厌烦。

<?php if ($this->options->suportNotify == '2'): ?>
<!--桌面通知代码-->
<script>
    window.onload = function () {
        suportNotify()
    }

    //判断浏览器是否支持Web Notifications API
    function suportNotify(){
        if (window.Notification) {
            console.log("支持"+"Web Notifications API");
            showMess()
        } else {
            console.log("不支持 Web Notifications API");
        }
    }

    //判断浏览器是否支持弹出实例
    function showMess(){
        setTimeout(function () {
            console.log('1:'+Notification.permission);
            if(window.Notification && Notification.permission !== "denied") {
                //Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示
                Notification.requestPermission(function(status) {
                    console.log('2: '+status);
                    //如果状态是同意
                    if (status === "granted") {
                        var m = new Notification('收到信息', {
                            body: '<?php $this->options->Notifytitle(); ?>',
                            icon:"<?php $this->options->Notifypic(); ?>"
                        });
                        m.onclick = function () {
                            window.location.href="<?php $this->options->Notifylink(); ?>"; 
                        }
                    } else{
                        console.log('当前浏览器不支持弹出消息')
                    }
                });
            }
        },1000)
    }
</script>
<!--桌面通知代码结束-->
<?php endif; ?>

大概的意思就是,最外面的if判断值来显示是否开启,内部就是通用的js,在指定的区域填上调用字段,这样通知的功能就算弄完了,在电脑上可以访问我博客看效果,手机也有部分浏览器支持。



您的大名:
万水千山总是情,给个打赏行不行。 打赏

标签: typecho桌面通知
! 如链接失效请在下方留言。本站所发布的全部内容源于互联网搬运,仅限于小范围内传播学习和文献参考,请在下载后24小时内删除,如果有侵权之处请第一时间联系我们删除。敬请谅解! E-mail:49613651@qq.com
原创文章,作者:一宇A1xt,如若转载,请注明出处:https://www.a1xt.com/archives/90.html

相关推荐

Typecho简单清爽主题LOVE+

LOVE+主题是SEOGO和@许建华共同推出的,这款主题为LOVE主题的收费升级版,价格29块(没见过这么便宜的typecho主题吧)...

杀死单身狗 | Typecho秀恩爱专用主题 LOVE

主题介绍相爱100件事 这个网站前后经历了熊宝的asp版及木鱼的php版,也因版本原因关闭过一段时间。自本博客使用typecho之后,...

Typecho开启报错提示,方便调试错误

不管出现何种报错,直接在根目录config.inc.php中添加一句define('__TYPECHO_DEBUG__', true);

MbEditor一款Typecho模板编辑器插件

介绍能够让typecho模板编辑界面支持行号,代码高亮,匹配括号,还支持多种皮肤选择为什么要做它?我比较喜欢在typecho的后台直接...

StickyPlus-Typecho文章置顶插件增强版

基于willin kan的版本文章置顶插件拓展功能,因为群友需要在分类页面置顶文章,所以就试着弄了这个功能介绍支持分别在首页页面设置置...

UploadPlugin一款Typecho上传zip包安装删除插件/主题插件

启用后可在菜单“控制台”-“上传”面板内自动安装插件/主题压缩包,或直接删除禁用的插件/主题文件夹,省去FTP等操作。插件要求php支...

Posthelper标签图片批量插入Typecho插件

功能介绍支持一键插入附件中的所有图片支持一键插入所有非图片附件后台编辑文章时增加标签选择列表支持检测文章内容自动插入标签解决全屏状态下...

Titleshow高级版Typecho部分内容加密插件

Titleshow高级版这个高级版能够让文章的加密功能只加密部分文章内容,也是根据网友要求低价定制的,所以插件并不会免费放出,,故改为...


猜你喜欢

Typecho上下篇文章代码输出文章缩略图

这是昨晚上在一个typecho交流群里群主提到的,他说要做一个桌面通知插件,但是后来又发现没有那么麻烦,准备用一些比较高深的技术实现更...


上一篇
下一篇

发表评论