typecho消息处理机制在前端（前台主题）的应用方法

更新：2022-06-22 访问：442

首先在主题底部引用

<script src="<?php Helper::options()->adminStaticUrl('js', 'jquery-ui.js'); ?>"></script>
<script src="<?php Helper::options()->adminStaticUrl('js', 'typecho.js'); ?>"></script>

<script>
    
    (function () {
        $(document).ready(function() {
            // 处理消息机制
            (function () {
                var prefix = '<?php echo Typecho_Cookie::getPrefix(); ?>',
                    cookies = {
                        notice      :   $.cookie(prefix + '__typecho_notice'),
                        noticeType  :   $.cookie(prefix + '__typecho_notice_type'),
                        highlight   :   $.cookie(prefix + '__typecho_notice_highlight')
                    },
                    path = '<?php echo Typecho_Cookie::getPath(); ?>';

                if (!!cookies.notice && 'success|notice|error'.indexOf(cookies.noticeType) >= 0) {
                    var head = $('.typecho-head-nav'),
                        p = $('<div class="message popup ' + cookies.noticeType + '">'
                        + '<ul><li>' + $.parseJSON(cookies.notice).join('</li><li>') 
                        + '</li></ul></div>'), offset = 0;

                    if (head.length > 0) {
                        p.insertAfter(head);
                        offset = head.outerHeight();
                    } else {
                        p.prependTo(document.body);
                    }

                    function checkScroll () {
                        if ($(window).scrollTop() >= offset) {
                            p.css({
                                'position'  :   'fixed',
                                'top'       :   0,
                                'z-index'     :   9999,
                            });
                        } else {
                            p.css({
                                'position'  :   'absolute',
                                'top'       :   offset
                            });
                        }
                    }

                    $(window).scroll(function () {
                        checkScroll();
                    });

                    checkScroll();

                    p.slideDown(function () {
                        var t = $(this), color = '#C6D880';
                        
                        if (t.hasClass('error')) {
                            color = '#FBC2C4';
                        } else if (t.hasClass('notice')) {
                            color = '#FFD324';
                        }

                        t.effect('highlight', {color : color})
                            .delay(5000).fadeOut(function () {
                            $(this).remove();
                        });
                    });

                    
                    $.cookie(prefix + '__typecho_notice', null, {path : path});
                    $.cookie(prefix + '__typecho_notice_type', null, {path : path});
                }

                if (cookies.highlight) {
                    $('#' + cookies.highlight).effect('highlight', 1000);
                    $.cookie(prefix + '__typecho_notice_highlight', null, {path : path});
                }
            })();


        });
    })();

</script>

然后现在是可以调用的，再添加点css美化和官方后台一样的

/*消息处理*/

.message {
    padding: 8px 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.message a {
    font-weight: bold;
    text-decoration: underline;
}

.error {
    background: #FBE3E4;
    color: #8A1F11;
}

.error a {
    color: #8A1F11;
}

.notice {
    background: #FFF6BF;
    color: #8A6D3B;
}

.notice a {
    color: #8A6D3B;
}

.success {
    background: #E6EFC2;
    color: #264409;
}

.success a {
    color: #264409;
}

.popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 8px 0;
    border: none;
    width: 100%;
    z-index: 999;
    text-align: center;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.popup ul li {
    display: inline-block;
    margin-right: 10px;
}

.loading {
    padding-left: 20px !important;
    background: transparent url(../img/ajax-loader.gif) no-repeat left center;
}

这样就算完事了