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

折腾

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

公告弹窗代码

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

<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; ?>

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