index.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>分享demo</title>
  6. <link rel="preconnect" href="https://fonts.googleapis.com">
  7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8. <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div class="head-bar">多果文学</div>
  12. <h2 class="title">第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
  13. <div class="body">
  14. <div class="content">
  15. <p class="auth">明朝 · 罗贯中 著</p>
  16. <p>滚滚长江东逝水,浪花淘尽英雄。是非成败转头空。青山依旧在,几度夕阳红。白发渔樵江渚上,惯看秋月春风。一壶浊酒喜相逢。古今多少事,都付笑谈中。——调寄《临江仙》</p>
  17. <p>话说天下大势,分久必合,合久必分。周末七国分争,并入于秦。及秦灭之后,楚、汉分争,又并入于汉。汉朝自高祖斩白蛇而起义,一统天下,后来光武中兴,传至献帝,遂分为三国。推其致乱之由,殆始于桓、灵二帝。桓帝禁锢善类,崇信宦官。及桓帝崩,灵帝即位,大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权,窦武、陈蕃谋诛之,机事不密,反为所害,中涓自此愈横。</p>
  18. <mp-share-card id="share-card"></mp-share-card>
  19. <p>建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起。只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十余丈,飞入温德殿中。秋七月,有虹现于玉堂;五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。帝尊信张让,呼为“阿父”。朝政日非,以致天下人心思乱,盗贼蜂起。</p>
  20. <p>时巨鹿郡有兄弟三人,一名张角,一名张宝,一名张梁。那张角本是个不第秀才,因入山采药,遇一老人,碧眼童颜,手执藜杖,唤角至一洞中,以天书三卷授之,曰:“此名《太平要术》,汝得之,当代天宣化,普救世人;若萌异心,必获恶报。”角拜问姓名。老人曰:“吾乃南华老仙也。”言讫,化阵清风而去。角得此书,晓夜攻习,能呼风唤雨,号为“太平道人”。</p>
  21. <p>中平元年正月内,疫气流行,张角散施符水,为人治病,自称“大贤良师”。角有徒弟五百余人,云游四方,皆能书符念咒。次后徒众日多,角乃立三十六方,大方万余人,小方六七千,各立渠帅,称为将军;讹言:“苍天已死,黄天当立;岁在甲子,天下大吉。”令人各以白土书“甲子”二字于家中大门上。青、幽、徐、冀、荆、扬、兖、豫八州之人,家家侍奉大贤良师张角名字。角遣其党马元义,暗赍金帛,结交中涓封谞,以为内应。角与二弟商议曰:“至难得者,民心也。今民心已顺,若不乘势取天下,诚为可惜。”遂一面私造黄旗,约期举事;一面使弟子唐周,驰书报封谞。唐周乃径赴省中告变。帝召大将军何进调兵擒马元义,斩之;次收封谞等一干人下狱。</p>
  22. <p>张角闻知事露,星夜举兵,自称“天公将军”,张宝称“地公将军”,张梁称“人公将军”。申言于众曰:“今汉运将终,大圣人出。汝等皆宜顺天从正,以乐太平。”四方百姓,裹黄巾从张角反者四五十万。贼势浩大,官军望风而靡。何进奏帝火速降诏,令各处备御,讨贼立功。一面遣中郎将卢植、皇甫嵩、朱儁,各引精兵、分三路讨之。</p>
  23. </div>
  24. <div class="side-bar">
  25. <div class="list">
  26. <div class="side-title">其它章节</div>
  27. <div class="item">宴桃园豪杰三结义<br/>斩黄巾英雄首立功</div>
  28. <div class="item">张翼德怒鞭督邮<br/>何国舅谋诛宦竖</div>
  29. <div class="item">议温明董卓叱丁原<br/>馈金珠李肃说吕布</div>
  30. <div class="item">废汉帝陈留践位<br/>谋董贼孟德献刀</div>
  31. <div class="item">发矫诏诸镇应曹公<br/>破关兵三英战吕布</div>
  32. <div class="item">焚金阙董卓行凶<br/>匿玉玺孙坚背约</div>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="foot"></div>
  37. <script>
  38. var mpShareModule = {}
  39. {
  40. let body = document.querySelector('body')
  41. let isInit = false
  42. window.addEventListener('message', function(e) {
  43. let data = e.data
  44. if (data.type === 'initView' && !isInit) {
  45. let host = data.baseUrl
  46. let apiUrl = data.apiUrl
  47. mpShareModule = {
  48. host: host,
  49. apiUrl: apiUrl
  50. }
  51. let initJs = document.createElement('script')
  52. initJs.src = `${host}/shareModule/initShare.js?url=${apiUrl}`
  53. body.append(initJs)
  54. let injectJs = document.createElement('script')
  55. injectJs.src = `${host}/shareModule/injectShare.js`
  56. body.append(injectJs)
  57. isInit = true
  58. }
  59. })
  60. window.top.postMessage({msg:'mpShare init done'}, '*')
  61. }
  62. </script>
  63. <style>
  64. body{
  65. padding: 0;
  66. margin: 0;
  67. padding-top: 100px;
  68. background-color: #EDE7D9;
  69. }
  70. .foot{
  71. padding-bottom: 80px;
  72. border-top: 8px solid #95191B;
  73. }
  74. .head-bar{
  75. z-index: 999;
  76. background-color: #F1ECE1;
  77. width: 100%;
  78. left: 0;
  79. top: 0;
  80. position: fixed;
  81. font-family: "Noto Serif SC", serif;
  82. padding: 24px 36px;
  83. font-size: 1.6em;
  84. font-weight: 800;
  85. color: #95191B;
  86. border-bottom: 8px solid #95191B;
  87. }
  88. .title{
  89. text-align: center;
  90. font-family: "Noto Serif SC", serif;
  91. }
  92. .body {
  93. margin: 0 auto;
  94. max-width: 1000px;
  95. padding: 0 24px;
  96. display: flex;
  97. gap: 36px;
  98. .side-bar{
  99. width: 200px;
  100. .list{
  101. padding: 12px 0;
  102. background-color: #F1ECE1;
  103. position: sticky;
  104. top: 110px;
  105. font-family: "Noto Serif SC", serif;
  106. .side-title{
  107. text-align: left;
  108. padding-left: 12px;
  109. border-left: 4px solid #95191B;
  110. font-weight: 800;
  111. margin-bottom: 0.5em;
  112. font-size: 1.2em;
  113. }
  114. .item{
  115. cursor: pointer;
  116. padding-left: 12px;
  117. border-left: 4px solid #95191B00;
  118. font-size: 0.9em;
  119. margin-bottom: 0.5em;
  120. &:hover{
  121. border-left: 4px solid #95191B;
  122. }
  123. }
  124. }
  125. }
  126. .content{
  127. flex: 1;
  128. font-family: "Noto Serif SC", serif;
  129. .auth{
  130. font-weight: 500;
  131. }
  132. }
  133. }
  134. </style>
  135. </body>
  136. </html>