-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzhuangzi-quqie.html
More file actions
649 lines (607 loc) · 38.3 KB
/
Copy pathzhuangzi-quqie.html
File metadata and controls
649 lines (607 loc) · 38.3 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
<!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>约 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='胠（qū），从旁边撬开；箧（qiè），小箱子。探囊，掏口袋；发匮，开柜子。匮，同"柜"。'>胠箧探囊发匮</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">
圣人不死，大盗不止。虽重圣人而治天下，则是重利盗跖也。为之斗斛以量之，则并与斗斛而窃之；为之权衡以称之，则并与权衡而窃之；为之符玺以信之，则并与符玺而窃之；为之仁义以矫之，则并与仁义而窃之。
</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 290" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="qbg1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8dcc0"/>
<stop offset="100%" stop-color="#c8b890"/>
</linearGradient>
</defs>
<rect width="500" height="290" fill="url(#qbg1)"/>
<!-- 地面 -->
<path d="M0 235 Q250 228 500 235 L500 290 L0 290 Z" fill="#9a8858" opacity="0.6"/>
<path d="M0 235 Q250 228 500 235" stroke="#6a5a30" stroke-width="1.2" fill="none"/>
<!-- 室内：一个自以为聪明的主人在捆箱、上锁、系袋 -->
<!-- 大箱子（柜），缠绕绳索，挂大锁 -->
<g transform="translate(150, 175)">
<!-- 柜身 -->
<rect x="-60" y="-40" width="120" height="80" rx="4" fill="#9a6a3a" stroke="#5a3a18" stroke-width="1.5"/>
<rect x="-55" y="-35" width="110" height="70" rx="2" fill="#b8893a" opacity="0.4"/>
<!-- 木纹 -->
<g stroke="#7a4a20" stroke-width="0.7" opacity="0.5" fill="none">
<line x1="-50" y1="-18" x2="50" y2="-18"/>
<line x1="-50" y1="0" x2="50" y2="0"/>
<line x1="-50" y1="18" x2="50" y2="18"/>
</g>
<!-- 交叉捆绳（缄縢） -->
<path d="M-60,-40 L60,40 M60,-40 L-60,40" stroke="#d8b060" stroke-width="3" fill="none"/>
<path d="M-60,-40 L60,40 M60,-40 L-60,40" stroke="#8a6a30" stroke-width="1" fill="none" stroke-dasharray="3,2"/>
<!-- 中央大锁（扃鐍） -->
<rect x="-12" y="-10" width="24" height="20" rx="3" fill="#3a3428" stroke="#1a1410" stroke-width="1.2"/>
<path d="M-6,-10 V-16 a6,6 0 0 1 12,0 V-10" stroke="#3a3428" stroke-width="2.5" fill="none"/>
<circle cx="0" cy="0" r="2" fill="#d8b060"/>
<text x="0" y="60" font-size="11" fill="#5a3a18" text-anchor="middle" font-family="serif">缄縢 · 扃鐍</text>
</g>
<!-- 小箱子（箧），也捆着绳 -->
<g transform="translate(320, 195)">
<rect x="-40" y="-26" width="80" height="46" rx="3" fill="#a8743a" stroke="#5a3a18" stroke-width="1.3"/>
<path d="M-40,-26 L40,20 M40,-26 L-40,20" stroke="#d8b060" stroke-width="2.2" fill="none"/>
<rect x="-8" y="-8" width="16" height="14" rx="2" fill="#3a3428"/>
<text x="0" y="38" font-size="11" fill="#5a3a18" text-anchor="middle" font-family="serif">箧</text>
</g>
<!-- 口袋（囊），扎紧袋口 -->
<g transform="translate(405, 195)">
<path d="M-22,20 Q-28,-10 -10,-24 Q0,-28 10,-24 Q28,-10 22,20 Q0,28 -22,20 Z" fill="#b8893a" stroke="#6a4a20" stroke-width="1.2"/>
<!-- 扎绳 -->
<rect x="-12" y="-26" width="24" height="5" rx="2" fill="#5a3a18"/>
<path d="M-10,-26 l-4,-10 M10,-26 l4,-10" stroke="#5a3a18" stroke-width="1.5" fill="none"/>
<text x="0" y="40" font-size="11" fill="#5a3a18" text-anchor="middle" font-family="serif">囊</text>
</g>
<!-- 主人：拱手、得意，自以为知 -->
<g transform="translate(90, 150)">
<circle cx="0" cy="-24" r="11" fill="#e8c8a8"/>
<path d="M-9,-32 L9,-32 L7,-38 L-7,-38 Z" fill="#3a2a18"/>
<path d="M-16,-8 Q-22,28 -10,52 L10,52 Q22,28 16,-8 Q8,-18 0,-18 Q-8,-18 -16,-8 Z" fill="#5a6a7a"/>
<!-- 得意眯眼、笑 -->
<path d="M-4,-26 q2,-2 4,0" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M0,-26 q2,-2 4,0" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M-3,-18 q3,3 6,0" stroke="#8a4a3a" stroke-width="1" fill="none"/>
<!-- 胡须 -->
<path d="M-3,-14 Q0,-10 3,-14" stroke="#3a2a18" stroke-width="0.8" fill="none"/>
<!-- 拱手 -->
<ellipse cx="0" cy="8" rx="9" ry="5" fill="#e8c8a8"/>
<!-- 气泡：自以为聪明 -->
<g transform="translate(-2,-62)">
<path d="M0,0 Q-24,-14 0,-26 Q28,-30 22,-6 Q18,4 0,6 Z" fill="#f4ecd8" stroke="#b8a878" stroke-width="0.8"/>
<text x="0" y="-10" font-size="11" fill="#8a6a3a" text-anchor="middle" font-family="serif">锁得牢，万无一失</text>
</g>
</g>
<text x="250" y="40" font-size="14" 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="qbg2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d8ccae"/>
<stop offset="100%" stop-color="#a89868"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#qbg2)"/>
<!-- 夜色暗角 -->
<rect width="500" height="300" fill="#2b2418" opacity="0.12"/>
<!-- 月亮 -->
<circle cx="430" cy="56" r="22" fill="#f0e4b8" opacity="0.85"/>
<circle cx="438" cy="50" r="20" fill="url(#qbg2)"/>
<!-- 远山/屋脊 -->
<path d="M0 120 L60 90 L120 115 L200 80 L300 110 L400 85 L500 115 L500 150 L0 150 Z" fill="#4a4030" opacity="0.5"/>
<!-- 地面 -->
<path d="M0 250 Q250 244 500 250 L500 300 L0 300 Z" fill="#5a4a28" opacity="0.7"/>
<!-- 速度线（巨盗奔逃） -->
<g stroke="#2b2418" stroke-width="1.6" opacity="0.35" stroke-linecap="round">
<line x1="60" y1="120" x2="20" y2="110"/>
<line x1="50" y1="150" x2="10" y2="150"/>
<line x1="60" y1="180" x2="20" y2="190"/>
<line x1="80" y1="210" x2="30" y2="225"/>
</g>
<!-- 巨盗：肩扛大柜、手拎箱、担袋，大步奔跑 -->
<g transform="translate(270, 175)">
<!-- 大步的腿 -->
<path d="M-8,40 L-30,80 L-22,84 L4,48 Z" fill="#3a3028"/>
<path d="M8,40 L34,72 L28,78 L16,46 Z" fill="#2a2018"/>
<!-- 身（黑衣蒙面） -->
<path d="M-20,-10 Q-26,30 -14,46 L14,46 Q26,30 20,-10 Q10,-22 0,-22 Q-10,-22 -20,-10 Z" fill="#2b2418"/>
<!-- 腰带 -->
<rect x="-18" y="20" width="36" height="5" fill="#b23a2e"/>
<!-- 头（蒙巾，只露眼） -->
<circle cx="0" cy="-30" r="12" fill="#2b2418"/>
<path d="M-10,-34 Q0,-44 10,-34 L10,-26 L-10,-26 Z" fill="#1a1410"/>
<!-- 眼（凶狠/得意） -->
<ellipse cx="-4" cy="-29" rx="2.5" ry="1.6" fill="#f0d890"/>
<ellipse cx="5" cy="-29" rx="2.5" ry="1.6" fill="#f0d890"/>
<circle cx="-4" cy="-29" r="1" fill="#2b2418"/>
<circle cx="5" cy="-29" r="1" fill="#2b2418"/>
<!-- 肩上扛的大柜（负匮），绳子还在、锁还在 -->
<g transform="translate(-2,-58)">
<rect x="-40" y="-26" width="80" height="50" rx="3" fill="#8a5a2a" stroke="#4a2a10" stroke-width="1.3"/>
<g stroke="#6a3a18" stroke-width="0.6" opacity="0.5">
<line x1="-35" y1="-10" x2="35" y2="-10"/>
<line x1="-35" y1="6" x2="35" y2="6"/>
</g>
<!-- 绳 -->
<path d="M-40,-26 L40,24 M40,-26 L-40,24" stroke="#d8b060" stroke-width="2.4" fill="none"/>
<!-- 锁 -->
<rect x="-7" y="-6" width="14" height="12" rx="2" fill="#2b2418"/>
<path d="M-4,-6 v-4 a4,4 0 0 1 8,0 v4" stroke="#2b2418" stroke-width="2" fill="none"/>
</g>
<!-- 扁担（揭箧担囊）：斜跨肩上，一头小箱、一头口袋 -->
<line x1="-46" y1="-46" x2="50" y2="-78" stroke="#6a4a20" stroke-width="3.5" stroke-linecap="round"/>
<!-- 左：小箱（箧） -->
<g transform="translate(-58,-40)">
<rect x="-18" y="-12" width="36" height="24" rx="2" fill="#a8743a" stroke="#5a3a18" stroke-width="1"/>
<path d="M-18,-12 L18,12 M18,-12 L-18,12" stroke="#d8b060" stroke-width="1.6" fill="none"/>
<rect x="-4" y="-4" width="8" height="8" fill="#2b2418"/>
</g>
<!-- 右：口袋（囊）晃荡 -->
<g transform="translate(56,-74) rotate(-12)">
<path d="M-14,16 Q-18,-8 -6,-18 Q0,-22 6,-18 Q18,-8 14,16 Q0,22 -14,16 Z" fill="#b8893a" stroke="#6a4a20" stroke-width="1"/>
<rect x="-8" y="-20" width="16" height="4" fill="#5a3a18"/>
</g>
<!-- 一手扶扁担 -->
<path d="M18,-4 Q34,-20 46,-30" stroke="#2b2418" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M18,-4 Q34,-20 46,-30" stroke="#e8c8a8" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.5"/>
<!-- 一只手向后拎袋（省略，已在扁担） -->
<!-- 脚下尘埃 -->
<g fill="#8a7a48" opacity="0.6">
<ellipse cx="-34" cy="84" rx="10" ry="3"/>
<ellipse cx="36" cy="80" rx="8" ry="2.5"/>
</g>
</g>
<!-- 左后方：敞开的门、空空的架（被盗现场） -->
<g transform="translate(70, 150)">
<rect x="-30" y="-60" width="60" height="100" fill="#3a2a18" opacity="0.5"/>
<path d="M-30,-60 L-20,-50 L-20,40 L-30,40 Z" fill="#2a1a10"/>
<!-- 地上一截断绳 -->
<path d="M-20,50 q10,-6 20,0 q10,6 20,0" stroke="#d8b060" stroke-width="2" fill="none"/>
<text x="0" y="68" font-size="11" fill="#3a2a10" text-anchor="middle" font-family="serif" opacity="0.8">唯恐缄縢扃鐍之不固</text>
</g>
<text x="250" y="40" font-size="14" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.8" 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="qbg3" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e8dcc0"/>
<stop offset="100%" stop-color="#c8b890"/>
</linearGradient>
</defs>
<rect width="500" height="300" fill="url(#qbg3)"/>
<!-- 用一道墙/门拱把画面分成上下两个世界：下方小民被杀，上方诸侯高坐 -->
<!-- 高堂基座 -->
<rect x="0" y="150" width="500" height="150" fill="#8a7a4a" opacity="0.25"/>
<path d="M0 150 L500 150" stroke="#6a5a30" stroke-width="2"/>
<!-- 堂上朱柱两根 -->
<rect x="120" y="40" width="14" height="112" fill="#b23a2e"/>
<rect x="366" y="40" width="14" height="112" fill="#b23a2e"/>
<!-- 横梁 -->
<rect x="100" y="36" width="300" height="14" fill="#8a3a2a"/>
<!-- 堂匾 -->
<rect x="210" y="6" width="80" height="28" rx="2" fill="#5a2a1a" stroke="#3a1a0a" stroke-width="1"/>
<text x="250" y="26" font-size="15" fill="#f0d890" text-anchor="middle" font-family="serif" font-weight="700">诸侯</text>
<!-- 上：窃国者端坐堂上，身着华服，身旁有"仁义"屏风 -->
<g transform="translate(250, 110)">
<!-- 座椅/几案 -->
<rect x="-50" y="20" width="100" height="14" fill="#6a4a20"/>
<rect x="-46" y="34" width="8" height="30" fill="#6a4a20"/>
<rect x="38" y="34" width="8" height="30" fill="#6a4a20"/>
<!-- 华服身躯（大袖） -->
<path d="M-34,-6 Q-42,26 -30,40 L30,40 Q42,26 34,-6 Q20,-18 0,-18 Q-20,-18 -34,-6 Z" fill="#7a2a24"/>
<!-- 衣纹 -->
<path d="M-20,0 Q0,8 20,0" stroke="#d8b060" stroke-width="1" fill="none"/>
<!-- 头 -->
<circle cx="0" cy="-26" r="11" fill="#e8c8a8"/>
<!-- 冠（诸侯冕旒） -->
<rect x="-13" y="-40" width="26" height="8" fill="#2b2418"/>
<rect x="-15" y="-34" width="30" height="3" fill="#d8b060"/>
<!-- 旒（珠串） -->
<g stroke="#d8b060" stroke-width="0.8">
<line x1="-12" y1="-34" x2="-12" y2="-28"/>
<line x1="-6" y1="-34" x2="-6" y2="-28"/>
<line x1="0" y1="-34" x2="0" y2="-28"/>
<line x1="6" y1="-34" x2="6" y2="-28"/>
<line x1="12" y1="-34" x2="12" y2="-28"/>
</g>
<!-- 表情：志得意满 -->
<path d="M-4,-27 q2,-2 4,0 M0,-27 q2,-2 4,0" stroke="#2b2418" stroke-width="1" fill="none"/>
<path d="M-3,-19 q3,2 6,0" stroke="#8a4a3a" stroke-width="1" fill="none"/>
<!-- 拱手前 -->
<ellipse cx="0" cy="6" rx="10" ry="5" fill="#e8c8a8"/>
</g>
<!-- 屏风上"仁义"二字（朱底金字暗示） -->
<g transform="translate(250, 95)" opacity="0.0">
</g>
<text x="250" y="80" font-size="11" fill="#7a2a24" text-anchor="middle" font-family="serif" opacity="0.85">诸侯之门 · 仁义存焉</text>
<!-- 下：窃钩者（小民）被押赴刑，手中一枚衣带钩 -->
<g transform="translate(180, 230)">
<!-- 囚徒：跪地、被缚 -->
<circle cx="0" cy="-20" r="9" fill="#e8c8a8"/>
<!-- 散发 -->
<path d="M-8,-26 Q0,-34 8,-26 L8,-20 L-8,-20 Z" fill="#3a2a18"/>
<path d="M-6,-22 Q-10,-14 -8,-6" stroke="#3a2a18" stroke-width="2" fill="none"/>
<!-- 痛苦表情 -->
<circle cx="-3" cy="-21" r="0.8" fill="#2b2418"/>
<circle cx="3" cy="-21" r="0.8" fill="#2b2418"/>
<path d="M-3,-15 q3,-2 6,0" stroke="#8a4a3a" stroke-width="1" fill="none"/>
<!-- 上身（短褐、被缚双手） -->
<path d="M-14,-8 Q-18,18 -8,30 L8,30 Q18,18 14,-8 Q6,-14 0,-14 Q-6,-14 -14,-8 Z" fill="#6a5a3a"/>
<!-- 绳索缚身 -->
<path d="M-14,-2 L14,8 M-14,8 L14,-2" stroke="#3a2a18" stroke-width="1.4" fill="none"/>
<!-- 手中掉落的衣带钩（钩） -->
<g transform="translate(20,18)">
<path d="M0,0 q-8,-2 -8,-10 q0,-6 6,-6 q6,0 6,6" stroke="#b8893a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g>
<text x="0" y="52" font-size="11" fill="#6a2a18" text-anchor="middle" font-family="serif">窃钩者 · 诛</text>
</g>
<!-- 刽子手/差役（简笔，持斧钺） -->
<g transform="translate(330, 225)">
<circle cx="0" cy="-18" r="9" fill="#e8c8a8"/>
<path d="M-7,-26 L7,-26 L5,-31 L-5,-31 Z" fill="#3a2a18"/>
<path d="M-12,-6 Q-16,22 -6,40 L6,40 Q16,22 12,-6 Q6,-12 0,-12 Q-6,-12 -12,-6 Z" fill="#4a3a2a"/>
<!-- 持斧 -->
<line x1="12" y1="0" x2="30" y2="-36" stroke="#6a4a20" stroke-width="2.5" stroke-linecap="round"/>
<path d="M26,-30 q14,-6 18,6 q-10,4 -20,-2 Z" fill="#8a8a8a" stroke="#3a3a3a" stroke-width="1"/>
<text x="0" y="62" font-size="10" fill="#3a2a18" text-anchor="middle" font-family="serif" opacity="0.7">斧钺之威</text>
</g>
<text x="250" y="285" font-size="13" fill="#2b2418" text-anchor="middle" font-family="serif" opacity="0.8" 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>庄子把账算到"圣人"和"圣法"头上，认为只要毁掉斗斛、符玺、仁义，就能消除争夺——这混淆了"工具被滥用"和"工具本身"。秤杆能被商人做手脚，但没有秤杆，交易只会更不公平；法律能被强权扭曲，但没有法律，弱者将毫无保障。真正的问题不是要不要规则和价值，而是如何让规则不被垄断、让仁义不被盗用：用权力制衡、信息透明、民主监督来约束"大盗"，而不是天真地砸掉一切度量衡。</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-mati.html" class="further-card">
<div class="fc-tag">外篇 · 第二</div>
<div class="fc-title">《庄子·马蹄》</div>
<div class="fc-desc">伯乐治马、陶匠治埴木，批判以规矩伤生害性，与本篇"绝圣弃知"同属一组外篇政论。</div>
</a>
<a href="zhuangzi-pianmu.html" class="further-card">
<div class="fc-tag">外篇 · 第一</div>
<div class="fc-title">《庄子·骈拇》</div>
<div class="fc-desc">以骈拇枝指喻仁义之侈于性，与《马蹄》《胠箧》同属一组批判圣智仁义的外篇政论，三篇宜连读。</div>
</a>
<a href="zhuangzi-renjianshi.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>