因为一般Typecho的主题模板都是很简洁,可能有一些胸弟想DIY添加网站公告栏,又看到Typecho社区有人提问,我也添加了一个差不多一样的,无聊就发个文章做个记录!


公告栏设置

添加主题配置函数

Typecho后台管理——外观——编辑当前外观——functions.php,添加下面代码!

$notice = new Typecho_Widget_Helper_Form_Element_Textarea('notice', NULL, NULL, _t('公告'), _t('公告栏,可用一部分html标签'));
      $form->addInput($notice);

如果主题 没有functions.php 文件,就在主题目录新建一个添加下面代码和上面差点,多加了一个主体函数:

function themeConfig($form)
   {
      $notice = new Typecho_Widget_Helper_Form_Element_Textarea('notice', NULL, NULL, _t('公告'), _t('侧边栏公告'));
      $form->addInput($notice);
   }

合适位置引用公告

然后在 sidebar.php 中适当位置加入引用以下代码:

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

公告栏内容几个例子

然后这是我用的html滚动代码,我的是在 header.php 最后面加的:

<marquee scrollamount=7 onmouseover=this.stop() onmouseout=this.start() bgcolor="#fffef9">告示: <span style="color:#007947;">萌新网站,不足之处,望得到各位大佬的指指点点!</span></marquee>

不需要在后台添加公告管理的,直接在合适的位置添加上面的HTML代码也是可以的,效果显示一样的,我就是这么干的,原提问帖子:
想在侧边栏加个“公告”,有类似的插件吗


HTML设置滚动文字标签说明

1. 滚动文字标签:marquee

语法格式:

<marquee>滚动文字</marquee>`

也可以在标签之间设置文字的字体、颜色等。


2. 滚动方向属性:direction

语法格式:

<marquee  direction="滚动方向">滚动文字</marquee>`
<marquee direction="right">我向右滚动</marquee> 
<marquee direction="right">我向下滚动</marquee> 

“滚动方向取值”:up、down、left 和 right,其中向左滚动 left 的效果和默认效果相同。


3. 滚动方式属性:behavior

语法格式:

<marquee behavior="滚动方式">滚动文字</marquee>`
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> 
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

4. 滚动速度属性:scrollamount

语法格式:

<marquee scrollamount="滚动速度">滚动文字</marquee>`
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="50">我慢了些。</marquee>

在该语法中,滚动文字的速度实际上是设置滚动文字每次移动的长度,以像素为单位。


5. 滚动延迟属性:scrolldelay

语法格式:

<marquee scrolldelay="时间间隔">滚动文字</marquee>
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

时间间隔单位是毫秒(千分之一秒)


6. 滚动循环属性:loop

语法格式:

<marquee  loop="循环次数">滚动文字</marquee>
<marquee loop="2">我滚动2次。</marquee>
<marquee loop="infinite">我无限循环滚动。</marquee>
<marquee loop="-1">我无限循环滚动。</marquee>

7. 滚动范围属性:width,height

如果不设置滚动背景的面积,那么默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用 width 和 height 参数调整其水平和垂直的范围。

语法格式:

<marquee  width="宽值"  height="高值">滚动文字</marquee>
<marquee width="300" height="30">我宽300像素,高30像素。</marquee>

宽度和高度的单位均为像素。


8. 滚动背景颜色属性:bgcolor

语法格式:

<marquee bgcolor="颜色代码">滚动文字</marquee>
<marquee bgcolor="red">我的背景色是红色的</marquee>

文字背景颜色设置为 16 位颜色码


9. 滚动空间属性:hspace,vspace

语法格式:

<marquee hspace="水平范围" vspace="垂直范围">滚动文字</marquee>`
 <marquee vspace="10" hspace="10">我矩形边缘水平和垂直距周围各10像素。</marquee> 
 <marquee vspace="50" hspace="50">我矩形边缘水平和垂直距周围各50像素。</marquee>

水平和垂直范围的单位均为像素。


10. 鼠标事件:onmouseout

这玩意就是鼠标经过滚动的文字的地方,文字会停止滚动,鼠标移开了又继续滚动,是为让别人看清一条公告的!

语法格式:

<marquee onmouseover=this.stop() onmouseout=this.start()>滚动文字</marquee>

总结例子:

<marquee  direction="right"  behavior="alternate"  scrollamount="15"  scrolldelay="10"  loop="2"    height="100"  bgcolor="ABCDEF" >
    <font  face="隶书"  color="#0066FF"  size="5">有聚有散、有来有往的,才是人生。</font>
</marquee>
<marquee  direction="left"  behavior="scroll"  scrollamount="25"  loop="1"  bgcolor="pink"  hspace="90"   vspace="50">
    <font  face="隶书"  color="red"  size="5">应该努力地去生活,对过往闭口不提,是好是坏皆为经历。</font>
</marquee>

一、横向滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width= "760 " align= "center " border= "1 "   >
<tr>
<td align= "center ">
<div id=demo style= 'overflow:hidden;height:110px;width:750px; '>
<table height=110  border=0  cellspacing=0  cellpadding=0>
<tr>
<td   id=demo1>
<!--下面是你要显示的内容-->
<table   width=780>
<tr>
<td> 第一 </td>
<td> 第二 </td>
<td> 文章标题 </td>
<td> 想念一只猫 <br> 添 加: <br> 更新时间:2019年10月9日 ' </td>
<td> 经典动物幽默图集 <br> 添 加: <br> 更新时间:2019年10月7日 ' </td>
<td> 新化二中 <br> 添 加: <br> 更新时间:2019年10月7日 ' </td>
</tr>
</table>
<!--显示的内容结束-->
</td>
<td id=demo2> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script>
      var   speed=15
      demo2.innerHTML=demo1.innerHTML
      function   Marquee(){
      if(demo2.offsetWidth-demo.scrollLeft <=0)
      demo.scrollLeft-=demo1.offsetWidth
      else{
      demo.scrollLeft++
      }
      }
      var   MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function()   {clearInterval(MyMar)}
      demo.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}
</script>
</td>
</tr>
</table>
</BODY>
</HTML>

二、纵向滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
<DIV id=rolllinkk1>
<!-- 下面是你要显示的内容 -->
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
<tr> <td align="center">想念一只猫 </td> </tr>
</table>
<!--显示的内容结束!-->
<DIV align=center> </DIV> </DIV>
<DIV id=rolllinkk2>
<DIV align=center> </DIV> </DIV> </DIV>
<SCRIPT>
var rollspeed=30
rolllinkk2.innerHTML=rolllinkk1.innerHTML //
function Marquee1(){
if(rolllinkk2.offsetTop-rolllinkk.scrollTop <=0) //
rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
else{
rolllinkk.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,rollspeed) //
rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
</SCRIPT>
</td>
</tr>
</table>
</td> </tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>

还有更多方法滚动文字的,有的还加背景动图,高仿我们生活中看到的LED广告招牌一样的!