春天即将到来
Mar192013

试改归档

@牧风的归档页面不错,试着扒了下,没成功我好菜。在其它地方又看到了一个新的归档形式,试着扒下来了,好像样子还不错据说是仿点点网的,我好像哪里还是没搞对,虚线没有连到一起,不大好看,请亲们帮我改改看,效果见@归档页面

/* 代码来自沐风 mufeng.me/typecho-archives.html */  
<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
    $year=0; $mon=0; $i=0; $j=0;
    $output = '<div id="archives">';
    while($archives->next()):
        $year_tmp = date('Y',$archives->created);
        $mon_tmp = date('m',$archives->created);
        $y=$year; $m=$mon;
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';
        if ($year != $year_tmp) {
            $year = $year_tmp;
            $output .= '<h3 class="al_year">'. $year .' 年</h3><ul class="al_mon_list">'; //输出年份
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span class="al_mon">'. $mon .' 月</span><ul class="al_post_list">'; //输出月份
        }
        $output .= '<li>'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'">'. $archives->title .'</a><span class="arch-day">'. $archives->commentsNum.'</span></li>'; //输出文章日期和标题
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>  

css我也不知道有些有用没,囧~

.al_mon_list > li {position: relative;clear: both;list-style: none;}
.al_mon_list .al_mon {position: absolute;font-size: 14px;left: -45px;top: 10px;width: 40px;text-align: right;border-right: 5px solid #ccc;}
#archives{margin-top:18px;}
#archives li{list-style-type:none;position:relative;}
#archives ul.al_post_list{overflow:hidden;margin:0;}
.al_post_list {overflow: hidden;border-left: 1px solid #ccc;padding-top: 8px;padding-left: 8px;list-style: none;}
.al_post_list li {position: relative;float: left;display: inline;width: 139px;height: 65px;padding: 5px;border-right: 1px solid #cacaca;border-bottom: 1px solid #cacaca;margin: 0 10px 10px 0;color: #ccc;background: #efefef;font-size: 12px;}
.al_post_list li a {display: block;width: 139px;height: 65px;color: #333;}
.al_post_list li:hover {background: #ddd;}
.arch-day {position: absolute;bottom: 0;right: 5px;font-size: 18px;font-weight: bold;color: #DDD;font-style: italic;text-shadow: 0 1px 0 white;}

27 个流言蜚语 (制造者:13 个流言, 博主:14 次澄清)散布流言

  1. CzBiX
    CzBiX 2013年03月21日   [Mozilla FireFox 19.0 @ Ubuntu]
    沙发 回复

    #archives ul.al_post_list{overflow:hidden;margin-bottom:10px;}
    修改为
    #archives ul.al_post_list{overflow:hidden;margin:0;}

    这样?

    1. CzBiX
      CzBiX 2013年03月21日   [Mozilla FireFox 19.0 @ Ubuntu]
      第1沙 回复

      囧。发生了什么?

      1. 飞天舞
        飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
        第2沙 回复

        啊哦,编辑器默认是输入code,要指定某种类型,比如code lang="php",这种就行。
        不然就要报错。

      2. 飞天舞
        飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
        第2沙 回复
        #archives ul.al_post_list{overflow:hidden;margin-bottom:10px;}

        修改为

        #archives ul.al_post_list{overflow:hidden;margin:0;}
        

        再次测试下,好像不会出错了。这么久以来居然一直忘记了解决这个问题,哈,多亏你了。
        再试下哈
        [牛人]我的歌声里

    2. 飞天舞
      飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1沙 回复

      啊哦,果然搞定了~谢谢!!

      1. 飞天舞
        飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
        第2沙 回复

        测试<?php if (empty($this->options->sidebarBlock) || in_array('ShowRecentComments', $this->options->sidebarBlock)): ?>

        1. 飞天舞
          飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
          第3沙 回复

          再测

          .al_post_list {
          overflow: hidden;
          border-left: 1px solid #ccc;
          padding-top: 8px;
          padding-left: 8px;
          list-style: none;
  2. 9527
    9527 2013年03月23日   [Google Chrome 25.0.1364.172 @ Windows 7]
    板凳 回复

    舞哥太风骚了 icon_1

    1. 飞天舞
      飞天舞 (博主) 2013年03月24日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1凳 回复

      瞎折腾,新版不出来,找点事来做嘛。

  3. 阿飞
    阿飞 2013年03月24日   [Google Chrome 27.0.1430.0 @ Windows 7]
    地毯 回复

    归档有点长啊,弄个类似瀑布流的,往下拉的时候自动载入要好看些吧

    1. 飞天舞
      飞天舞 (博主) 2013年03月24日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1毯 回复

      难倒我了,没那技术。。。。 icon_38

    2. 暮春
      暮春 2013年03月27日   [Google Chrome 25.0.1364.172 @ Windows XP]
      第1毯 回复

      我看行~

  4. Jr
    Jr 2013年03月29日   [Internet Explorer 7.0 @ Windows 7]
    门口 回复

    挺好看的归档页。。。偷之。。

    1. 飞天舞
      飞天舞 (博主) 2013年03月29日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1门 回复

      我也是偷来的,呵呵~~

  5. leedi
    leedi 2013年04月01日   [Mozilla FireFox 14.0.1 @ Windows 7]
    走廊 回复

    还以为你只会扒女人衣服,原来还会点别的

    1. 飞天舞
      飞天舞 (博主) 2013年04月01日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1廊 回复

      icon_8

  6. 大葱
    大葱 2013年04月09日   [Google Chrome 24.0.1312.57 @ Windows 7]
    楼梯 回复

    icon_14 赶脚还不错~

  7. 啄木游弋
    啄木游弋 2013年04月14日   [Google Chrome 24.0.1312.57 @ Windows XP]
    宅院 回复

    效果还是很不错的,赞一个。

    1. 飞天舞
      飞天舞 (博主) 2013年04月14日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1院 回复

      类似于点点的效果,只是没加入缩略图。

  8. 低调漫埗
    低调漫埗 2013年04月15日   [Internet Explorer 8.0 @ Windows XP]
    小区 回复

    博主您好,关注您博客很久了,嘿嘿,学到了不少东西。今天又来,看上您博客的相册功能,您能不能分享给我。多谢多谢!

    1. 飞天舞
      飞天舞 (博主) 2013年04月15日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1区 回复

      @低调漫埗(#5829):
      你好,相册是个页面,具体办法,我写了下来的,你按照这篇文章相册改为了PICASA就可以自己测试,实现一样的效果的。

  9. 牧风
    牧风 2013年05月20日   [Google Chrome 27.0.1453.81 @ Windows 7]
    街道 回复

    这个归档不错的 样式

    1. 飞天舞
      飞天舞 (博主) 2013年05月20日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1街 回复

      牧大师,呵呵,没有把你的弄下来,就换了个。

  10. Vanish
    Vanish 2013年06月16日   [Google Chrome 25.0.1364.172 @ Windows 7]
    10号大院 回复

    有空再折腾你这个归档,今天折腾一天总算正常使用了。好累啊!!!

    1. 飞天舞
      飞天舞 (博主) 2013年06月16日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1间 回复

      肿么了?博客出问题了?发生什么事了?
      PS:很奇怪地,你的评论在被审核里面 icon_30

      1. Vanish
        Vanish 2013年06月16日   [Google Chrome 25.0.1364.172 @ Windows 7]
        第2间 回复

        也许是我的是英文名加上企业邮箱的原因吧。 icon_1 这个归档的CSS有整理好的吗?直接用算了。 icon_1

        1. 飞天舞
          飞天舞 (博主) 2013年06月16日   [Google Chrome 12.0.742.9 @ Windows XP]
          第3间 回复

          原来这样。。。。
          css有弄好的,直接搬过去就可以用的~~

增加一个流言 »

未曾错过

    • 秋天: 舞哥,谢谢你...
    • sha: 终于可以访问了啊。
    • 阿飞: 你终于又回来了
    • 952: 舞哥好久没更新了呀
    • 阿信: 一种倔强,是...
    • mai: 打呼噜据说是太累了
    • 孙华: 新年快乐!
    • 孙华: 已经回家了,...
    • rai: 这首歌特别叼
    • 浩子: 最近比较烦躁...