-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-qiushui.html
More file actions
853 lines (804 loc) · 36.8 KB
/
Copy pathzhuangzi-qiushui.html
File metadata and controls
853 lines (804 loc) · 36.8 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
<!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; }
.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>约 15 分钟</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>灌河。<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="2">
<p class="orig-para">
"野语有之曰：'闻道百，以为莫己若者'，我之谓也。且夫我尝闻少仲尼之闻，而轻伯夷之义者，始吾弗信；今我睹子之难穷也，吾非至于子之门，则殆矣，吾长见笑于<span class="annot" data-note="懂得大道理的人。大方，大道。">大方之家</span>。"
</p>
</div>
<div class="para-pair" data-idx="3">
<p class="orig-para">
北海若曰："井蛙不可以语于海者，拘于<span class="annot" data-note="同'墟'，指青蛙所居的井中空间。">虚</span>也；夏虫不可以语于冰者，<span class="annot" data-note="固塞、限制，引申为被时间所拘限。">笃</span>于时也；曲士不可以语于道者，束于教也。今尔出于崖涘，观于大海，乃知尔丑，尔将可与语大理矣。
</p>
</div>
<div class="para-pair" data-idx="4">
<p class="orig-para">
"天下之水，莫大于海，万川归之，不知何时止而不盈；<span class="annot" data-note="传说中海底泄水的地方。">尾闾</span>泄之，不知何时已而不虚；春秋不变，水旱不知。此其过江河之流，不可为量数。而吾未尝以此自多者，自以比形于天地，而受气于阴阳，吾在于天地之间，犹小石小木之在大山也。方存乎见少，又奚以自多！
</p>
</div>
<div class="para-pair" data-idx="5">
<p class="orig-para">
"计四海之在天地之间也，不似<span class="annot" data-note="lěi kōng，小蚁穴、小窟窿。">礨空</span>之在大泽乎？计中国之在海内，不似<span class="annot" data-note="tí mǐ，细小的米粒，类似稗子。">稊米</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">
河伯曰："然则吾大天地而小豪末，可乎？"
</p>
</div>
<div class="para-pair" data-idx="8">
<p class="orig-para">
北海若曰："否。夫物，量无穷，时无止，分无常，终始无故。是故大知观于远近，故小而不寡，大而不多，知量无穷；证<span class="annot" data-note="xiàng，明、表明。今故，犹古今。">曏</span>今故，故遥而不闷，<span class="annot" data-note="拾取，指近在眼前。">掇</span>而不<span class="annot" data-note="qǐ，踮起脚跟盼望，这里指刻意强求。">跂</span>，知时无止；察乎盈虚，故得而不喜，失而不忧，知分之无常也；明乎坦涂，故生而不说，死而不祸，知终始之不可故也。
</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 class="para-pair" data-idx="11">
<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>
<!-- 漫画1：百川灌河，河伯自喜 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="qsky1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8d8b8"/>
<stop offset="100%" stop-color="#d4c4a0"/>
</linearGradient>
<linearGradient id="qriv1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7a9a8a"/>
<stop offset="100%" stop-color="#4a6b6a"/>
</linearGradient>
</defs>
<!-- 天空 -->
<rect width="500" height="300" fill="url(#qsky1)"/>
<!-- 远山 -->
<path d="M0 130 L60 100 L120 120 L190 90 L260 125 L340 95 L420 120 L500 105 L500 160 L0 160 Z" fill="#8a9a7a" opacity="0.35"/>
<!-- 黄河水面（占据下半） -->
<path d="M0 160 Q125 150 250 158 T500 155 L500 300 L0 300 Z" fill="url(#qriv1)"/>
<!-- 奔流入河的百川（从两侧山间汇入） -->
<g stroke="#a0bfb0" stroke-width="3" fill="none" opacity="0.7" stroke-linecap="round">
<path d="M0 165 Q40 165 60 160"/>
<path d="M0 175 Q50 175 70 168"/>
<path d="M500 162 Q460 162 440 158"/>
<path d="M500 178 Q450 178 430 170"/>
</g>
<!-- 滔滔波浪 -->
<g stroke="#b8d0c0" stroke-width="1.5" fill="none" opacity="0.6">
<path d="M0 190 Q80 182 160 190 T320 188 T500 192"/>
<path d="M0 215 Q100 208 200 215 T400 213 T500 217"/>
<path d="M0 245 Q90 238 180 245 T360 243 T500 247"/>
<path d="M0 275 Q110 268 220 275 T440 273 T500 277"/>
</g>
<!-- 河伯（站在波涛上，得意洋洋的古装水神） -->
<g transform="translate(250, 130)">
<!-- 水浪托座 -->
<path d="M-30,30 Q-20,18 0,20 Q20,18 30,30 Q20,38 0,36 Q-20,38 -30,30 Z" fill="#e8d8b8" opacity="0.8"/>
<!-- 袍袖 -->
<path d="M-22,0 Q-30,20 -25,45 L25,45 Q30,20 22,0 Q10,-8 0,-8 Q-10,-8 -22,0 Z" fill="#b23a2e"/>
<!-- 袍纹 -->
<path d="M-15,15 Q0,12 15,15" stroke="#8a2a20" stroke-width="1" fill="none" opacity="0.5"/>
<!-- 头颈 -->
<ellipse cx="0" cy="-18" rx="11" ry="13" fill="#e8c8a8"/>
<!-- 冠帽（水神冠） -->
<path d="M-13,-26 L-13,-34 L13,-34 L13,-26 Q0,-30 -13,-26 Z" fill="#2b2418"/>
<rect x="-3" y="-40" width="6" height="8" fill="#b8893a"/>
<!-- 得意眉眼（眯眼） -->
<path d="M-6,-20 Q-3,-18 0,-20" stroke="#2b2418" stroke-width="1.2" fill="none"/>
<path d="M0,-20 Q3,-18 6,-20" stroke="#2b2418" stroke-width="1.2" fill="none"/>
<!-- 微笑嘴 -->
<path d="M-3,-13 Q0,-10 3,-13" stroke="#8a4a3a" stroke-width="1" fill="none"/>
<!-- 长须 -->
<path d="M-2,-8 Q-3,5 -6,15" stroke="#5a4a3a" stroke-width="1" fill="none" opacity="0.7"/>
<path d="M2,-8 Q3,5 6,15" stroke="#5a4a3a" stroke-width="1" fill="none" opacity="0.7"/>
<!-- 手指远方（向东指） -->
<path d="M25,5 L45,-8 L42,-4 L28,8 Z" fill="#e8c8a8"/>
</g>
<!-- 题字 -->
<text x="40" y="50" font-size="18" fill="#2b2418" font-family="serif" opacity="0.5" font-weight="700">百川灌河</text>
</svg>
<div class="comic-caption">秋水时至，百川灌河，河伯欣然自喜</div>
</div>
</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>
<!-- 漫画2：井蛙与大海 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 280" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="qsky2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f0e4cc"/>
<stop offset="100%" stop-color="#d8c8a8"/>
</linearGradient>
</defs>
<rect width="500" height="280" fill="url(#qsky2)"/>
<!-- 井（左侧，井圈俯视） -->
<g transform="translate(110, 180)">
<!-- 井台 -->
<ellipse cx="0" cy="0" rx="80" ry="28" fill="#8a7a5a" opacity="0.5"/>
<ellipse cx="0" cy="-5" rx="70" ry="22" fill="#5a4a3a"/>
<ellipse cx="0" cy="-8" rx="55" ry="16" fill="#1a2a38"/>
<!-- 井壁砖纹 -->
<g stroke="#3a2a1a" stroke-width="0.8" opacity="0.4">
<path d="M-65,-5 Q0,5 65,-5" fill="none"/>
<path d="M-70,0 Q0,12 70,0" fill="none"/>
</g>
<!-- 井底青蛙（从井口仰望视角，井底小蛙） -->
<g transform="translate(0, -8)">
<ellipse cx="0" cy="0" rx="18" ry="10" fill="#6a8a4a"/>
<circle cx="-10" cy="-8" r="8" fill="#7a9a5a"/>
<circle cx="10" cy="-8" r="8" fill="#7a9a5a"/>
<circle cx="-10" cy="-8" r="3" fill="#f0d890"/>
<circle cx="10" cy="-8" r="3" fill="#f0d890"/>
<circle cx="-10" cy="-8" r="1.5" fill="#2b2418"/>
<circle cx="10" cy="-8" r="1.5" fill="#2b2418"/>
</g>
<!-- 井栏石 -->
<rect x="-78" y="-32" width="12" height="30" rx="2" fill="#6a5a4a"/>
<rect x="66" y="-32" width="12" height="30" rx="2" fill="#6a5a4a"/>
</g>
<!-- 井口上方一小片天（圆形） -->
<circle cx="110" cy="50" r="42" fill="#c8d8c0" opacity="0.6"/>
<circle cx="110" cy="50" r="42" fill="none" stroke="#8a7a5a" stroke-width="1.5" opacity="0.5"/>
<!-- 小鸟从天上飞过（蛙眼中的世界） -->
<path d="M95 40 Q100 36 105 40 Q110 36 115 40" stroke="#5a4a3a" stroke-width="1.2" fill="none"/>
<!-- 大海（右侧，开阔无垠） -->
<g>
<path d="M220 120 Q360 110 500 118 L500 280 L220 280 Z" fill="#4a6b7a"/>
<path d="M220 135 Q340 127 500 133" stroke="#6b8a98" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M220 160 Q350 152 500 158" stroke="#5a7a88" stroke-width="1" fill="none" opacity="0.5"/>
<path d="M220 195 Q340 188 500 193" stroke="#6b8a98" stroke-width="1" fill="none" opacity="0.4"/>
<!-- 海天交界线的太阳 -->
<circle cx="420" cy="95" r="22" fill="#e8c878" opacity="0.7"/>
</g>
<!-- 箭头从井指向海 -->
<g stroke="#b23a2e" stroke-width="1.5" fill="none" opacity="0.6" stroke-dasharray="4,3">
<path d="M200 100 Q230 90 260 110" marker-end="url(#arrowhead)"/>
</g>
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
<polygon points="0 0, 8 4, 0 8" fill="#b23a2e"/>
</marker>
</defs>
<!-- 题字 -->
<text x="60" y="250" font-size="14" fill="#5a4a3a" font-family="serif" opacity="0.8">井蛙</text>
<text x="360" y="250" font-size="14" fill="#2c4050" font-family="serif" opacity="0.8">大海</text>
</svg>
<div class="comic-caption">井蛙不可以语于海者，拘于虚也</div>
</div>
</div>
<div class="para-pair" data-idx="4">
<p class="trans-para">
"天下的水流，没有比海更大的。千万条河流注入它，不知何时停止，可大海从不满溢；尾闾把海水泄漏出去，不知何时停止，可海水从不减少。春秋不变，水旱不知。它超过江河的流量，无法用数字计算。可是我从不因此自夸，我自知形体寄于天地之间，从阴阳禀受了生气，我在天地之间，就像小石头、小树在大山上一样。我正觉得自己见识太少，又怎么会自傲呢！
</p>
</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>
</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="qsky3" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ede0c4"/>
<stop offset="100%" stop-color="#d8c8a4"/>
</linearGradient>
</defs>
<rect width="500" height="280" fill="url(#qsky3)"/>
<!-- 大山（背景，淡墨） -->
<path d="M0 200 L80 90 L140 150 L210 60 L290 140 L360 80 L440 150 L500 110 L500 280 L0 280 Z" fill="#7a8a6a" opacity="0.25"/>
<path d="M0 220 L100 130 L180 190 L260 110 L340 180 L420 120 L500 180 L500 280 L0 280 Z" fill="#6a7a5a" opacity="0.2"/>
<!-- 大圆（天/地，隐喻大） -->
<g transform="translate(120, 140)">
<circle cx="0" cy="0" r="75" fill="none" stroke="#b23a2e" stroke-width="2" opacity="0.7"/>
<circle cx="0" cy="0" r="75" fill="#b23a2e" opacity="0.06"/>
<text x="0" y="5" font-size="22" fill="#b23a2e" text-anchor="middle" font-family="serif" font-weight="700">天地</text>
</g>
<!-- 小圆（毫末/稊米，隐喻小） -->
<g transform="translate(380, 140)">
<circle cx="0" cy="0" r="32" fill="none" stroke="#2c4050" stroke-width="2" opacity="0.7"/>
<circle cx="0" cy="0" r="32" fill="#2c4050" opacity="0.06"/>
<text x="0" y="5" font-size="13" fill="#2c4050" text-anchor="middle" font-family="serif" font-weight="700">毫末</text>
</g>
<!-- 但箭头双向：小中见大，大中见小 -->
<g stroke="#5a4a3a" stroke-width="1.2" fill="none" opacity="0.6">
<path d="M200 130 Q250 100 300 130"/>
<path d="M300 150 Q250 180 200 150"/>
</g>
<!-- 中央太极感的小符号：相对 -->
<text x="250" y="240" font-size="13" fill="#5a4a3a" text-anchor="middle" font-family="serif" opacity="0.8">知天地之为稊米 · 知毫末之为丘山</text>
<!-- 小装饰：米粒与山丘简笔 -->
<g transform="translate(60, 230)" opacity="0.5">
<ellipse cx="0" cy="0" rx="4" ry="6" fill="#b8893a"/>
<text x="12" y="4" font-size="10" fill="#5a4a3a" font-family="serif">稊米</text>
</g>
<g transform="translate(440, 220)" opacity="0.5">
<path d="M-12,15 L0,-5 L12,15 Z" fill="#5a6a4a"/>
<text x="-10" y="30" font-size="10" fill="#5a4a3a" font-family="serif">丘山</text>
</g>
</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 class="para-pair" data-idx="11">
<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-xiaoyaoyou.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·逍遥游》</div>
<div class="fc-desc">鲲鹏图南，小大之辨的开篇；《秋水》正是这一主题在外篇中的延伸与深化。</div>
</a>
<a href="zhuangzi-qiwulun.html" 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');
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>