Skip to content

Commit 30feaec

Browse files
committed
添加缺少的內容頁面
- archive.html: 文章歸檔頁 - categories.html: 分類頁 - tags.html: 標籤頁 - glossary.md: 術語表 - 新增資源頁面:Layer2、密碼龐克歷史、開發工具、Nostr、自我託管
1 parent a060a7b commit 30feaec

File tree

9 files changed

+2340
-0
lines changed

9 files changed

+2340
-0
lines changed

archive.html

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
layout: default
3+
title: 歸檔
4+
permalink: /archive/
5+
---
6+
7+
<div class="max-w-4xl mx-auto">
8+
<!-- Page Header -->
9+
<header class="mb-12 text-center">
10+
<h1 class="text-4xl md:text-5xl font-bold font-mono text-cp-green-500 mb-4">
11+
<span class="text-cp-dark-500">&gt;</span> 歸檔
12+
</h1>
13+
<p class="text-lg text-cp-dark-600 font-mono">
14+
所有文章的時間軸
15+
</p>
16+
</header>
17+
18+
<!-- Stats -->
19+
<div class="card p-6 mb-12">
20+
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
21+
<div>
22+
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.posts.size }}</div>
23+
<div class="text-sm text-cp-dark-600 font-mono">文章總數</div>
24+
</div>
25+
<div>
26+
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.tags | size }}</div>
27+
<div class="text-sm text-cp-dark-600 font-mono">標籤數</div>
28+
</div>
29+
<div>
30+
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ site.categories | size }}</div>
31+
<div class="text-sm text-cp-dark-600 font-mono">分類數</div>
32+
</div>
33+
<div>
34+
{% assign total_words = 0 %}
35+
{% for post in site.posts %}
36+
{% assign post_words = post.content | number_of_words %}
37+
{% assign total_words = total_words | plus: post_words %}
38+
{% endfor %}
39+
{% assign total_words_k = total_words | divided_by: 1000 %}
40+
<div class="text-3xl font-bold text-cp-green-500 font-mono">{{ total_words_k }}K</div>
41+
<div class="text-sm text-cp-dark-600 font-mono">總字數</div>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<!-- Year Filter -->
47+
<div class="flex flex-wrap gap-2 mb-8">
48+
<span class="text-sm text-cp-dark-600 font-mono mr-2">年份:</span>
49+
{% assign years = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
50+
{% for year in years %}
51+
<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">
52+
{{ year.name }}
53+
<span class="text-cp-dark-500">({{ year.items.size }})</span>
54+
</a>
55+
{% endfor %}
56+
</div>
57+
58+
<!-- Timeline -->
59+
<div class="relative">
60+
<!-- Timeline Line -->
61+
<div class="absolute left-4 md:left-8 top-0 bottom-0 w-px bg-cp-dark-300"></div>
62+
63+
{% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
64+
65+
{% for year in posts_by_year %}
66+
<section id="{{ year.name }}" class="relative mb-12 scroll-mt-24">
67+
<!-- Year Marker -->
68+
<div class="flex items-center gap-4 mb-6 relative">
69+
<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">
70+
{{ year.name }}
71+
</div>
72+
<span class="text-sm text-cp-dark-500 font-mono">{{ year.items.size }} 篇文章</span>
73+
</div>
74+
75+
<!-- Posts by Month -->
76+
{% assign posts_by_month = year.items | group_by_exp: "post", "post.date | date: '%m'" %}
77+
78+
{% for month in posts_by_month %}
79+
<div class="ml-8 md:ml-16 mb-8">
80+
<!-- Month Header -->
81+
<div class="flex items-center gap-3 mb-4">
82+
<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>
83+
<h3 class="text-lg font-mono text-cp-green-400">
84+
{% assign month_num = month.name | plus: 0 %}
85+
{% case month_num %}
86+
{% when 1 %}一月
87+
{% when 2 %}二月
88+
{% when 3 %}三月
89+
{% when 4 %}四月
90+
{% when 5 %}五月
91+
{% when 6 %}六月
92+
{% when 7 %}七月
93+
{% when 8 %}八月
94+
{% when 9 %}九月
95+
{% when 10 %}十月
96+
{% when 11 %}十一月
97+
{% when 12 %}十二月
98+
{% endcase %}
99+
</h3>
100+
<span class="text-sm text-cp-dark-500 font-mono">({{ month.items.size }})</span>
101+
</div>
102+
103+
<!-- Posts List -->
104+
<div class="space-y-3 ml-4">
105+
{% for post in month.items %}
106+
<article class="card p-4 group border-l-2 border-transparent hover:border-cp-green-500 transition-colors">
107+
<a href="{{ post.url | relative_url }}" class="block">
108+
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
109+
<time datetime="{{ post.date | date_to_xmlschema }}" class="text-sm font-mono text-cp-dark-500 sm:w-20 flex-shrink-0">
110+
{{ post.date | date: "%m-%d" }}
111+
</time>
112+
<h4 class="font-mono text-cp-dark-800 group-hover:text-cp-green-500 transition-colors flex-grow">
113+
{{ post.title }}
114+
</h4>
115+
{% if post.category %}
116+
<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">
117+
{{ post.category }}
118+
</span>
119+
{% endif %}
120+
</div>
121+
122+
{% if post.tags.size > 0 %}
123+
<div class="flex flex-wrap gap-2 mt-2 sm:ml-24">
124+
{% for tag in post.tags limit:3 %}
125+
<span class="text-xs font-mono text-cp-dark-500">
126+
<span class="text-cp-green-600">#</span>{{ tag }}
127+
</span>
128+
{% endfor %}
129+
</div>
130+
{% endif %}
131+
</a>
132+
</article>
133+
{% endfor %}
134+
</div>
135+
</div>
136+
{% endfor %}
137+
</section>
138+
{% endfor %}
139+
</div>
140+
141+
<!-- End of Timeline -->
142+
<div class="relative ml-4 md:ml-8 pt-4">
143+
<div class="w-4 h-4 rounded-full bg-cp-dark-300 border-2 border-cp-dark-400 relative -ml-2"></div>
144+
<p class="text-center text-cp-dark-500 font-mono text-sm mt-4">
145+
這是時間的起點 ...
146+
</p>
147+
</div>
148+
149+
<!-- Back to Top -->
150+
<div class="text-center mt-12">
151+
<a href="#" class="inline-flex items-center gap-2 text-cp-dark-600 hover:text-cp-green-500 font-mono transition-colors">
152+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
153+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
154+
</svg>
155+
返回頂部
156+
</a>
157+
</div>
158+
</div>

categories.html

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
layout: default
3+
title: 分類
4+
permalink: /categories/
5+
---
6+
7+
<div class="max-w-6xl mx-auto">
8+
<!-- Page Header -->
9+
<header class="mb-12 text-center">
10+
<h1 class="text-4xl md:text-5xl font-bold font-mono text-cp-green-500 mb-4">
11+
<span class="text-cp-dark-500">/</span> 分類
12+
</h1>
13+
<p class="text-lg text-cp-dark-600 font-mono">
14+
依主題分類瀏覽文章
15+
</p>
16+
</header>
17+
18+
<!-- Categories Overview -->
19+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
20+
{% assign sorted_categories = site.categories | sort %}
21+
{% for category in sorted_categories %}
22+
{% assign cat_name = category[0] %}
23+
{% assign cat_posts = category[1] %}
24+
25+
<a href="#{{ cat_name | slugify }}" class="card p-6 group hover:border-cp-green-500 transition-colors">
26+
<div class="flex items-start justify-between mb-4">
27+
<div class="w-12 h-12 rounded-lg bg-cp-green-500/10 flex items-center justify-center text-cp-green-500 group-hover:bg-cp-green-500 group-hover:text-cp-dark-100 transition-colors">
28+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
30+
</svg>
31+
</div>
32+
<span class="text-2xl font-bold text-cp-green-500 font-mono">{{ cat_posts.size }}</span>
33+
</div>
34+
<h2 class="text-xl font-bold font-mono text-cp-dark-800 group-hover:text-cp-green-500 transition-colors mb-2">
35+
{{ cat_name }}
36+
</h2>
37+
<p class="text-sm text-cp-dark-600 font-mono">
38+
{{ cat_posts.size }} 篇文章
39+
</p>
40+
</a>
41+
{% endfor %}
42+
</div>
43+
44+
<!-- Posts by Category -->
45+
<div class="space-y-12">
46+
{% for category in sorted_categories %}
47+
{% assign cat_name = category[0] %}
48+
{% assign cat_posts = category[1] %}
49+
50+
<section id="{{ cat_name | slugify }}" class="scroll-mt-24">
51+
<!-- Category Header -->
52+
<div class="flex items-center gap-4 mb-6">
53+
<div class="w-10 h-10 rounded-lg bg-cp-green-500/10 flex items-center justify-center text-cp-green-500">
54+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
56+
</svg>
57+
</div>
58+
<h2 class="text-2xl font-bold font-mono text-cp-green-500">
59+
{{ cat_name }}
60+
</h2>
61+
<div class="flex-grow h-px bg-cp-dark-300"></div>
62+
<span class="text-sm text-cp-dark-500 font-mono">{{ cat_posts.size }} 篇文章</span>
63+
</div>
64+
65+
<!-- Posts Grid -->
66+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
67+
{% for post in cat_posts limit:6 %}
68+
<article class="card group overflow-hidden">
69+
<a href="{{ post.url | relative_url }}" class="flex gap-4 p-4">
70+
{% if post.image %}
71+
<div class="w-24 h-24 flex-shrink-0 rounded overflow-hidden">
72+
<img src="{{ post.image | relative_url }}" alt="{{ post.title }}" class="w-full h-full object-cover">
73+
</div>
74+
{% endif %}
75+
<div class="flex-grow min-w-0">
76+
<time datetime="{{ post.date | date_to_xmlschema }}" class="text-xs font-mono text-cp-dark-500">
77+
{{ post.date | date: "%Y-%m-%d" }}
78+
</time>
79+
<h3 class="font-mono font-bold text-cp-dark-800 group-hover:text-cp-green-500 transition-colors line-clamp-2 mt-1">
80+
{{ post.title }}
81+
</h3>
82+
{% if post.tags.size > 0 %}
83+
<div class="flex flex-wrap gap-1 mt-2">
84+
{% for tag in post.tags limit:2 %}
85+
<span class="text-xs font-mono text-cp-dark-500">#{{ tag }}</span>
86+
{% endfor %}
87+
</div>
88+
{% endif %}
89+
</div>
90+
</a>
91+
</article>
92+
{% endfor %}
93+
</div>
94+
95+
<!-- View All Link -->
96+
{% if cat_posts.size > 6 %}
97+
<div class="mt-4 text-center">
98+
<span class="text-sm text-cp-dark-500 font-mono">
99+
還有 {{ cat_posts.size | minus: 6 }} 篇文章...
100+
</span>
101+
</div>
102+
{% endif %}
103+
</section>
104+
{% endfor %}
105+
</div>
106+
107+
<!-- Back to Top -->
108+
<div class="text-center mt-12">
109+
<a href="#" class="inline-flex items-center gap-2 text-cp-dark-600 hover:text-cp-green-500 font-mono transition-colors">
110+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
111+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
112+
</svg>
113+
返回頂部
114+
</a>
115+
</div>
116+
</div>

0 commit comments

Comments
 (0)