CoreThink主题开发（五）使用H-ui开发博客主题之首页显示站点公告

感谢H-ui、感谢CoreThink！

效果图：

官方CMS前台index里提供了显示公告列表的模板代码，只需要自己结合样式结合H-ui稍加调整就好了。

<div class="container">
        <h1>站点公告</h1>
    <table class="table table-hover">
        <tbody>
        <cms:notice_list name="vo" limit="8">
            <tr>
                <th><a href="{$vo.href}">{$vo.title|cut_str=0,20}</a></th>
                <td>{$vo.create_time|time_format}</td>
            </tr>

        </cms:notice_list>
        </tbody>
    </table>
    </div>

贴出整个前台首页的代码：

Blog/Home/Index/index.html

<extend name="$_home_public_layout"/>
<block name="style">
    <style type="text/css">
        .slider{position:relative;text-align:center; margin:0 auto;z-index:1;}
        .slider .bd,.slider .bd li,.slider .bd img{width:960px; height:272px}/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
        .slider .bd{z-index:2;overflow:hidden}
        .slider .bd li{float:left;width: 100%;overflow:hidden; background-position:center; background-repeat:no-repeat}
        .slider .bd li a{ display:block; width: 100%; height: 100%}
        .slider .bd li img{display:block}
        .slider .hd{ position: absolute; z-index: 3; left: 0; right: 0; bottom:10px; padding: 0 10px; text-align: center}
        .slider .hd li{display:inline-block;text-align:center;margin-right:10px;cursor:pointer;background-color:#C2C2C2}
        .slider .hd li.active{background-color:#222}
        /*圆点*/
        .dots li{width:10px; height:10px;font-size:0px;line-height:0px;border-radius:50%}
        /*数字*/
        .numbox li{width:20px; height:20px; line-height:20px; font-size:13px;font-family:Arial;font-weight:bold; text-indent:inherit;}
        .numbox li.active{color:#fff}
        /*长方条*/
        .rectangle li{width:40px; height:10px;font-size:0px;line-height:0px}
    </style>
</block>
<block name="script">

    <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
    <script type="text/javascript">
        $(function(){
            jQuery("#slider-3 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:7000,pnLoop:false,titOnClassName:"active"});
        });
    </script>
</block>
<block name="main">
    <div id="slider-3">
        <div class="slider">
            <div class="bd">
                <ul>

                    <cms:slider_list name="sl">
                        <li>
                            <a href="{$sl.url}" target="_blank">
                                <img src="{$sl.cover|get_cover}"/>
                            </a>
                        </li>
                    </cms:slider_list>

                </ul>
            </div>
            <ol class="hd cl dots">
                <cms:slider_list name="sl">
                    <li>{$i}</li>
                </cms:slider_list>
            </ol>
        </div>
    </div>
<br>
    <div class="container">
        <h1>站点公告</h1>
    <table class="table table-hover">
        <tbody>
        <cms:notice_list name="vo" limit="8">
            <tr>
                <th><a href="{$vo.href}">{$vo.title|cut_str=0,20}</a></th>
                <td>{$vo.create_time|time_format}</td>
            </tr>

        </cms:notice_list>
        </tbody>
    </table>
    </div>


</block>