-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdaoism-index.html
More file actions
798 lines (774 loc) · 31.6 KB
/
Copy pathdaoism-index.html
File metadata and controls
798 lines (774 loc) · 31.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
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
<!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>
/* ===== 1. 封面区 ===== */
.hero {
background: linear-gradient(135deg, #2b2418 0%, #3a3025 50%, #4a3f30 100%);
color: var(--paper-light);
overflow: hidden;
}
.hero-inner {
max-width: 1200px; margin: 0 auto;
padding: 4rem 2rem;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3rem; align-items: center;
}
.hero-tag {
display: inline-block;
font-size: 0.82rem; letter-spacing: 0.25em;
color: var(--gold);
border: 1px solid rgba(184,137,58,0.5);
padding: 0.3rem 1rem; border-radius: 20px;
margin-bottom: 1.5rem;
}
.hero h1 {
font-family: "Noto Serif SC", serif;
font-size: 4.5rem; font-weight: 700;
letter-spacing: 0.2em;
margin-bottom: 0.3rem; line-height: 1.1;
}
.hero .hero-sub {
font-family: "Noto Serif SC", serif;
font-size: 1.3rem; color: #c9b896;
letter-spacing: 0.1em; margin-bottom: 1.5rem;
}
.hero-meta {
display: flex; flex-wrap: wrap; gap: 1.5rem;
margin-bottom: 2rem; font-size: 0.9rem; color: #b8a888;
}
.hero-meta .item { display: flex; gap: 0.4rem; }
.hero-meta .label { color: #8a7c68; }
.hero-tagline {
font-size: 1.1rem; line-height: 2; color: #d8cfc0;
max-width: 560px;
border-left: 3px solid var(--accent);
padding-left: 1.2rem;
}
.hero-visual { display: flex; justify-content: center; }
.hero-visual svg { max-width: 100%; height: auto; }
/* ===== 2. 一句话定位 ===== */
.positioning {
text-align: center;
padding: 3.5rem 2rem;
background: var(--paper-light);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.positioning blockquote {
font-family: "Noto Serif SC", serif;
font-size: 1.5rem; line-height: 2.2;
color: var(--ink); max-width: 820px; margin: 0 auto;
}
.positioning blockquote .accent { color: var(--accent); }
.positioning .by {
margin-top: 1rem; font-size: 0.88rem; color: var(--ink-faint);
}
/* ===== 3. 核心观点 ===== */
.concept-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-bottom: 2.5rem;
}
.concept-card {
background: var(--paper-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
transition: all 0.25s;
}
.concept-card:hover {
box-shadow: 0 4px 16px var(--shadow-hover);
transform: translateY(-2px);
}
.concept-card .seal {
width: 48px; height: 48px;
background: var(--accent); color: #fff;
font-family: "Noto Serif SC", serif;
font-size: 1.3rem; font-weight: 700;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
}
.concept-card h4 {
font-family: "Noto Serif SC", serif;
font-size: 1.2rem; margin-bottom: 0.5rem;
}
.concept-card p {
font-size: 0.92rem; color: var(--ink-light); line-height: 1.8;
}
/* 内部分化对比表 */
.diff-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--paper-card);
}
.diff-table {
width: 100%; border-collapse: collapse;
font-size: 0.92rem; min-width: 640px;
}
.diff-table th, .diff-table td {
padding: 0.9rem 1.2rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.diff-table th {
background: rgba(178,58,46,0.06);
font-family: "Noto Serif SC", serif;
font-weight: 700; color: var(--ink);
white-space: nowrap;
}
.diff-table td:first-child {
font-weight: 700; color: var(--accent);
white-space: nowrap; font-family: "Noto Serif SC", serif;
}
.diff-table tr:last-child td { border-bottom: none; }
.diff-table tr:hover td { background: rgba(253,242,200,0.3); }
.diff-note {
font-size: 0.85rem; color: var(--ink-faint);
margin-top: 0.8rem;
}
/* ===== 4. 时间轴 ===== */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
content: ""; position: absolute;
left: 7px; top: 8px; bottom: 8px;
width: 2px; background: var(--border);
}
.tl-item { position: relative; margin-bottom: 2rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
position: absolute; left: -2rem; top: 6px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--paper); border: 3px solid var(--accent);
}
.tl-dot.gold { border-color: var(--gold); }
.tl-head {
display: flex; align-items: baseline; gap: 1rem;
flex-wrap: wrap; margin-bottom: 0.4rem;
}
.tl-title {
font-family: "Noto Serif SC", serif;
font-size: 1.15rem; font-weight: 700;
}
.tl-time {
font-size: 0.82rem; color: var(--gold);
letter-spacing: 0.1em;
}
.tl-desc { font-size: 0.95rem; color: var(--ink-light); line-height: 1.9; }
.tl-desc .books {
display: inline-block;
font-size: 0.85rem; color: var(--accent);
background: rgba(178,58,46,0.06);
padding: 0.1rem 0.5rem; border-radius: 4px;
margin-top: 0.3rem;
}
/* ===== 5. 与原典关系 ===== */
.origin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.origin-card {
background: var(--paper-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
}
.origin-card h4 {
font-family: "Noto Serif SC", serif;
font-size: 1.1rem; margin-bottom: 0.8rem;
display: flex; align-items: center; gap: 0.5rem;
}
.origin-card .tag-inherit {
font-size: 0.72rem; background: #eef5e8; color: #5a7a3a;
padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0.1em;
}
.origin-card .tag-critique {
font-size: 0.72rem; background: #f7ecea; color: #9a4a3a;
padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0.1em;
}
.origin-card p {
font-size: 0.95rem; color: var(--ink-light); line-height: 1.9;
margin-bottom: 0.6rem;
}
.origin-card p:last-child { margin-bottom: 0; }
/* ===== 6. 经典著作 ===== */
.book-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.book-card {
background: var(--paper-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
text-decoration: none; color: inherit;
transition: all 0.25s;
display: flex; flex-direction: column;
position: relative;
}
.book-card:hover {
border-color: var(--accent);
box-shadow: 0 6px 20px var(--shadow-hover);
transform: translateY(-3px);
}
.book-card.disabled {
opacity: 0.7; cursor: default;
}
.book-card.disabled:hover {
border-color: var(--border);
box-shadow: none; transform: none;
}
.book-spine {
width: 100%; height: 6px;
background: var(--accent);
border-radius: 3px;
margin-bottom: 1.2rem;
}
.book-spine.gold { background: var(--gold); }
.book-spine.faint { background: var(--ink-faint); }
.book-card .bk-era {
font-size: 0.78rem; color: var(--ink-faint);
letter-spacing: 0.1em; margin-bottom: 0.3rem;
}
.book-card h4 {
font-family: "Noto Serif SC", serif;
font-size: 1.35rem; margin-bottom: 0.3rem;
}
.book-card .bk-author {
font-size: 0.85rem; color: var(--ink-faint);
margin-bottom: 0.8rem;
}
.book-card .bk-desc {
font-size: 0.88rem; color: var(--ink-light); line-height: 1.8;
flex-grow: 1; margin-bottom: 1rem;
}
.book-card .bk-status {
font-size: 0.8rem;
display: flex; align-items: center; gap: 0.3rem;
}
.bk-status.done { color: #5a7a3a; }
.bk-status.done::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7a9a5a;
}
.bk-status.soon { color: var(--ink-faint); }
.bk-status.soon::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border);
}
/* ===== 7. 与诸子对话 ===== */
.dialog-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--paper-card);
}
.dialog-table {
width: 100%; border-collapse: collapse;
font-size: 0.92rem; min-width: 640px;
}
.dialog-table th, .dialog-table td {
padding: 0.9rem 1.2rem;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.dialog-table th {
font-family: "Noto Serif SC", serif;
font-weight: 700;
}
.dialog-table th.dao { background: rgba(178,58,46,0.08); color: var(--accent); }
.dialog-table th.ru { background: rgba(184,137,58,0.08); color: var(--gold); }
.dialog-table th.fa { background: rgba(138,124,104,0.1); color: var(--ink-light); }
.dialog-table td:first-child {
font-weight: 700; font-family: "Noto Serif SC", serif;
color: var(--ink); white-space: nowrap;
}
.dialog-table tr:last-child td { border-bottom: none; }
/* ===== 8. 精华与糟粕 ===== */
.perspective-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.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-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 ul { padding-left: 1.1rem; }
.persp-card li {
font-size: 0.92rem; line-height: 1.9; color: var(--ink-light);
margin-bottom: 0.3rem;
}
/* ===== 9. 延伸阅读 ===== */
.further-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.further-card {
background: var(--paper-card);
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);
}
.fc-tag {
font-size: 0.78rem; color: var(--accent);
letter-spacing: 0.1em; margin-bottom: 0.4rem;
}
.fc-title {
font-family: "Noto Serif SC", serif;
font-size: 1rem; margin-bottom: 0.3rem;
}
.fc-desc { font-size: 0.85rem; color: var(--ink-faint); line-height: 1.6; }
/* ===== 响应式 ===== */
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
.hero h1 { font-size: 3rem; }
.concept-grid, .book-grid, .perspective-grid,
.further-grid, .origin-grid { grid-template-columns: 1fr; }
.positioning blockquote { font-size: 1.15rem; }
}
</style>
</head>
<body>
<div id="site-header" data-active="zongheng"></div>
<div class="body-breadcrumb">
<a href="index.html">诸子思想</a>
<span class="sep">›</span>
<span class="current">道家</span>
</div>
<!-- 1. 封面区 -->
<header class="hero">
<div class="hero-inner">
<div class="hero-text">
<span class="hero-tag">诸 子 思 想 · 第 二 分 支</span>
<h1>道 家</h1>
<p class="hero-sub">道法自然 · 无为而无不为</p>
<div class="hero-meta">
<div class="item"><span class="label">起源</span><span>春秋晚期</span></div>
<div class="item"><span class="label">跨度</span><span>两千五百余年</span></div>
<div class="item"><span class="label">核心经典</span><span>四部</span></div>
<div class="item"><span class="label">代表人物</span><span>老子 · 庄子</span></div>
</div>
<p class="hero-tagline">
当诸子百家都在提出治国方案、规定人应该怎样生活时，道家退后一步，问了一个更根本的问题：人为什么不能像天地万物那样，自然而然地存在？
</p>
</div>
<div class="hero-visual">
<!-- 主视觉：水与山，水墨意境 -->
<svg viewBox="0 0 360 360" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="moonlight" cx="50%" cy="45%" r="55%">
<stop offset="0%" stop-color="#e8d8a8" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#e8d8a8" stop-opacity="0"/>
</radialGradient>
<linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a4a58" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#1a2a38" stop-opacity="0.8"/>
</linearGradient>
</defs>
<!-- 月光 -->
<circle cx="180" cy="140" r="130" fill="url(#moonlight)"/>
<circle cx="180" cy="140" r="38" fill="#d8c898" opacity="0.7"/>
<!-- 远山 -->
<path d="M0 220 L60 170 L110 200 L170 150 L230 195 L290 165 L360 210 L360 240 L0 240 Z" fill="#4a4038" opacity="0.4"/>
<path d="M0 240 L50 210 L100 230 L160 190 L220 225 L280 200 L360 230 L360 255 L0 255 Z" fill="#3a3028" opacity="0.6"/>
<!-- 水面 -->
<rect x="0" y="255" width="360" height="105" fill="url(#waterGrad)"/>
<path d="M0 265 Q90 258 180 265 T360 262" stroke="#5a7080" stroke-width="1.2" fill="none" opacity="0.5"/>
<path d="M0 285 Q120 278 240 285 T360 282" stroke="#4a6070" stroke-width="1" fill="none" opacity="0.4"/>
<path d="M0 310 Q80 304 160 310 T320 308 T360 310" stroke="#3a5060" stroke-width="1" fill="none" opacity="0.3"/>
<!-- 小舟与钓者（庄子钓于濮水） -->
<g transform="translate(130, 275)" opacity="0.75">
<path d="M-18,0 Q-15,6 0,6 Q15,6 18,0 Z" fill="#3a2a1a"/>
<line x1="5" y1="0" x2="5" y2="-14" stroke="#3a2a1a" stroke-width="1.2"/>
<circle cx="5" cy="-17" r="2.5" fill="#3a2a1a"/>
<line x1="5" y1="-14" x2="12" y2="-8" stroke="#3a2a1a" stroke-width="0.8"/>
</g>
<!-- 朱砂印章 -->
<g transform="translate(290, 295)">
<rect x="0" y="0" width="46" height="46" rx="3" fill="#b23a2e" opacity="0.88"/>
<text x="23" y="20" font-size="13" fill="#faf6ee" text-anchor="middle" font-family="serif" font-weight="700">道法</text>
<text x="23" y="37" font-size="13" fill="#faf6ee" text-anchor="middle" font-family="serif" font-weight="700">自然</text>
</g>
</svg>
</div>
</div>
</header>
<!-- 2. 一句话定位 -->
<section class="positioning">
<blockquote>
儒家教人<span class="accent">应该成为什么</span>，<br>
道家教人<span class="accent">不必刻意成为什么</span>。
</blockquote>
<p class="by">—— 道家思想的第一印象</p>
</section>
<!-- 3. 核心观点 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">1</span>核心观点</h2>
<p class="section-sub">六个道家共享的核心概念，以及不同阶段的侧重差异</p>
<div class="concept-grid">
<div class="concept-card">
<div class="seal">道</div>
<h4>道为根本</h4>
<p>道是宇宙万物的本源和运行法则，"先天地生"，"无为而无不为"。它不是人格神，而是万事万物自然生成、自行运作的那个总原理。</p>
</div>
<div class="concept-card">
<div class="seal">无</div>
<h4>无为而治</h4>
<p>无为不是什么都不做，而是不妄为、不强为、不扰民。治国者减少干预，让百姓自化、自正、自富。"治大国若烹小鲜"。</p>
</div>
<div class="concept-card">
<div class="seal">自</div>
<h4>顺应自然</h4>
<p>"自然"不是大自然，而是"自己如此"。万物各有本性，不应被外力强行塑造。野鸭的腿虽短，接上一截就痛苦；鹤的腿虽长，砍去一段就悲哀。</p>
</div>
<div class="concept-card">
<div class="seal">虚</div>
<h4>虚静守柔</h4>
<p>心要像镜子一样空明，不存成见。柔弱不是软弱，而是一种持久的力量——水最柔弱，但攻坚强者莫之能胜。知其雄，守其雌。</p>
</div>
<div class="concept-card">
<div class="seal">反</div>
<h4>辩证转化</h4>
<p>"反者道之动"，事物总是向对立面转化。祸兮福之所倚，福兮祸之所伏。物极必反，因此要知止、知足，不走极端。</p>
</div>
<div class="concept-card">
<div class="seal">生</div>
<h4>养生全身</h4>
<p>道家重视生命的养护，不是追求长生不死，而是在有限的生命中避免被外物消耗。形神兼顾，少私寡欲，知足不辱，知止不殆。</p>
</div>
</div>
<h3 style="font-family:'Noto Serif SC',serif;font-size:1.15rem;margin-bottom:1rem;color:var(--ink);">内部分化：不同阶段的侧重</h3>
<div class="diff-table-wrap">
<table class="diff-table">
<thead>
<tr>
<th>维度</th>
<th>老子（春秋晚期）</th>
<th>庄子（战国中期）</th>
<th>黄老道家（战国晚期至西汉）</th>
<th>魏晋玄学</th>
</tr>
</thead>
<tbody>
<tr>
<td>核心关切</td>
<td>治国与处世之道</td>
<td>个体精神自由</td>
<td>君人南面之术</td>
<td>名教与自然的关系</td>
</tr>
<tr>
<td>无为的含义</td>
<td>治国者不扰民</td>
<td>心灵不被外物奴役</td>
<td>君无为而臣有为</td>
<td>顺应自然本性</td>
</tr>
<tr>
<td>对礼乐的态度</td>
<td>批判，主张"小国寡民"</td>
<td>超越，齐物两行</td>
<td>兼容，礼法并用</td>
<td>越名教而任自然</td>
</tr>
<tr>
<td>代表著作</td>
<td>《道德经》</td>
<td>《庄子》</td>
<td>《管子》四篇、《淮南子》</td>
<td>王弼《老子注》、郭象《庄子注》</td>
</tr>
</tbody>
</table>
</div>
<p class="diff-note">注：道家内部分化是思想自然演变的结果，不是谁对谁错。理解这些差异，才能避免把道家简单化。</p>
</div>
</section>
<!-- 4. 源流与发展 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">2</span>源流与发展</h2>
<p class="section-sub">从上古原典到魏晋玄学，道家思想经历了五个主要阶段</p>
<div class="timeline">
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-head">
<span class="tl-title">思想源头：上古原典</span>
<span class="tl-time">上古原典时期</span>
</div>
<p class="tl-desc">
道家并非凭空产生。《周易》古经的阴阳辩证、《尚书》中"天命靡常"的忧患意识、《诗经》中对自然的歌咏，构成了道家思想的远源。老子曾为周守藏室之史，博览前代典籍，对这些思想资源有深切体会。
<span class="books">相关典籍：《周易》古经 · 《尚书》 · 《诗经》</span>
</p>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-head">
<span class="tl-title">老子：道家奠基</span>
<span class="tl-time">春秋晚期 · 约公元前571年</span>
</div>
<p class="tl-desc">
老子名耳，字聃，楚国苦县人，曾任周王室守藏室之史。他见周室衰微，西出函谷关，留下五千言《道德经》。这本书以"道"为核心，提出无为而治、顺应自然、柔弱胜刚强等主张，奠定了道家思想的根基。
<span class="books">核心著作：《道德经》</span>
</p>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-head">
<span class="tl-title">庄子：精神飞跃</span>
<span class="tl-time">战国中期 · 约公元前369年</span>
</div>
<p class="tl-desc">
庄子名周，宋国蒙人。他继承了老子的思想，但将重心从治国转向个体精神自由。内篇七篇以逍遥、齐物、养生、心斋、坐忘等概念，把道家哲学推到了一个极高的精神境界。庄子与名家惠施的辩论，也丰富了道家的思辨深度。
<span class="books">核心著作：《庄子》</span>
</p>
</div>
<div class="tl-item">
<div class="tl-dot gold"></div>
<div class="tl-head">
<span class="tl-title">黄老道家：治国实践</span>
<span class="tl-time">战国晚期至西汉</span>
</div>
<p class="tl-desc">
战国晚期，齐国稷下学宫出现了黄老学派，将老子的"无为"发展为"君无为而臣有为"的统治术，兼采儒、法、名、阴阳各家。西汉初年，文帝、景帝以黄老之术治国，轻徭薄赋、与民休息，开创了"文景之治"。《淮南子》是这一思潮的集大成之作。
<span class="books">代表著作：《淮南子》 · 《管子》部分篇章</span>
</p>
</div>
<div class="tl-item">
<div class="tl-dot gold"></div>
<div class="tl-head">
<span class="tl-title">魏晋玄学：哲学深化</span>
<span class="tl-time">三国至东晋（魏晋时期）</span>
</div>
<p class="tl-desc">
魏晋时期，何晏、王弼以老庄解《易》，开创"正始玄学"；嵇康、阮籍"越名教而任自然"，以放达对抗虚伪礼教；郭象注《庄子》，提出"独化"之说，认为万物各自生成，不需要外在的造物主。玄学把道家哲学推向了新的思辨高度，也深刻影响了中国艺术和审美。
<span class="books">代表人物：何晏 · 王弼 · 嵇康 · 阮籍 · 郭象</span>
</p>
</div>
</div>
</div>
</section>
<!-- 5. 与上古原典的关系 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">3</span>道家与上古原典</h2>
<p class="section-sub">道家不是凭空出现的，它对《诗》《书》《易》既有继承，也有批判</p>
<div class="origin-grid">
<div class="origin-card">
<h4>《周易》古经 <span class="tag-inherit">深层呼应</span></h4>
<p>《周易》古经成书于西周初年，本是占筮之书，但其阴阳变化、物极必反的辩证思维，与道家思想有深层呼应。老子"反者道之动"、庄子"方生方死"的观念，都可以看到《周易》辩证思维的影子。</p>
<p>不同的是，《周易》古经停留在吉凶判断的层面，而道家将辩证思维提升为系统的哲学。后来的《易传》是儒家解释，与道家对古经的理解形成了两条不同的路径。</p>
</div>
<div class="origin-card">
<h4>《诗经》 <span class="tag-critique">批判超越</span></h4>
<p>《诗经》在春秋时期广泛用于外交辞令和德行修养，是贵族教育的基础。但道家并不把《诗经》奉为权威。老子说"绝学无忧"，庄子更是借寓言嘲讽那些引经据典的儒生。</p>
<p>不过，《诗经》中对自然山水的歌咏、对简朴生活的向往，与道家的审美趣味有相通之处。后世陶渊明、王维的诗，正是道家精神与诗教传统的融合。</p>
</div>
<div class="origin-card">
<h4>《尚书》 <span class="tag-critique">话语借用</span></h4>
<p>《尚书》记载的尧舜禹汤、天命德治，是诸子百家共同征引的政治话语。老子和庄子虽然不承认《尚书》的权威地位，但在讨论"圣人之治"时，仍在这套话语框架内展开。</p>
<p>区别在于：儒家从《尚书》中读出了德治和仁政，黄老道家从中读出了"无为而治"，庄子则根本质疑"圣人之治"本身——他认为"圣人不死，大盗不止"。</p>
</div>
<div class="origin-card">
<h4>老子的史官背景 <span class="tag-inherit">学术传承</span></h4>
<p>老子曾任周守藏室之史，相当于国家图书馆馆长，接触了大量前代文献。《汉书·艺文志》说道家出于"史官之历记成败存亡祸福古今之道"，这个说法有一定道理。</p>
<p>正是在对历史经验的深刻反思中，老子看到了"物极必反""柔弱胜刚强"的规律。道家不是凭空玄想，而是从历史和自然中归纳出的智慧。</p>
</div>
</div>
</div>
</section>
<!-- 6. 经典著作 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">4</span>经典著作</h2>
<p class="section-sub">四部书构成道家思想的核心文本，按阅读优先级排列</p>
<div class="book-grid">
<a class="book-card" href="zhuangzi-index.html">
<div class="book-spine"></div>
<div class="bk-era">战国中期</div>
<h4>庄子</h4>
<div class="bk-author">庄周 及后学</div>
<p class="bk-desc">内篇七篇为庄子自著，外篇杂篇为后学所作。以寓言、重言、卮言展开，文学与哲学造诣极高，是中国精神自由思想的源头。</p>
<div class="bk-status done">内篇七篇已完成</div>
</a>
<div class="book-card disabled">
<div class="book-spine gold"></div>
<div class="bk-era">春秋晚期</div>
<h4>道德经</h4>
<div class="bk-author">老聃</div>
<p class="bk-desc">五千言，八十一章，道家思想的奠基之作。以"道"为核心，论治国、处世、修身之道，对中国文化影响至深。</p>
<div class="bk-status soon">即将推出</div>
</div>
<div class="book-card disabled">
<div class="book-spine faint"></div>
<div class="bk-era">战国（托名）</div>
<h4>列子</h4>
<div class="bk-author">旧题列御寇</div>
<p class="bk-desc">今本八篇，多有后人增益。以寓言见长，"愚公移山""杞人忧天"等故事流传千古，文风与庄子相近而更偏民间趣味。</p>
<div class="bk-status soon">即将推出</div>
</div>
<div class="book-card disabled">
<div class="book-spine faint"></div>
<div class="bk-era">西汉</div>
<h4>淮南子</h4>
<div class="bk-author">刘安 集门客</div>
<p class="bk-desc">二十一篇，以道家为主兼综儒、法、阴阳各家，是黄老道家的集大成之作，保存了大量上古神话和思想史料。</p>
<div class="bk-status soon">即将推出</div>
</div>
</div>
</div>
</section>
<!-- 7. 与诸子对话 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">5</span>与诸子对话</h2>
<p class="section-sub">道家不是孤立的，它在与儒、法、名各家的交锋中确立了自己的立场</p>
<div class="dialog-table-wrap">
<table class="dialog-table">
<thead>
<tr>
<th>议题</th>
<th class="dao">道家</th>
<th class="ru">儒家</th>
<th class="fa">法家</th>
</tr>
</thead>
<tbody>
<tr>
<td>治国理想</td>
<td>无为而治，让百姓自化</td>
<td>仁政德治，导之以德</td>
<td>严刑峻法，以吏为师</td>
</tr>
<tr>
<td>人性看法</td>
<td>回归自然本真</td>
<td>孟子性善，荀子性恶</td>
<td>人性自为，趋利避害</td>
</tr>
<tr>
<td>礼乐制度</td>
<td>礼是忠信之薄、乱之首</td>
<td>礼乐教化，修身成人</td>
<td>儒以文乱法，侠以武犯禁</td>
</tr>
<tr>
<td>知识态度</td>
<td>为道日损，绝学无忧</td>
<td>学而时习之，有教无类</td>
<td>以法为教，以吏为师</td>
</tr>
<tr>
<td>理想人格</td>
<td>至人无己，神人无功</td>
<td>圣贤君子，修齐治平</td>
<td>明主贤臣，守法不移</td>
</tr>
<tr>
<td>生命态度</td>
<td>贵生养生，安时处顺</td>
<td>杀身成仁，舍生取义</td>
<td>以死奉法，为国尽忠</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 8. 精华与糟粕 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">6</span>精华与糟粕</h2>
<p class="section-sub">取其精华，去其糟粕——道家也不例外</p>
<div class="perspective-grid">
<div class="persp-card good">
<div class="persp-label">✦ 仍有价值</div>
<ul>
<li>对个体精神自由的追求与尊重</li>
<li>"无为而治"对过度干预的警示</li>
<li>"反者道之动"的辩证思维</li>
<li>顺应自然、不妄为的生态智慧</li>
<li>对权力、知识和欲望的警惕</li>
<li>面对生死的达观态度</li>
</ul>
</div>
<div class="persp-card discuss">
<div class="persp-label">◆ 需要辨析</div>
<ul>
<li>"无为"是不妄为，不是什么都不做</li>
<li>"不争"在现代竞争中需限定适用范围</li>
<li>"绝学无忧"不能理解为反对教育本身</li>
<li>"小国寡民"是对简朴生活的向往，非政治方案</li>
<li>养生哲学不能滑向迷信和长生追求</li>
</ul>
</div>
<div class="persp-card warn">
<div class="persp-label">▲ 明确过时</div>
<ul>
<li>"绝圣弃智""使民无知"的愚民倾向</li>
<li>"邻国相望，老死不相往来"的封闭理想</li>
<li>后世道教中的符箓丹药、长生迷信</li>
<li>部分后学中明哲保身、回避责任的倾向</li>
<li>黄老术中"君无为臣有为"的权术化解读</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 9. 延伸阅读 -->
<section class="section">
<div class="container">
<h2 class="section-title"><span class="num">7</span>延伸阅读</h2>
<p class="section-sub">理解道家，也看看它的源头、对手和后世回响</p>
<div class="further-grid">
<a class="further-card" href="#">
<div class="fc-tag">思想源头</div>
<div class="fc-title">上古原典：百家之源</div>
<div class="fc-desc">《周易》古经、《尚书》《诗经》——道家与儒家共同面对的前代文献，理解中国思想的起点。</div>
</a>
<a class="further-card" href="#">
<div class="fc-tag">跨流派对话</div>
<div class="fc-title">儒家：仁义与自然</div>
<div class="fc-desc">从孔子"知其不可而为之"到庄子"无用之用"，儒道互补如何塑造了中国人的精神世界。</div>
</a>
<a class="further-card" href="#">
<div class="fc-tag">专题思辨</div>
<div class="fc-title">出世与入世之间</div>
<div class="fc-desc">中国士人在儒道之间的选择与平衡——达则兼济天下，穷则独善其身。</div>
</a>
</div>
</div>
</section>
<div id="site-footer"></div>
<script src="assets/common.js"></script>
</body>
</html>