Skip to content

Commit d4ccd6f

Browse files
awesome-dogeawesome-doge
committed
優化書籍頁面排版與樣式
- 重新設計書籍詳情頁 layout，使用卡片式 header - 新增終端機風格的 code block（macOS 視窗按鈕） - 為書籍頁面新增專用 CSS 樣式（標題、表格、引用等） - 移除所有產品的 hero_image，修正 hero 重複顯示問題 - 更新 Mastering the Lightning Network 內容 - 新增 sw.js 防止 Service Worker 404 錯誤 - 新增 BIP Guide、Bitcoin Dev Guide 等資源
1 parent 2f7a569 commit d4ccd6f

22 files changed

+872
-227
lines changed

‎_includes/product-card.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{% comment %}
2+
Product Card Component - 翻譯成果展示版
3+
Usage: {% include product-card.html product=product %}
4+
Features: 封面、標題、作者、難度進度條、描述
5+
{% endcomment %}
6+
7+
<a href="{{ site.baseurl }}{{ include.product.url }}" class="group block card p-0 overflow-hidden hover:border-cp-green-500 transition-all duration-300">
8+
<!-- Image -->
9+
<div class="relative aspect-[4/3] bg-cp-dark-200 overflow-hidden">
10+
{% if include.product.image %}
11+
<img src="{{ include.product.image }}" alt="{{ include.product.title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
12+
{% else %}
13+
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-cp-dark-200 to-cp-dark-300">
14+
<span class="text-4xl text-cp-dark-400">📖</span>
15+
</div>
16+
{% endif %}
17+
18+
<!-- Language Badge -->
19+
<div class="absolute top-2 right-2">
20+
{% if include.product.lang == 'zh' %}
21+
<span class="px-2 py-1 text-xs font-bold font-mono bg-cp-orange text-white rounded shadow">繁中</span>
22+
{% else %}
23+
<span class="px-2 py-1 text-xs font-bold font-mono bg-gray-600 text-white rounded shadow">EN</span>
24+
{% endif %}
25+
</div>
26+
</div>
27+
28+
<!-- Content -->
29+
<div class="p-3">
30+
<!-- Title -->
31+
<h3 class="font-mono font-bold text-sm text-cp-dark-800 group-hover:text-cp-green-500 transition-colors line-clamp-1 mb-1">
32+
{{ include.product.title }}
33+
</h3>
34+
35+
<!-- Subtitle (Chinese name) -->
36+
{% if include.product.subtitle %}
37+
<p class="text-xs text-cp-green-600 font-mono mb-2 line-clamp-1">
38+
{{ include.product.subtitle }}
39+
</p>
40+
{% endif %}
41+
42+
<!-- Author -->
43+
{% if include.product.author %}
44+
<p class="text-xs text-cp-dark-500 mb-2 line-clamp-1">
45+
<span class="text-cp-dark-400">by</span> {{ include.product.author }}
46+
</p>
47+
{% endif %}
48+
49+
<!-- Difficulty Bar -->
50+
{% if include.product.difficulty %}
51+
<div class="mb-2">
52+
<div class="flex items-center justify-between text-xs mb-1">
53+
<span class="text-cp-dark-500 font-mono">難度</span>
54+
<span class="text-cp-dark-600 font-mono">
55+
{% case include.product.difficulty %}
56+
{% when 1 %}入門
57+
{% when 2 %}基礎
58+
{% when 3 %}中級
59+
{% when 4 %}進階
60+
{% when 5 %}專家
61+
{% endcase %}
62+
</span>
63+
</div>
64+
<div class="h-1.5 bg-cp-dark-300 rounded-full overflow-hidden">
65+
{% assign diff_width = include.product.difficulty | times: 20 %}
66+
{% if include.product.difficulty <= 2 %}
67+
<div class="h-full bg-cp-green-500 rounded-full" style="width: {{ diff_width }}%"></div>
68+
{% elsif include.product.difficulty == 3 %}
69+
<div class="h-full bg-yellow-500 rounded-full" style="width: {{ diff_width }}%"></div>
70+
{% else %}
71+
<div class="h-full bg-cp-orange rounded-full" style="width: {{ diff_width }}%"></div>
72+
{% endif %}
73+
</div>
74+
</div>
75+
{% endif %}
76+
77+
<!-- Read Button -->
78+
{% if include.product.read_url %}
79+
<div class="pt-2 border-t border-cp-dark-300">
80+
<span class="inline-flex items-center text-xs font-mono text-cp-green-500 group-hover:text-cp-green-400">
81+
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
82+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
83+
</svg>
84+
線上閱讀
85+
</span>
86+
</div>
87+
{% endif %}
88+
</div>
89+
</a>

‎_layouts/default.html‎

Lines changed: 70 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,73 @@
1-
{% if page.menubar and page.show_sidebar %}
2-
{% assign content_width = 'is-4' %}
3-
{% elsif page.menubar or page.show_sidebar %}
4-
{% assign content_width = 'is-8' %}
5-
{% else %}
6-
{% assign content_width = 'is-12' %}
7-
{% endif %}
81
<!DOCTYPE html>
9-
<html>
2+
<html lang="{{ site.lang | default: 'zh-TW' }}" class="dark">
3+
<head>
104
{% include head.html %}
11-
<body>
12-
{% include header.html %}
13-
{% unless page.hide_hero %}
14-
{% include hero.html %}
15-
{% endunless %}
16-
{% include callouts.html %}
17-
<section class="section">
18-
<div class="container">
19-
<div class="columns">
20-
{% if page.menubar %}
21-
<div class="column is-4-desktop is-4-tablet">
22-
{% include menubar.html %}
23-
</div>
24-
{% endif %}
25-
<div class="column {{ content_width }}">
26-
{% include tabs.html %}
27-
{{ content }}
28-
</div>
29-
{% if site.posts and page.show_sidebar %}
30-
<div class="column is-4-desktop is-12-tablet">
31-
{% include latest-posts.html %}
32-
</div>
33-
{% endif %}
34-
</div>
35-
</div>
36-
</section>
37-
{% unless page.hide_footer %}
38-
{% include footer.html %}
39-
{% endunless %}
40-
<script src="{{ site.baseurl }}/assets/js/app.js" type="text/javascript"></script>
41-
{%- include footer-scripts.html -%}
42-
</body>
43-
</html>
5+
</head>
6+
<body class="min-h-screen flex flex-col bg-cp-dark text-cp-dark-800">
7+
<!-- Matrix Rain Background -->
8+
{% if site.theme_settings.enable_matrix %}
9+
<div id="matrix-rain" class="matrix-rain"></div>
10+
{% endif %}
11+
12+
<!-- Scanlines Effect -->
13+
{% if site.theme_settings.enable_scanlines %}
14+
<div class="scanlines pointer-events-none fixed inset-0 z-50"></div>
15+
{% endif %}
16+
17+
<!-- Reading Progress Bar -->
18+
<div id="reading-progress" class="reading-progress" style="width: 0%;"></div>
19+
20+
<!-- Skip to Content (a11y) -->
21+
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-cp-green-600 focus:text-cp-dark focus:rounded">
22+
跳至主要內容
23+
</a>
24+
25+
<!-- Header / Navigation -->
26+
{% include header.html %}
27+
28+
<!-- Hero Section -->
29+
{% unless page.hide_hero or layout.hide_hero %}
30+
{% include hero.html %}
31+
{% endunless %}
32+
33+
<!-- Main Content -->
34+
<main id="main-content" class="flex-grow">
35+
<div class="container mx-auto px-4 py-8 max-w-7xl">
36+
<div class="flex flex-col lg:flex-row gap-8">
4437

38+
<!-- Sidebar (Left) - Optional Menu -->
39+
{% if page.menubar %}
40+
<aside class="lg:w-64 flex-shrink-0" role="navigation" aria-label="側邊選單">
41+
{% include menubar.html %}
42+
</aside>
43+
{% endif %}
44+
45+
<!-- Main Content Area -->
46+
<article class="flex-grow min-w-0 {% if page.show_sidebar %}lg:max-w-4xl{% else %}max-w-4xl mx-auto{% endif %}">
47+
{{ content }}
48+
</article>
49+
50+
<!-- Sidebar (Right) - Latest Posts -->
51+
{% if page.show_sidebar and site.posts.size > 0 %}
52+
<aside class="lg:w-80 flex-shrink-0" role="complementary" aria-label="最新文章">
53+
{% include sidebar.html %}
54+
</aside>
55+
{% endif %}
56+
57+
</div>
58+
</div>
59+
</main>
60+
61+
<!-- Footer -->
62+
{% unless page.hide_footer %}
63+
{% include footer.html %}
64+
{% endunless %}
65+
66+
<!-- Search Modal -->
67+
{% include search-modal.html %}
68+
69+
<!-- Scripts -->
70+
<script src="{{ '/assets/js/app.js' | relative_url }}"></script>
71+
{% include footer-scripts.html %}
72+
</body>
73+
</html>

‎_layouts/product.html‎

Lines changed: 105 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,119 @@
11
---
22
layout: default
3+
hide_hero: true
34
---
45

5-
<div class="columns is-multiline">
6+
<article class="book-detail max-w-4xl mx-auto">
7+
<!-- Breadcrumb -->
8+
<nav class="flex items-center gap-2 text-sm font-mono text-cp-dark-600 mb-8">
9+
<a href="{{ '/' | relative_url }}" class="hover:text-cp-green-500 transition-colors">
10+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
11+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
12+
</svg>
13+
</a>
14+
<span class="text-cp-dark-500">/</span>
15+
<a href="{{ '/markdown/products/' | relative_url }}" class="hover:text-cp-green-500 transition-colors">書籍</a>
16+
<span class="text-cp-dark-500">/</span>
17+
<span class="text-cp-green-500">{{ page.title | truncate: 30 }}</span>
18+
</nav>
619

7-
<div class="column is-6">
8-
<figure class="image is-4by3">
9-
<img src="{{ page.image }}" />
10-
</figure>
11-
</div>
20+
<!-- Book Header Card -->
21+
<header class="card p-6 mb-8">
22+
<div class="flex flex-col md:flex-row gap-6">
23+
<!-- Cover Image -->
24+
{% if page.image %}
25+
<div class="flex-shrink-0 mx-auto md:mx-0">
26+
<div class="w-36 md:w-44 rounded-lg overflow-hidden shadow-lg border border-cp-dark-400">
27+
<img
28+
src="{{ page.image | relative_url }}"
29+
alt="{{ page.title }}"
30+
class="w-full h-auto"
31+
>
32+
</div>
33+
</div>
34+
{% endif %}
35+
36+
<!-- Book Info -->
37+
<div class="flex-1 text-center md:text-left">
38+
<!-- Title -->
39+
<h1 class="text-2xl md:text-3xl font-bold font-mono text-cp-green-500 mb-2 leading-tight">
40+
{{ page.title }}
41+
</h1>
1242

13-
<div class="column is-6">
14-
<p class="title is-3">{{ page.title }}</p>
15-
<p class="subtitle is-3">{{ page.subtitle }}</p>
16-
<p class="title is-4 has-text-right">{{ page.price }}</p>
17-
{% if page.product_code %}
18-
<p class="subtitle is-5 has-text-right">{{ page.product_code }}</p>
43+
{% if page.subtitle %}
44+
<p class="text-base md:text-lg text-cp-dark-600 font-mono mb-3">
45+
{{ page.subtitle }}
46+
</p>
1947
{% endif %}
20-
21-
{% if page.rating %}
22-
{% include rating.html rating=page.rating %}
48+
49+
<!-- Author -->
50+
{% if page.author %}
51+
<p class="text-sm text-cp-dark-500 mb-4">
52+
<svg class="w-4 h-4 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
54+
</svg>
55+
{{ page.author }}
56+
</p>
2357
{% endif %}
24-
25-
{% if page.features %}
26-
<div class="content">
27-
{% for feature in page.features %}
28-
<p>
29-
<span class="icon">
30-
{% if feature.icon %}
31-
<i class="fas {{ feature.icon }}"></i>
32-
{% else %}
33-
<i class="fas fa-circle fa-xs"></i>
34-
{% endif %}
35-
</span>
36-
<span>{{ feature.label }}</span></p>
37-
{% endfor %}
58+
59+
<!-- Badges -->
60+
<div class="flex flex-wrap gap-2 mb-4 justify-center md:justify-start">
61+
{% if page.lang == 'zh' %}
62+
<span class="px-3 py-1 text-xs font-mono font-bold bg-cp-orange/20 text-cp-orange rounded-full">繁體中文</span>
63+
{% elsif page.lang == 'en' %}
64+
<span class="px-3 py-1 text-xs font-mono font-bold bg-gray-500/20 text-gray-400 rounded-full">English</span>
65+
{% endif %}
66+
67+
{% if page.difficulty %}
68+
<span class="px-3 py-1 text-xs font-mono bg-cp-dark-300 text-cp-dark-600 rounded-full">
69+
{% case page.difficulty %}
70+
{% when 1 %}入門
71+
{% when 2 %}基礎
72+
{% when 3 %}中級
73+
{% when 4 %}進階
74+
{% when 5 %}專家
75+
{% endcase %}
76+
</span>
77+
{% endif %}
78+
79+
<span class="px-3 py-1 text-xs font-mono font-bold bg-cp-green-500/20 text-cp-green-500 rounded-full">免費</span>
3880
</div>
81+
82+
<!-- Description -->
83+
{% if page.description %}
84+
<p class="text-sm text-cp-dark-700 leading-relaxed mb-5 max-w-2xl">
85+
{{ page.description }}
86+
</p>
3987
{% endif %}
40-
</div>
4188

42-
<div class="column is-12">
43-
<p class="title is-4">描述</p>
44-
<div class="content">
45-
46-
47-
{{ content }}
89+
<!-- Action Buttons -->
90+
<div class="flex flex-wrap gap-3 justify-center md:justify-start">
91+
{% if page.read_url %}
92+
<a href="{{ page.read_url }}" target="_blank" rel="noopener noreferrer"
93+
class="inline-flex items-center gap-2 px-5 py-2.5 bg-cp-green-500 text-cp-dark font-mono text-sm font-bold rounded-lg hover:bg-cp-green-400 transition-all hover:shadow-glow-green">
94+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
95+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
96+
</svg>
97+
線上閱讀
98+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
99+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
100+
</svg>
101+
</a>
102+
{% endif %}
103+
<a href="{{ '/markdown/products/' | relative_url }}"
104+
class="inline-flex items-center gap-2 px-5 py-2.5 border border-cp-dark-400 text-cp-dark-700 font-mono text-sm rounded-lg hover:border-cp-green-500 hover:text-cp-green-500 transition-all">
105+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
106+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
107+
</svg>
108+
所有書籍
109+
</a>
48110
</div>
111+
</div>
49112
</div>
113+
</header>
50114

51-
{% if site.data.reviews[page.product_code] %}
52-
<div class="column is-12">
53-
<p class="title is-4">Reviews</p>
54-
{% for review in site.data.reviews[page.product_code] %}
55-
{% include review.html %}
56-
{% endfor %}
57-
</div>
58-
{% endif %}
59-
60-
</div>
61-
115+
<!-- Content -->
116+
<div class="book-content">
117+
{{ content }}
118+
</div>
119+
</article>

0 commit comments

Comments
 (0)