这篇文章距离上次修改已过305天，其中的内容可能已经有所变动。

不确定是不是我个人的习惯：每次打开一个新的个人博客，除了首页之外，最喜欢去的地方当然还有归档页。因为很多情况下这是一个不用翻页，没有多余信息，可以把全部文章的标题一条条列出来供人查看的地方。

本站当然也有归档页，但是Waxy主题的归档页展示不是很直观，因此闲着没事干，来修改下。

点击此处，展开目录

1. 写在最前

本节内容，笔者先聊聊归档页。如果您想知道笔者做了哪些改造，请直接看下一节。

正如引言所说，归档页是很直观的。如果说博客网站首页是一个展示较为丰富内容的页面，那么归档页就相当于简化版的首页，只有纯粹的信息流，来展示这个博客的发展历程，以及博主所记录的所有文章。笔者不止一次在打开某些已经运行了很长时间（见过有从2010年前后开始运行的）的博客，然后不费太大力气，就从中看见了中国互联网发展的一个侧面。

笔者一直不太喜欢过于花哨的网站，并不是说不能有任何装饰，但是装饰不能影响正常阅读体验，一些反面例子比如：

加载大量未压缩图片
前景色和后景色对比度低且无明显分隔（比如，毛玻璃亮色背景与白色文字）
字重过小，颜色过淡的文字
文字看不清的花式字体（加载体积可能也过大）
同上，但字体加载不出来就不显示内容
默认开启且无法关闭的『看板娘』（Live2D动画）
动态生成的WebGL背景（经常引起显卡猛转）
不停播放的动画
跟随鼠标移动的蜘蛛网特效，以及任意位置点击鼠标都有动画
.......

虽然说在具有上面这些功能的网站里，基本上每个页面都有类似的，但是文章归档页通常也会是个例外，因为访问文章归档页就相当于给人一个信号：我只要看文章，别给我整花里胡哨的。

此外当然还有一个重点：不用翻页。大多数个人博客都架设在海外服务器上，国内用户访问体验不一定好，最直观的就是点击按钮之后等一等才有反应（毕竟物理定律限制）。不用翻页这一点就说明页面只需要加载一次，不用等到翻到最下面时再点翻页按钮加载，整体体验会好很多。

2. 最终效果展示

如下图所示，给原来的归档页加上了月份指示功能，这样翻到一半也能快速确定目前所看到的年份几何。

此外便是侧边栏的文章按钮，现在也支持点击了，可以直接跳转到归档页

3. 修改

3.1 『文章』按钮

这个挺简单，定位到主题目录下的sidebar.php，找到原来展示的代码：

<div class="card-data-item">
    <div class="headline">文章</div>
    <div class="length-num"><?php $stat->publishedPostsNum() ?></div>
</div>

要想具备点击功能，虽然说可以直接给这个div挂click事件，然后js跳转，但是这就失去了『点击鼠标中键，新页面打开』的功能，在语义上也不符合链接功能。所以还是要用<a>标签，直接包裹起来就行：

<div class="card-data-item">
    <a href="/index.php/archive.html" target="_blank">
        <div class="headline">文章</div>
        <div class="length-num"><?php $stat->publishedPostsNum() ?></div>
    </a>
</div>

最后在上面开个<style>，补一点代码，使其美观。

div.card-data-item a,
div.card-data-item a:hover {
    text-decoration: none;
}

3.2 月份指示

月份指示的实现也不难，先确定要用什么元素包裹。归档页位于page_articles.php，打开可以发现，里面是while循环在输出一堆div，于是月份指示这里也抄了个div，把class命名为archive-month，然后补一点css：

.archive-month {
    margin: 10px 0px;
    font-weight: 700;
    font-size: 18px;
    color: #4B4B4B;
}

至于如何确定月份，有个简单的算法：定义一个$tmp变量，开始时赋值为0。每次循环都先比对要输出的文章条目的创建日期的月份与$tmp，如果不想等，就把新的月份数赋值到$tmp，然后输出月份指示条。

这个Waxy主题的归档页，原来有一堆代码，看着就是用来输出月份指示的，不知道为什么被注释掉了，笔者懒得深究，只是在现有的代码上改动：在原来输出年份指示条的if判断（逻辑当然也类似）下面，加入了如下代码：

if($mon != $mon_tmp) {
    $mon = $mon_tmp;
    $t = date('Y-m', $archives->created);
    $output .= "<div class='archive-month'>{$t}</div>";
}

保存好之后，刷新页面，功能就出来了。

4. 写在最后

简单修改，简单分享，水文一篇而已。

（完）

博客装修记：一个更好用的『归档』页