给博客加一个可以自定义的公告

折腾

前段时间逛朋友的博客发现他的博客多了一个类似公告的提示框，非常的漂亮。就想着也在自己的博客加一个，方便以后有什么重要通知可以用的到，但是我的想法有点多。我想实现的是可以根据自己的喜好在后台自由的设置公告的开和关内容，同时可以自由的设置公告的内容，于是便开始折腾起来。

公告弹窗代码

首先我在网上找到一个还不错的弹窗代码

<script type="text/javascript">
function divguanbi(){
document.getElementById('ad1').style.display='none';
document.cookie='x=n';
}
if ( document.cookie.indexOf('x=n')<0 ){
document.writeln("<div id=\"ad1\" style=\"background-color:#FFFFFF;position:absolute;z-index:999999999;padding:30px;height:auto;width:50%;border:thick solid #CCCCCC;left:25%;top:"+(document.documentElement.scrollTop+160)+"px;margin:auto;font-size:14px;line-height:150%;\">");
document.writeln("<?php $this->options->gonggao(); ?>");
document.writeln("<br><a href=\"javascript:divguanbi();void(0)\">[关闭并且不再提示]</a></div>");
window.onscroll=function(){document.getElementById("ad1").style.top=(document.documentElement.scrollTop+160+"px");}
}
</script>

设置自由更改

接下来就是实现在后台自由操作，于是我在functions.php里面加入了以下代码

// 自定义公告
    $gonggao_set = new Typecho_Widget_Helper_Form_Element_Radio('gonggao_set',
        array(
            '0' => _t('开启'),
            '1' => _t('关闭'),
        ),
    '0', _t('是否在首页显示公告内容'), _t('开启则会在打开首页时弹窗'));
    $form -> addInput($gonggao_set);  

     // 自定义公告内容
   $gonggao = new Typecho_Widget_Helper_Form_Element_Text('gonggao', null, null, _t('公告内容'), _t('在这里填入你的公告，不填则不输出。'));
    $form -> addInput($gonggao);

然后将弹窗代码做一些修改后，放在了footer.php里面</body>之前，以下代码

<?php if($this -> options -> gonggao_set == '0'): ?>
<script type="text/javascript">
function divguanbi(){
document.getElementById('ad1').style.display='none';
document.cookie='x=n';
}
if ( document.cookie.indexOf('x=n')<0 ){
document.writeln("<div id=\"ad1\" style=\"background-color:#FFFFFF;position:absolute;z-index:999999999;padding:30px;height:auto;width:50%;border:thick solid #CCCCCC;left:25%;top:"+(document.documentElement.scrollTop+160)+"px;margin:auto;font-size:14px;line-height:150%;\">");
document.writeln("<?php $this->options->gonggao(); ?>");
document.writeln("<br><a href=\"javascript:divguanbi();void(0)\">[关闭并且不再提示]</a></div>");
window.onscroll=function(){document.getElementById("ad1").style.top=(document.documentElement.scrollTop+160+"px");}
}
</script>
<?php endif; ?>

最后重新应用下当前的主题（记得备份主题设置），大功告成！！

来源：https://laolion.com/