NOTES主题十分强大，看到rizhi主题的站点小喇叭，自己添加一个。

  1. 给主题的后台设置添加文本框 admin.php

    //首页公告----------
 $notice = new Typecho_Widget_Helper_Form_Element_Textarea('notice', NULL, NULL, _t('公告'), _t('说明：首页顶部公告'));
 $notice->setAttribute('class', 'Notes_content Notes_global');
 $form->addInput($notice);

  2. 给主题首页index.php添加

    <!-- 公告栏 -->
<div class="notice" itemprop="description">
     公告：<?php $this->options->notice(); ?>
</div>

  3. 自定义CSS

    .notice {
background-color: #f9f9f9; 
 border: 1px solid #ddd; 
 padding: 10px;   
}
<div id="scroll-broadcast">
    <div id="container-box-1">
        <div class="container-box-1-1">📢本站公告</div>
        <div id="flip-box-1">
            <div><div class="flip-box-1-1">代搭建独角数卡自动发卡商城系统！</div></div>
            <div><div class="flip-box-1-2"><a href="https://ka.luosir.cn/" target="_blank">点击查看效果</a> </div></div>
            <div><div class="flip-box-1-3">代搭建独角数卡自动发卡商城系统</div></div>
            <div><div class="flip-box-1-4"><a href="https://ka.luosir.cn/" target="_blank">点击查看效果</a></div></div>
            <div><div class="flip-box-1-5">代搭建独角数卡自动发卡商城系统</div></div>
            <div><div class="flip-box-1-6"><a href="https://ka.luosir.cn/" target="_blank">点击查看效果</a></div></div>
        </div>
        <div class="container-box-1-2">代搭建『独角数卡』自动发卡系统</div>
    </div>
</div>
<style type="text/css">
    #scroll-broadcast {margin: -10px;}
    #container-box-1{color: #4c5864;border-radius: var(--border-hd);text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);}
    #flip-box-1{overflow:hidden;height:50px;border-radius:99px}
    #flip-box-1 div{height:50px}
    #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
    #flip-box-1 div:first-child{animation:show 8s linear infinite}
    #flip-box-1 > div:nth-child(6n) >div{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
    #flip-box-1 > div:nth-child(6n+1) >div{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
    #flip-box-1 > div:nth-child(6n+2) >div{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
    #flip-box-1 > div:nth-child(6n+3) >div{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
    #flip-box-1 > div:nth-child(6n+4) >div{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
    #flip-box-1 > div:nth-child(6n+5) >div{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
    @keyframes show{
        0%{margin-top:-300px}
        5%{margin-top:-250px}
        16.666%{margin-top:-250px}
        21.666%{margin-top:-200px}
        33.332%{margin-top:-200px}
        38.332%{margin-top:-150px}
        49.998%{margin-top:-150px}
        54.998%{margin-top:-100px}
        66.664%{margin-top:-100px}
        71.664%{margin-top:-50px}
        83.33%{margin-top:-50px}
        88.33%{margin-top:0}
        99.996%{margin-top:0}
    100%{margin-top:300px}
    }
</style>
最后修改：2024 年 12 月 29 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏