-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy patharchive.html
More file actions
158 lines (146 loc) · 6.26 KB
/
archive.html
File metadata and controls
158 lines (146 loc) · 6.26 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---
layout: default
title: 歸檔
permalink: /archive/
---
<div class="max-w-4xl mx-auto">
<!-- Page Header -->
<header class="mb-12 text-center">
<h1 class="text-4xl md:text-5xl font-bold font-mono text-cp-green-500 mb-4">
<span class="text-cp-dark-500">></span> 歸檔
</h1>
<p class="text-lg text-cp-dark-600 font-mono">
所有文章的時間軸
</p>
</header>
<!-- Stats -->
<div class="card p-6 mb-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div>
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.posts.size }}</div>
<div class="text-sm text-cp-dark-600 font-mono">文章總數</div>
</div>
<div>
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.tags | size }}</div>
<div class="text-sm text-cp-dark-600 font-mono">標籤數</div>
</div>
<div>
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.categories | size }}</div>
<div class="text-sm text-cp-dark-600 font-mono">分類數</div>
</div>
<div>
{% assign total_words = 0 %}
{% for post in site.posts %}
{% assign post_words = post.content | number_of_words %}
{% assign total_words = total_words | plus: post_words %}
{% endfor %}
{% assign total_words_k = total_words | divided_by: 1000 %}
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ total_words_k }}K</div>
<div class="text-sm text-cp-dark-600 font-mono">總字數</div>
</div>
</div>
</div>
<!-- Year Filter -->
<div class="flex flex-wrap gap-2 mb-8">
<span class="text-sm text-cp-dark-600 font-mono mr-2">年份：</span>
{% assign years = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in years %}
<a href="#{{ year.name }}" class="px-3 py-1 text-sm font-mono bg-cp-dark-200 text-cp-dark-700 hover:bg-cp-green-500/20 hover:text-cp-green-500 border border-cp-dark-300 hover:border-cp-green-500 rounded transition-all">
{{ year.name }}
<span class="text-cp-dark-500">({{ year.items.size }})</span>
</a>
{% endfor %}
</div>
<!-- Timeline -->
<div class="relative">
<!-- Timeline Line -->
<div class="absolute left-4 md:left-8 top-0 bottom-0 w-px bg-cp-dark-300"></div>
{% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in posts_by_year %}
<section id="{{ year.name }}" class="relative mb-12 scroll-mt-24">
<!-- Year Marker -->
<div class="flex items-center gap-4 mb-6 relative">
<div class="w-8 md:w-16 h-8 flex items-center justify-center bg-cp-green-500 text-cp-dark-100 font-mono font-bold rounded relative z-10">
{{ year.name }}
</div>
<span class="text-sm text-cp-dark-500 font-mono">{{ year.items.size }} 篇文章</span>
</div>
<!-- Posts by Month -->
{% assign posts_by_month = year.items | group_by_exp: "post", "post.date | date: '%m'" %}
{% for month in posts_by_month %}
<div class="ml-8 md:ml-16 mb-8">
<!-- Month Header -->
<div class="flex items-center gap-3 mb-4">
<div class="w-3 h-3 rounded-full bg-cp-green-500/50 border-2 border-cp-green-500 relative -ml-[1.125rem] md:-ml-[2.125rem]"></div>
<h3 class="text-lg font-mono text-cp-green-400">
{% assign month_num = month.name | plus: 0 %}
{% case month_num %}
{% when 1 %}一月
{% when 2 %}二月
{% when 3 %}三月
{% when 4 %}四月
{% when 5 %}五月
{% when 6 %}六月
{% when 7 %}七月
{% when 8 %}八月
{% when 9 %}九月
{% when 10 %}十月
{% when 11 %}十一月
{% when 12 %}十二月
{% endcase %}
</h3>
<span class="text-sm text-cp-dark-500 font-mono">({{ month.items.size }})</span>
</div>
<!-- Posts List -->
<div class="space-y-3 ml-4">
{% for post in month.items %}
<article class="card p-4 group border-l-2 border-transparent hover:border-cp-green-500 transition-colors">
<a href="{{ post.url | relative_url }}" class="block">
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<time datetime="{{ post.date | date_to_xmlschema }}" class="text-sm font-mono text-cp-dark-500 sm:w-20 flex-shrink-0">
{{ post.date | date: "%m-%d" }}
</time>
<h4 class="font-mono text-cp-dark-800 group-hover:text-cp-green-500 transition-colors flex-grow">
{{ post.title }}
</h4>
{% if post.category %}
<span class="text-xs font-mono text-cp-green-600 bg-cp-green-500/10 px-2 py-0.5 rounded flex-shrink-0 hidden sm:inline-block">
{{ post.category }}
</span>
{% endif %}
</div>
{% if post.tags.size > 0 %}
<div class="flex flex-wrap gap-2 mt-2 sm:ml-24">
{% for tag in post.tags limit:3 %}
<span class="text-xs font-mono text-cp-dark-500">
<span class="text-cp-green-600">#</span>{{ tag }}
</span>
{% endfor %}
</div>
{% endif %}
</a>
</article>
{% endfor %}
</div>
</div>
{% endfor %}
</section>
{% endfor %}
</div>
<!-- End of Timeline -->
<div class="relative ml-4 md:ml-8 pt-4">
<div class="w-4 h-4 rounded-full bg-cp-dark-300 border-2 border-cp-dark-400 relative -ml-2"></div>
<p class="text-center text-cp-dark-500 font-mono text-sm mt-4">
這是時間的起點 ...
</p>
</div>
<!-- Back to Top -->
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center gap-2 text-cp-dark-600 hover:text-cp-green-500 font-mono transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
</svg>
返回頂部
</a>
</div>
</div>