TypechoJoeTheme

老狮的梦

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

为typecho做一个简单的归档页面

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

想给自己主题弄一个归档页面,这样可以一目了然的看到自己以往都记录了些什么,不仅方便自己也方便了读者。由于主题没有自带归档页面所以只能在网上搜索,发现实现归档页面有两种方法。第一种是通过插件来实现,这种方法比较简单直接下载安装即可,另外一种就是创建一个自定义归档页面。由于本人喜欢折腾,所以最终选择了后者自己创建归档页面。
效果页面:https://laolion.com/archives.html

一开始在网上众多教程中选择了两个比较简单的实现方法。第一种是来自简书的:在主题文件夹根目录新建文件 articles.php,然后将以下代码复制进去。

<?php $this->need('header.php'); ?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
/**
 * 归档页面
 *
 * @package custom
 */
    $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> <em>('. $archives->commentsNum.')</em></li>'; //输出文章日期和标题   
    endwhile;   
    $output .= '</ul></li></ul></div>';
    echo $output;
?>
<?php $this->need('footer.php'); ?>

然后在创建独立页面,在右侧自定义模板中选择归档页面即可实现。原文出处:https://www.jianshu.com/p/1e4512dd98cc

测试了一下效果感觉不是很满意,于是又选择了第二种,将第一种方法里articles.php中的代码换成下面的代码复制进去。

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php   
/**  
    * archives  
    *  
    * @package custom  
    */  
$this->need('header.php'); ?>   
    <div id="mainbox2">   
            <div class="post"  id="post-<?php $this->cid(); ?>">   
            <h1><span class="post-title"><a href="<?php $this->permalink() ?>" title=""><?php  $this->title() ?></a></span></h1>   
            <div class="clear"></div>   
            <div class="entry">   
<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
    $year=0; $mon=0; $i=0; $j=0;
    $output = '<div class="post-content cf">';
    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>'. $year .' 年</h3><ul>'; 
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span>'. $year .' 年'. $mon .' 月</span><ul>';
        }
        $output .= '<li>'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'">'. $archives->title .'</a> ('. $archives->commentsNum.')</li>';
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>          <div class="clear"></div>   
            </div>   
        </div>   
    </div>
<?php $this->need('footer.php'); ?>

然后再把css美化一下

div#mainbox2 {
    position: relative;
    margin: 9% auto 5%;
    padding: 1% 3% 2%;
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    -webkit-box-shadow: 1px 2px 3px #ddd;
    box-shadow: 1px 2px 3px #ddd;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

原文出处:https://www.jianshu.com/p/1e4512dd98cc

测试一下仍然不是很满意,偶尔在群里看到有博友说可以搬他博客里的归档代码,因为他的博客和我的博客用的是同一个主题,所以便进去看了一下,效果非常满意,最终选择了他的代码,如下

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php   
/**  
    * 归档  
    *  
    * @package custom  
    */  
$this->need('header.php'); ?>   
  <main>
    <div class="wrap min">
        <section class="page-title">
            <h2><?php $this -> title() ?></h2>
<?php if($this -> authorId == $this -> user -> uid): ?>            
<?php endif; ?>
        </section>
        <article class="page-content">
            <?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>'. $year .' 年</h3><ul>'; //输出年份
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span>'. $mon .' 月</span><ul>'; //输出月份
        }
        $output .= '<li>'.date('d日: ',$archives->created).'<a href="'.$archives->permalink .'">'. $archives->title .'</a> <em>('. $archives->commentsNum.')</em></li>'; //输出文章日期和标题
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>
        </article>        
    </div>
</main>

<?php $this -> need('footer.php'); ?>

原文出处:https://rzfyu.com/ddd/264.html

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

老狮的梦

本文链接:

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

评论 (3)
  1. 格子老师 小坐
    Windows 10 · Google Chrome

    应该直接在文章内增加一个你修改过的演示页面,这样也能增加你网站的流量!!

    2020-01-17 回复
    1. 老狮 博主
      Windows 7 · QQ Browser
      @格子老师

      感谢你的宝贵提醒,效果页面:https://laolion.com/archives.html

      2020-01-17 回复
      1. akers 闲逛
        Windows 10 · Google Chrome
        @老狮

        漂亮啊,,我也去试试!

        2021-01-13 回复

互动读者

  • 八九闲逛

    评论 5 次 | 文章 0 篇

  • 老狮博主

    评论 5 次 | 文章 335 篇

  • aihe闲逛

    评论 3 次 | 文章 0 篇

  • 秋天笔记闲逛

    评论 3 次 | 文章 0 篇

标签云