-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-tiandi.html
More file actions
612 lines (577 loc) · 37.5 KB
/
Copy pathzhuangzi-tiandi.html
File metadata and controls
612 lines (577 loc) · 37.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
<!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 active"></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='搰搰（gǔ gǔ）然：用力的样子。形容老人抱水浇灌，费力很大。'>搰搰然</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='假：借助、托借。浑沌氏：传说中上古淳朴无为的帝王。指那人是修习浑沌氏淳朴道术的人。'>假修浑沌氏之术者也</span>，识其一，不知其二；治其内，而不治其外。夫明白太素，无为复朴，体性抱神，以游世俗之间者，汝将固惊邪？"
</p>
</div>
<div class="para-pair" data-idx="6">
<p class="orig-para">
故曰："形劳而不休则弊，精用而不已则劳，劳则竭。"水之性，不杂则清，莫动则平；郁闭而不流，亦不能清，天德之象也。故曰："纯粹而不杂，静一而不变，<span class="annot" data-note='惔（dà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>
<!-- 漫画1：天地万物一体 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="cosmos" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#f0d890" stop-opacity="0.5"/>
<stop offset="60%" stop-color="#d8c088" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#e8dcc0" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="500" height="300" fill="#e8dcc0"/>
<!-- 大圆环：天地运化、万物齐一 -->
<circle cx="250" cy="150" r="120" fill="url(#cosmos)"/>
<circle cx="250" cy="150" r="118" fill="none" stroke="#8a7a5a" stroke-width="1" stroke-dasharray="2,4" opacity="0.6"/>
<circle cx="250" cy="150" r="85" fill="none" stroke="#b8893a" stroke-width="1.2" opacity="0.5"/>
<!-- 上方：天（日、月、云气） -->
<g transform="translate(250, 70)">
<circle cx="-40" cy="0" r="14" fill="#d8a040" opacity="0.85"/>
<g stroke="#d8a040" stroke-width="1" opacity="0.6">
<line x1="-40" y1="-22" x2="-40" y2="-28"/>
<line x1="-62" y1="0" x2="-68" y2="0"/>
<line x1="-18" y1="0" x2="-12" y2="0"/>
</g>
<path d="M25,-6 Q35,-14 48,-8 Q40,-2 28,-2 Q22,-4 25,-6 Z" fill="#f4ecd8" opacity="0.8"/>
<path d="M40,4 Q52,-2 62,6 Q52,10 42,8 Q38,6 40,4 Z" fill="#f4ecd8" opacity="0.7"/>
</g>
<!-- 下方：地（山、水、草木） -->
<g transform="translate(250, 230)">
<path d="M-70,0 L-45,-30 L-25,-10 L-5,-38 L15,-12 L40,-28 L70,0 Z" fill="#7a8a6a" opacity="0.8"/>
<path d="M-70,0 Q0,-6 70,0 L70,18 L-70,18 Z" fill="#5a7a8a" opacity="0.6"/>
<path d="M-55,-2 Q-58,-15 -62,-22 M0,-38 Q-2,-50 2,-58 M55,-2 Q58,-14 62,-20" stroke="#5a7a3a" stroke-width="1.5" fill="none" stroke-linecap="round"/>
</g>
<!-- 中央：人与万物合一（简化人形，双臂轻展，周遭环绕鱼、鸟、兽的小符号） -->
<g transform="translate(250, 150)">
<circle cx="0" cy="-18" r="9" fill="#e8c8a8"/>
<path d="M0,-9 Q-3,5 -6,22 L6,22 Q3,5 0,-9 Z" fill="#b23a2e" opacity="0.8"/>
<path d="M-6,0 Q-22,-6 -32,2" stroke="#e8c8a8" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M6,0 Q22,-6 32,2" stroke="#e8c8a8" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- 鱼 -->
<path d="M-70,20 q-10,-6 0,-12 q10,6 0,12 z" fill="#5a7a8a" opacity="0.7"/>
<!-- 鸟 -->
<path d="M60,-30 q-6,-5 -12,0 q6,5 12,0 M60,-30 q6,-5 12,0 q-6,5 -12,0" stroke="#2b2418" stroke-width="1" fill="none"/>
<!-- 小兽/鹿的简笔 -->
<g transform="translate(60,25)" stroke="#6a4a2a" stroke-width="1.2" fill="none" stroke-linecap="round">
<path d="M-8,2 Q-8,-6 0,-6 Q8,-6 8,2 L8,8 L-8,8 Z"/>
<path d="M6,-6 L9,-12 M3,-6 L4,-12"/>
</g>
</g>
<!-- 连接天地的气息线 -->
<g stroke="#b8893a" stroke-width="0.8" fill="none" opacity="0.35">
<path d="M190 150 Q250 110 310 150"/>
<path d="M180 150 Q250 195 320 150"/>
</g>
<text x="250" y="40" font-size="15" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.75" 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 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="tdsoil" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#b8a878"/>
<stop offset="100%" stop-color="#8a7850"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="#e8dcc0"/>
<!-- 园畦背景、篱笆 -->
<g stroke="#8a6a3a" stroke-width="1.5" opacity="0.6">
<line x1="0" y1="80" x2="500" y2="80"/>
<line x1="20" y1="70" x2="20" y2="95"/>
<line x1="60" y1="70" x2="60" y2="95"/>
<line x1="440" y1="70" x2="440" y2="95"/>
<line x1="480" y1="70" x2="480" y2="95"/>
</g>
<!-- 地面/菜畦 -->
<path d="M0 180 Q250 170 500 180 L500 300 L0 300 Z" fill="url(#tdsoil)"/>
<!-- 菜畦的垄沟 -->
<g stroke="#6a5a38" stroke-width="1" fill="none" opacity="0.5">
<path d="M0 205 Q250 198 500 205"/>
<path d="M0 235 Q250 228 500 235"/>
<path d="M0 265 Q250 260 500 265"/>
</g>
<!-- 菜苗 -->
<g fill="#6a8a4a">
<circle cx="60" cy="200" r="4"/><circle cx="90" cy="205" r="4"/><circle cx="120" cy="198" r="4"/>
<circle cx="380" cy="202" r="4"/><circle cx="410" cy="208" r="4"/><circle cx="445" cy="200" r="4"/>
<circle cx="70" cy="240" r="4"/><circle cx="430" cy="245" r="4"/>
</g>
<!-- 井（圆形井口，带凿出的隧坡） -->
<g transform="translate(160, 185)">
<ellipse cx="0" cy="0" rx="34" ry="14" fill="#3a3028"/>
<ellipse cx="0" cy="-4" rx="30" ry="11" fill="#1a1810"/>
<ellipse cx="0" cy="-5" rx="22" ry="7" fill="#2a3a4a" opacity="0.6"/>
<!-- 石井栏 -->
<ellipse cx="0" cy="-2" rx="36" ry="15" fill="none" stroke="#6a5a3a" stroke-width="3"/>
<!-- 凿的隧（通向井底的坡道，用一侧阴影表示） -->
<path d="M36,-2 Q70,10 90,40 L70,40 Q55,15 30,6 Z" fill="#9a8858" opacity="0.7"/>
</g>
<!-- 老人（丈人）：弯腰抱瓮，正从井边走向菜畦，费力搰搰然 -->
<g transform="translate(290, 165)">
<!-- 腿（弓步、弯腰） -->
<path d="M-6,40 L-14,72 L-6,74 L2,44 Z" fill="#6a5a4a"/>
<path d="M8,40 L20,72 L14,74 L6,44 Z" fill="#7a6a5a"/>
<!-- 身体（前倾） -->
<path d="M-14,-8 Q-20,20 -8,42 L12,42 Q22,20 14,-8 Q6,-18 0,-18 Q-6,-18 -14,-8 Z" fill="#8a7a5a"/>
<!-- 头（低向井/瓮） -->
<circle cx="-6" cy="-22" r="11" fill="#e8c8a8"/>
<path d="M-16,-26 Q-6,-38 4,-26 Z" fill="#b8b8b8" opacity="0.8"/>
<!-- 眉须白、神情专注 -->
<path d="M-12,-24 Q-9,-25 -6,-24" stroke="#2b2418" stroke-width="0.8" fill="none"/>
<path d="M-10,-16 Q-6,-13 -2,-16" stroke="#8a8a8a" stroke-width="0.8" fill="none"/>
<!-- 双臂抱瓮（前伸） -->
<path d="M-8,-2 Q-28,2 -36,12" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<path d="M6,-2 Q-14,4 -24,14" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 水瓮（陶瓮，盛水） -->
<g transform="translate(-40, 18)">
<ellipse cx="0" cy="0" rx="13" ry="4" fill="#6a4a2a"/>
<path d="M-13,0 Q-16,16 -10,22 L10,22 Q16,16 13,0 Z" fill="#8a6a4a"/>
<ellipse cx="0" cy="22" rx="10" ry="3" fill="#5a3a1a" opacity="0.5"/>
<!-- 瓮中水光 -->
<ellipse cx="0" cy="1" rx="10" ry="2.5" fill="#6a8a9a" opacity="0.7"/>
</g>
<!-- 几滴洒落的水（费力） -->
<g fill="#6a8a9a" opacity="0.7">
<circle cx="-22" cy="30" r="1.5"/>
<circle cx="-18" cy="38" r="1"/>
<circle cx="-12" cy="46" r="1.5"/>
</g>
</g>
<!-- 子贡（右侧，拱手，年轻士人，作建议状） -->
<g transform="translate(410, 180)">
<path d="M-12,0 Q-16,30 -8,55 L8,55 Q16,30 12,0 Q4,-8 0,-8 Q-4,-8 -12,0 Z" fill="#5a6a7a"/>
<circle cx="0" cy="-22" r="10" fill="#e8c8a8"/>
<path d="M-9,-30 L9,-30 L7,-36 L-7,-36 Z" fill="#3a3028"/>
<!-- 张口说话、抬手指向机械方向 -->
<ellipse cx="0" cy="-17" rx="2" ry="1.5" fill="#8a4a3a"/>
<path d="M12,-8 Q26,-18 34,-22" stroke="#e8c8a8" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- 小对话泡 -->
<path d="M20,-40 q20,-18 -2,-26 q-26,-6 -18,12 q2,8 8,10 Z" fill="#f4ecd8" stroke="#b8a878" stroke-width="0.6"/>
<text x="10" y="-50" font-size="9" fill="#8a6a3a" font-family="serif">有械于此</text>
</g>
<text x="250" y="40" font-size="15" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.75" font-weight="700">抱瓮出灌 · 搰搰然用力甚多</text>
</svg>
<div class="comic-caption">汉阴丈人凿隧入井、抱瓮灌园——子贡在一旁劝他改用桔槔</div>
</div>
</div>
<div class="para-pair" data-idx="4">
<p class="trans-para">
灌园老人一下子变了脸色，又冷笑着说："我听我的老师说过，有了机械的东西，就一定会有机巧的事；有了机巧的事，就一定会有机变的心。机变的心存在胸中，纯粹素白的心境就不完备；纯白的心境不完备，精神就不能安定；精神不能安定的人，道是不会留在他身上的。我不是不知道桔槔，而是觉得羞耻，不愿用它。"
</p>
<!-- 漫画3：桔槔与机心 -->
<div class="comic-block">
<svg class="comic-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="tdsky2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8dcc0"/>
<stop offset="100%" stop-color="#d8c89a"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#tdsky2)"/>
<!-- 地面 -->
<path d="M0 210 Q250 200 500 210 L500 300 L0 300 Z" fill="#b8a878"/>
<line x1="0" y1="210" x2="500" y2="210" stroke="#8a7a5a" stroke-width="1.2"/>
<!-- 左侧：桔槔（杠杆汲水）—— 支架、横木、重石、水桶 -->
<g transform="translate(120, 210)">
<!-- 井 -->
<ellipse cx="0" cy="5" rx="28" ry="11" fill="#3a3028"/>
<ellipse cx="0" cy="3" rx="30" ry="12" fill="none" stroke="#6a5a3a" stroke-width="3"/>
<ellipse cx="0" cy="2" rx="20" ry="7" fill="#2a3a4a" opacity="0.6"/>
<!-- 支架（人字架） -->
<path d="M-25,5 L0,-70 L25,5" stroke="#6a4a2a" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 横木（杠杆，右端下坠挂重石，左端挂水桶，向井倾斜） -->
<line x1="-55" y1="-55" x2="55" y2="-80" stroke="#5a3a1a" stroke-width="5" stroke-linecap="round"/>
<!-- 支点 -->
<circle cx="0" cy="-70" r="4" fill="#3a2a1a"/>
<!-- 右端重石 -->
<rect x="46" y="-82" width="18" height="14" rx="2" fill="#8a8a8a" stroke="#5a5a5a" stroke-width="1"/>
<!-- 左端长绳+水桶（落入井中） -->
<line x1="-55" y1="-55" x2="-40" y2="-5" stroke="#5a3a1a" stroke-width="1.5"/>
<path d="M-48,-8 L-32,-8 L-35,8 L-45,8 Z" fill="#8a6a4a" stroke="#5a3a1a" stroke-width="1"/>
<!-- 溅起的水 -->
<g fill="#6a8a9a" opacity="0.7">
<circle cx="-40" cy="0" r="2"/><circle cx="-30" cy="-2" r="1.5"/>
</g>
</g>
<!-- 中央：老人转身拒绝，摆手；胸口处一颗被"机心"齿轮侵入的意象 -->
<g transform="translate(290, 150)">
<!-- 宽袍老人（侧身向左，背向桔槔方向，摆手拒绝） -->
<path d="M-20,8 Q-26,40 -14,68 L16,68 Q26,40 20,8 Q10,-6 0,-6 Q-10,-6 -20,8 Z" fill="#7a6a5a"/>
<circle cx="-2" cy="-20" r="12" fill="#e8c8a8"/>
<path d="M-13,-25 Q-2,-38 9,-25 Z" fill="#b8b8b8" opacity="0.8"/>
<!-- 眉峰蹙起、忿然作色 -->
<line x1="-8" y1="-24" x2="-3" y2="-22" stroke="#2b2418" stroke-width="1.2"/>
<path d="M-6,-14 Q-2,-12 2,-14" stroke="#2b2418" stroke-width="1" fill="none"/>
<!-- 右手在胸前摆动（拒绝） -->
<path d="M-12,0 Q-30,-8 -38,0" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 左手向后（背对桔槔） -->
<path d="M14,2 Q30,8 38,18" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 胸口：一个半透明的齿轮（机心），被一道红叉/外框隔开，表示"纯白不备" -->
<g transform="translate(0, 18)" opacity="0.85">
<g fill="#b23a2e" opacity="0.75">
<circle cx="0" cy="0" r="9" fill="none" stroke="#b23a2e" stroke-width="1.5"/>
<rect x="-2" y="-14" width="4" height="6"/>
<rect x="-2" y="8" width="4" height="6"/>
<rect x="-14" y="-2" width="6" height="4"/>
<rect x="8" y="-2" width="6" height="4"/>
<rect x="-11" y="-11" width="4" height="4" transform="rotate(45 -9 -9)"/>
<rect x="7" y="7" width="4" height="4" transform="rotate(45 9 9)"/>
<rect x="-11" y="7" width="4" height="4" transform="rotate(-45 -9 9)"/>
<rect x="7" y="-11" width="4" height="4" transform="rotate(-45 9 -9)"/>
</g>
<!-- 齿轮上的叉：拒绝 -->
<path d="M-6,-6 L6,6 M6,-6 L-6,6" stroke="#2b2418" stroke-width="1.5" opacity="0.5"/>
</g>
</g>
<!-- 右侧：一颗破碎/蒙尘的素白之心（纯白不备），对比老人所守 -->
<g transform="translate(420, 120)">
<path d="M0,20 C-26,-4 -36,-22 -18,-32 C-8,-38 0,-28 0,-22 C0,-28 8,-38 18,-32 C36,-22 26,-4 0,20 Z"
fill="#f4ecd8" stroke="#c8b888" stroke-width="1.2" opacity="0.9"/>
<!-- 裂纹 -->
<path d="M-6,-20 L0,-8 L-4,4 M2,-18 L6,-6 L2,6" stroke="#b23a2e" stroke-width="1" fill="none" opacity="0.7"/>
<text x="0" y="42" font-size="11" fill="#9a4a3a" text-anchor="middle" font-family="serif">纯白不备</text>
</g>
<text x="250" y="40" font-size="15" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.75" font-weight="700">有机械者必有机心</text>
</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>
</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>"有机械者必有机事，有机事者必有机心"是一个过强的因果链，实际上技术是中性的：桔槔、蒸汽机、互联网、AI既能放大人的机巧算计，也能减轻劳苦、释放人的创造力。问题不在用不用机械，而在于人是否保持清醒的主体意识——是你驾驭工具、服务于美好生活，还是你被工具的效率逻辑裹挟、异化为工具的零件。关键是"物而不物于物"，而不是退回抱瓮灌园。</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>老人说"吾非不知，羞而不为也"——他明明知道桔槔省力，却以用它为耻。今天我们身边有哪些"明明知道更高效，却选择不用"的情形（比如刻意不刷短视频、不带手机上床、手写笔记）？这是守"纯白"，还是保守？人工智能比桔槔强大千万倍，"机心"的警告对我们使用 AI 有什么具体的提醒？"水之性，不杂则清，莫动则平；郁闭而不流，亦不能清"——这段话如何帮我们理解"静"与"动"、放下与作为的平衡？</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-zaiyou.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·在宥》</div>
<div class="fc-desc">紧接其前的外篇第四，论"闻在宥天下，不闻治天下"，与本篇无为复朴、反对搅扰物性的主旨一脉相承。</div>
</a>
<a href="zhuangzi-dasheng.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>