Typecho归档页样式

归档主体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="fancy-archive">
<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
$output = '';
$posts_rebuild = array();
while($archives->next()):
$post_year = date('Y',$archives->created);
$post_mon = date('m',$archives->created);
$posts_rebuild[$post_year][$post_mon][] = '<li><a href="'. $archives->permalink .'">'. $archives->title .'</a> <em>('. $archives->commentsNum .')</em></li>';
endwhile;
foreach ($posts_rebuild as $key => $value) {
$output .= '<h3 class="archive-year">' . $key . '</h3>';
$year = $key;
foreach ($value as $key_m => $value_m) {
$output .= '<h3 class="archive-month">' . $year . ' - ' . $key_m . '</h3><ul class="fancy-ul">';
foreach ($value_m as $key => $value_d) {
$output .= $value_d;
}
$output .= '</ul>';
}
# code...
}

echo $output;

?>
</div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.fancy-archive{
position:relative;
font-size:14px;
color:rgba(0,0,0,.6)
}
.fancy-archive:before{
content:"";
width:3px;
background-color:rgba(0,0,0,.05);
position:absolute;
top:0;
bottom:0;
left:100px
}
.archive-year{
display:inline-block;
background-color:#fafafa;
border:1px solid rgba(0,0,0,.05);
color:rgba(0,0,0,.44);
padding:1px 0;
width:120px;
margin-left:40px;
text-align:center;
position:relative;
border-radius:3px;
margin-top:30px;
margin-bottom:10px
}
.archive-month{
position:relative;
font-weight:700;
margin-bottom:15px
}
.archive-month:after,.archive-month:before{
content:"";
background-color:#fff;
height:19px;
width:19px;
border-radius:100%;
position:absolute;
left:92px;
top:3px
}
.archive-month:after{
height:15px;
width:15px;
background-color:#eee;
left:94px;
top:5px
}
.archive-month:hover:after{
background-color:#676767
}
.fancy-ul{
margin-left:100px;
margin-bottom:30px

}
.fancy-ul .date{
margin-left:-80px;
width:80px;
display:inline-block
}
.fancy-ul li{
position:relative;
padding-left:15px;
list-style-type: none
}
.fancy-ul li:after,.fancy-ul li:before{
content:"";
background-color:#fff;
height:13px;
width:13px;
border-radius:100%;
position:absolute;
left:-5px;
top:7px
}
.fancy-ul li:after{
height:9px;
width:9px;
background-color:#eee;
left:-3px;
top:9px
}
.fancy-ul li:hover:after{
background-color:#676767
}

来源于Puma主题


Typecho归档页样式
http://yoursite.com/2022/09/19/typecho/archives/
作者
雨停之後
发布于
2022年9月19日
许可协议