-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-dazongshi.html
More file actions
876 lines (827 loc) · 33.6 KB
/
Copy pathzhuangzi-dazongshi.html
File metadata and controls
876 lines (827 loc) · 33.6 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
<!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-header .book-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
color: var(--accent);
text-decoration: none;
margin-bottom: 1rem;
padding: 0.3rem 0.8rem;
border: 1px solid var(--accent);
border-radius: 20px;
transition: all 0.2s;
}
.chapter-header .book-link:hover {
background: var(--accent);
color: #fff;
}
.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 {
background: var(--highlight);
border-left-color: var(--accent);
}
.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;
}
.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 active"></span>
</span>
</div>
<div class="meta-item">
<span class="label">阅读时长</span>
<span>约 18 分钟</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">
知天之所为，知人之所为者，至矣。知天之所为者，天而生也；知人之所为者，以其知之所知以养其知之所不知，终其天年而不中道夭者，是知之盛也。虽然，有患。夫知有所待而后当，其所待者特未定也。
</p>
</div>
<div class="para-pair" data-idx="2">
<p class="orig-para">
夫道，有情有信，无为无形；可传而不可受，可得而不可见；自本自根，未有天地，自古以固存；神鬼神帝，生天生地；在<span class="annot" data-note="太极，指宇宙未分化前的状态。">太极</span>之先而不为高，在<span class="annot" data-note="六极，指上下四方，即整个宇宙空间。">六极</span>之下而不为深，先天地生而不为久，长于上古而不为老。<span class="annot" data-note="传说中的上古帝王。">狶韦氏</span>得之，以挈天地；<span class="annot" data-note="即伏羲氏，传说中的人文始祖。">伏戏氏</span>得之，以袭气母。
</p>
</div>
<div class="para-pair" data-idx="3">
<p class="orig-para">
子祀、子舆、子犁、子来四人相与语曰："孰能以无为首，以生为脊，以死为<span class="annot" data-note="kāo，臀部，引申为末端。">尻</span>，孰知死生存亡之一体者，吾与之友矣。"四人相视而笑，莫逆于心，遂相与为友。俄而子舆有病，子祀往问之。曰："伟哉！夫造物者将以予为此拘拘也！"<span class="annot" data-note="曲屈、不伸展的样子。">曲偻发背</span>，上有五管，<span class="annot" data-note="面颊隐藏在肚脐处，形容弯腰驼背之极。齐，通'脐'。">颐隐于齐</span>，肩高于顶，<span class="annot" data-note="颈项的穴位，指颈椎弯曲朝天。">句赘指天</span>。阴阳之气有<span class="annot" data-note="lì，凌乱、不和。">沴</span>，其心闲而无事，<span class="annot" data-note="pián xiān，蹒跚、走路不稳。">跰𫏨而鉴于井</span>，曰："嗟乎！夫造物者又将以予为此拘拘也！"
</p>
</div>
<div class="para-pair" data-idx="4">
<p class="orig-para">
泉涸，鱼相与处于陆，相<span class="annot" data-note="xǔ，张口呼气。">呴</span>以湿，相濡以沫，不如相忘于江湖。
</p>
</div>
<div class="para-pair" data-idx="5">
<p class="orig-para">
颜回曰："回益矣。"仲尼曰："何谓也？"曰："回忘礼乐矣。"曰："可矣，犹未也。"他日，复见，曰："回益矣。"曰："何谓也？"曰："回忘仁义矣。"曰："可矣，犹未也。"他日，复见，曰："回益矣。"曰："何谓也？"曰："回坐忘矣。"仲尼<span class="annot" data-note="cù rán，惊奇、神色变动的样子。">蹴然</span>曰："何谓坐忘？"颜回曰："堕肢体，黜聪明，离形去知，同于大通，此谓坐忘。"
</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>
<!-- 漫画1：四子相与为友 / 子舆病而不怨 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="dzSky1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8d8b8"/>
<stop offset="100%" stop-color="#d4c4a0"/>
</linearGradient>
<radialGradient id="dzWell" cx="0.5" cy="0.3" r="0.7">
<stop offset="0%" stop-color="#6a7a8a"/>
<stop offset="100%" stop-color="#2a3a4a"/>
</radialGradient>
</defs>
<!-- 背景 -->
<rect width="500" height="320" fill="url(#dzSky1)"/>
<!-- 远山 -->
<path d="M0 200 L60 160 L120 185 L180 150 L240 180 L300 155 L360 175 L420 145 L500 175 L500 220 L0 220 Z" fill="#a09070" opacity="0.3"/>
<!-- 地面 -->
<rect y="220" width="500" height="100" fill="#c9b896"/>
<path d="M0 220 Q125 215 250 220 T500 218" stroke="#b09a78" stroke-width="1.5" fill="none"/>
<!-- 四位友人（远景，围坐于松下） -->
<g transform="translate(60, 180)" opacity="0.85">
<!-- 松树 -->
<path d="M30,40 L30,0" stroke="#5a4030" stroke-width="3"/>
<ellipse cx="30" cy="-5" rx="25" ry="12" fill="#4a5a3a" opacity="0.7"/>
<ellipse cx="30" cy="-18" rx="20" ry="10" fill="#4a5a3a" opacity="0.7"/>
<!-- 四人围坐（简化为小身影） -->
<circle cx="5" cy="48" r="6" fill="#4a3f35"/>
<rect x="0" y="52" width="10" height="12" rx="3" fill="#6a5a4a"/>
<circle cx="25" cy="48" r="6" fill="#4a3f35"/>
<rect x="20" y="52" width="10" height="12" rx="3" fill="#8a6a4a"/>
<circle cx="45" cy="48" r="6" fill="#4a3f35"/>
<rect x="40" y="52" width="10" height="12" rx="3" fill="#5a4a3a"/>
<circle cx="65" cy="48" r="6" fill="#4a3f35"/>
<rect x="60" y="52" width="10" height="12" rx="3" fill="#7a5a3a"/>
</g>
<!-- 井（近景右侧） -->
<g transform="translate(350, 200)">
<!-- 井台 -->
<ellipse cx="50" cy="80" rx="55" ry="15" fill="#8a7a6a"/>
<rect x="5" y="40" width="90" height="45" fill="#a09080"/>
<ellipse cx="50" cy="40" rx="45" ry="12" fill="#6a5a4a"/>
<ellipse cx="50" cy="40" rx="38" ry="10" fill="url(#dzWell)"/>
<!-- 井中水波 -->
<path d="M20 42 Q35 38 50 42 T80 40" stroke="#8ab0c0" stroke-width="0.8" fill="none" opacity="0.5"/>
<!-- 井架 -->
<line x1="5" y1="40" x2="-5" y2="-20" stroke="#5a4030" stroke-width="3"/>
<line x1="95" y1="40" x2="105" y2="-20" stroke="#5a4030" stroke-width="3"/>
<line x1="-5" y1="-20" x2="105" y2="-20" stroke="#5a4030" stroke-width="3"/>
</g>
<!-- 子舆（弯腰驼背，照井） -->
<g transform="translate(310, 195)">
<!-- 弯曲的身体 -->
<path d="M20,30 Q15,10 35,5 Q50,0 55,15 Q58,30 45,35" fill="#8a6a4a" stroke="#5a4030" stroke-width="1"/>
<!-- 头（低垂） -->
<circle cx="30" cy="5" r="8" fill="#d4b896"/>
<!-- 发髻 -->
<path d="M26,-2 Q30,-8 34,-2" fill="#3a3028"/>
<!-- 衣袍 -->
<path d="M15,30 Q10,50 20,65 L50,65 Q60,50 55,30 Z" fill="#7a5a3a" opacity="0.9"/>
<!-- 拐杖 -->
<line x1="60" y1="20" x2="65" y2="65" stroke="#5a4030" stroke-width="2"/>
<!-- 面部（侧脸，神情平静） -->
<circle cx="27" cy="6" r="1" fill="#2b2418"/>
</g>
<!-- 墨迹点缀 -->
<g opacity="0.15" fill="#2b2418">
<circle cx="150" cy="80" r="20"/>
<circle cx="400" cy="60" r="15"/>
<circle cx="80" cy="120" r="10"/>
</g>
<!-- 朱砂印 -->
<rect x="430" y="270" width="28" height="28" fill="#b23a2e" opacity="0.8" rx="2"/>
<text x="444" y="290" font-size="10" fill="#f4ede0" text-anchor="middle" font-family="serif">道</text>
</svg>
<div class="comic-caption">四人相视而笑，莫逆于心；子舆病而鉴井，顺而不怨</div>
</div>
</div>
<div class="para-pair" data-idx="4">
<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="dzWater1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8aa8b8"/>
<stop offset="100%" stop-color="#4a6b7a"/>
</linearGradient>
<linearGradient id="dzLand" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d4c4a0"/>
<stop offset="100%" stop-color="#b09a78"/>
</linearGradient>
</defs>
<!-- 上半：干涸陆地（左） -->
<rect x="0" y="0" width="250" height="300" fill="url(#dzLand)"/>
<!-- 干裂纹理 -->
<g stroke="#8a7a60" stroke-width="0.8" fill="none" opacity="0.5">
<path d="M30 80 L80 120 L60 160"/>
<path d="M120 50 L150 100 L180 90"/>
<path d="M200 120 L170 160 L200 200"/>
<path d="M50 200 L100 180 L130 220"/>
<path d="M20 250 L70 240 L90 270"/>
</g>
<!-- 两条相濡以沫的鱼 -->
<g transform="translate(80, 140)">
<!-- 鱼1 -->
<path d="M0,20 Q25,5 55,15 Q60,20 55,25 Q25,35 0,20 Z" fill="#8a7a5a" opacity="0.85"/>
<path d="M0,20 L-12,12 L-8,20 L-12,28 Z" fill="#6a5a4a"/>
<circle cx="48" cy="18" r="2" fill="#2b2418"/>
<!-- 鱼2 -->
<path d="M80,25 Q55,10 25,20 Q20,25 25,30 Q55,40 80,25 Z" fill="#9a8a6a" opacity="0.85"/>
<path d="M80,25 L92,17 L88,25 L92,33 Z" fill="#7a6a5a"/>
<circle cx="32" cy="23" r="2" fill="#2b2418"/>
<!-- 湿气/口沫 -->
<g fill="#c8d8e0" opacity="0.6">
<circle cx="40" cy="18" r="2"/>
<circle cx="45" cy="22" r="1.5"/>
<circle cx="38" cy="25" r="1"/>
<circle cx="42" cy="20" r="1"/>
</g>
</g>
<!-- 枯枝 -->
<path d="M20 260 Q60 250 100 260" stroke="#6a5040" stroke-width="2" fill="none"/>
<!-- 分界线 -->
<line x1="250" y1="0" x2="250" y2="300" stroke="#5a4030" stroke-width="2" stroke-dasharray="4,3"/>
<!-- 下半：江湖水阔（右） -->
<rect x="250" y="0" width="250" height="300" fill="url(#dzWater1)"/>
<!-- 水波 -->
<g stroke="#a8c0d0" stroke-width="1" fill="none" opacity="0.4">
<path d="M260 60 Q290 55 320 60 T380 58 T450 62"/>
<path d="M260 100 Q300 95 340 100 T420 98 T480 102"/>
<path d="M260 150 Q310 145 360 150 T460 148"/>
<path d="M260 200 Q300 195 340 200 T420 198 T480 202"/>
<path d="M260 250 Q310 245 360 250 T460 248"/>
</g>
<!-- 远山 -->
<path d="M250 100 L290 70 L330 90 L380 60 L420 85 L460 65 L500 90 L500 120 L250 120 Z" fill="#6a8a9a" opacity="0.3"/>
<!-- 两条鱼相忘于江湖（各自悠游，方向相反） -->
<g transform="translate(290, 160)">
<path d="M0,15 Q20,3 40,12 Q44,15 40,18 Q20,27 0,15 Z" fill="#5a7a8a" opacity="0.7"/>
<path d="M0,15 L-8,8 L-5,15 L-8,22 Z" fill="#4a6a7a"/>
<circle cx="35" cy="14" r="1.5" fill="#2b2418"/>
</g>
<g transform="translate(440, 210) scale(-1,1)">
<path d="M0,15 Q20,3 40,12 Q44,15 40,18 Q20,27 0,15 Z" fill="#5a7a8a" opacity="0.6"/>
<path d="M0,15 L-8,8 L-5,15 L-8,22 Z" fill="#4a6a7a"/>
<circle cx="35" cy="14" r="1.5" fill="#2b2418"/>
</g>
<!-- 荷叶点缀 -->
<ellipse cx="350" cy="260" rx="15" ry="5" fill="#4a6a4a" opacity="0.5"/>
<ellipse cx="420" cy="240" rx="12" ry="4" fill="#4a6a4a" opacity="0.4"/>
<!-- 题字 -->
<text x="125" y="40" font-size="14" fill="#8a4a3a" text-anchor="middle" font-family="serif" font-weight="bold">相濡以沫</text>
<text x="375" y="40" font-size="14" fill="#f4ede0" text-anchor="middle" font-family="serif" font-weight="bold">相忘江湖</text>
</svg>
<div class="comic-caption">相呴以湿，相濡以沫，不如相忘于江湖</div>
</div>
</div>
<div class="para-pair" data-idx="5">
<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><strong>面对生死的豁达。</strong>庄子把生死视为自然循环，"死生，命也，其有夜旦之常，天也"。这种态度不是消极的虚无，而是对必然性的理性接纳。现代临终关怀心理学同样强调：对死亡的坦然接受，能让人在生命最后阶段保持尊严和平静。庄子的智慧，与现代死亡教育的方向高度契合。</p>
</div>
<div class="persp-card discuss">
<div class="persp-label">◆ 需要辨析</div>
<p><strong>坐忘不是消灭意识。</strong>"堕肢体，黜聪明"容易被误解为消灭感知、进入麻木。实际上，庄子的"坐忘"是去除偏见和执念，让心灵恢复空明，而非取消意识本身。它与现代正念冥想有相似之处：观察念头而不被念头带走，觉察身体而不被身体局限。关键在于"去知"——去掉的是功利性的、分割式的认知，而非所有感知能力。</p>
</div>
<div class="persp-card warn">
<div class="persp-label">▲ 明确过时</div>
<p><strong>相忘江湖不是冷漠。</strong>"相濡以沫，不如相忘于江湖"常被误解为抛弃情义、冷漠自私。庄子的本意是：在困苦中相互扶持固然可贵，但更理想的状态是各自自在、不必刻意。然而，在真实的人际关系中，困境中的守望相助恰恰是人性的光辉。如果把"相忘"当作逃避责任的借口，就背离了庄子的本意，也失去了人与人之间最珍贵的温度。</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" onclick="this.classList.toggle('selected')">更认同相濡以沫</button>
<button class="think-btn" onclick="this.classList.toggle('selected')">更认同相忘江湖</button>
<button class="think-btn" onclick="this.classList.toggle('selected')">两者可以统一</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="#" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·齐物论》</div>
<div class="fc-desc">《大宗师》论"道"与生死，《齐物论》论"齐万物、一是非"，两篇共同构成庄子本体论与认识论的基石。</div>
</a>
<a href="#" class="further-card">
<div class="fc-tag">跨流派对话</div>
<div class="fc-title">《道德经》第二十五章</div>
<div class="fc-desc">"有物混成，先天地生……吾不知其名，字之曰道。"老子对道的描述，是庄子道论的思想源头。</div>
</a>
<a href="#" 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');
const mode = btn.dataset.mode;
readerGrid.className = 'reader-grid mode-' + 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>