-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-renjianshi.html
More file actions
830 lines (789 loc) · 32 KB
/
Copy pathzhuangzi-renjianshi.html
File metadata and controls
830 lines (789 loc) · 32 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
<!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"></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>。'愿以所闻思其则，庶几其国有瘳乎！"
</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>也。"
</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>。'事若不成，则必有人道之患；事若成，则必有阴阳之患。……"仲尼曰："……<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>之齐，至于<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="5">
<p class="orig-para">
<span class="annot" data-note="山上的树木因有用而自招砍伐。寇，砍伐。">山木自寇也</span>，<span class="annot" data-note="油脂能燃烧照明，所以自取煎熬。膏，油脂。">膏火自煎也</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>
<!-- 漫画1：心斋 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="glow_r" cx="50%" cy="45%" r="55%">
<stop offset="0%" stop-color="#f8ecc8"/>
<stop offset="100%" stop-color="#e6d8b8"/>
</radialGradient>
</defs>
<!-- 米黄宣纸底 -->
<rect width="500" height="300" fill="#efe7d5"/>
<!-- 远景山影 -->
<path d="M0 210 Q70 170 140 195 T280 190 T420 200 L500 185 L500 300 L0 300 Z" fill="#c9b88f" opacity="0.4"/>
<path d="M0 235 Q90 205 180 225 T360 220 T500 230 L500 300 L0 300 Z" fill="#b0a078" opacity="0.35"/>
<!-- 光晕（道集于虚） -->
<circle cx="250" cy="130" r="95" fill="url(#glow_r)" opacity="0.85"/>
<!-- 蒲团 -->
<ellipse cx="250" cy="230" rx="70" ry="14" fill="#8a6a4a" opacity="0.35"/>
<ellipse cx="250" cy="226" rx="62" ry="11" fill="#a07a52" opacity="0.55"/>
<!-- 静坐者（颜回/孔子对坐，取一修者侧影） -->
<g transform="translate(250,150)">
<!-- 衣袍 -->
<path d="M-34,75 Q-40,30 -18,10 Q0,-2 18,10 Q40,30 34,75 Z" fill="#3a3028"/>
<!-- 交领 -->
<path d="M-16,18 L0,40 L16,18" stroke="#221a12" stroke-width="1.5" fill="none"/>
<!-- 头颈 -->
<path d="M-7,12 Q-7,-2 0,-8 Q7,-2 7,12 Z" fill="#d8b890"/>
<!-- 头 -->
<circle cx="0" cy="-18" r="13" fill="#dcc0a0"/>
<!-- 发髻 -->
<path d="M-9,-28 Q0,-38 9,-28 Q6,-22 0,-22 Q-6,-22 -9,-28 Z" fill="#2a2018"/>
<!-- 闭目 -->
<path d="M-7,-18 Q-4,-16 -1,-18" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M1,-18 Q4,-16 7,-18" stroke="#2b2418" stroke-width="1" fill="none"/>
</g>
<!-- 三圈气息（耳→心→气，层层虚化） -->
<g fill="none" stroke="#b23a2e" opacity="0.45">
<ellipse cx="250" cy="160" rx="48" ry="58" stroke-width="1.2"/>
<ellipse cx="250" cy="160" rx="70" ry="82" stroke-width="0.9" opacity="0.3"/>
<ellipse cx="250" cy="160" rx="95" ry="108" stroke-width="0.7" opacity="0.2"/>
</g>
<!-- 题字 -->
<text x="60" y="60" font-family="Noto Serif SC, serif" font-size="22" fill="#2b2418" opacity="0.8" letter-spacing="4">唯道集虚</text>
<text x="62" y="82" font-family="Noto Serif SC, serif" font-size="12" fill="#b23a2e" opacity="0.75">心斋</text>
<!-- 朱砂印 -->
<rect x="58" y="92" width="22" height="22" fill="#b23a2e" opacity="0.8"/>
<text x="62" y="109" font-family="serif" font-size="13" fill="#f4ede0">齋</text>
</svg>
<div class="comic-caption">唯道集虚，虚者心斋也</div>
</div>
</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>
<!-- 漫画2：栎社树 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky_r" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ece0c4"/>
<stop offset="100%" stop-color="#d9c89e"/>
</linearGradient>
</defs>
<rect width="500" height="320" fill="url(#sky_r)"/>
<!-- 远山 -->
<path d="M0 230 Q80 195 160 220 T320 215 T500 225 L500 320 L0 320 Z" fill="#b8a880" opacity="0.4"/>
<!-- 地面 -->
<path d="M0 265 Q250 255 500 265 L500 320 L0 320 Z" fill="#a08858" opacity="0.5"/>
<!-- 社坛（石基 + 红幡） -->
<g transform="translate(400,250)">
<rect x="-26" y="0" width="52" height="18" fill="#7a6a52"/>
<rect x="-20" y="-6" width="40" height="8" fill="#8a7a62"/>
<line x1="0" y1="-6" x2="0" y2="-70" stroke="#5a4030" stroke-width="2"/>
<path d="M0,-68 L14,-60 L0,-52 L-14,-60 Z" fill="#b23a2e" opacity="0.85"/>
<text x="-7" y="-58" font-size="9" fill="#f4ede0" font-family="serif">社</text>
</g>
<!-- 巨大栎社树 -->
<g>
<!-- 主干 -->
<path d="M210,300 Q200,200 225,120 Q235,80 250,55 Q265,80 275,120 Q300,200 290,300 Z" fill="#5a4432"/>
<!-- 树干纹理 -->
<path d="M230,290 Q225,220 238,150" stroke="#3e2e20" stroke-width="1.2" fill="none" opacity="0.5"/>
<path d="M270,290 Q275,220 262,150" stroke="#3e2e20" stroke-width="1.2" fill="none" opacity="0.5"/>
<!-- 树瘤/节疤（散木之相） -->
<ellipse cx="245" cy="200" rx="8" ry="5" fill="#3e2e20" opacity="0.5"/>
<ellipse cx="258" cy="240" rx="6" ry="4" fill="#3e2e20" opacity="0.4"/>
<!-- 大枝杈 -->
<path d="M240,120 Q180,90 120,70 Q90,60 70,75" stroke="#5a4432" stroke-width="16" fill="none" stroke-linecap="round"/>
<path d="M260,120 Q320,85 370,80 Q400,78 420,95" stroke="#5a4432" stroke-width="16" fill="none" stroke-linecap="round"/>
<path d="M250,90 Q240,50 220,25" stroke="#5a4432" stroke-width="11" fill="none" stroke-linecap="round"/>
<!-- 树冠（点叶，水墨散点） -->
<g fill="#6e7a4a" opacity="0.85">
<circle cx="80" cy="62" r="26"/><circle cx="120" cy="55" r="30"/>
<circle cx="160" cy="70" r="24"/><circle cx="200" cy="45" r="22"/>
<circle cx="235" cy="30" r="26"/><circle cx="285" cy="40" r="24"/>
<circle cx="320" cy="60" r="28"/><circle cx="365" cy="62" r="30"/>
<circle cx="410" cy="80" r="26"/><circle cx="250" cy="20" r="22"/>
</g>
<g fill="#85945a" opacity="0.6">
<circle cx="100" cy="48" r="14"/><circle cx="180" cy="55" r="12"/>
<circle cx="300" cy="48" r="14"/><circle cx="390" cy="70" r="12"/>
</g>
</g>
<!-- 渺小的匠石（背手不顾，仰头） -->
<g transform="translate(330,278)">
<!-- 身躯 -->
<path d="M-7,0 Q-8,-18 0,-22 Q8,-18 7,0 Z" fill="#2b2418"/>
<!-- 头 -->
<circle cx="0" cy="-27" r="5" fill="#d8b890"/>
<!-- 发髻 -->
<path d="M-3,-31 Q0,-35 3,-31 Z" fill="#2a2018"/>
<!-- 手中曲尺 -->
<line x1="6" y1="-12" x2="16" y2="-6" stroke="#8a6a3a" stroke-width="1.5"/>
</g>
<!-- 题字 -->
<text x="40" y="50" font-family="Noto Serif SC, serif" font-size="20" fill="#2b2418" opacity="0.8" letter-spacing="3">无用之用</text>
<rect x="40" y="58" width="20" height="20" fill="#b23a2e" opacity="0.8"/>
<text x="44" y="74" font-family="serif" font-size="12" fill="#f4ede0">散</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>"心斋"提醒人：即使身在组织、体制之中，也可以在内心里留出一片不被权力和功利吞没的虚空。现代人常困于职场的评价体系与上级意志，庄子的"虚而待物"提供了一种内在的距离感——尽责做事，但不把自我完全抵押给外在的成败与毁誉。</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="#" 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>