[Typecho]模板实现桌面通知功能及设置
这是昨晚上在一个typecho交流群里群主提到的，他说要做一个桌面通知插件，但是后来又发现没有那么麻烦，准备用一些比较高深的技术实现更好的效果。然后我也跟着百度了一下，确实不算太难，我也不知道用websocket之类的这种实时推送的，所以觉得就实现个简单的效果。当看到这篇文章的时候，如果用支持Web Notifications API的浏览器访问我的网站，就可以看到桌面通知了，还算可以，有些小问题以后修复吧。1.修改functionphp
需要在模板的控制文件，function.php的function themeConfig($form) {}的方法里，添加以下代码：
<p>$suportNotify= new Typecho_Widget_Helper_Form_Element_Radio('suportNotify',array('1' => _t('关闭桌面通知'),'2' => _t('开启桌面通知')),'1',_t('桌面通知'),_t("开启将可以设置桌面通知功能显示在首页，帮助你更好的推送内容"));</p><p>$form->addInput($suportNotify);</p><p>$Notifytitle = new Typecho_Widget_Helper_Form_Element_Text('Notifytitle', NULL, NULL, _t('桌面通知标题'), _t('填写指定桌面通知标题，将在通知弹窗显示。'));</p><p> $form->addInput($Notifytitle);</p><p>$Notifylink = new Typecho_Widget_Helper_Form_Element_Text('Notifylink', NULL, NULL, _t('桌面通知链接'), _t('填写指定桌面通知链接，点击通知栏后将跳转到所设置的路径。'));</p><p>$form->addInput($Notifylink);</p><p>$Notifypic = new Typecho_Widget_Helper_Form_Element_Text('Notifypic', NULL, NULL, _t('桌面通知图片'), _t('开启桌面通知后必填，设置指定桌面通知图片，在通知弹窗中显示缩略图。'));</p><p>$form->addInput($Notifypic);</p>
保存之后，在typecho的模板设置里就会出现这三条表单内容，代表前期准备完成了。我这是已经设置好的，默认是空的，等你设置。
2.给模板添加代码
在设置之前，请注意之前添加的三个自定义字段，调用的方式如下：
<p><?php $this->options->suportNotify(); ?>//是否开启</p><p><?php $this->options->Notifytitle(); ?>//通知标题</p><p><?php $this->options->Notifylink(); ?>//通知跳转链接</p><p><?php $this->options->Notifypic(); ?>//通知缩略图</p>
如果你想全局显示就添加到模板的全局header.php中，但是我建议首页就好，因为这段js不怎么完善，弹来弹去也会让用户厌烦。
<p><?php if ($this->options->suportNotify == '2'): ?></p><p><!--桌面通知代码--></p><p><script></p><p> window.onload = function () {</p><p> suportNotify()</p><p> }</p><p>
</p><p> //判断浏览器是否支持Web Notifications API</p><p> function suportNotify(){</p><p> if (window.Notification) {</p><p> console.log("支持"+"Web Notifications API");</p><p> showMess()</p><p> } else {</p><p> console.log("不支持 Web Notifications API");</p><p> }</p><p> }</p><p>
</p><p> //判断浏览器是否支持弹出实例</p><p> function showMess(){</p><p> setTimeout(function () {</p><p> console.log('1：'+Notification.permission);</p><p> if(window.Notification && Notification.permission !== "denied") {</p><p> //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示</p><p> Notification.requestPermission(function(status) {</p><p> console.log('2: '+status);</p><p> //如果状态是同意</p><p> if (status === "granted") {</p><p> var m = new Notification('收到信息', {</p><p> body: '<?php $this->options->Notifytitle(); ?>',</p><p> icon:"<?php $this->options->Notifypic(); ?>"</p><p> });</p><p> m.onclick = function () {</p><p> window.location.href="<?php $this->options->Notifylink(); ?>"; </p><p> }</p><p> } else{</p><p> console.log('当前浏览器不支持弹出消息')</p><p> }</p><p> });</p><p> }</p><p> },1000)</p><p> }</p><p></script></p><p><!--桌面通知代码结束--></p><p><?php endif; ?></p>
大概的意思就是，最外面的if判断值来显示是否开启，内部就是通用的js，在指定的区域填上调用字段，这样通知的功能就算弄完了，在电脑上可以访问我博客看效果，手机也有部分浏览器支持
页:
[1]