-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-tiandao.html
More file actions
600 lines (563 loc) · 36.6 KB
/
Copy pathzhuangzi-tiandao.html
File metadata and controls
600 lines (563 loc) · 36.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
<!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 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='不易之道：不可改易的根本原则。指君无为、臣有为的分工是治国的常道。'>不易之道</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">
桓公读书于堂上，轮扁斫轮于堂下，释椎凿而上，问桓公曰："敢问公之所读者何言邪？"公曰："圣人之言也。"曰："圣人在乎？"公曰："已死矣。"曰："然则君之所读者，古人之糟魄已夫！"桓公曰："寡人读书，轮人安得议乎！有说则可，无说则死。"
</p>
</div>
<div class="para-pair" data-idx="6">
<p class="orig-para">
轮扁曰："臣也以臣之事观之。<span class="annot" data-note='斫（zhuó）轮：砍削木头制作车轮。徐：缓、宽松。甘：松滑。固：牢固。榫头松了就滑而不牢。'>斫轮，徐则甘而不固</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="skycenter" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#f0d890" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#e8dcc0" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="500" height="300" fill="#e8dcc0"/>
<circle cx="250" cy="150" r="145" fill="url(#skycenter)"/>
<!-- 大圆环：天道循环，带箭头 -->
<defs>
<marker id="tdarr" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto">
<polygon points="0 0, 9 4.5, 0 9" fill="#8a6a3a"/>
</marker>
</defs>
<circle cx="250" cy="150" r="110" fill="none" stroke="#b8893a" stroke-width="1.2" stroke-dasharray="5,4" opacity="0.7" marker-end="url(#tdarr)"/>
<circle cx="250" cy="150" r="78" fill="none" stroke="#8a7a5a" stroke-width="1" opacity="0.5"/>
<!-- 春（右上：芽）、夏（右下：盛叶/日）、秋（左下：落叶）、冬（左上：雪枝）四时 -->
<!-- 中心：太极式的循环圆心 -->
<circle cx="250" cy="150" r="26" fill="#f4ecd8" stroke="#8a6a3a" stroke-width="1.2"/>
<path d="M250 124 A26 26 0 0 1 250 176 A13 13 0 0 1 250 150 A13 13 0 0 0 250 124 Z" fill="#2b2418" opacity="0.75"/>
<circle cx="250" cy="137" r="3.5" fill="#f4ecd8"/>
<circle cx="250" cy="163" r="3.5" fill="#2b2418"/>
<!-- 春：芽（右上） -->
<g transform="translate(355, 95)">
<path d="M0,15 Q-2,0 0,-12" stroke="#5a7a3a" stroke-width="2" fill="none" stroke-linecap="round"/>
<ellipse cx="-6" cy="-2" rx="7" ry="4" fill="#8aaa5a" transform="rotate(-30 -6 -2)"/>
<ellipse cx="6" cy="-8" rx="6" ry="3.5" fill="#9aba6a" transform="rotate(30 6 -8)"/>
<text x="0" y="32" font-size="11" fill="#5a7a3a" text-anchor="middle" font-family="serif">春</text>
</g>
<!-- 夏：烈日盛叶（右下） -->
<g transform="translate(355, 225)">
<circle cx="0" cy="-12" r="11" fill="#d8a040"/>
<g stroke="#d8a040" stroke-width="1.2" stroke-linecap="round">
<line x1="0" y1="-28" x2="0" y2="-33"/>
<line x1="-16" y1="-12" x2="-21" y2="-12"/>
<line x1="16" y1="-12" x2="21" y2="-12"/>
</g>
<text x="0" y="18" font-size="11" fill="#b23a2e" text-anchor="middle" font-family="serif">夏</text>
</g>
<!-- 秋：落叶（左下） -->
<g transform="translate(145, 225)">
<path d="M0,-10 Q-10,-2 0,12 Q10,-2 0,-10 Z" fill="#c87a4a"/>
<path d="M0,-8 L0,8" stroke="#8a4a2a" stroke-width="0.6"/>
<text x="0" y="28" font-size="11" fill="#9a5a2a" text-anchor="middle" font-family="serif">秋</text>
</g>
<!-- 冬：雪枝（左上） -->
<g transform="translate(145, 95)">
<path d="M0,15 L0,-10 M0,-2 L-8,-12 M0,-6 L8,-16" stroke="#5a6a7a" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<g fill="#f4ecd8">
<circle cx="-10" cy="-14" r="1.8"/><circle cx="10" cy="-18" r="1.8"/><circle cx="0" cy="-12" r="1.5"/>
</g>
<text x="0" y="32" font-size="11" fill="#5a6a7a" text-anchor="middle" font-family="serif">冬</text>
</g>
<!-- 上方日，下方月（或左右），表现日月往来 -->
<g transform="translate(250, 40)">
<circle cx="0" cy="0" r="12" fill="#e8b040"/>
</g>
<g transform="translate(250, 262)">
<path d="M-10,0 a10 10 0 1 0 12 -9 a8 8 0 0 1 -12 9 z" fill="#cfd8dc"/>
</g>
<text x="250" y="25" font-size="14" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.7" font-weight="700">天道运而无所积 · 故万物成</text>
</svg>
<div class="comic-caption">日月往来、四时循环，天道运行不息、从不积滞，万物于是自然生成</div>
</div>
</div>
<div class="para-pair" data-idx="2">
<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="mirrorbg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a4a5a"/>
<stop offset="100%" stop-color="#2b2418"/>
</linearGradient>
<radialGradient id="mirror" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#f0d890" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#d8c8a0" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#8a7a5a" stop-opacity="0.1"/>
</radialGradient>
</defs>
<rect width="500" height="300" fill="url(#mirrorbg)"/>
<!-- 星点（静照万物） -->
<g fill="#f4ecd8" opacity="0.6">
<circle cx="60" cy="50" r="1"/><circle cx="110" cy="90" r="0.8"/>
<circle cx="430" cy="60" r="1"/><circle cx="400" cy="110" r="0.8"/>
<circle cx="80" cy="200" r="0.8"/><circle cx="440" cy="220" r="1"/>
</g>
<!-- 中央：一面古镜（圆镜、镜架、镜座），镜面映照万物 -->
<g transform="translate(250, 150)">
<!-- 镜架（横木立柱） -->
<line x1="-70" y1="80" x2="70" y2="80" stroke="#8a6a3a" stroke-width="4" stroke-linecap="round"/>
<path d="M-60,80 L-45,100 M60,80 L45,100" stroke="#8a6a3a" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- 镜身（圆，带铜框） -->
<circle cx="0" cy="0" r="72" fill="#6a5a3a" stroke="#b8893a" stroke-width="4"/>
<circle cx="0" cy="0" r="64" fill="url(#mirror)"/>
<!-- 镜中映照：山、月、云、飞鸟（若镜应而不藏） -->
<g opacity="0.85">
<!-- 月 -->
<circle cx="-25" cy="-25" r="12" fill="#f4ecd8" opacity="0.7"/>
<!-- 远山 -->
<path d="M-50,20 L-30,-5 L-10,15 L15,-15 L40,15 L50,5 L50,35 L-50,35 Z" fill="#5a6a5a" opacity="0.6"/>
<!-- 云气 -->
<path d="M-55,-2 q8,-8 18,-2 q8,-6 16,0" stroke="#f4ecd8" stroke-width="0.8" fill="none" opacity="0.5"/>
<!-- 飞鸟 -->
<path d="M20,-35 q-5,-4 -10,0 q5,4 10,0 M28,-38 q-4,-3 -8,0 q4,3 8,0" stroke="#2b2418" stroke-width="0.8" fill="none" opacity="0.7"/>
<!-- 水面 -->
<line x1="-55" y1="40" x2="55" y2="40" stroke="#f4ecd8" stroke-width="0.6" opacity="0.4"/>
</g>
<!-- 镜面高光 -->
<ellipse cx="-22" cy="-30" rx="18" ry="8" fill="#f4ecd8" opacity="0.18"/>
</g>
<text x="250" y="45" font-size="15" fill="#f0d890" text-anchor="middle" font-family="serif" opacity="0.85" font-weight="700">至人之心若镜</text>
<text x="250" y="270" font-size="12" fill="#d8cfc0" text-anchor="middle" font-family="serif" opacity="0.7">不将不迎 · 应而不藏 · 虚静恬淡</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>
</div>
<div class="para-pair" data-idx="5">
<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="hall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d8c89a"/>
<stop offset="100%" stop-color="#b8a878"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#hall)"/>
<!-- 堂上的屏风/案几（高台） -->
<rect x="0" y="0" width="500" height="150" fill="#c8b888" opacity="0.6"/>
<path d="M0 150 L500 150 L500 160 L0 160 Z" fill="#8a6a3a"/>
<!-- 栏柱（堂与堂下的分界） -->
<g fill="#6a4a2a">
<rect x="30" y="120" width="8" height="40"/>
<rect x="462" y="120" width="8" height="40"/>
</g>
<!-- 堂上：齐桓公凭几读书（右上部） -->
<g transform="translate(380, 100)">
<!-- 坐席/案 -->
<rect x="-45" y="30" width="90" height="14" rx="2" fill="#7a5a3a"/>
<!-- 身体（衮服，侧身向左） -->
<path d="M-26,-6 Q-32,20 -20,34 L20,34 Q32,20 26,-6 Q14,-18 0,-18 Q-14,-18 -26,-6 Z" fill="#5a6a8a"/>
<path d="M-20,-6 Q0,-2 20,-6" stroke="#3a4a6a" stroke-width="0.8" fill="none" opacity="0.6"/>
<!-- 头（戴冠） -->
<circle cx="0" cy="-28" r="11" fill="#e8c8a8"/>
<path d="M-12,-34 L12,-34 L10,-42 L-10,-42 Z" fill="#2b2418"/>
<rect x="-3" y="-46" width="6" height="8" fill="#b8893a"/>
<!-- 眉目（略带不悦、威重） -->
<path d="M-5,-30 Q-2,-31 1,-30" stroke="#2b2418" stroke-width="0.8" fill="none"/>
<!-- 双手捧竹简/书卷 -->
<g transform="translate(-14, 4)">
<rect x="-16" y="-4" width="32" height="14" rx="1" fill="#d8c088" stroke="#8a6a3a" stroke-width="0.8"/>
<line x1="-10" y1="-4" x2="-10" y2="10" stroke="#8a6a3a" stroke-width="0.5"/>
<line x1="0" y1="-4" x2="0" y2="10" stroke="#8a6a3a" stroke-width="0.5"/>
<line x1="10" y1="-4" x2="10" y2="10" stroke="#8a6a3a" stroke-width="0.5"/>
</g>
</g>
<!-- 堂下：轮扁斫轮（左下），面对桓公，一手比划、一手持凿 -->
<g transform="translate(150, 225)">
<!-- 木车轮（立在地上的半成品车轮） -->
<g transform="translate(40, 5)">
<circle cx="0" cy="0" r="38" fill="none" stroke="#6a4a2a" stroke-width="6"/>
<circle cx="0" cy="0" r="8" fill="#6a4a2a"/>
<g stroke="#6a4a2a" stroke-width="3">
<line x1="0" y1="-34" x2="0" y2="-8"/>
<line x1="0" y1="8" x2="0" y2="34"/>
<line x1="-34" y1="0" x2="-8" y2="0"/>
<line x1="8" y1="0" x2="34" y2="0"/>
<line x1="-24" y1="-24" x2="-6" y2="-6"/>
<line x1="6" y1="6" x2="24" y2="24"/>
<line x1="-24" y1="24" x2="-6" y2="6"/>
<line x1="6" y1="-6" x2="24" y2="-24"/>
</g>
</g>
<!-- 轮扁（蹲坐/跪坐斫轮） -->
<g transform="translate(-30, -10)">
<!-- 腿（跪坐） -->
<path d="M-10,40 Q-20,30 -6,22 L8,22 Q18,30 6,40 Z" fill="#7a6a4a"/>
<!-- 身（粗布短褐，老者） -->
<path d="M-16,-6 Q-22,18 -10,38 L12,38 Q22,18 16,-6 Q6,-16 0,-16 Q-6,-16 -16,-6 Z" fill="#8a7a5a"/>
<!-- 头（白须，抬头望桓公、说话） -->
<circle cx="2" cy="-24" r="11" fill="#e8c8a8"/>
<path d="M-8,-30 Q2,-40 12,-30 Z" fill="#c8c8c8"/>
<path d="M-2,-16 Q2,-10 8,-14" stroke="#a8a8a8" stroke-width="1.2" fill="none"/>
<path d="M-4,-26 Q-1,-27 2,-26" stroke="#2b2418" stroke-width="0.8" fill="none"/>
<ellipse cx="6" cy="-20" rx="2" ry="1.5" fill="#8a4a3a"/>
<!-- 一手举凿、一手比划（向桓公论说） -->
<path d="M10,0 Q28,-12 40,-26" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 凿子 -->
<rect x="36" y="-32" width="3" height="16" fill="#5a5a5a" transform="rotate(-30 38 -24)"/>
<!-- 另一只手扶轮 -->
<path d="M-12,4 Q-28,10 -34,22" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
</g>
<!-- 木屑 -->
<g fill="#a88858">
<rect x="60" y="40" width="3" height="1.5"/>
<rect x="20" y="48" width="3" height="1.5"/>
<rect x="70" y="36" width="2" height="1.5"/>
</g>
</g>
<!-- 对话气泡：轮扁的名言 -->
<g transform="translate(220, 70)">
<path d="M0,0 Q-30,-24 5,-34 Q40,-40 44,-14 Q44,6 12,10 Z" fill="#f4ecd8" stroke="#b8a878" stroke-width="0.8"/>
<text x="18" y="-18" font-size="10" fill="#8a4a2a" font-family="serif">得之于手</text>
<text x="18" y="-5" font-size="10" fill="#8a4a2a" font-family="serif">而应于心</text>
</g>
<text x="250" y="280" font-size="13" fill="#5a3a1a" 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="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>"轮扁斫轮"是对一切"知识学习"最深刻的提醒：真正的能力是"默会知识"（tacit knowledge）——骑车、弹琴、做手术、写代码、带团队、做判断，都有大量"得之于手应于心、口不能言"的分寸，光读书、看教程、背方法论是学不会的，必须在反复实践中长到身上。"至人之心若镜""不将不迎，应而不藏"，对治今天的焦虑、内耗和过度反刍极有价值：照见事物本然，不预存迎拒，事来则应、事去不留，是极高的心理修养。</p>
</div>
<div class="persp-card discuss">
<div class="persp-label">◆ 需要辨析</div>
<p>"君无为臣有为"在今天可以转译为管理中的"授权 vs 执行"分工：领导者定方向、造环境（无为），让专业的人在具体事务上充分作为（有为），避免领导事必躬亲、下属无所适从。但要警惕它被歪曲为"当官的甩手不担责、干活的无权"。现代组织讲授权，前提是清晰的责任、透明的规则和下属的能力匹配；离开这些，"无为"很容易变成懒政和推诿。关键是各安其位，而不是固化等级。</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 时代大量被算法、模型"言传"出来的知识是什么关系——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-yangshengzhu.html" class="further-card">
<div class="fc-tag">本书相关</div>
<div class="fc-title">《庄子·养生主》</div>
<div class="fc-desc">庖丁解牛"以神遇而不以目视"，与轮扁"得之于手而应于心"同为技艺进于道、由实践证道的经典寓言。</div>
</a>
<a href="zhuangzi-tiandi.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>