-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-keyi.html
More file actions
591 lines (555 loc) · 35.6 KB
/
Copy pathzhuangzi-keyi.html
File metadata and controls
591 lines (555 loc) · 35.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
<!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"></span></span>
</div>
<div class="meta-item"><span class="label">阅读时长</span><span>约 12 分钟</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">
语仁义忠信，恭俭推让，为修而已矣；此平世之士，教诲之人，游居学者之所好也。语大功，立大名，礼君臣，正上下，为治而已矣；此朝廷之士，尊主强国之人，致功并兼者之所好也。
</p>
</div>
<div class="para-pair" data-idx="3">
<p class="orig-para">
就<span class="annot" data-note='湖泽、水草丛生的地方，泛指山野水畔。薮（sǒu），大泽。'>薮泽</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>，为寿而已矣；此道引之士，养形之人，彭祖寿考者之所好也。
</p>
</div>
<div class="para-pair" data-idx="5">
<p class="orig-para">
若夫不刻意而高，无仁义而修，无功名而治，无江海而闲，不道引而寿，无不忘也，无不有也，<span class="annot" data-note='恬淡广阔、没有边际，指心不系于一物的虚静状态。澹（dàn），安静、淡薄。'>澹然无极</span>而众美从之。此天地之道，圣人之德也。
</p>
</div>
<div class="para-pair" data-idx="6">
<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 280" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="kyMist" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d8d0b4"/>
<stop offset="100%" stop-color="#b8ac88"/>
</linearGradient>
</defs>
<rect width="500" height="280" fill="url(#kyMist)"/>
<!-- 两侧峡谷峭壁 -->
<path d="M0 0 L90 0 L70 120 L50 200 L0 240 Z" fill="#7a6a5a" opacity="0.85"/>
<path d="M500 0 L410 0 L430 110 L455 200 L500 240 Z" fill="#7a6a5a" opacity="0.85"/>
<!-- 远山 -->
<path d="M90 120 L180 70 L260 110 L340 60 L410 110 L410 130 L90 130 Z" fill="#9a8a7a" opacity="0.5"/>
<!-- 谷底水/雾 -->
<path d="M0 230 Q250 215 500 230 L500 280 L0 280 Z" fill="#6a7a7a" opacity="0.4"/>
<g stroke="#e8dcc0" stroke-width="1" fill="none" opacity="0.4">
<path d="M0 245 Q120 240 250 248 T500 244"/>
<path d="M0 262 Q150 258 300 264 T500 260"/>
</g>
<!-- 枯树（左侧崖上，无叶，扭曲） -->
<g transform="translate(80,90)" stroke="#5a3a22" stroke-width="2.5" fill="none" stroke-linecap="round">
<path d="M0,150 L0,40"/>
<path d="M0,80 L-20,55 M0,70 L18,48 M0,55 L-12,30"/>
</g>
<!-- 中央：枯槁之士，立于孤崖/枯树旁，身形瘦削，昂首指天、高论 -->
<g transform="translate(260,150)">
<!-- 脚下小石 -->
<ellipse cx="0" cy="58" rx="28" ry="6" fill="#8a7a6a"/>
<!-- 身体（瘦长、清癯） -->
<path d="M-9,-8 Q-12,25 -6,55 L6,55 Q12,25 9,-8 Q4,-14 0,-14 Q-4,-14 -9,-8 Z" fill="#5a6a4a"/>
<!-- 头 -->
<circle cx="0" cy="-22" r="8" fill="#e8c8a8"/>
<!-- 颧骨、瘦削（两撇） -->
<path d="M-6,-20 Q-8,-16 -6,-14" stroke="#b8896a" stroke-width="0.7" fill="none"/>
<path d="M6,-20 Q8,-16 6,-14" stroke="#b8896a" stroke-width="0.7" fill="none"/>
<!-- 头发束起、凌乱 -->
<path d="M-7,-28 L7,-28 L5,-34 L-5,-34 Z" fill="#3a3028"/>
<line x1="-4" y1="-33" x2="-8" y2="-40" stroke="#3a3028" stroke-width="1"/>
<line x1="3" y1="-33" x2="8" y2="-40" stroke="#3a3028" stroke-width="1"/>
<!-- 昂首、张口高论 -->
<ellipse cx="2" cy="-17" rx="2" ry="2.5" fill="#8a4a3a"/>
<!-- 一手指天（高论怨诽），一手负后 -->
<path d="M8,-2 Q20,-20 30,-32" stroke="#e8c8a8" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M-8,0 Q-20,8 -22,18" stroke="#e8c8a8" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- 说话的线条（怨诽、激昂） -->
<g stroke="#b23a2e" stroke-width="1.2" fill="none" opacity="0.7">
<path d="M30,-32 L40,-42 M34,-28 L46,-30 M32,-38 L44,-44"/>
</g>
</g>
<text x="250" y="35" font-size="14" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.65" 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>
</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 280" xmlns="http://www.w3.org/2000/svg">
<rect width="500" height="280" fill="#e8dcc0"/>
<!-- 地面/林野 -->
<path d="M0 210 Q250 200 500 210 L500 280 L0 280 Z" fill="#9aaa7a" opacity="0.5"/>
<path d="M0 210 Q250 200 500 210" stroke="#6a7a4a" stroke-width="1.2" fill="none"/>
<!-- 远景小树 -->
<g stroke="#5a7a4a" stroke-width="1.5" fill="none">
<path d="M70 210 L70 175 M70 185 L60 175 M70 180 L80 170"/>
<path d="M430 210 L430 180 M430 188 L420 178 M430 184 L440 175"/>
</g>
<!-- 左侧：熊经（人模仿熊攀树悬垂） -->
<g transform="translate(140,130)">
<!-- 树 -->
<line x1="0" y1="80" x2="0" y2="-60" stroke="#6a4a2a" stroke-width="6"/>
<path d="M0,-40 L-25,-60 M0,-50 L22,-68" stroke="#6a4a2a" stroke-width="3" fill="none"/>
<!-- 人双手抓树枝、身体悬吊（熊经） -->
<g>
<!-- 手臂上举抓枝 -->
<line x1="-6" y1="-30" x2="-2" y2="-55" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<line x1="6" y1="-30" x2="2" y2="-55" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<!-- 身体悬垂、略前后摆荡 -->
<path d="M-10,-28 Q-14,10 -8,40 L8,40 Q14,10 10,-28 Q5,-36 0,-36 Q-5,-36 -10,-28 Z" fill="#7a4a3a"/>
<circle cx="0" cy="-34" r="7" fill="#e8c8a8"/>
<!-- 头微仰 -->
<path d="M-3,-36 Q0,-39 3,-36" stroke="#2b2418" stroke-width="0.6" fill="none"/>
<!-- 腿自然下垂、微屈（熊的笨重感） -->
<line x1="-5" y1="40" x2="-9" y2="62" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<line x1="5" y1="40" x2="10" y2="64" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<!-- 气息（吐故纳新） -->
<g stroke="#5a7a8a" stroke-width="1" fill="none" opacity="0.6">
<path d="M-12,-40 Q-22,-48 -18,-58"/>
<path d="M12,-40 Q22,-48 18,-58"/>
</g>
</g>
<text x="0" y="95" font-size="12" fill="#5a3a22" text-anchor="middle" font-family="serif">熊经</text>
</g>
<!-- 右侧：鸟申（人模仿鸟伸颈展翅） -->
<g transform="translate(360,140)">
<!-- 地面 -->
<!-- 人单腿独立，双臂如翼展开，脖颈前伸（鸟申） -->
<g>
<!-- 支撑腿 -->
<line x1="0" y1="30" x2="0" y2="68" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<!-- 另一腿后抬 -->
<line x1="0" y1="30" x2="20" y2="18" stroke="#e8c8a8" stroke-width="4" stroke-linecap="round"/>
<!-- 躯干前俯 -->
<path d="M-8,30 Q-4,5 2,-8 Q8,10 6,30 Z" fill="#5a6a7a"/>
<!-- 头颈前伸（鸟颈） -->
<path d="M2,-8 Q20,-18 30,-14" stroke="#e8c8a8" stroke-width="5" fill="none" stroke-linecap="round"/>
<circle cx="32" cy="-15" r="6" fill="#e8c8a8"/>
<!-- 尖喙 -->
<path d="M37,-15 L45,-16 L37,-13 Z" fill="#b8893a"/>
<circle cx="34" cy="-16" r="0.8" fill="#2b2418"/>
<!-- 双臂如翼展开 -->
<path d="M-4,10 Q-30,-5 -45,-18" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<path d="M6,10 Q30,-5 42,-14" stroke="#e8c8a8" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 飘逸的袖口/羽翼感 -->
<path d="M-45,-18 Q-52,-12 -46,-8" stroke="#5a6a7a" stroke-width="2" fill="none"/>
<path d="M42,-14 Q50,-10 46,-4" stroke="#5a6a7a" stroke-width="2" fill="none"/>
</g>
<text x="10" y="95" font-size="12" fill="#3a4a5a" text-anchor="middle" font-family="serif">鸟申</text>
</g>
<!-- 吐故纳新的气流循环（中央） -->
<g fill="none" stroke="#b8893a" stroke-width="1" stroke-dasharray="3,3" opacity="0.5">
<path d="M200 90 Q250 60 300 90"/>
<polygon points="300,87 306,90 300,93" fill="#b8893a" opacity="0.7"/>
</g>
<text x="250" y="75" font-size="10" fill="#8a6a3a" text-anchor="middle" font-family="serif">吐故 · 纳新</text>
<text x="250" y="40" font-size="14" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.65" font-weight="700">熊经鸟申 · 为寿而已</text>
</svg>
<div class="comic-caption">吹呴呼吸、熊经鸟申——养形求寿虽好，却仍是“刻意”的一种</div>
</div>
</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>
<radialGradient id="kyHalo" cx="50%" cy="45%" r="55%">
<stop offset="0%" stop-color="#f0d890" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#f0d890" stop-opacity="0"/>
</radialGradient>
<linearGradient id="kyMirror" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d8d0b4"/>
<stop offset="100%" stop-color="#a89878"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="#e8dcc0"/>
<!-- 山水远景（恬淡） -->
<path d="M0 180 L90 130 L170 165 L260 115 L350 160 L430 130 L500 155 L500 220 L0 220 Z" fill="#9aaa8a" opacity="0.4"/>
<!-- 静水 -->
<path d="M0 220 Q250 212 500 220 L500 300 L0 300 Z" fill="#7a9098" opacity="0.35"/>
<g stroke="#a8c0c8" stroke-width="0.8" fill="none" opacity="0.5">
<path d="M0 240 Q120 236 250 242 T500 238"/>
<path d="M0 265 Q150 260 300 266 T500 262"/>
</g>
<!-- 中央圣人，盘坐，如一面镜子（背后/身前有圆镜意象），光轮 -->
<g transform="translate(250,165)">
<circle cx="0" cy="0" r="80" fill="url(#kyHalo)"/>
<!-- 圆镜（圣人之心若镜，用一个素圆/镜架表现） -->
<ellipse cx="0" cy="-5" rx="46" ry="52" fill="url(#kyMirror)" opacity="0.25" stroke="#8a7a5a" stroke-width="1.2"/>
<!-- 镜中人影（坐姿） -->
<!-- 身体盘坐 -->
<path d="M-30,30 Q-40,5 -20,-10 Q0,-20 20,-10 Q40,5 30,30 Q20,40 0,40 Q-20,40 -30,30 Z" fill="#6a7a6a"/>
<!-- 盘腿 -->
<path d="M-30,30 Q-15,42 0,36 Q15,42 30,30" stroke="#4a5a4a" stroke-width="1.5" fill="none"/>
<!-- 头 -->
<circle cx="0" cy="-22" r="11" fill="#e8c8a8"/>
<!-- 眉目安详、闭眼 -->
<path d="M-5,-24 Q-3,-25 -1,-24" stroke="#2b2418" stroke-width="0.8" fill="none"/>
<path d="M1,-24 Q3,-25 5,-24" stroke="#2b2418" stroke-width="0.8" fill="none"/>
<path d="M-3,-18 Q0,-17 3,-18" stroke="#8a5a4a" stroke-width="0.7" fill="none"/>
<!-- 手结于腹前 -->
<ellipse cx="0" cy="12" rx="10" ry="5" fill="#e8c8a8" opacity="0.9"/>
</g>
<!-- 众美从之：从四方流向圣人的飞鸟、云、花、星（小意象） -->
<g fill="#b23a2e" opacity="0.7">
<circle cx="90" cy="80" r="2.5"/>
<circle cx="410" cy="90" r="2.5"/>
<circle cx="120" cy="200" r="2"/>
<circle cx="390" cy="190" r="2"/>
</g>
<!-- 飞鸟 -->
<g stroke="#2b2418" stroke-width="1.2" fill="none" opacity="0.5">
<path d="M70 110 Q78 104 86 110 Q94 104 102 110"/>
<path d="M400 70 Q408 64 416 70 Q424 64 432 70"/>
</g>
<!-- 落花/叶，飘向中央 -->
<g fill="#b8893a" opacity="0.6">
<ellipse cx="150" cy="120" rx="3" ry="1.5" transform="rotate(30 150 120)"/>
<ellipse cx="350" cy="130" rx="3" ry="1.5" transform="rotate(-30 350 130)"/>
<ellipse cx="180" cy="230" rx="2.5" ry="1.2" transform="rotate(-20 180 230)"/>
<ellipse cx="320" cy="240" rx="2.5" ry="1.2" transform="rotate(20 320 240)"/>
</g>
<!-- 流向中央的虚线 -->
<g stroke="#b8893a" stroke-width="0.8" stroke-dasharray="2,3" fill="none" opacity="0.4">
<path d="M70 90 Q150 110 210 140"/>
<path d="M430 80 Q350 110 290 140"/>
<path d="M90 240 Q160 210 215 190"/>
<path d="M410 240 Q340 210 285 190"/>
</g>
<text x="250" y="45" font-size="14" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.7" font-weight="700">澹然无极 · 众美从之</text>
<text x="250" y="285" font-size="11" fill="#5a7a4a" text-anchor="middle" font-family="serif" opacity="0.8">至人之用心若镜，不将不迎，应而不藏</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>《刻意》对五种人的剖析，几乎是一幅当代"人设"图鉴：刻意立异鸣高的键盘隐士、满口仁义道德的说教者、追逐功名权力的内卷者、躲进山水远方的避世者、迷信养生打卡的健身长寿追求者——在今天都能一一对应。庄子点出的核心是：凡是"刻意"用力、向外抓取的状态，都难以持久，也会耗损精神。"养神贵精""不将不迎，应而不藏"提供了一种对抗焦虑与内耗的内在秩序：把事情做好，但不必把自我绑死在结果上。</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-yangshengzhu.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="zhuangzi-shanxing.html" 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>