总共分为三部分处理

一 归档代码

参考网站https://www.jianshu.com/p/1e4512dd98cc 的归档代码

二 分析网站css

使用上面的源代码作为模板,但是不适合本博客主题
点开留言页面,shift + F12分析页面源代码
在搜到的源代码上进行修改,最终符合本博客主题

三 最终代码如下

articles.php文件内最终内容如下
<?php $this->need('header.php'); ?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
/**
 * 归档页面
 *
 * @package custom
 */
<main>
<div class="wrap min">
    <section class="page-title">
        <h2>归档</h2><a class="edit-link" href="https://cyalias.vicp.cc/typecho/admin/write-page.php?cid=52" target="_blank">编辑</a>
    </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" class="wrap min">';   
    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;
?>
    </article>
</div>
</main>
<?php $this->need('footer.php'); ?>