给自己的博客加一个重要公告弹窗,本文以Typecho主题Joe为例,只需这样那样······

公告

公告弹窗代码

  将公告弹窗代码复制放在footer.php里面的最前面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 网站公告 -->
<?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:60px;opacity:0.85;left: 50%; transform: translateX(-50%);border:thick solid #CCCCCC;top:"+(document.documentElement.scrollTop+160)+"px;margin:auto;font-size:18px;line-height:150%;text-align: center;\">");
document.writeln("<?php $this->options->gonggao(); ?>");
document.writeln("<br><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; ?>

增加后台设置

  将以下代码加入functions.php

1
2
3
4
5
6
7
8
9
10
11
// 自定义公告
$gonggao_set = new Typecho_Widget_Helper_Form_Element_Select('gonggao_set',
array('1' => '关闭(默认)', '0' => '开启'),
'1', _t('是否在首页显示公告内容'), _t('开启则会在打开首页时弹窗'));
$gonggao_set->setAttribute('class', 'joe_content joe_other');
$form -> addInput($gonggao_set);

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

  最后在主题外观设置中填写内容并开启就可以了。

公告弹窗效果图