-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-zhile.html
More file actions
890 lines (838 loc) · 39.5 KB
/
Copy pathzhuangzi-zhile.html
File metadata and controls
890 lines (838 loc) · 39.5 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>至乐 · 庄子 · 华粹新学</title>
<link rel="stylesheet" href="assets/common.css">
<style>
/* ===== 篇章头部 ===== */
.chapter-header {
max-width: 1200px;
margin: 0 auto;
padding: 2.5rem 2rem 1.5rem;
}
.chapter-title {
font-family: "Noto Serif SC", "Source Han Serif SC", serif;
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 0.3rem;
letter-spacing: 0.1em;
}
.chapter-subtitle {
font-family: "Noto Serif SC", serif;
font-size: 1.15rem;
color: var(--ink-light);
margin-bottom: 1.2rem;
}
.chapter-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.88rem;
color: var(--ink-light);
}
.meta-item .label { color: var(--ink-faint); }
.difficulty { display: inline-flex; gap: 2px; }
.difficulty .dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.difficulty .dot.active { background: var(--gold); }
.chapter-intro {
font-size: 1.05rem;
color: var(--ink-light);
max-width: 720px;
line-height: 2;
padding-left: 1rem;
border-left: 3px solid var(--accent);
}
/* ===== 阅读模式切换 ===== */
.reader-toolbar {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.mode-switch {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--paper-light);
}
.mode-btn {
padding: 0.5rem 1.2rem;
font-size: 0.88rem;
border: none;
background: transparent;
color: var(--ink-light);
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.mode-btn.active {
background: var(--ink);
color: var(--paper-light);
}
.mode-btn:hover:not(.active) { background: var(--highlight); }
.tip-text { font-size: 0.82rem; color: var(--ink-faint); }
/* ===== 左右对照区 ===== */
.reader-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
.reader-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--paper-light);
box-shadow: 0 2px 20px var(--shadow);
}
.reader-col { padding: 2rem 2rem; }
.reader-col.original {
border-right: 2px solid var(--border);
background: linear-gradient(180deg, #faf6ee 0%, #f5efe2 100%);
}
.col-label {
display: inline-block;
font-family: "Noto Serif SC", serif;
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--ink-faint);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
width: 100%;
}
/* 段落样式 */
.para-pair {
margin-bottom: 0.5rem;
border-radius: 8px;
transition: background 0.25s ease;
}
.orig-para {
font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
font-size: 1.18rem;
line-height: 2.2;
color: var(--ink);
padding: 1rem 1.2rem;
border-radius: 8px;
cursor: default;
transition: all 0.25s ease;
border-left: 3px solid transparent;
}
.trans-para {
font-size: 1.02rem;
line-height: 2;
color: var(--ink-light);
padding: 1rem 1.2rem;
border-radius: 8px;
cursor: default;
transition: all 0.25s ease;
border-left: 3px solid transparent;
}
.para-pair.highlight .orig-para,
.para-pair.highlight .trans-para {
background: var(--highlight);
border-left-color: var(--accent);
}
/* 注释词 */
.annot {
color: var(--accent);
border-bottom: 1px dashed var(--accent-light);
cursor: help;
position: relative;
}
.annot:hover::after {
content: attr(data-note);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--ink);
color: var(--paper-light);
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.82rem;
line-height: 1.5;
white-space: normal;
width: max-content;
max-width: 240px;
z-index: 50;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-family: "Noto Sans SC", sans-serif;
}
/* 漫画 */
.comic-block {
margin: 1.2rem 0;
border-radius: 10px;
overflow: hidden;
background: var(--comic-bg);
border: 1px solid var(--border);
}
.comic-svg { width: 100%; display: block; }
.comic-caption {
padding: 0.6rem 1rem;
font-size: 0.85rem;
color: var(--ink-faint);
text-align: center;
background: rgba(0,0,0,0.02);
border-top: 1px solid var(--border);
font-style: italic;
}
/* 阅读模式 */
.reader-grid.mode-original .reader-col.translation { display: none; }
.reader-grid.mode-original { grid-template-columns: 1fr; }
.reader-grid.mode-original .reader-col.original { border-right: none; }
.reader-grid.mode-trans .reader-col.original { display: none; }
.reader-grid.mode-trans { grid-template-columns: 1fr; }
/* ===== 背景与语境 ===== */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
.section-title {
font-family: "Noto Serif SC", serif;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--ink);
display: flex;
align-items: center;
gap: 0.6rem;
}
.section-title .icon {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
}
.context-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.context-card {
background: var(--paper-light);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
}
.context-card h4 {
font-family: "Noto Serif SC", serif;
font-size: 1.05rem;
margin-bottom: 0.8rem;
color: var(--accent);
}
.context-card p {
font-size: 0.95rem;
color: var(--ink-light);
line-height: 1.9;
}
/* ===== 现代视角 ===== */
.perspective-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.persp-card { border-radius: 10px; padding: 1.5rem; border: 1px solid; }
.persp-card.good { background: #f0f5ec; border-color: #8bab6a; }
.persp-card.discuss { background: #fdf6e3; border-color: #d4a843; }
.persp-card.warn { background: #f7ecea; border-color: #c2756a; }
.persp-card .persp-label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
display: flex; align-items: center; gap: 0.4rem;
}
.persp-card.good .persp-label { color: #5a7a3a; }
.persp-card.discuss .persp-label { color: #9a7520; }
.persp-card.warn .persp-label { color: #9a4a3a; }
.persp-card p {
font-size: 0.95rem;
line-height: 1.9;
color: var(--ink-light);
}
/* 思考题 */
.think-box {
background: linear-gradient(135deg, #2b2418 0%, #3d3426 100%);
border-radius: 12px;
padding: 2rem 2.5rem;
color: var(--paper);
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.think-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.think-box h4 {
font-family: "Noto Serif SC", serif;
font-size: 1.1rem;
margin-bottom: 0.6rem;
color: #f0d890;
}
.think-box p { font-size: 1.05rem; line-height: 1.9; color: #d8cfc0; }
.think-actions { margin-top: 1rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.think-btn {
padding: 0.5rem 1.5rem;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.08);
color: #d8cfc0;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.think-btn:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.4);
}
.think-btn.selected {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ===== 延伸阅读 ===== */
.further-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.further-card {
background: var(--paper-light);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.2rem 1.5rem;
text-decoration: none;
color: inherit;
transition: all 0.2s;
}
.further-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 12px var(--shadow);
transform: translateY(-2px);
}
.further-card .fc-tag {
font-size: 0.78rem; color: var(--accent);
letter-spacing: 0.1em; margin-bottom: 0.4rem;
}
.further-card .fc-title {
font-family: "Noto Serif SC", serif;
font-size: 1rem; margin-bottom: 0.3rem;
}
.further-card .fc-desc {
font-size: 0.85rem; color: var(--ink-faint); line-height: 1.6;
}
@media (max-width: 768px) {
.chapter-title { font-size: 2rem; }
.reader-grid { grid-template-columns: 1fr; }
.reader-col.original {
border-right: none;
border-bottom: 2px solid var(--border);
}
.context-grid,
.perspective-grid,
.further-grid { grid-template-columns: 1fr; }
.reader-container, .section, .chapter-header {
padding-left: 1rem; padding-right: 1rem;
}
}
</style>
</head>
<body>
<div id="site-header" data-active="zongheng"></div>
<!-- 篇章头部 -->
<header class="chapter-header">
<div class="body-breadcrumb">
<a href="index.html">诸子思想</a>
<span class="sep">›</span>
<a href="daoism-index.html">道家</a>
<span class="sep">›</span>
<a href="zhuangzi-index.html">庄子</a>
<span class="sep">›</span>
<span class="current">至乐</span>
</div>
<h1 class="chapter-title">至乐</h1>
<p class="chapter-subtitle">《庄子》外篇第十一 · 至乐无乐，生死一条</p>
<div class="chapter-meta">
<div class="meta-item">
<span class="label">难度</span>
<span class="difficulty">
<span class="dot active"></span>
<span class="dot active"></span>
<span class="dot"></span>
</span>
</div>
<div class="meta-item"><span class="label">阅读时长</span><span>约 14 分钟</span></div>
<div class="meta-item"><span class="label">所属流派</span><span>道家</span></div>
<div class="meta-item"><span class="label">成书时代</span><span>战国（庄子后学）</span></div>
</div>
<p class="chapter-intro">
世人追富逐贵、贪生恶死，以为这就是快乐；得到了又怕失去，终日惶惶。庄子偏在妻子坟前鼓盆而歌，对着路边髑髅讨论生死。他问：天下究竟有没有"最高的快乐"？答案出人意料——至乐无乐。
</p>
</header>
<!-- 阅读模式切换 -->
<div class="reader-toolbar">
<div class="mode-switch">
<button class="mode-btn active" data-mode="both">原文白话对照</button>
<button class="mode-btn" data-mode="original">仅看原文</button>
<button class="mode-btn" data-mode="trans">仅看白话</button>
</div>
<span class="tip-text">将鼠标移到任一段落上，左右两侧会同步高亮</span>
</div>
<!-- 左右对照阅读区 -->
<div class="reader-container">
<div class="reader-grid mode-both" id="readerGrid">
<!-- 左列：原文 -->
<div class="reader-col original">
<span class="col-label">原 文</span>
<div class="para-pair" data-idx="1">
<p class="orig-para">
天下有<span class="annot" data-note="最大、最高的快乐。至，极。">至乐</span>无有哉？有可以活身者无有哉？今奚为奚据？奚避奚处？奚就奚去？奚乐奚恶？
</p>
</div>
<div class="para-pair" data-idx="2">
<p class="orig-para">
夫天下之所尊者，富贵寿善也；所乐者，身安厚味美服好色音声也；所下者，贫贱夭恶也；所苦者，身不得安逸，口不得厚味，形不得美服，目不得好色，耳不得音声。若不得者，则大忧以惧，其为形也亦愚哉！
</p>
</div>
<div class="para-pair" data-idx="3">
<p class="orig-para">
夫富者，苦身疾作，多积财而不得尽用，其为形也亦外矣。夫贵者，夜以继日，思虑善否，其为形也亦疏矣。人之生也，与忧俱生，寿者<span class="annot" data-note="昏昏沉沉、神志不清的样子。">惛惛</span>，久忧不死，何苦也！其为形也亦远矣。烈士为天下见善矣，未足以活身。吾未知善之诚善邪，诚不善邪？若以为善矣，不足活身；以为不善矣，足以活人。
</p>
</div>
<div class="para-pair" data-idx="4">
<p class="orig-para">
今俗之所为与其所乐，吾又未知乐之果乐邪，果不乐邪？吾观夫俗之所乐，举群趣者，<span class="annot" data-note="jìng jìng，争先恐后、拼命追逐的样子。">謣謣</span>然如将不得已，而皆曰乐者，吾未之乐也，亦未之不乐也。果有乐无有哉？吾以无为诚乐矣，又俗之所大苦也。故曰："至乐无乐，至誉无誉。"
</p>
</div>
<div class="para-pair" data-idx="5">
<p class="orig-para">
庄子妻死，惠子吊之，庄子则方<span class="annot" data-note="jī jù，岔开两腿坐着，是一种不拘礼节的坐姿。">箕踞</span><span class="annot" data-note="敲击瓦盆。盆，瓦缶，古时可作乐器。">鼓盆</span>而歌。惠子曰："与人居，长子老身，死不哭亦足矣，又鼓盆而歌，不亦甚乎！"
</p>
</div>
<div class="para-pair" data-idx="6">
<p class="orig-para">
庄子曰："不然。是其始死也，我独何能无概然！察其始而本无生，非徒无生也而本无形，非徒无形也而本无气。杂乎芒芴之间，变而有气，气变而有形，形变而有生，今又变而之死，是相与为春秋冬夏四时行也。人且偃然寝于巨室，而我噭噭然随而哭之，自以为不通乎命，故止也。"
</p>
</div>
<div class="para-pair" data-idx="7">
<p class="orig-para">
庄子之楚，见空<span class="annot" data-note="dú lóu，死人的头骨。">髑髅</span>，<span class="annot" data-note="xiāo然，空枯的样子。">髐然</span>有形，撽以马捶，因而问之，曰："夫子贪生失理，而为此乎？将子有亡国之事，斧钺之诛，而为此乎？将子有不善之行，愧遗父母妻子之丑，而为此乎？将子有冻馁之患，而为此乎？将子之春秋故及此乎？"于是语卒，援髑髅，枕而卧。
</p>
</div>
<div class="para-pair" data-idx="8">
<p class="orig-para">
夜半，髑髅见梦曰："子之谈者似辩士。视子所言，皆生人之累也，死则无此矣。子欲闻死之说乎？"庄子曰："然。"髑髅曰："死，无君于上，无臣于下，亦无四时之事，从然以天地为春秋，虽南面王乐，不能过也。"……髑髅深矉蹙頞曰："吾安能弃南面王乐而复为人间之劳乎！"
</p>
</div>
<div class="para-pair" data-idx="9">
<p class="orig-para">
颜渊东之齐，孔子有忧色。……孔子曰："……吾恐回与齐侯言尧舜黄帝之道，而重以燧人神农之言。彼将内求于己而不得，不得则惑，人惑则死。"
</p>
</div>
<div class="para-pair" data-idx="10">
<p class="orig-para">
"且女独不闻邪？昔者海鸟止于鲁郊，鲁侯御而觞之于庙，奏九韶以为乐，具太牢以为膳。鸟乃眩视忧悲，不敢食一脔，不敢饮一杯，三日而死。此以己养养鸟也，非以鸟养养鸟也。……彼唯人言之恶闻，奚以夫譊譊为乎！"
</p>
</div>
</div>
<!-- 右列：白话翻译 + 漫画 -->
<div class="reader-col translation">
<span class="col-label">白 话 翻 译</span>
<div class="para-pair" data-idx="1">
<p class="trans-para">
天下究竟有没有最高的快乐呢？有没有可以保全生命的方法呢？现在该做什么、依据什么？回避什么、安于什么？趋向什么、离开什么？喜欢什么、厌恶什么？
</p>
</div>
<div class="para-pair" data-idx="2">
<p class="trans-para">
天下人所看重的，是富有、尊贵、长寿、好名声；所享受的，是身体安逸、丰盛饮食、漂亮衣服、绚丽色彩、悦耳音乐；所鄙视的，是贫穷、卑贱、短命、恶名；所痛苦的，是身体得不到安逸，嘴巴吃不到美味，身上穿不到好衣服，眼睛看不到美色，耳朵听不到音乐。如果得不到这些，就大为忧愁恐惧，这样对待身体也太愚蠢了！
</p>
</div>
<div class="para-pair" data-idx="3">
<p class="trans-para">
富有的人劳苦身体、拼命做事，积攒了许多钱财却不能全部享用，这样对待身体也太见外了。尊贵的人夜以继日，忧虑着吉凶祸福，这样对待身体也太疏远了。人一生下来就与忧愁相伴；长寿的人昏昏沉沉，长久忧愁而不死，这是多么痛苦啊！烈士被天下人称赞，却保不住自己的性命。我不知道这种善是真的善，还是真的不善？
</p>
</div>
<div class="para-pair" data-idx="4">
<p class="trans-para">
现在世俗所追求和所快乐的，我不知那快乐果真快乐，还是果真不快乐？我看世俗所喜欢的，大家一窝蜂地追逐，那种争先恐后的样子好像停不下来，人人都说快乐，我却不觉得快乐，也不觉得不快乐。究竟有没有真正的快乐呢？我认为清静无为才是真正的快乐，但这又是世俗人认为最痛苦的。所以说："最高的快乐就是没有快乐，最高的荣誉就是没有荣誉。"
</p>
<!-- 漫画1：世人逐乐 vs 无为诚乐 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="zsky1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8d8b8"/>
<stop offset="100%" stop-color="#d4c4a0"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#zsky1)"/>
<!-- 左侧：世人追逐（热闹、焦虑） -->
<g transform="translate(0,0)">
<!-- 地面 -->
<path d="M0 250 L250 250 L250 300 L0 300 Z" fill="#b8a878" opacity="0.4"/>
<!-- 三个奔跑追逐的小人 -->
<g transform="translate(60, 180)">
<!-- 第一个人（追钱） -->
<circle cx="0" cy="0" r="10" fill="#e8c8a8"/>
<rect x="-7" y="10" width="14" height="22" rx="3" fill="#8a6a3a"/>
<line x1="-7" y1="14" x2="-18" y2="28" stroke="#8a6a3a" stroke-width="3" stroke-linecap="round"/>
<line x1="7" y1="14" x2="14" y2="28" stroke="#8a6a3a" stroke-width="3" stroke-linecap="round"/>
<line x1="-4" y1="32" x2="-10" y2="50" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<line x1="4" y1="32" x2="14" y2="48" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<!-- 焦虑眉 -->
<line x1="-4" y1="-3" x2="0" y2="-1" stroke="#2b2418" stroke-width="1"/>
<line x1="0" y1="-1" x2="4" y2="-3" stroke="#2b2418" stroke-width="1"/>
<!-- 前方铜钱 -->
<circle cx="30" cy="20" r="9" fill="#b8893a"/>
<rect x="27" y="17" width="6" height="6" fill="#e8d8b8"/>
</g>
<g transform="translate(130, 185)">
<circle cx="0" cy="0" r="10" fill="#e8c8a8"/>
<rect x="-7" y="10" width="14" height="22" rx="3" fill="#6a7a5a"/>
<line x1="-4" y1="32" x2="-12" y2="50" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<line x1="4" y1="32" x2="12" y2="46" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<!-- 前方乌纱（贵） -->
<path d="M25 20 Q30 8 40 12 L38 22 Q32 22 28 24 Z" fill="#2b2418"/>
</g>
<g transform="translate(195, 195)">
<circle cx="0" cy="0" r="9" fill="#e8c8a8"/>
<rect x="-6" y="9" width="12" height="18" rx="3" fill="#7a5a4a"/>
<line x1="-3" y1="27" x2="-8" y2="42" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<line x1="3" y1="27" x2="10" y2="40" stroke="#5a4a3a" stroke-width="3" stroke-linecap="round"/>
<!-- 拄拐杖（寿） -->
<line x1="18" y1="5" x2="22" y2="45" stroke="#5a4a3a" stroke-width="2"/>
</g>
<text x="125" y="80" font-size="13" fill="#8a4a3a" text-anchor="middle" font-family="serif" opacity="0.8">举群趣之 · 謣謣然</text>
</g>
<!-- 中间分隔（淡墨线） -->
<line x1="250" y1="40" x2="250" y2="270" stroke="#8a7a5a" stroke-width="1" stroke-dasharray="4,4" opacity="0.4"/>
<!-- 右侧：庄子无为而坐（安静、自得） -->
<g transform="translate(370, 0)">
<path d="M120 250 L370 250 L370 300 L120 300 Z" fill="#8a9a7a" opacity="0.3"/>
<!-- 庄子倚坐石上 -->
<g transform="translate(60, 150)">
<!-- 石头 -->
<ellipse cx="0" cy="60" rx="55" ry="14" fill="#8a8a7a" opacity="0.6"/>
<!-- 身体（盘坐袍） -->
<path d="M-25,35 Q-30,5 0,-5 Q30,5 25,35 Q15,50 0,48 Q-15,50 -25,35 Z" fill="#4a6a5a"/>
<!-- 头颈 -->
<ellipse cx="0" cy="-18" rx="10" ry="12" fill="#e8c8a8"/>
<!-- 发髻 -->
<circle cx="0" cy="-30" r="7" fill="#3a3028"/>
<!-- 闭目微笑 -->
<path d="M-4,-19 Q-2,-17 0,-19" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M0,-19 Q2,-17 4,-19" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M-3,-12 Q0,-9 3,-12" stroke="#8a4a3a" stroke-width="1" fill="none"/>
<!-- 长须 -->
<path d="M-2,-8 Q-3,6 -6,14" stroke="#5a4a3a" stroke-width="0.8" fill="none" opacity="0.6"/>
<!-- 手放膝上 -->
<ellipse cx="-15" cy="30" rx="6" ry="4" fill="#e8c8a8"/>
<ellipse cx="15" cy="30" rx="6" ry="4" fill="#e8c8a8"/>
</g>
<!-- 一片云/清气 -->
<path d="M20 100 Q40 90 60 100 Q80 90 100 100" stroke="#8a9a8a" stroke-width="1.5" fill="none" opacity="0.5"/>
<text x="60" y="75" font-size="13" fill="#4a6a5a" text-anchor="middle" font-family="serif" opacity="0.9">无为诚乐</text>
</g>
</svg>
<div class="comic-caption">天下之所乐，举群趣之；吾以无为诚乐矣</div>
</div>
</div>
<div class="para-pair" data-idx="5">
<p class="trans-para">
庄子的妻子死了，惠子前去吊唁，却看见庄子正岔开两腿坐着，敲着瓦盆唱歌。惠子说："你和妻子一起生活，她为你生儿育女、年老身衰，死了你不哭也就够了，还敲盆唱歌，这不是太过分了吗！"
</p>
</div>
<div class="para-pair" data-idx="6">
<p class="trans-para">
庄子说："不是这样。她刚死的时候，我怎么能不感慨呢！但考察她最初本来就没有生命；不仅没有生命，而且本来就没有形体；不仅没有形体，而且本来就没有气息。在若有若无之间，变化而产生了气，气变化而成形体，形体变化而有了生命，现在又变化而到了死亡，这就和春夏秋冬四季运行一样。人家正安安稳稳地睡在天地这间大屋子里，我却嗷嗷地跟着哭，我自认为这是不通达天命，所以就不哭了。"
</p>
<!-- 漫画2：鼓盆而歌 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="zsky2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d8c8a0"/>
<stop offset="100%" stop-color="#c0ad88"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#zsky2)"/>
<!-- 地面 -->
<path d="M0 230 Q250 220 500 230 L500 300 L0 300 Z" fill="#a89868" opacity="0.4"/>
<!-- 远山 -->
<path d="M0 230 L70 180 L140 210 L220 170 L300 215 L380 185 L460 215 L500 200 L500 230 Z" fill="#8a9a7a" opacity="0.3"/>
<!-- 新坟（右侧小土丘） -->
<g transform="translate(370, 225)">
<path d="M-50 0 Q-30 -45 0 -48 Q30 -45 50 0 Z" fill="#8a7a5a" opacity="0.7"/>
<line x1="0" y1="-48" x2="0" y2="-70" stroke="#5a4a3a" stroke-width="2"/>
<!-- 坟头纸（白色） -->
<rect x="-8" y="-72" width="16" height="6" fill="#f0e8d8" opacity="0.8"/>
</g>
<!-- 庄子（左侧，箕踞鼓盆而歌） -->
<g transform="translate(140, 160)">
<!-- 瓦盆 -->
<ellipse cx="30" cy="55" rx="26" ry="8" fill="#8a6a4a"/>
<path d="M4 55 Q4 40 30 38 Q56 40 56 55 Z" fill="#a07a52"/>
<ellipse cx="30" cy="38" rx="26" ry="7" fill="#6a4a32"/>
<!-- 敲盆的棍子 -->
<line x1="45" y1="10" x2="35" y2="35" stroke="#5a4a3a" stroke-width="2.5" stroke-linecap="round"/>
<!-- 身体（岔腿坐姿） -->
<path d="M-20,20 Q-25,40 -40,55 L-15,58 Q-5,40 0,30 Q5,40 15,58 L40,55 Q25,40 20,20 Q10,8 0,8 Q-10,8 -20,20 Z" fill="#4a5a6a"/>
<!-- 头颈 -->
<ellipse cx="0" cy="-8" rx="11" ry="13" fill="#e8c8a8"/>
<circle cx="0" cy="-22" r="8" fill="#3a3028"/>
<!-- 仰头而歌（嘴张开） -->
<path d="M-4,-8 Q-2,-5 0,-7" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M0,-7 Q2,-5 4,-8" stroke="#2b2418" stroke-width="1" fill="none"/>
<ellipse cx="0" cy="2" rx="3" ry="2" fill="#8a3a2a"/>
<!-- 安然（无悲色） -->
<path d="M-8,-30 L-5,-33" stroke="#f0d890" stroke-width="1" opacity="0.6"/>
</g>
<!-- 歌声（音符的简化：几道气线） -->
<g stroke="#5a4a3a" stroke-width="1.2" fill="none" opacity="0.5">
<path d="M170 130 Q175 115 168 100"/>
<path d="M180 128 Q186 112 178 98"/>
</g>
<!-- 题字 -->
<text x="250" y="50" font-size="16" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.6" font-weight="700">鼓盆而歌</text>
</svg>
<div class="comic-caption">庄子妻死，箕踞鼓盆而歌，通达生死之命</div>
</div>
</div>
<div class="para-pair" data-idx="7">
<p class="trans-para">
庄子到楚国去，看见一个空骷髅，枯骨的形状还很分明。庄子用马鞭敲了敲，问道："先生是因为贪生失理才成了这样呢？还是有亡国之事、遭到斧钺砍杀才成了这样？还是有不善的行为、愧对父母妻子而羞愧自杀才成了这样？还是有冻饿的灾难才成了这样？还是享尽天年才成了这样呢？"说完，拉过骷髅，枕着它躺下了。
</p>
</div>
<div class="para-pair" data-idx="8">
<p class="trans-para">
半夜里，骷髅托梦给庄子说："你说话像个辩士。看你所说的，都是活人的拖累，死了就没有这些了。你想听听死了的情形吗？"庄子说："好。"骷髅说："死了，上面没有君主，下面没有臣子，也没有四季的操劳，悠然自在，以天地为春秋，即使是南面称王的快乐，也不能超过。"……骷髅紧皱眉头说："我怎么能放弃南面称王般的快乐，再去受人间的劳苦呢！"
</p>
<!-- 漫画3：庄子枕髑髅 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 280" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="zsky3" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a4a5a"/>
<stop offset="60%" stop-color="#5a6a78"/>
<stop offset="100%" stop-color="#7a8a8a"/>
</linearGradient>
</defs>
<!-- 夜晚天空 -->
<rect width="500" height="280" fill="url(#zsky3)"/>
<!-- 月亮 -->
<circle cx="400" cy="60" r="30" fill="#e8dcb8" opacity="0.85"/>
<circle cx="390" cy="55" r="28" fill="#5a6a78" opacity="0.3"/>
<!-- 星星 -->
<g fill="#f0e8c8" opacity="0.7">
<circle cx="80" cy="40" r="1.5"/>
<circle cx="150" cy="30" r="1"/>
<circle cx="220" cy="55" r="1.5"/>
<circle cx="300" cy="35" r="1"/>
<circle cx="450" cy="120" r="1.5"/>
<circle cx="60" cy="90" r="1"/>
<circle cx="470" cy="40" r="1"/>
</g>
<!-- 地面 -->
<path d="M0 230 Q250 220 500 230 L500 280 L0 280 Z" fill="#3a3a32" opacity="0.7"/>
<!-- 荒草 -->
<g stroke="#4a5a3a" stroke-width="1" opacity="0.6">
<path d="M40 230 L38 218 M44 230 L46 215 M280 230 L282 216 M300 230 L298 213 M440 230 L442 218"/>
</g>
<!-- 庄子侧卧枕髑髅（画面中央偏左） -->
<g transform="translate(180, 200)">
<!-- 身体（侧躺，袍） -->
<path d="M-80,10 Q-60,-15 -20,-18 L30,-15 Q50,-5 55,15 Q40,22 0,22 Q-50,22 -80,10 Z" fill="#4a5a6a"/>
<!-- 头枕在髑髅上 -->
<g transform="translate(-75, -10) rotate(-15)">
<!-- 髑髅（头骨） -->
<ellipse cx="0" cy="0" rx="18" ry="16" fill="#e8e0c8"/>
<!-- 眼窝 -->
<ellipse cx="-6" cy="-2" rx="4" ry="5" fill="#2a2a22"/>
<ellipse cx="6" cy="-2" rx="4" ry="5" fill="#2a2a22"/>
<!-- 鼻洞 -->
<path d="M-2 5 L0 10 L2 5 Z" fill="#2a2a22"/>
<!-- 牙齿 -->
<g stroke="#8a8a78" stroke-width="0.8">
<line x1="-7" y1="11" x2="7" y2="11"/>
<line x1="-4" y1="11" x2="-4" y2="14"/>
<line x1="0" y1="11" x2="0" y2="14"/>
<line x1="4" y1="11" x2="4" y2="14"/>
</g>
</g>
<!-- 庄子的脸（侧，闭眼安睡） -->
<g transform="translate(-55, -22)">
<ellipse cx="0" cy="0" rx="9" ry="11" fill="#e8c8a8" transform="rotate(-15)"/>
<path d="M-3,-2 Q0,-4 3,-2" stroke="#2b2418" stroke-width="1" fill="none" transform="rotate(-15)"/>
</g>
<!-- 发髻 -->
<circle cx="-70" cy="-35" r="7" fill="#3a3028"/>
</g>
<!-- 梦境气泡（髑髅与庄子对话） -->
<g transform="translate(330, 90)" opacity="0.9">
<circle cx="0" cy="0" r="55" fill="#f0e8d0" opacity="0.15" stroke="#e8dcb8" stroke-width="1" stroke-dasharray="3,3"/>
<!-- 梦中：王者形象（象征南面王乐） -->
<g transform="translate(0, 5)">
<!-- 王座 -->
<rect x="-22" y="10" width="44" height="35" rx="3" fill="#b8893a" opacity="0.6"/>
<rect x="-26" y="-5" width="52" height="18" rx="3" fill="#b8893a" opacity="0.5"/>
<!-- 戴冠小人 -->
<circle cx="0" cy="-15" r="8" fill="#e8c8a8"/>
<path d="M-9 -22 L-9 -30 L9 -30 L9 -22 Q0 -26 -9 -22 Z" fill="#2b2418"/>
<rect x="-2" y="-35" width="4" height="6" fill="#b8893a"/>
<path d="M-7,12 Q-10,25 -8,38 L8,38 Q10,25 7,12 Z" fill="#b23a2e"/>
<!-- 安闲表情 -->
<path d="M-3 -16 Q0 -14 3 -16" stroke="#2b2418" stroke-width="0.8" fill="none"/>
</g>
<text x="0" y="58" font-size="9" fill="#e8dcb8" text-anchor="middle" font-family="serif">南面王乐 · 无君于上</text>
</g>
<!-- 连线（从髑髅到梦境） -->
<path d="M130 175 Q220 120 280 110" stroke="#e8dcb8" stroke-width="1" stroke-dasharray="3,3" fill="none" opacity="0.4"/>
</svg>
<div class="comic-caption">夜半髑髅见梦：死，无君于上，无臣于下，虽南面王乐不能过也</div>
</div>
</div>
<div class="para-pair" data-idx="9">
<p class="trans-para">
颜渊要往东到齐国去，孔子面露忧色。子贡离席询问，孔子说："我担心颜渊向齐侯谈论尧、舜、黄帝之道，又推崇燧人、神农的言论。齐侯会在内心里要求自己却做不到，做不到就会产生疑惑，人一疑惑就会遭祸。"
</p>
</div>
<div class="para-pair" data-idx="10">
<p class="trans-para">
"你没听说过吗？从前有一只海鸟停在鲁国郊外，鲁侯把它迎进太庙，献酒给它喝，演奏《九韶》让它高兴，备好牛、羊、猪三牲作为膳食。海鸟却头晕目眩、忧愁悲伤，不敢吃一块肉，不敢喝一杯酒，三天就死了。这是用养人的方式养鸟，不是用养鸟的方式养鸟。鸟最怕听到人的声音，为什么还要弄得那么喧闹呢！"
</p>
</div>
</div>
</div>
</div>
<!-- 背景与语境 -->
<section class="section">
<h2 class="section-title">
<span class="icon">📜</span>
背景与语境
</h2>
<div class="context-grid">
<div class="context-card">
<h4>谁在说话</h4>
<p>《至乐》是《庄子》外篇的重要篇章，多认为出自庄子后学之手，但深得庄子精髓。篇名取自首句"天下有至乐无有哉"，通篇围绕"什么是真正的快乐"与"如何面对死亡"两个问题展开。</p>
</div>
<div class="context-card">
<h4>当时的处境</h4>
<p>战国乱世，生死无常。富者积财而不能尽用，贵者夜以继日思虑祸福，烈士求名而丧身。儒墨提倡仁义、兼爱，世人追逐富贵寿善。庄子这一派则追问：这些被普遍推崇的东西，真的能带来快乐吗？死亡是否一定是坏事？</p>
</div>
<div class="context-card">
<h4>古人怎么理解</h4>
<p>"鼓盆而歌"成为中国文化中达观生死的标志性意象。郭象注强调"未明而概，已达而止"，认为庄子并非无情，而是以理化情。"鲁侯养鸟"则被历代注家引申为治国之戒：为政当顺民之性，不可强以己意。</p>
</div>
</div>
</section>
<!-- 现代视角 -->
<section class="section">
<h2 class="section-title">
<span class="icon">🔍</span>
现代视角
</h2>
<div class="perspective-grid">
<div class="persp-card good">
<div class="persp-label">✦ 仍有价值</div>
<p>庄子对"富贵寿善"的拆解，几乎是对当代"成功焦虑"的预言。当赚钱本身成了目的、加班成了惯性，人正如他所说"苦身疾作，多积财而不得尽用"。"至乐无乐"提醒我们：真正的快乐不在拼命追逐某个目标，而在不被欲望绑架的自在状态。这与积极心理学对"享乐主义适应"的观察惊人一致。</p>
</div>
<div class="persp-card discuss">
<div class="persp-label">◆ 需要辨析</div>
<p>"鼓盆而歌"常被误读为冷酷或故作洒脱。庄子自己说"是其始死也，我独何能无概然"——他并非不悲伤，而是用对自然规律的理解安顿悲伤。今天我们不必照搬"不哭"的形式，却可以学习这种态度：承认悲伤，也承认死亡是生命的一部分，不让恐惧和哀伤彻底吞没自己。</p>
</div>
<div class="persp-card warn">
<div class="persp-label">▲ 明确过时</div>
<p>髑髅赞美死亡"无君于上、无臣于下"，透露出对一切社会关系的否定，这只能是乱世中的激愤之语，不能当作普遍结论。现代社会的价值恰恰在于：人可以在责任与关系中获得意义，而不必通过取消一切责任来获得轻松。"鲁侯养鸟"的教训是对的，但彻底出世并非现代人的答案。</p>
</div>
</div>
<div class="think-box">
<div class="think-icon">◈</div>
<div>
<h4>思考题</h4>
<p>在你的生活里，有哪些"世人举群趣之"、你也跟着追逐，得到后却发现"吾未之乐也"的东西？如果用"至乐无乐"重新审视，你愿意放下哪一样？再想一层：庄子说生死如"四时行"，如果把死亡当作生命自然的一环而不是纯粹的恐惧，你会怎样重新安排当下的生活？</p>
<div class="think-actions">
<button class="think-btn">我愿意试着放下</button>
<button class="think-btn">有些不能放</button>
<button class="think-btn">我还在想</button>
</div>
</div>
</div>
</section>
<!-- 延伸阅读 -->
<section class="section">
<h2 class="section-title">
<span class="icon">🔗</span>
延伸阅读
</h2>
<div class="further-grid">
<a href="zhuangzi-dazongshi.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·大宗师》</div>
<div class="fc-desc">内篇论道与生死的核心篇章，"相濡以沫不如相忘江湖"、"安时而处顺"皆出此篇。</div>
</a>
<a href="zhuangzi-yangshengzhu.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·养生主》</div>
<div class="fc-desc">庖丁解牛，讲如何在有限生命中不被消耗，与《至乐》的"活身"之问相呼应。</div>
</a>
<a href="zhuangzi-qiushui.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·秋水》</div>
<div class="fc-desc">外篇名篇，同借对话寓言论小大之辨、价值之相对性，可与本篇连读。</div>
</a>
</div>
</section>
<div id="site-footer"></div>
<script src="assets/common.js"></script>
<script>
const pairs = document.querySelectorAll('.para-pair');
function clearHighlights() {
pairs.forEach(p => p.classList.remove('highlight'));
}
pairs.forEach(pair => {
pair.addEventListener('mouseenter', () => {
clearHighlights();
const idx = pair.dataset.idx;
document.querySelectorAll('.para-pair[data-idx="' + idx + '"]').forEach(p => {
p.classList.add('highlight');
});
});
pair.addEventListener('mouseleave', clearHighlights);
});
const modeBtns = document.querySelectorAll('.mode-btn');
const readerGrid = document.getElementById('readerGrid');
modeBtns.forEach(btn => {
btn.addEventListener('click', () => {
modeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
readerGrid.className = 'reader-grid mode-' + btn.dataset.mode;
});
});
document.querySelectorAll('.think-actions').forEach(group => {
group.querySelectorAll('.think-btn').forEach(btn => {
btn.addEventListener('click', () => {
group.querySelectorAll('.think-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
});
});
});
</script>
</body>
</html>