仓库源文，站点原文

title: 关于博客站内通知的一点思索 toc: true cover: 'https://img.paulzzh.com/touhou/random?43' date: 2020-09-28 10:34:00 categories: 博客管理 tags: [博客管理, 博客美化]

description: 对的，你没看错！本博客最近添加了站内通知功能，由可爱的泡芙子给你通知本站最新的消息；本文就来讲解一下关于添加这个站内通知的一些思考；

对的，你没看错！本博客最近添加了站内通知功能，由可爱的泡芙子给你通知本站最新的消息；本文就来讲解一下关于添加这个站内通知的一些思考；

<br/>

关于博客站内通知的一点思索

添加站内通知的主要是想给进入博客的人一些友好的提示，并主动推送一些博客最近的更新情况或是比较有趣的内容，从而代替之前只能依靠读者自己主动寻找来获取信息的方式；

而这个想法最初是为了帮助我和朋友进行招聘信息的推送(对，你没看错，就是赤裸裸的打广告来的！)

下面跟随我的步骤，在你自己的博客添加一个站内通知吧！

通知组件选择&添加

在我看来，对于消息通知模块，比较重要的几点就是：

• 用户体验：一定不要用傻傻的大弹窗！对于读者来说，最重要的是：老子是来看你写的文章的！不是来关弹窗的！
• 样式选择：尽量选择和博客主题相符合的样式，并且尽量使用类似APP通知的方式进行消息的推送；
• 可定制化：应当包括内容、图标、定时关闭等基本功能；
• 使用足够简单：最好是开箱即用！本身我是做后端开发的，如果引入一个比较复杂的模块，可能使用起来还要琢磨一下；

经过参考，最终选择了下面的通知组件：

https://www.jq22.com/yanshi7942

通知模块的添加比较简单，在页面引入对应的js和css，然后调用其Notification.create方法即可，例如：

Notification.create(
    // Title
    "资源下载⚡",
    // Text
    "传送门：<BR/><a href='https://jasonkayzk.github.io/sharing/'>文件分享</a>",
    // Illustration
    "/images/avatar4.jpg",
    // Effect
    'fadeInRight',
    // Position 1, 2, 3, 4
    position,
    closeTime
)

多次通知问题

添加的通知模块有一个比较影响体验的地方：<font>**每次刷新或是跳转都会重新推送一遍通知**</font>

为了保证每个用户进入网站后(在关闭标签之前)只会被通知一次，我们可以使用sessionStorage在当前用户的会话中存储一个通知的标志位：

从而读者仅会在首次进入后会被通知，此后，只要在站内跳转都不会再通知了；

实现的代码很简单，类似于下面的JS：

(function once() {
    if (sessionStorage.getItem('load') == null) {
        // 通知事件
        notifyFunc();
        sessionStorage.setItem('load', false);
    } else {
        return;
    }
})();

用户首次进入的时候，load变量值是空的，此时我们进行通知，同时将值设为false(其他值保证不为null)即可；

<BR/>

怎么样？是不是很简单？

那么也在自己的博客添加一个消息通知模块吧！

<BR/>

<br/>