TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

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

老狮博主
2019-08-30
/
4 评论
/
2,757 阅读
/
306 个字
/
百度已收录
08/30
本文最后更新于2020年01月19日,已超过893天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

折腾

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

公告弹窗代码

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

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

最后重新应用下当前的主题(记得备份主题设置),大功告成!!

Typecho美化代码
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/1272.html(转载时请注明本文出处及文章链接)

评论 (4)
  1. 无情的你 闲逛
    Windows 10 · Google Chrome

    代码有问题啊 添加后前端提示 syntax error, unexpected ','

    2022-02-14 回复
  2. 啦啦啦 闲逛
    Windows 10 · Google Chrome

    我的邮箱是768969132@qq.com

    2019-08-31 回复
    1. 老狮 博主
      Windows 7 · Google Chrome
      @啦啦啦

      我网站使用的是Typecho博客系统,你上百度搜就能搜到

      2019-09-01 回复
  3. 啦啦啦 闲逛
    Windows 10 · Google Chrome

    您好,可以看您网站的源码吗,太喜欢了。我本身也是一个程序员,也想做一个个人站。太爱您这个博客了,有偿也行的哦

    2019-08-31 回复

互动读者

  • 八九闲逛

    评论 5 次 | 文章 0 篇

  • 老狮博主

    评论 5 次 | 文章 335 篇

  • 秋天笔记闲逛

    评论 3 次 | 文章 0 篇

  • aihe闲逛

    评论 3 次 | 文章 0 篇

标签云