sinzmise-cetastories 2.0.0-1729391855695 → 2.0.0-1730024687183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/404/index.html +1 -1
  2. package/about/index.html +1 -1
  3. package/album/index.html +1 -1
  4. package/archives/2021/12/index.html +1 -1
  5. package/archives/2021/index.html +1 -1
  6. package/archives/2022/12/index.html +1 -1
  7. package/archives/2022/index.html +1 -1
  8. package/archives/2023/01/index.html +1 -1
  9. package/archives/2023/02/index.html +1 -1
  10. package/archives/2023/03/index.html +1 -1
  11. package/archives/2023/04/index.html +1 -1
  12. package/archives/2023/07/index.html +1 -1
  13. package/archives/2023/08/index.html +1 -1
  14. package/archives/2023/09/index.html +1 -1
  15. package/archives/2023/10/index.html +1 -1
  16. package/archives/2023/11/index.html +1 -1
  17. package/archives/2023/12/index.html +1 -1
  18. package/archives/2023/index.html +1 -1
  19. package/archives/2023/page/2/index.html +1 -1
  20. package/archives/2023/page/3/index.html +1 -1
  21. package/archives/2024/01/index.html +1 -1
  22. package/archives/2024/02/index.html +1 -1
  23. package/archives/2024/03/index.html +1 -1
  24. package/archives/2024/04/index.html +1 -1
  25. package/archives/2024/05/index.html +1 -1
  26. package/archives/2024/06/index.html +1 -1
  27. package/archives/2024/07/index.html +1 -1
  28. package/archives/2024/08/index.html +1 -1
  29. package/archives/2024/09/index.html +1 -1
  30. package/archives/2024/10/index.html +1 -1
  31. package/archives/2024/index.html +1 -1
  32. package/archives/2024/page/2/index.html +1 -1
  33. package/archives/index.html +1 -1
  34. package/archives/page/2/index.html +1 -1
  35. package/archives/page/3/index.html +1 -1
  36. package/archives/page/4/index.html +1 -1
  37. package/archives/page/5/index.html +1 -0
  38. package/assets/algolia/algoliasearch.js +2 -1
  39. package/assets/algolia/algoliasearchLite.js +2 -1
  40. package/atom.xml +114 -204
  41. package/bbs/bbs.html +1 -1
  42. package/bbs/bbs.js +2 -1
  43. package/bbs/index.html +1 -1
  44. package/categories/index.html +1 -1
  45. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  46. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  47. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  48. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  49. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  50. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  51. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  52. package/charts/index.html +1 -1
  53. package/comments/index.html +1 -1
  54. package/css/custom2.css +2 -1
  55. package/css/first.css +2 -0
  56. package/css/pace/big-counter.css +2 -1
  57. package/css/pace/corner-indicator.css +2 -1
  58. package/css/pace/flash.css +2 -1
  59. package/css/pace/mac-osx.css +2 -1
  60. package/css/pace/pace.css +2 -1
  61. package/css/plane.css +2 -1
  62. package/css/style.css +2 -0
  63. package/css/tags.css +2 -1
  64. package/essay/index.html +1 -1
  65. package/fcircle/index.html +1 -1
  66. package/games +3831 -509
  67. package/index.html +1 -1
  68. package/js/app.js +2 -0
  69. package/js/autoload.js +2 -1
  70. package/js/ceta/fancybox.css +2 -0
  71. package/js/ceta/fancybox.umd.js +2 -0
  72. package/js/ceta/iconfontInkss.js +2 -0
  73. package/js/ceta/lazyload.min.js +1 -0
  74. package/js/ceta/message.css +2 -0
  75. package/js/ceta/message.js +2 -0
  76. package/js/ceta/pjax.min.js +1 -0
  77. package/js/clock.js +2 -1
  78. package/js/kslink.js +2 -1
  79. package/js/newyear.js +2 -1
  80. package/js/plane.js +2 -1
  81. package/js/plugins/aplayer.js +2 -0
  82. package/js/plugins/parallax.js +2 -0
  83. package/js/plugins/rightMenus.js +2 -0
  84. package/js/plugins/tags/contributors.js +2 -0
  85. package/js/plugins/tags/friends.js +2 -0
  86. package/js/plugins/tags/sites.js +2 -0
  87. package/js/search/algolia.js +2 -0
  88. package/js/search/hexo.js +2 -0
  89. package/js/search/meilisearch.js +2 -0
  90. package/js/txmap.js +2 -1
  91. package/link/index.html +1 -1
  92. package/load.html +1 -1
  93. package/maps/assets/algolia/algoliasearch.js.map +1 -0
  94. package/maps/assets/algolia/algoliasearchLite.js.map +1 -0
  95. package/maps/bbs/bbs.js.map +1 -0
  96. package/maps/css/custom2.css.map +1 -0
  97. package/maps/css/first.css.map +1 -0
  98. package/maps/css/pace/big-counter.css.map +1 -0
  99. package/maps/css/pace/corner-indicator.css.map +1 -0
  100. package/maps/css/pace/flash.css.map +1 -0
  101. package/maps/css/pace/mac-osx.css.map +1 -0
  102. package/maps/css/pace/pace.css.map +1 -0
  103. package/maps/css/plane.css.map +1 -0
  104. package/maps/css/style.css.map +1 -0
  105. package/maps/css/tags.css.map +1 -0
  106. package/maps/js/app.js.map +1 -0
  107. package/maps/js/autoload.js.map +1 -0
  108. package/maps/js/ceta/fancybox.css.map +1 -0
  109. package/maps/js/ceta/fancybox.umd.js.map +1 -0
  110. package/maps/js/ceta/iconfontInkss.js.map +1 -0
  111. package/maps/js/ceta/message.css.map +1 -0
  112. package/maps/js/ceta/message.js.map +1 -0
  113. package/maps/js/clock.js.map +1 -0
  114. package/maps/js/kslink.js.map +1 -0
  115. package/maps/js/newyear.js.map +1 -0
  116. package/maps/js/plane.js.map +1 -0
  117. package/maps/js/plugins/aplayer.js.map +1 -0
  118. package/maps/js/plugins/parallax.js.map +1 -0
  119. package/maps/js/plugins/rightMenus.js.map +1 -0
  120. package/maps/js/plugins/tags/contributors.js.map +1 -0
  121. package/maps/js/plugins/tags/friends.js.map +1 -0
  122. package/maps/js/plugins/tags/sites.js.map +1 -0
  123. package/maps/js/search/algolia.js.map +1 -0
  124. package/maps/js/search/hexo.js.map +1 -0
  125. package/maps/js/search/meilisearch.js.map +1 -0
  126. package/maps/js/txmap.js.map +1 -0
  127. package/maps/sw.js.map +1 -0
  128. package/maps/weichuncai/css/style.css.map +1 -0
  129. package/maps/weichuncai/js/common.js.map +1 -0
  130. package/maps/weichuncai/js/jquery.js.map +1 -0
  131. package/maps/weichuncai/wcc-config.js.map +1 -0
  132. package/music/index.html +1 -1
  133. package/package.json +1 -1
  134. package/page/2/index.html +1 -1
  135. package/page/3/index.html +1 -1
  136. package/page/4/index.html +1 -1
  137. package/page/5/index.html +1 -0
  138. package/posts/10021/index.html +5 -1
  139. package/posts/10045/index.html +1 -1
  140. package/posts/10733/index.html +1 -1
  141. package/posts/10996/index.html +5 -1
  142. package/posts/12779/index.html +1 -1
  143. package/posts/13624/index.html +1 -1
  144. package/posts/15688/index.html +1 -1
  145. package/posts/15748/index.html +5 -1
  146. package/posts/15799/index.html +1 -1
  147. package/posts/15842/index.html +5 -1
  148. package/posts/16107/index.html +1 -1
  149. package/posts/18063/index.html +1 -1
  150. package/posts/20412/index.html +1 -1
  151. package/posts/21375/index.html +1 -1
  152. package/posts/22945/index.html +4 -1
  153. package/posts/23021/index.html +1 -1
  154. package/posts/27531/index.html +5 -1
  155. package/posts/28536/index.html +1 -1
  156. package/posts/28733/index.html +1 -1
  157. package/posts/29196/index.html +1 -1
  158. package/posts/38917/index.html +1 -1
  159. package/posts/38964/index.html +1 -1
  160. package/posts/42487/index.html +1 -1
  161. package/posts/42580/index.html +1 -1
  162. package/posts/45875/index.html +1 -1
  163. package/posts/46640/index.html +1 -1
  164. package/posts/48762/index.html +1 -1
  165. package/posts/50710/index.html +1 -1
  166. package/posts/52677/index.html +1 -1
  167. package/posts/53662/index.html +1 -1
  168. package/posts/54386/index.html +1 -1
  169. package/posts/54481/index.html +1 -1
  170. package/posts/54787/index.html +5 -1
  171. package/posts/56467/index.html +1 -1
  172. package/posts/57692/index.html +1 -1
  173. package/posts/58203/index.html +1 -1
  174. package/posts/61417/index.html +1 -1
  175. package/posts/61712/index.html +1 -0
  176. package/posts/646/index.html +1 -1
  177. package/posts/64856/index.html +1 -1
  178. package/posts/64935/index.html +1 -1
  179. package/search.xml +248 -335
  180. package/seas/index.html +1 -1
  181. package/sw.js +2 -1
  182. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  183. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  184. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  185. package/tags/index.html +1 -1
  186. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  187. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  188. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  189. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  190. package/tags//346/202/254/346/265/256/345/256/240/347/211/251-/347/234/213/346/235/277/345/250/230/index.html +1 -1
  191. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  192. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  193. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  194. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  195. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  196. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  197. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  198. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  199. package/update/index.html +1 -1
  200. package/weichuncai/css/style.css +2 -1
  201. package/weichuncai/js/common.js +2 -1
  202. package/weichuncai/js/jquery.js +2 -1
  203. package/weichuncai/wcc-config.js +2 -1
  204. package/css/index.css +0 -1
  205. package/css/plugins/bootstrap.min.css +0 -6
  206. package/css/plugins/bootstrap.row.css +0 -1
  207. package/css/plugins/font-awesome.min.css +0 -1
  208. package/failure.ico +0 -0
  209. package/fonts/webfonts/fa-brands-400.woff2 +0 -0
  210. package/fonts/webfonts/fa-regular-400.woff2 +0 -0
  211. package/fonts/webfonts/fa-solid-900.woff2 +0 -0
  212. package/img/404.jpg +0 -0
  213. package/img/avatar.jpg +0 -0
  214. package/img/banner.png +0 -0
  215. package/img/block.jpg +0 -0
  216. package/img/favicon.svg +0 -39
  217. package/js/main.js +0 -1
  218. package/js/plugins/danmu.js +0 -1
  219. package/js/plugins/local_search.js +0 -1
  220. package/js/plugins/typing.js +0 -1
  221. package/serviceworker.js +0 -1
package/posts/38964/index.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="这篇文章是我之前写过的教程的重写"><meta property="og:type" content="article"><meta property="og:title" content="小康大佬的说说方案 ———— ispeak搭建教程"><meta property="og:url" content="https://blog.sinzmise.top/posts/38964/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="这篇文章是我之前写过的教程的重写"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="og:image" content="https://blog.sinzmise.top/img/404.jpg"><meta property="article:published_time" content="2023-01-13T21:01:37.000Z"><meta property="article:modified_time" content="2024-10-20T02:36:56.546Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://blog.sinzmise.top/img/404.jpg"><title>小康大佬的说说方案 ———— ispeak搭建教程</title><link href="/images/siteicon/favicon-16x16.png?v=2.2.3" rel="icon" type="image/png" sizes="16x16"><link href="/images/siteicon/favicon-32x32.png?v=2.2.3" rel="icon" type="image/png" sizes="32x32"><link href="/images/siteicon/apple-touch-icon.png?v=2.2.3" rel="apple-touch-icon" sizes="180x180"><link href="/manifest.json" rel="manifest"><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><link rel="stylesheet" href="/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.css"><script src="https://jsd.cdn.storisinz.site/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"blog.sinzmise.top",author:"王九弦SZ·Ninty",root:"/",typed_text:null,theme_version:"2.2.3",theme:{switch:!0,default:"auto"},favicon:{logo:"/images/siteicon/favicon.ico",icon16:"/images/siteicon/favicon-16x16.png",icon32:"/images/siteicon/favicon-32x32.png",apple_touch_icon:"/images/siteicon/apple-touch-icon.png",webmanifest:"/manifest.json",visibilitychange:!0,hidden:"/images/siteicon/favicon.ico",show_text:"那人却在，灯火阑珊处",hide_text:"众里寻他千百度，蓦然回首"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",sticky:"置顶",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!0,plugin:{flickr_justified_gallery:"https://jsd.cdn.storisinz.site/npm/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!0,title:"default",height_limit:!1},toc:{post_title:!0},live_time:{start_time:"12/17/2021 14:53:00",prefix:"这个魔法屋已经经历了 undefined 天的故事"},danmu:{enable:!0,el:".trm-banner"}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2024-10-20 02:36:56"}</script><link data-swup-theme rel="stylesheet" href="/css/index.css?v=2.2.3" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><link data-swup-theme rel="stylesheet" href="/css/tags.css"><link data-swup-theme rel="stylesheet" href="/css/custom2.css"><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/images/siteicon/favicon.ico"><div class="trm-logo-text">汐塔<span>魔法屋</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="#" target="">站点</a><ul><li><a href="/archives/" target="">归档</a></li><li><a href="/categories/" target="">分类</a></li><li><a href="/tags/" target="">标签</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">友链</a><ul><li><a href="/link/" target="">友人帐</a></li><li><a href="/comments/" target="">留言板</a></li></ul></li><li class="menu-item-has-children"><a href="#" target="">关于</a><ul><li><a href="/games/" target="">游戏库</a></li></ul></li><li class="menu-item-has-children"><a href="https://www.travellings.cn/go.html" target="_blank">开往</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"><label class="trm-swich" for="trm-swich"></label><i class="iconfont far fa-moon"></i></div></div><div id="trm-search-btn" class="trm-search-btn"><i class="iconfont fas fa-search"></i></div></div><div class="trm-menu-btn"><span></span></div></div></header><div class="trm-content-start h-entry"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font p-name">小康大佬的说说方案 ———— ispeak搭建教程</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/" class="trm-anima-link">Home</a></li><li><span>posts</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card h-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar u-photo" src="/img/avatar.png"></div><h5 class="trm-name trm-mb-15 p-name">王九弦SZ·Ninty</h5></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="/atom.xml" title="RSS" rel="me" target="_blank" class="u-url"><i class="iconfont fas fa-rss"></i></a><a href="https://github.com/SinzMise" title="Github" rel="me" target="_blank" class="u-url"><i class="iconfont fab fa-github"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">邮件:</div><div class="trm-label trm-label-light u-email">email@sinzmise.top</div></li><li><div class="trm-label">省份:</div><div class="trm-label trm-label-light p-region">广东</div></li><li><div class="trm-label">城市:</div><div class="trm-label trm-label-light p-locality">潮州</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:email@sinzmise.top" class="trm-btn">联系我<i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>01/13</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>21:01</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br><a href="https://blog.sinzmise.top" class="p-author h-card">王九弦SZ·Ninty</a></div></div></div><div class="trm-card"><article id="article-container" class="trm-publication e-content"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的<a target="_blank" rel="noopener" href="https://blog.xsnet.eu.org/posts/43224/">ispeak教程</a>失效了<br>没办法我只能重新写了这篇教程</p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><h2 id="后端部署"><a href="#后端部署" class="headerlink" title="后端部署"></a>后端部署</h2><h3 id="配置数据库"><a href="#配置数据库" class="headerlink" title="配置数据库"></a>配置数据库</h3><div class="trm-note info"><div class="trm-note-title">INFO</div><p>以下内容来自：<a target="_blank" rel="noopener" href="https://discuss.js.org/guide/Get-MongoDB-DataBase.html">https://discuss.js.org/guide/Get-MongoDB-DataBase.html</a></p></div><ul><li>注册<a target="_blank" rel="noopener" href="https://www.mongodb.com/cloud/atlas/register">MongoDB</a>账号，注册完成后会提示你创建一个组织，并且输入一个项目昵称，选择编程语言(不选也可以)，随后点击右下角的 <code>Continue</code>(继续)，如果没有可以跟如下图执行，点击 <code>Create an Organization</code>(创建组织)<br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Organizations-Home.png" alt="Organizations-Home" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Register-Organizations.png" alt="Register-Organizations" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Organization.png" alt="Create-Organization" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/New-Project.png" alt="New-Project" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Project-Name.png" alt="Project-Name" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Project.png" alt="Create-Project" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Build-Database.png" alt="Build-Database" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Select-Free.png" alt="Select-Free" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/AWS-N.Virginia.png" alt="AWS-N.Virginia" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></li><li>选择免费的共享数据库，随后会跳出选择地区(选择离你服务端近的即可)，点击 <code>Create Cluster</code>创建</li><li>随后您需要创建数据库用户，输入用户名和密码，继续向下滚动就是添加 IP 地址，最后点击下方的 <code>Finish and Close</code>(完成并关闭)按钮</li></ul><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p><strong>注意</strong><br>服务器部署，则填服务器公网 IP<br><code>无服务器(ServerLess)</code>ServerLess 一般都是动态 IP，你无法得到一个固定 IP，我们建议填写 <code>0.0.0.0</code></p></div><p><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Add-IP.png" alt="Add IP" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>稍作等待创建好数据库即可，随后点击 <code>Connect</code>(连接)，点击选择 <code>Connect you application</code>(连接应用程序)，然后复制连接数据库字符串</li></ul><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p><strong>注意</strong><br>需要将字符串中的 <code>&lt;password&gt;</code>替换为您在第三步创建的数据库用户密码，修改 <code>myFirstDatabase</code>为你想要的数据库名称例如:<code>Discuss</code></p></div><p><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Connect.png" alt="Connect" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Get-Connect.png" alt="Get Connect" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><h3 id="部署kkapi"><a href="#部署kkapi" class="headerlink" title="部署kkapi"></a>部署kkapi</h3><div class="trm-tabs" id="部署kkapi"><ul class="trm-nav-tabs"><li class="trm-tab active"><button type="button" data-href="#部署kkapi-1">Vercel部署（推荐）</button></li><li class="trm-tab"><button type="button" data-href="#部署kkapi-2">服务器部署</button></li><li class="trm-tab"><button type="button" data-href="#部署kkapi-3">docker 部署</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content active" id="部署kkapi-1"><ul><li>点击下方按钮，跳转至 Vercel 进行部署。<br><a target="_blank" rel="noopener" href="https://vercel.com/new/clone?repository-url=https://github.com/kkfive/kkapi-open/tree/vercel"><img src="https://vercel.com/button" alt="部署到Vercel" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></a></li><li>配置环境变量：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_wwcTzH8isA.10hmhosvut28.webp" alt="msedge_wwcTzH8isA" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br>环境变量可能随项目的迭代而增加必填的环境变量，具体请参考<a target="_blank" rel="noopener" href="https://kkapi.js.org/reference/kkapi/environment.html">官网 —— kkapi环境变量</a></li><li>重新部署<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_owqMifozPi.37vcfu5vfpm0.webp" alt="msedge_owqMifozPi" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_5WUBTLL0NZ.1nl1z1a7qiqo.webp" alt="msedge_5WUBTLL0NZ" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_mMprAjHb9O.3b2527plrfg.webp" alt="msedge_mMprAjHb9O" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></li><li>绑定域名（建议）<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_miAwQcdm9f.3htnm9dlllq0.webp" alt="msedge_miAwQcdm9f" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></li><li>初始化账户<br>浏览器访问：<br>你刚刚复制的地址/api/user/init?userName=你想设置的账户名<br>如果不指定用户名则自动将账户名设置为admin</li></ul></div><div class="trm-tab-item-content" id="部署kkapi-2"><div class="trm-note info"><div class="trm-note-title">INFO</div><p>以下内容来自：<a target="_blank" rel="noopener" href="https://kkapi.js.org/guide/setup/deploy.html#%E7%AC%AC%E4%BA%8C%E7%A7%8D%E9%83%A8%E7%BD%B2%E5%A7%BF%E5%8A%BF%EF%BC%9A%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%83%A8%E7%BD%B2">第二种部署姿势：服务器部署</a></p></div><ul><li>克隆源代码<br><code>git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git</code></li><li>安装依赖<br><code>yarn install</code><br>如果没有<code>yarn</code>则先允许<code>npm i yarn -g</code>进行安装</li><li>安装 pm2<br><code>npm i pm2 -g</code></li><li>编译项目<br><code>yarn build</code></li><li>配置环境变量<br>在项目目录新建文件<code>local.env</code>，将环境变量写入其中即可。例如：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">PORT=3000</span><br><span class="line">DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=admin</span><br><span class="line">DATABASE_USER=root</span><br><span class="line">DATABASE_PASSWORD=root</span><br><span class="line"># 加密密钥 测试</span><br><span class="line">SECRETKEY=xxxxxxxxxxxxxxx</span><br></pre></td></tr></table></figure>其中 PORT 表示启动的端口</li><li>启动项目<br><code>pm2 start pm2.json</code><br>然后通过命令<code>curl http://127.0.0.1:3000/api/user/init</code>检查是否允许成功<br><img src="https://file.acs.pw/picGo/2022/02/27/20220227101623.png" alt="image-20220227101623911" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></li><li>更新项目<br>进入项目并执行一下命令<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git pull</span><br><span class="line">yarn build</span><br><span class="line">pm2 restart pm2.json</span><br></pre></td></tr></table></figure></li></ul></div><div class="trm-tab-item-content" id="部署kkapi-3"><p>尚未写完</p></div></div></div><h3 id="部署kkadmin"><a href="#部署kkadmin" class="headerlink" title="部署kkadmin"></a>部署kkadmin</h3><p>介绍：kkadmin是kkapi的后台，方便发布说说<br></p><div class="trm-note tip"><div class="trm-note-title">TIP</div><p>以下部署姿势你只需要任选其一即可，无需全部部署。</p></div><p></p><div class="trm-tabs" id="部署kkadmin"><ul class="trm-nav-tabs"><li class="trm-tab"><button type="button" data-href="#部署kkadmin-1">Vercel部署</button></li><li class="trm-tab active"><button type="button" data-href="#部署kkadmin-2">CF pages部署（推荐）</button></li><li class="trm-tab"><button type="button" data-href="#部署kkadmin-3">其他环境部署</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content" id="部署kkadmin-1"><div class="trm-note warning"><div class="trm-note-title">WARNING</div><p>由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。<br>所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用</p></div><ul><li>Fork这个项目：<a target="_blank" rel="noopener" href="https://github.com/kkfive/kkadmin-open/">https://github.com/kkfive/kkadmin-open/</a></li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_6HMaGfN000.1csf0rae8okg.webp" alt="msedge_6HMaGfN000" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_UPsCgr2okQ.7k0gi7brxoc0.webp" alt="msedge_UPsCgr2okQ" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>配置变量<br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_ktuszZjpej.7ftbduod9uc0.webp" alt="msedge_ktuszZjpej" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></li></ul><p>VITE_GLOB_API_URL（必选）<br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_wqMbtdCCon.26m2h3r94d7k.webp" alt="msedge_wqMbtdCCon" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>构建actions</li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_yymiOm8Kek.23xjzofdum3.webp" alt="msedge_yymiOm8Kek" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_4awdNaFJGz.1rdq0mxyfhog.webp" alt="msedge_4awdNaFJGz" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_2uYyc6Qh4I.4p3ngtkhmh00.webp" alt="msedge_2uYyc6Qh4I" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>部署到Vercel<br>复制下面这个网址</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://vercel.com/new/import?s=https://github.com/SinInno/kkadmin-open/tree/vercel</span><br></pre></td></tr></table></figure><p>并将“SinInno”改为你Github的用户名后访问你刚刚修改的网址<br>PS：如果你Fork的这个项目有改Repository name，那么请将上面的“kkapi-open”改为你这个项目的Repository name</p><p>然后直接部署</p><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_GJbsx9xoOw.8zgxw8og644.webp" alt="msedge_GJbsx9xoOw" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><p>部署完成后点“Go to Dashboard”，并点左上角的“Visit”</p><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_Lyo0nIvIqF.d4g2uabkljk.webp" alt="msedge_Lyo0nIvIqF" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><p>账号输入你之前初始化账户的账户名<br>密码请输入默认密码：123456<br>登入面板后请更改默认密码！</p></div><div class="trm-tab-item-content active" id="部署kkadmin-2"><div class="trm-note info"><div class="trm-note-title">INFO</div><p>如果你已经在 GitHub actions 部署了，那么 cf pages 部署时也可以选择 vercel 进行部署。也可以使用主干分支进行打包部署。<br>接下来的教程以使用 cf pages 构建为例介绍</p></div><ul><li>fork项目（可直接fork）</li><li>导入项目</li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_1bV5Of8ioS.xtthsj95ytc.webp" alt="msedge_1bV5Of8ioS" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_CcnQ68DBFQ.2q893j8w72k0.webp" alt="msedge_CcnQ68DBFQ" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>配置环境变量</li></ul><p>环境变量参考：<a target="_blank" rel="noopener" href="https://kkapi.js.org/reference/kkadmin/environment.html">官网 —— kkadmin环境变量</a></p><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227113526.png" alt="配置环境变量" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><ul><li>等待构建完成后即可</li></ul><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227114643.png" alt="构建中" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p></div><div class="trm-tab-item-content" id="部署kkadmin-3"><p>其他环境部署基本可以直接使用 GitHub 构建后的 vercel 进行，毕竟只是 HTML</p></div></div></div><h2 id="前端配置"><a href="#前端配置" class="headerlink" title="前端配置"></a>前端配置</h2><h3 id="进入后台，查看个人ID"><a href="#进入后台，查看个人ID" class="headerlink" title="进入后台，查看个人ID"></a>进入后台，查看个人ID</h3><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227131425.png" alt="查看个人ID" data-tag="post-image" loading="lazy" onerror='this.onerror=null,this.src="/img/404.jpg"'></p><h3 id="前端引入"><a href="#前端引入" class="headerlink" title="前端引入"></a>前端引入</h3><div class="trm-note info"><div class="trm-note-title">INFO</div><p>ipseak 使用 marked 依赖和 highlight 依赖，为了减少打包体积，并没有将该依赖打包，因此需要使用 cdn 进行外部引入。</p></div><div class="trm-tabs" id="前端引入ispeak"><ul class="trm-nav-tabs"><li class="trm-tab"><button type="button" data-href="#前端引入ispeak-1">使用Waline</button></li><li class="trm-tab active"><button type="button" data-href="#前端引入ispeak-2">使用Twikoo</button></li><li class="trm-tab"><button type="button" data-href="#前端引入ispeak-3">使用Discuss</button></li><li class="trm-tab"><button type="button" data-href="#前端引入ispeak-4">使用Artalk</button></li></ul><div class="trm-tab-contents"><div class="trm-tab-item-content" id="前端引入ispeak-1"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.wl-power&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!-- CSS --&gt;</span></span><br><span class="line"><span class="code">&lt;link href=&quot;https://unpkg.com/@waline/client/dist/waline.css&quot; rel=&quot;stylesheet&quot; /&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://unpkg.com/@waline/client@v2/dist/waline.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> Waline.init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;,//不用改</span></span><br><span class="line"><span class="code"> serverURL: &#x27;&#x27;,//填写你的Waline服务端地址</span></span><br><span class="line"><span class="code"> path:&#x27;/speak/info.html?q=&#x27; + _id,//不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> emoji: [&quot;//unpkg.com/@waline/emojis@1.0.1/weibo&quot;,&quot;https://emoji.shojo.cn/bili/src/小黄脸&quot;,&quot;//unpkg.com/@waline/emojis@1.0.1/bilibili&quot;,&quot;https://emoji.shojo.cn/bili/src/枕边童话&quot;,&quot;https://emoji.shojo.cn/bili/src/咩栗&quot;,&quot;https://emoji.shojo.cn/bili/src/呜米&quot;,&quot;https://emoji.shojo.cn/bili/src/进击的冰糖&quot;,&quot;https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀&quot;,&quot;https://emoji.shojo.cn/bili/src/多多poi&quot;,&quot;https://emoji.shojo.cn/bili/src/穆小泠&quot;,&quot;https://emoji.shojo.cn/bili/src/早稻叽&quot;],// 表情包大全</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://discuss.js.org/&quot;&gt;&lt;strong&gt;Waline&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://unpkg.com/@waline/client/dist/waline.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/@waline/client@v2/dist/waline.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> Waline.init(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;,//不用改</span></span><br><span class="line"><span class="emphasis"> serverURL: &#x27;&#x27;,//填写你的Waline服务端地址</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + _</span>id,//不用改</span><br><span class="line"><span class="code"> //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> emoji: [&quot;//unpkg.com/@waline/emojis@1.0.1/weibo&quot;,&quot;https://emoji.shojo.cn/bili/src/小黄脸&quot;,&quot;//unpkg.com/@waline/emojis@1.0.1/bilibili&quot;,&quot;https://emoji.shojo.cn/bili/src/枕边童话&quot;,&quot;https://emoji.shojo.cn/bili/src/咩栗&quot;,&quot;https://emoji.shojo.cn/bili/src/呜米&quot;,&quot;https://emoji.shojo.cn/bili/src/进击的冰糖&quot;,&quot;https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀&quot;,&quot;https://emoji.shojo.cn/bili/src/多多poi&quot;,&quot;https://emoji.shojo.cn/bili/src/穆小泠&quot;,&quot;https://emoji.shojo.cn/bili/src/早稻叽&quot;],// 表情包大全</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br></pre></td></tr></table></figure></li></ul></div><div class="trm-tab-item-content active" id="前端引入ispeak-2"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.tk-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/twikoo&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> twikoo.init(&#123;</span></span><br><span class="line"><span class="code"> envId: &#x27;&#x27;, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="code"> //region: &#x27;ap-guangzhou&#x27;, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填</span></span><br><span class="line"><span class="code"> path: &#x27;/speak/info.html?q=&#x27; + _id, //不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> lang: &#x27;zh-CN&#x27;, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://twikoo.js.org/&quot;&gt;&lt;strong&gt;Twikoo&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://npm.elemecdn.com/twikoo&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> twikoo.init(&#123;</span></span><br><span class="line"><span class="emphasis"> envId: &#x27;&#x27;, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="emphasis"> //region: &#x27;ap-guangzhou&#x27;, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + speakId, // 不用改</span></span><br><span class="line"><span class="emphasis"> lang: &#x27;zh-CN&#x27;, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div><div class="trm-tab-item-content" id="前端引入ispeak-3"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.D-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/discuss@latest/dist/discuss.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> discuss.init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;,// 不用改</span></span><br><span class="line"><span class="code"> serverURLs: &#x27;&#x27;,//填写你的Discuss服务端地址</span></span><br><span class="line"><span class="code"> path: &#x27;/speak/info.html?q=&#x27; + _id,//不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> ph: &#x27;千山万水总是情，给个评论行不行&#x27; ,//评论框占位符</span></span><br><span class="line"><span class="code"> imgLoading: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;//评论图片加载动画</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://discuss.js.org/&quot;&gt;&lt;strong&gt;Discuss&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://npm.elemecdn.com/discuss@latest/dist/discuss.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;; //api地址</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> discuss.init(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;,// 不用改</span></span><br><span class="line"><span class="emphasis"> serverURLs: &#x27;&#x27;,//填写你的Discuss服务端地址</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + speakId,// 不用改</span></span><br><span class="line"><span class="emphasis"> //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="emphasis"> ph: &#x27;千山万水总是情，给个评论行不行&#x27; ,//评论框占位符</span></span><br><span class="line"><span class="emphasis"> imgLoading: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;//评论图片加载动画</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div><div class="trm-tab-item-content" id="前端引入ispeak-4"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.atk-list-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!-- CSS --&gt;</span></span><br><span class="line"><span class="code">&lt;link href=&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.css&quot; rel=&quot;stylesheet&quot; /&gt;</span></span><br><span class="line"><span class="code">&lt;!-- JS --&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> new Artalk(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="code"> pageKey: &#x27;/speak/info.html?q=&#x27; + _id, //不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> pageTitle: title || contentSub, // 不用改</span></span><br><span class="line"><span class="code"> server: &#x27;&#x27;, //填写你的Artalk服务端地址</span></span><br><span class="line"><span class="code"> site: &#x27;&#x27; // 填写你的站点名</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://artalk.js.org/&quot;&gt;&lt;strong&gt;Artalk&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> new Artalk(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="emphasis"> pageKey: path + &#x27;?q=&#x27; + speakId, // 不用改</span></span><br><span class="line"><span class="emphasis"> pageTitle: title || contentSub, // 不用改</span></span><br><span class="line"><span class="emphasis"> server: &#x27;&#x27;, //填写你的Artalk服务端地址</span></span><br><span class="line"><span class="emphasis"> site: &#x27;&#x27; // 填写你的站点名</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div></div></div></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章<span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/61417/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230128/30165599-36623bea-93a6-11e7-8956-1ddf99ce0e6f.2rbu2i9xfvy0.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></div><h5><a href="/posts/61417/" class="trm-anima-link">自建Meting服务</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/01/19</li><li>19:52</li><li>228</li><li>1</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/posts/22945/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/logo.22azkjyis5uo.webp"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a></div><h5><a href="/posts/22945/" class="trm-anima-link">butterfly主题添加音乐页面（适配手机）</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/01/08</li><li>22:31</li><li>2.9k</li><li>16</li></ul></div></div></div></div><div class="trm-card trm-scroll-animation comment-container"><div id="Twikoo-warp"><div id="tcomment"></div><script src="https://jsd.cdn.storisinz.site/npm/twikoo/dist/twikoo.all.min.js" data-swup-reload-script data-reset="true"></script><script data-swup-reload-script>twikoo.init({enable:!1,envId:"https://tk.pl.blog.sinzmise.top/",el:"#tcomment"})</script></div><script data-swup-reload-script>function hidecomment(){document.getElementById("Twikoo-warp").style.display="none"}function Twikooset(){hidecomment(),document.getElementById("Twikoo-warp").style.display="block"}hidecomment(),document.getElementById("Twikoo-warp").style.display="block"</script></div><div class="trm-divider footer-divider"></div><footer class="trm-footer-card trm-scroll-animation"><div class="trm-footer-item"><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An&nbsp;<a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>&nbsp;🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a></div><div class="trm-footer-item"><span>© 2021 - 2024</span><span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">王九弦SZ·Ninty</span></div><div class="trm-footer-item"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v7.3.0</span><span class="footer-separator" data-separator=" | "></span> <span>主题 - <a rel="noopener" href="https://github.com/MaLuns/hexo-theme-async" target="_blank">Async</a> v2.2.3</span></div><div class="trm-footer-item blog-run-long"></div><div class="trm-footer-item"><p><a href="https://icp.gov.moe/?keyword=20231033" target="_blank">萌ICP备20231033号</a>&nbsp;| <a target="_blank" href="https://beian.miit.cn.com/gov/search.php?query=blog.sinzmise.top" title="MIIT备20240818号">MIIT备20240818号</a>&nbsp;| <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/" title="官码2024000155号"><img src="https://style.wmou.com/images/guanma.png" alt="官码" width="9">官码2024000155号</a></p><p><span>我加入的：</span> <a href="https://zhblogs.ohyee.cc/" target="_blank">中文博客列表</a>&nbsp;| <a href="https://storeweb.cn/member/o/1585" target="_blank">个站商店</a>&nbsp;| <a href="https://bf.zzxworld.com/s/995" target="_blank">BlogFinder</a>&nbsp;| <a href="https://sites.link/site-info?siteType=life&siteId=64cb373190e35300a8eec654" target="_blank">站点聚合平台</a>&nbsp;| <a href="https://boke.lu" target="_blank">博客录</a>&nbsp;| <a href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/" target="_blank">RssBlog</a>&nbsp;| <a href="https://blogscn.fun" target="_blank">笔墨迹</a>&nbsp;| <a href="https://forever.dreamerhe.cn/" target="_blank">梦境列车</a>&nbsp;| <a href="https://firewood.news/" target="_blank">积薪</a>&nbsp;| <a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a></p></div></footer></div></div></div></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div></div><link rel="stylesheet" href="https://jsd.cdn.storisinz.site/npm/@docsearch/css/dist/style.min.css"><script src="https://jsd.cdn.storisinz.site/npm/@docsearch/js/dist/umd/index.min.js"></script><script>(()=>{docsearch({appId:"QAS05YI2PH",apiKey:"67ffd4c9fa1234148ec4f8b27dfdb2a7",indexName:"sinzmise",container:"#docsearch"});const e=()=>{document.querySelector(".DocSearch-Button").click()},c=()=>{document.querySelector("#trm-search-btn").addEventListener("click",e)};c(),window.addEventListener("pjax:complete",c)})()</script><script src="https://jsd.cdn.storisinz.site/npm/swup@2.0.19/dist/swup.min.js"></script><script src="https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="https://jsd.cdn.storisinz.site/npm/axios/dist/axios.min.js"></script><script src="/js/plugins/danmu.js?v=2.2.3"></script><link rel="stylesheet" href="/weichuncai/css/style.css"><script src="/weichuncai/js/common.js"></script><script src="/weichuncai/wcc-config.js"></script><script>"serviceWorker"in navigator?navigator.serviceWorker.register("/sw.js").then((function(){navigator.serviceWorker.controller?console.log("Assets cached by the controlling service worker."):console.log("Please reload this page to allow the service worker to handle network operations.")})).catch((function(e){console.log("ERROR: "+e)})):console.log("Service workers are not supported in the current browser.")</script><script id="async-script" src="/js/main.js?v=2.2.3"></script><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>
1
+ <!DOCTYPE html><html lang="zh-CN"><head hexo-theme="https://github.com/volantis-x/hexo-theme-volantis/#6.0.0-alpha.0"><meta name="generator" content="Hexo 7.3.0"><meta charset="utf-8"><link rel="canonical" href="https://blog.sinzmise.top/posts/38964/"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="HandheldFriendly" content="True"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><link rel="preload" href="/css/style.css" as="style"><link rel="preload" href="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="preload" href="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="alternate" href="/atom.xml" title="汐塔魔法屋" type="application/atom+xml"><title>小康大佬的说说方案 ———— ispeak搭建教程 - 汐塔魔法屋</title><meta name="keywords" content="站点折腾,页面魔改,null"><meta desc name="description" content="这篇文章是我之前写过的教程的重写 - 王九弦SZ·Ninty - 汐塔魔法屋"><meta property="og:type" content="article"><meta property="og:title" content="小康大佬的说说方案 ———— ispeak搭建教程"><meta property="og:url" content="https://blog.sinzmise.top/posts/38964/"><meta property="og:site_name" content="汐塔魔法屋"><meta property="og:description" content="这篇文章是我之前写过的教程的重写"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"><meta property="article:published_time" content="2023-01-13T21:01:37.000Z"><meta property="article:modified_time" content="2024-10-27T10:23:58.814Z"><meta property="article:author" content="王九弦SZ·Ninty"><meta property="article:tag" content="站点折腾"><meta property="article:tag" content="页面魔改"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"><style>#safearea{display:none}.fa-duotone.red,.fa-light.red,.fa-regular.red,.fa-solid.red,.fa-thin.red,.fa.red,.fad.red,.fal.red,.far.red,.fas.red,.iziToast>.iziToast-body .iziToast-icon.red{color:#f44336}.fa-duotone.pink,.fa-light.pink,.fa-regular.pink,.fa-solid.pink,.fa-thin.pink,.fa.pink,.fad.pink,.fal.pink,.far.pink,.fas.pink,.iziToast>.iziToast-body .iziToast-icon.pink{color:#e91e63}.fa-duotone.purple,.fa-light.purple,.fa-regular.purple,.fa-solid.purple,.fa-thin.purple,.fa.purple,.fad.purple,.fal.purple,.far.purple,.fas.purple,.iziToast>.iziToast-body .iziToast-icon.purple{color:#9c27b0}.fa-duotone.indigo,.fa-light.indigo,.fa-regular.indigo,.fa-solid.indigo,.fa-thin.indigo,.fa.indigo,.fad.indigo,.fal.indigo,.far.indigo,.fas.indigo,.iziToast>.iziToast-body .iziToast-icon.indigo{color:#3f51b5}.fa-duotone.light-blue,.fa-light.light-blue,.fa-regular.light-blue,.fa-solid.light-blue,.fa-thin.light-blue,.fa.light-blue,.fad.light-blue,.fal.light-blue,.far.light-blue,.fas.light-blue,.iziToast>.iziToast-body .iziToast-icon.light-blue{color:#4ba7ee}.fa-duotone.deep-blue,.fa-light.deep-blue,.fa-regular.deep-blue,.fa-solid.deep-blue,.fa-thin.deep-blue,.fa.deep-blue,.fad.deep-blue,.fal.deep-blue,.far.deep-blue,.fas.deep-blue,.iziToast>.iziToast-body .iziToast-icon.deep-blue{color:#3367d6}.fa-duotone.teal,.fa-light.teal,.fa-regular.teal,.fa-solid.teal,.fa-thin.teal,.fa.teal,.fad.teal,.fal.teal,.far.teal,.fas.teal,.iziToast>.iziToast-body .iziToast-icon.teal{color:#009688}.fa-duotone.light-green,.fa-light.light-green,.fa-regular.light-green,.fa-solid.light-green,.fa-thin.light-green,.fa.light-green,.fad.light-green,.fal.light-green,.far.light-green,.fas.light-green,.iziToast>.iziToast-body .iziToast-icon.light-green{color:#8bc34a}.fa-duotone.orange,.fa-light.orange,.fa-regular.orange,.fa-solid.orange,.fa-thin.orange,.fa.orange,.fad.orange,.fal.orange,.far.orange,.fas.orange,.iziToast>.iziToast-body .iziToast-icon.orange{color:#ff9800}.fa-duotone.deep-orange,.fa-light.deep-orange,.fa-regular.deep-orange,.fa-solid.deep-orange,.fa-thin.deep-orange,.fa.deep-orange,.fad.deep-orange,.fal.deep-orange,.far.deep-orange,.fas.deep-orange,.iziToast>.iziToast-body .iziToast-icon.deep-orange{color:#ff5722}.fa-duotone.brown,.fa-light.brown,.fa-regular.brown,.fa-solid.brown,.fa-thin.brown,.fa.brown,.fad.brown,.fal.brown,.far.brown,.fas.brown,.iziToast>.iziToast-body .iziToast-icon.brown{color:#795548}.fa-duotone.blue-grey,.fa-light.blue-grey,.fa-regular.blue-grey,.fa-solid.blue-grey,.fa-thin.blue-grey,.fa.blue-grey,.fad.blue-grey,.fal.blue-grey,.far.blue-grey,.fas.blue-grey,.iziToast>.iziToast-body .iziToast-icon.blue-grey{color:#607d8b}.fa-duotone.yellow,.fa-light.yellow,.fa-regular.yellow,.fa-solid.yellow,.fa-thin.yellow,.fa.yellow,.fad.yellow,.fal.yellow,.far.yellow,.fas.yellow,.iziToast>.iziToast-body .iziToast-icon.yellow{color:#fcec60}.fa-duotone.TURQUOISE,.fa-light.TURQUOISE,.fa-regular.TURQUOISE,.fa-solid.TURQUOISE,.fa-thin.TURQUOISE,.fa.TURQUOISE,.fad.TURQUOISE,.fal.TURQUOISE,.far.TURQUOISE,.fas.TURQUOISE,.iziToast>.iziToast-body .iziToast-icon.TURQUOISE{color:#1abc9c}.fa-duotone.EMERALD,.fa-light.EMERALD,.fa-regular.EMERALD,.fa-solid.EMERALD,.fa-thin.EMERALD,.fa.EMERALD,.fad.EMERALD,.fal.EMERALD,.far.EMERALD,.fas.EMERALD,.iziToast>.iziToast-body .iziToast-icon.EMERALD{color:#2ecc71}.fa-duotone.PETERRIVE,.fa-light.PETERRIVE,.fa-regular.PETERRIVE,.fa-solid.PETERRIVE,.fa-thin.PETERRIVE,.fa.PETERRIVE,.fad.PETERRIVE,.fal.PETERRIVE,.far.PETERRIVE,.fas.PETERRIVE,.iziToast>.iziToast-body .iziToast-icon.PETERRIVE{color:#3498db}.fa-duotone.AMETHYST,.fa-light.AMETHYST,.fa-regular.AMETHYST,.fa-solid.AMETHYST,.fa-thin.AMETHYST,.fa.AMETHYST,.fad.AMETHYST,.fal.AMETHYST,.far.AMETHYST,.fas.AMETHYST,.iziToast>.iziToast-body .iziToast-icon.AMETHYST{color:#9b59b6}.fa-duotone.WETASPHALT,.fa-light.WETASPHALT,.fa-regular.WETASPHALT,.fa-solid.WETASPHALT,.fa-thin.WETASPHALT,.fa.WETASPHALT,.fad.WETASPHALT,.fal.WETASPHALT,.far.WETASPHALT,.fas.WETASPHALT,.iziToast>.iziToast-body .iziToast-icon.WETASPHALT{color:#34495e}.fa-duotone.GREENSEA,.fa-light.GREENSEA,.fa-regular.GREENSEA,.fa-solid.GREENSEA,.fa-thin.GREENSEA,.fa.GREENSEA,.fad.GREENSEA,.fal.GREENSEA,.far.GREENSEA,.fas.GREENSEA,.iziToast>.iziToast-body .iziToast-icon.GREENSEA{color:#16a085}.fa-duotone.NEPHRITIS,.fa-light.NEPHRITIS,.fa-regular.NEPHRITIS,.fa-solid.NEPHRITIS,.fa-thin.NEPHRITIS,.fa.NEPHRITIS,.fad.NEPHRITIS,.fal.NEPHRITIS,.far.NEPHRITIS,.fas.NEPHRITIS,.iziToast>.iziToast-body .iziToast-icon.NEPHRITIS{color:#27ae60}.fa-duotone.BELIZEHOLE,.fa-light.BELIZEHOLE,.fa-regular.BELIZEHOLE,.fa-solid.BELIZEHOLE,.fa-thin.BELIZEHOLE,.fa.BELIZEHOLE,.fad.BELIZEHOLE,.fal.BELIZEHOLE,.far.BELIZEHOLE,.fas.BELIZEHOLE,.iziToast>.iziToast-body .iziToast-icon.BELIZEHOLE{color:#2980b9}.fa-duotone.WISTERIA,.fa-light.WISTERIA,.fa-regular.WISTERIA,.fa-solid.WISTERIA,.fa-thin.WISTERIA,.fa.WISTERIA,.fad.WISTERIA,.fal.WISTERIA,.far.WISTERIA,.fas.WISTERIA,.iziToast>.iziToast-body .iziToast-icon.WISTERIA{color:#8e44ad}.fa-duotone.MIDNIGHTBLUE,.fa-light.MIDNIGHTBLUE,.fa-regular.MIDNIGHTBLUE,.fa-solid.MIDNIGHTBLUE,.fa-thin.MIDNIGHTBLUE,.fa.MIDNIGHTBLUE,.fad.MIDNIGHTBLUE,.fal.MIDNIGHTBLUE,.far.MIDNIGHTBLUE,.fas.MIDNIGHTBLUE,.iziToast>.iziToast-body .iziToast-icon.MIDNIGHTBLUE{color:#2c3e50}.fa-duotone.SUNFLOWER,.fa-light.SUNFLOWER,.fa-regular.SUNFLOWER,.fa-solid.SUNFLOWER,.fa-thin.SUNFLOWER,.fa.SUNFLOWER,.fad.SUNFLOWER,.fal.SUNFLOWER,.far.SUNFLOWER,.fas.SUNFLOWER,.iziToast>.iziToast-body .iziToast-icon.SUNFLOWER{color:#f1c40f}.fa-duotone.CARROT,.fa-light.CARROT,.fa-regular.CARROT,.fa-solid.CARROT,.fa-thin.CARROT,.fa.CARROT,.fad.CARROT,.fal.CARROT,.far.CARROT,.fas.CARROT,.iziToast>.iziToast-body .iziToast-icon.CARROT{color:#e67e22}.fa-duotone.ALIZARIN,.fa-light.ALIZARIN,.fa-regular.ALIZARIN,.fa-solid.ALIZARIN,.fa-thin.ALIZARIN,.fa.ALIZARIN,.fad.ALIZARIN,.fal.ALIZARIN,.far.ALIZARIN,.fas.ALIZARIN,.iziToast>.iziToast-body .iziToast-icon.ALIZARIN{color:#e74c3c}.fa-duotone.CLOUDS,.fa-light.CLOUDS,.fa-regular.CLOUDS,.fa-solid.CLOUDS,.fa-thin.CLOUDS,.fa.CLOUDS,.fad.CLOUDS,.fal.CLOUDS,.far.CLOUDS,.fas.CLOUDS,.iziToast>.iziToast-body .iziToast-icon.CLOUDS{color:#ecf0f1}.fa-duotone.CONCRETE,.fa-light.CONCRETE,.fa-regular.CONCRETE,.fa-solid.CONCRETE,.fa-thin.CONCRETE,.fa.CONCRETE,.fad.CONCRETE,.fal.CONCRETE,.far.CONCRETE,.fas.CONCRETE,.iziToast>.iziToast-body .iziToast-icon.CONCRETE{color:#95a5a6}.fa-duotone.ORANGE,.fa-light.ORANGE,.fa-regular.ORANGE,.fa-solid.ORANGE,.fa-thin.ORANGE,.fa.ORANGE,.fad.ORANGE,.fal.ORANGE,.far.ORANGE,.fas.ORANGE,.iziToast>.iziToast-body .iziToast-icon.ORANGE{color:#f39c12}.fa-duotone.PUMPKIN,.fa-light.PUMPKIN,.fa-regular.PUMPKIN,.fa-solid.PUMPKIN,.fa-thin.PUMPKIN,.fa.PUMPKIN,.fad.PUMPKIN,.fal.PUMPKIN,.far.PUMPKIN,.fas.PUMPKIN,.iziToast>.iziToast-body .iziToast-icon.PUMPKIN{color:#d35400}.fa-duotone.POMEGRANATE,.fa-light.POMEGRANATE,.fa-regular.POMEGRANATE,.fa-solid.POMEGRANATE,.fa-thin.POMEGRANATE,.fa.POMEGRANATE,.fad.POMEGRANATE,.fal.POMEGRANATE,.far.POMEGRANATE,.fas.POMEGRANATE,.iziToast>.iziToast-body .iziToast-icon.POMEGRANATE{color:#c0392b}.fa-duotone.SILVER,.fa-light.SILVER,.fa-regular.SILVER,.fa-solid.SILVER,.fa-thin.SILVER,.fa.SILVER,.fad.SILVER,.fal.SILVER,.far.SILVER,.fas.SILVER,.iziToast>.iziToast-body .iziToast-icon.SILVER{color:#bdc3c7}.fa-duotone.ASBESTOS,.fa-light.ASBESTOS,.fa-regular.ASBESTOS,.fa-solid.ASBESTOS,.fa-thin.ASBESTOS,.fa.ASBESTOS,.fad.ASBESTOS,.fal.ASBESTOS,.far.ASBESTOS,.fas.ASBESTOS,.iziToast>.iziToast-body .iziToast-icon.ASBESTOS{color:#7f8c8d}.article-title,.md .footer .header,.meta-v3,.new-meta-box,.prev-next,.widget header,details summary{font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}:root{--color-site-body:#f4f4f4;--color-site-bg:#f4f4f4;--color-site-inner:#fff;--color-site-footer:#666;--color-card:#fff;--color-text:#444;--color-block:#f4f4f4;--color-inlinecode:#444;--color-codeblock:#f4f4f4;--color-h1:#3a3a3a;--color-h2:#3a3a3a;--color-h3:#333;--color-h4:#444;--color-h5:#555;--color-h6:#666;--color-p:#444;--color-list:#666;--color-list-hl:#30ad91;--color-meta:#888;--color-read-bkg:#e0d8c8;--color-read-post:#f8f1e2;--color-copyright-bkg:#f5f5f5;--color-white-png:#fff;--color-img-error:#f5f5f5}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;outline:0;margin:0;padding:0}::-webkit-scrollbar{height:4px;width:4px}::-webkit-scrollbar-track-piece{background:0 0}::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ff5722}html{color:var(--color-text);width:100%;height:100%;font-family:UbuntuMono,"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;font-size:16px}html>::-webkit-scrollbar{height:4px;width:4px}html>::-webkit-scrollbar-track-piece{background:0 0}html>::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}html>::-webkit-scrollbar-thumb:hover{background:#ff5722}body{background-color:var(--color-site-body);text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body.modal-active{overflow:hidden}@media screen and (max-width:680px){body.modal-active{position:fixed;top:0;right:0;bottom:0;left:0}}a{color:#2092ec;cursor:pointer;text-decoration:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}a:active,a:hover{outline:0}ol,ul{padding-left:0}ol li,ul li{list-style:none}header{display:block}img{border:0;background:0 0;max-width:100%}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;height:0;border:0;border-radius:1px;-webkit-border-radius:1px;border-bottom:1px solid rgba(68,68,68,.1)}article hr{background-image:none;height:2em;border:none;margin:1em 0 1em;text-align:center}article hr:after{content:"···";letter-spacing:2em;padding-left:2em;font-weight:700}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none;-webkit-appearance:button;cursor:pointer}@supports (backdrop-filter:blur(20px)){.blur{background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(200%) blur(20px)}}@supports (backdrop-filter:blur(20px)){.blur#comments{backdrop-filter:unset}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_cover{min-height:64px}.cover-wrapper{top:0;left:0;max-width:100%;height:100vh;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;align-self:center;align-content:center;color:var(--color-site-inner);padding:0 16px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:relative;overflow:hidden;margin-bottom:-100px}.cover-wrapper .cover-bg{position:absolute;width:100%;height:100%;background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover}.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}.cover-wrapper .cover-bg.lazyload.loaded{animation-delay:0s;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-name:fadeIn}@-moz-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{z-index:1;position:relative;width:100%;height:100%}.cover-wrapper#full{height:calc(100vh + 100px);padding-bottom:100px}.cover-wrapper#half{max-height:640px;min-height:460px;height:calc(36vh - 64px + 200px)}.cover-wrapper #scroll-down{width:100%;height:64px;position:absolute;bottom:100px;text-align:center;cursor:pointer}.cover-wrapper #scroll-down .scroll-down-effects{color:#fff;font-size:24px;line-height:64px;position:absolute;width:24px;left:calc(50% - 12px);text-shadow:0 1px 2px rgba(0,0,0,.1);animation:scroll-down-effect 1.5s infinite;-webkit-animation:scroll-down-effect 1.5s infinite;-khtml-animation:scroll-down-effect 1.5s infinite;-moz-animation:scroll-down-effect 1.5s infinite;-o-animation:scroll-down-effect 1.5s infinite;-ms-animation:scroll-down-effect 1.5s infinite}@-moz-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{margin-top:64px;margin-bottom:120px}.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;max-width:100%}.cover-wrapper .cover-body .bottom{margin-top:32px}.cover-wrapper .cover-body .title{font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace;font-size:3.125rem;text-shadow:0 1px 2px rgba(0,0,0,.1);text-align:center}.cover-wrapper .cover-body .subtitle{font-size:16px}.cover-wrapper .cover-body .logo{max-height:120px;max-width:calc(100% - 4 * 16px)}@media screen and (min-height:1024px){.cover-wrapper .cover-body .title{font-size:3rem}.cover-wrapper .cover-body .subtitle{font-size:.875rem}.cover-wrapper .cover-body .logo{max-height:150px}}.cover-wrapper .cover-body .m_search{position:relative;max-width:calc(100% - 16px);width:320px;vertical-align:middle}.cover-wrapper .cover-body .m_search .form{position:relative;display:block;width:100%}.cover-wrapper .cover-body .m_search .icon,.cover-wrapper .cover-body .m_search .input{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.cover-wrapper .cover-body .m_search .icon{position:absolute;display:block;line-height:2.5rem;width:32px;top:0;left:5px;color:rgba(68,68,68,.75)}.cover-wrapper .cover-body .m_search .input{display:block;height:2.5rem;width:100%;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-size:.875rem;-webkit-appearance:none;padding-left:36px;border-radius:1.4rem;-webkit-border-radius:1.4rem;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:none;color:var(--color-text)}@media screen and (max-width:500px){.cover-wrapper .cover-body .m_search .input{padding-left:36px}}.cover-wrapper .cover-body .m_search .input:hover{background:rgba(255,255,255,.8)}.cover-wrapper .cover-body .m_search .input:focus{background:#fff}.cover-wrapper .list-h{display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:stretch;border-radius:4px;-webkit-border-radius:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cover-wrapper .list-h a{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 0;-ms-flex:1 0;flex:1 0;display:flex;font-weight:600}.cover-wrapper .list-h a img{display:block;border-radius:2px;-webkit-border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.cover-wrapper .list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.cover-wrapper .list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}.cover-wrapper{max-width:100%}.cover-wrapper.search .bottom .menu{margin-top:8px}.cover-wrapper.search .bottom .menu .list-h a{white-space:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;align-items:baseline;padding:2px;margin:4px;color:var(--color-site-inner);opacity:.75;-webkit-opacity:0.75;-moz-opacity:0.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent}.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}.cover-wrapper.search .bottom .menu .list-h a p{font-size:.9375rem}.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{opacity:1;-webkit-opacity:1;-moz-opacity:1;border-bottom:2px solid var(--color-site-inner)}@font-face{font-family:UbuntuMono;src:url("https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}@font-face{font-family:'Varela Round';src:url("https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}.l_header{position:fixed;z-index:1000;top:0;width:100%;height:64px;background:var(--color-card);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.l_header.auto{transition:opacity .4s ease;-webkit-transition:opacity .4s ease;-khtml-transition:opacity 0.4s ease;-moz-transition:opacity .4s ease;-o-transition:opacity .4s ease;-ms-transition:opacity .4s ease;visibility:hidden}.l_header.auto.showed{opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;visibility:visible}.l_header .container{margin-left:16px;margin-right:16px}.l_header #wrapper{height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.l_header #wrapper .nav-main,.l_header #wrapper .nav-sub{display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:center}.l_header #wrapper .nav-main{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header #wrapper.sub .nav-main{transform:translateY(-64px);-webkit-transform:translateY(-64px);-khtml-transform:translateY(-64px);-moz-transform:translateY(-64px);-o-transform:translateY(-64px);-ms-transform:translateY(-64px)}.l_header #wrapper .nav-sub{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;opacity:0;-webkit-opacity:0;-moz-opacity:0;height:64px;width:calc(100% - 2 * 16px);position:absolute}.l_header #wrapper .nav-sub ::-webkit-scrollbar{display:none}@media screen and (min-width:2048px){.l_header #wrapper .nav-sub{max-width:55vw;margin:auto}}.l_header #wrapper.sub .nav-sub{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header #wrapper .title{position:relative;color:var(--color-text);padding-left:24px;max-height:64px}.l_header #wrapper .nav-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:64px;padding:0 8px;font-size:1.25rem;font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}.l_header #wrapper .nav-main .title img{height:64px;padding:8px}.l_header .nav-sub{max-width:1080px;margin:auto}.l_header .nav-sub .title{font-weight:700;font-family:UbuntuMono,"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;line-height:1.2;max-height:64px;white-space:normal;flex-shrink:1}.l_header .switcher{display:none;line-height:64px;align-items:center}.l_header .switcher .s-toc{display:none}@media screen and (max-width:768px){.l_header .switcher .s-toc{display:flex}}.l_header .switcher>li{height:48px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;margin:2px}@media screen and (max-width:500px){.l_header .switcher>li{margin:0 1px;height:48px}}.l_header .switcher>li>a{display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:48px;height:48px;padding:.85em 1.1em;border-radius:100px;-webkit-border-radius:100px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;color:#3dd9b6}.l_header .switcher>li>a:hover{border:none}.l_header .switcher>li>a.active,.l_header .switcher>li>a:active{border:none;background:var(--color-site-bg)}@media screen and (max-width:500px){.l_header .switcher>li>a{width:36px;height:48px}}.l_header .nav-sub .switcher{display:flex}.l_header .m_search{display:flex;height:64px;width:240px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:1024px){.l_header .m_search{width:44px;min-width:44px}.l_header .m_search input::placeholder{opacity:0;-webkit-opacity:0;-moz-opacity:0}.l_header .m_search:hover{width:240px}.l_header .m_search:hover input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (min-width:500px){.l_header .m_search:hover .input{width:100%}.l_header .m_search:hover .input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (max-width:500px){.l_header .m_search{min-width:0}.l_header .m_search input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.l_header .m_search .form{position:relative;display:flex;width:100%;align-items:center}.l_header .m_search .icon{position:absolute;width:36px;left:5px;color:var(--color-meta)}@media screen and (max-width:500px){.l_header .m_search .icon{display:none}}.l_header .m_search .input{display:block;padding-top:8px;padding-bottom:8px;line-height:1.3;width:100%;color:var(--color-text);background:#fafafa;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding-left:40px;font-size:.875rem;border-radius:8px;-webkit-border-radius:8px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (min-width:500px){.l_header .m_search .input:focus{box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}}@media screen and (max-width:500px){.l_header .m_search .input{background:var(--color-block);padding-left:8px;border:none}.l_header .m_search .input:focus,.l_header .m_search .input:hover{border:none}}@media (max-width:500px){.l_header .m_search{left:0;width:0;overflow:hidden;position:absolute;background:#fff;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header .m_search .input{border-radius:32px;-webkit-border-radius:32px;margin-left:16px;padding-left:16px}.l_header.z_search-open .m_search{width:100%}.l_header.z_search-open .m_search .input{width:calc(100% - 120px)}}ul.list-v li:hover>ul.list-v,ul.m-pc li:hover>ul.list-v{display:block}ul.nav-list-h{display:flex;align-items:stretch}ul.nav-list-h>li{position:relative;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;height:100%;line-height:2.4;border-radius:4px;-webkit-border-radius:4px}ul.nav-list-h>li>a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul.nav-list-h>li>a span{font-weight:600}ul.list-v{z-index:1;display:none;position:absolute;background:var(--color-card);box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);margin-top:-6px;border-radius:4px;-webkit-border-radius:4px;padding:8px 0}ul.list-v.show{display:block}ul.list-v hr{margin-top:8px;margin-bottom:8px}ul.list-v>li{white-space:nowrap;word-break:keep-all}ul.list-v>li.header{font-size:.78125rem;font-weight:700;line-height:2em;color:var(--color-meta);margin:8px 16px 4px}ul.list-v>li.header i{margin-right:8px}ul.list-v>li ul{margin-left:0;display:none;margin-top:-40px}ul.list-v .aplayer-container{min-height:64px;padding:6px 16px}ul.list-v>li>a{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;display:block;color:var(--color-list);font-size:.875rem;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:1024px){ul.list-v>li>a{line-height:40px}}ul.list-v>li>a>i{margin-right:8px}ul.list-v>li>a.active,ul.list-v>li>a:active{color:var(--color-list-hl)}ul.list-v>li>a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}.l_header .menu>ul>li>a{display:block;padding:0 8px;display:flex}.l_header .menu>ul>li>a .icon{width:16px;margin-right:6px}.l_header .menu>ul>li>a .icon i{display:inline-block}.l_header .menu>ul>li>ul .icon{width:16px;margin-right:2px}.l_header .menu>ul>li>ul .icon i{display:inline-block}.l_header ul.nav-list-h>li{color:var(--color-list);line-height:64px}.l_header ul.nav-list-h>li>a{max-height:64px;overflow:hidden;color:inherit}.l_header ul.nav-list-h>li>a.active span,.l_header ul.nav-list-h>li>a:active span{color:#3dd9b6}.l_header ul.nav-list-h>li:hover>a{color:var(--color-list-hl)}.l_header ul.nav-list-h>li i.music{animation:rotate-effect 1.5s linear infinite;-webkit-animation:rotate-effect 1.5s linear infinite;-khtml-animation:rotate-effect 1.5s linear infinite;-moz-animation:rotate-effect 1.5s linear infinite;-o-animation:rotate-effect 1.5s linear infinite;-ms-animation:rotate-effect 1.5s linear infinite}@-moz-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-webkit-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-o-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}.menu-phone li ul.list-v{right:calc(100% - .5 * 16px)}.menu-phone li ul.list-v ul{right:calc(100% - .5 * 16px)}#wrapper{max-width:1080px;margin:auto}@media screen and (min-width:2048px){#wrapper{max-width:55vw}}#wrapper .menu{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1;-ms-flex:1 1;flex:1 1;margin:0 16px 0 0}#wrapper .menu .list-v ul{left:calc(100% - .5 * 16px)}.menu-phone{display:none;margin-top:16px;right:8px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.menu-phone ul{right:calc(100% - .5 * 16px)}@media screen and (max-width:500px){.menu-phone{display:block}}.l_header{max-width:65vw;left:calc((100% - 65vw) * .5);border-bottom-left-radius:8px;border-bottom-right-radius:8px}@media screen and (max-width:2048px){.l_header{max-width:1112px;left:calc((100% - 1112px) * .5)}}@media screen and (max-width:1112px){.l_header{left:0;border-radius:0;-webkit-border-radius:0;max-width:100%}}@media screen and (max-width:500px){.l_header .container{margin-left:0;margin-right:0}.l_header #wrapper .nav-main .title{padding-left:16px;padding-right:16px}.l_header #wrapper .nav-sub{width:100%}.l_header #wrapper .nav-sub .title{overflow-y:scroll;margin-top:2px;padding:8px 16px}.l_header #wrapper .switcher{display:flex;margin-right:8px;height:64px}.l_header .menu{display:none}}@media screen and (max-width:500px){.list-v li{max-width:270px}}@media screen and (min-width:768px){#l_cover,#l_header{display:none}}#u-search{display:none;position:fixed;top:0;left:0;width:100%;height:100%;padding:60px 20px;z-index:1001}@media screen and (max-width:680px){#u-search{padding:0}}</style><link rel="stylesheet" href="/css/style.css" media="print" onload='this.media="all",this.onload=null'><noscript><link rel="stylesheet" href="/css/style.css"></noscript><script>document.addEventListener("error",(function(t){const a=t.target,e=t.target.parentElement,r=e.classList.toString(),s=e.parentElement.classList.toString();"img"===a.tagName.toLowerCase()&&(a.classList.add("fix-cursor-default","error"),"fancybox"===r&&"fancybox"===s?(e.parentElement.classList.add("hideFancybox"),e.parentElement.classList.remove("fancybox"),e.classList.remove("fancybox")):"img-bg"===r&&"img-wrap"===s?e.parentElement.classList.add("hideFancybox"):"author"===r?e.parentElement.classList.add("fix-author-imgError"):-1!=r.indexOf("tk-avatar")&&e.parentElement.classList.add("fix-avatar-imgError"))}),!0)</script><script>window.MSInputMethodContext&&document.documentMode&&document.write('<style>html{overflow-x: hidden !important;overflow-y: hidden !important;}.kill-ie{text-align:center;height: 100%;margin-top: 15%;margin-bottom: 5500%;}.kill-t{font-size: 2rem;}.kill-c{font-size: 1.2rem;}#l_header,#l_body{display: none;}</style><div class="kill-ie"><span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br/><span class="kill-c">微软已经于2016年终止了对 Internet Explorer (IE) 10 及更早版本的支持，<br/>继续使用存在极大的安全隐患，请使用当代主流的浏览器进行访问。</span><br/><a target="_blank" rel="noopener" href="https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/"><strong>了解详情 ></strong></a></div>')</script><noscript><style>html{overflow-x:hidden!important;overflow-y:hidden!important}.kill-noscript{text-align:center;height:100%;margin-top:15%;margin-bottom:5500%}.kill-t{font-size:2rem}.kill-c{font-size:1.2rem}#l_body,#l_header{display:none}</style><div class="kill-noscript"> <span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br> <span class="kill-c">本页面需要浏览器支持（启用）JavaScript</span><br> <a target="_blank" rel="noopener" href="https://www.baidu.com/s?wd=启用JavaScript"><strong>了解详情 ></strong></a></div></noscript><script>function volantisEventListener(e,t,n){this.type=e,this.f=t,this.ele=n}function volantisDom(e){return e||(e=document.createElement("div")),this.ele=e,this.ele.find=e=>{let t=this.ele.querySelector(e);if(t)return new volantisDom(t)},this.ele.hasClass=e=>this.ele.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)")),this.ele.addClass=e=>(this.ele.classList.add(e),this.ele),this.ele.removeClass=e=>(this.ele.classList.remove(e),this.ele),this.ele.toggleClass=e=>(this.ele.hasClass(e)?this.ele.removeClass(e):this.ele.addClass(e),this.ele),this.ele.on=(e,t,n=1)=>(this.ele.addEventListener(e,t,!1),n&&volantis.EventListener.list.push(new volantisEventListener(e,t,this.ele)),this.ele),this.ele.click=(e,t)=>(this.ele.on("click",e,t),this.ele),this.ele.scroll=(e,t)=>(this.ele.on("scroll",e,t),this.ele),this.ele.html=e=>(this.ele.innerHTML=e,this.ele),this.ele.hide=e=>(this.ele.style.display="none",this.ele),this.ele.show=e=>(this.ele.style.display="block",this.ele),this.ele}function RunItem(){function e(e,t){this.name=t||e.name,this.run=()=>{try{e()}catch(e){console.log(e)}}}this.list=[],this.start=()=>{for(var e=0;e<this.list.length;e++)this.list[e].run()},this.push=(t,n,s=!0)=>{let o=t;s&&(o=()=>{volantis.requestAnimationFrame(t)});var l=new e(o,n);this.list.push(l)},this.remove=e=>{for(let t=0;t<this.list.length;t++){this.list[t].name==e&&this.list.splice(t,1)}}}function errorImgAvatar(e){e.src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",e.onerror=null}function errorImgCover(e){e.src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",e.onerror=null}window.volantis={},volantis.debug="env",volantis.dom={},volantis.EventListener={},volantis.EventListener.list=[],volantis.EventListener.remove=()=>{volantis.EventListener.list.forEach((function(e){e.ele.removeEventListener(e.type,e.f,!1)})),volantis.EventListener.list=[]},volantis.dom.$=e=>e?new volantisDom(e):null,volantis.pjax={},volantis.pjax.method={complete:new RunItem,error:new RunItem,send:new RunItem},volantis.pjax=Object.assign(volantis.pjax,{push:volantis.pjax.method.complete.push,error:volantis.pjax.method.error.push,send:volantis.pjax.method.send.push}),volantis.rightmenu={},volantis.rightmenu.method={handle:new RunItem},volantis.rightmenu=Object.assign(volantis.rightmenu,{handle:volantis.rightmenu.method.handle.push}),volantis.dark={},volantis.dark.method={toggle:new RunItem},volantis.dark=Object.assign(volantis.dark,{push:volantis.dark.method.toggle.push}),volantis.js=(e,t)=>new Promise((n=>{setTimeout((function(){var s=document.getElementsByTagName("head")[0]||document.documentElement,o=document.createElement("script");if(o.setAttribute("type","text/javascript"),t)if(JSON.stringify(t))for(let e in t)"onload"==e?o[e]=()=>{t[e](),n()}:(o[e]=t[e],o.onload=n);else o.onload=()=>{t(),n()};else o.onload=n;o.setAttribute("src",e),s.appendChild(o)}))})),volantis.css=e=>new Promise((t=>{setTimeout((function(){var n=document.createElement("link");n.rel="stylesheet",n.href=e,n.onload=t,document.getElementsByTagName("head")[0].appendChild(n)}))})),volantis.import={jQuery:()=>"undefined"==typeof jQuery?volantis.js("https://jsd.cdn.storisinz.site/npm/jquery@3.6.0/dist/jquery.min.js"):new Promise((e=>{e()}))},volantis.requestAnimationFrame=e=>{window.requestAnimationFrame||(window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame),window.requestAnimationFrame(e)},volantis.layoutHelper=(e,t,n)=>{function s(e,t,n){volantis.tempDiv=document.createElement("div"),volantis.tempDiv.innerHTML=t;let s=document.querySelector("#layoutHelper-"+e);s&&(n&&(s.innerHTML=""),s.append(volantis.tempDiv))}n=Object.assign({clean:!1,pjax:!0},n),s(e,t,n.clean),n.pjax&&volantis.pjax.push((()=>{s(e,t,n.clean)}),"layoutHelper-"+e)},volantis.scroll={engine:new RunItem,unengine:new RunItem},volantis.scroll=Object.assign(volantis.scroll,{push:volantis.scroll.engine.push}),volantis.scroll.getScrollTop=()=>{let e;return window.pageYOffset?e=window.pageYOffset:document.compatMode&&"BackCompat"!=document.compatMode?e=document.documentElement.scrollTop:document.body&&(e=document.body.scrollTop),e},volantis.scroll.scrollHeight=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},volantis.scroll.offsetHeight=function(){return Math.max(document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},volantis.scroll.progress=function(){return volantis.scroll.getScrollTop()/(volantis.scroll.scrollHeight()-volantis.scroll.offsetHeight())},volantis.scroll.handleScrollEvents=()=>{volantis.scroll.lastScrollTop=volantis.scroll.getScrollTop(),volantis.requestAnimationFrame((function e(){const t=volantis.scroll.getScrollTop();volantis.scroll.lastScrollTop!==t?(volantis.scroll.del=t-volantis.scroll.lastScrollTop,volantis.scroll.lastScrollTop=t,volantis.scroll.unengine.list=[],volantis.scroll.engine.start()):volantis.scroll.unengine.start(),volantis.requestAnimationFrame(e)}))},volantis.scroll.handleScrollEvents(),volantis.scroll.ele=null,volantis.scroll.to=(e,t={})=>{e&&(volantis.scroll.ele=e,opt={top:e.getBoundingClientRect().top+document.documentElement.scrollTop,behavior:"smooth"},"top"in t&&(opt.top=t.top),"behavior"in t&&(opt.behavior=t.behavior),"addTop"in t&&(opt.top+=t.addTop),"observerDic"in t||(t.observerDic=100),window.scrollTo(opt),t.observer&&setTimeout((()=>{volantis.scroll.ele==e&&volantis.scroll.unengine.push((()=>{let n=e.getBoundingClientRect().top;n>=-t.observerDic&&n<=t.observerDic||volantis.scroll.to(e,t),volantis.scroll.unengine.remove("unengineObserver")}),"unengineObserver")}),1e3))},volantis.cleanContentVisibility=()=>{document.querySelector(".post-story")&&(console.log("cleanContentVisibility"),document.querySelectorAll(".post-story").forEach((e=>{e.classList.remove("post-story")})))}</script><script>volantis.GLOBAL_CONFIG={root:"/",debug:"env",default:{avatar:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",link:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/link/8f277b4ee0ecd.svg",cover:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",image:"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/placeholder/image/2659360.svg"},lastupdate:new Date(1730024666073),cdn:{izitoast_css:"https://jsd.cdn.storisinz.site/npm/izitoast@1.4.0/dist/css/iziToast.min.css",izitoast_js:"https://jsd.cdn.storisinz.site/npm/izitoast@1.4.0/dist/js/iziToast.min.js",fancybox_css:"https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0.31/dist/fancybox.css",fancybox_js:"https://jsd.cdn.storisinz.site/npm/@fancyapps/ui@4.0.31/dist/fancybox.umd.js"},sidebar:{for_page:["nextsite","nextblogger","category","tagcloud","webinfo"],for_post:["nextsite","nextblogger","category","tagcloud","webinfo"],webinfo:{lastupd:{enable:!0,friendlyShow:!0},runtime:{data:"2020/01/01",unit:"天"}}},plugins:{message:{enable:!0,icon:{default:"fa-solid fa-info-circle light-blue",quection:"fa-solid fa-question-circle light-blue"},time:{default:5e3,quection:2e4},position:"topRight",transitionIn:"bounceInLeft",transitionOut:"fadeOutRight",titleColor:"var(--color-text)",messageColor:"var(--color-text)",backgroundColor:"var(--color-card)",zindex:2147483647,copyright:{enable:!0,title:"知识共享许可协议",message:"请遵守 CC BY-NC-SA 4.0 协议。",icon:"far fa-copyright light-blue"},aplayer:{enable:!0,play:"fa-solid fa-play",pause:"fa-solid fa-pause"},rightmenu:{enable:!0,notice:!0}}},search:{appId:"72TOQYD33Q",indexName:"hexo",apiKey:"608d2f3acd06140a2473153f6cb61eda",hitsPerPage:"5",placeholder:"Search...",searchAsYouType:!0},languages:{search:{hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}}}</script><link rel="authorization_endpoint" href="https://indieauth.com/auth"><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><script src="https://jsd.cdn.storisinz.site/npm/axios@1.7.7/dist/axios.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>(async()=>{document.querySelector.bind(document);"serviceWorker"in navigator&&(Number(window.localStorage.getItem("CetaHouseHelper_Set"))<1&&(window.localStorage.setItem("CetaHouseHelper_Set",1),window.stop(),document.body.innerHTML=await(await fetch("/load.html")).text()),navigator.serviceWorker.register(`/sw.js?time=${Math.ceil(1e19*Math.random())}`).then((async()=>{Number(window.localStorage.getItem("CetaHouseHelper_Set"))<2&&setTimeout((()=>{window.localStorage.setItem("CetaHouseHelper_Set",2),window.location.reload()}),500)})).catch((e=>console.error(`CetaHouseHelperError:${e}`))))})()</script></head><body itemscope itemtype="http://schema.org/WebPage"><header itemscope itemtype="http://schema.org/WPHeader" id="l_header" class="l_header auto shadow floatable blur show showed" style="opacity:0"><div class="container"><div id="wrapper"><div class="nav-sub"><p class="title fix-header-title"></p><ul class="switcher nav-list-h m-phone" id="pjax-header-nav-list"><li><a id="s-comment" class="fa-solid fa-comments fa-fw" target="_self" title="comment"></a></li><li><a id="s-toc" class="s-toc fa-solid fa-list fa-fw" target="_self" title="toc"></a></li></ul></div><div class="nav-main"><a class="title flat-box" target="_self" href="/"><i class="fa fa-home"></i> <span>汐塔魔法屋</span></a><div class="menu navigation"><ul class="nav-list-h m-pc"><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><span class="icon"><i class="fa-solid fa-folder-open fa-fw"></i></span> <span>分类</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><span class="icon"><i class="fa-solid fa-tags fa-fw"></i></span> <span>标签</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><span class="icon"><i class="fa-solid fa-archive fa-fw"></i></span> <span>归档</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/link/" title="友链" active-action="action-link"><span class="icon"><i class="fa-solid fa-link fa-fw"></i></span> <span>友链</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><span class="icon"><i class="fa-solid fa-subway fa-fw"></i></span> <span>开往</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><span class="icon"><i class="fa fa-language fa-fw fa-fw"></i></span> <span>English</span></a></li></ul></div><div class="m_search"><form name="searchform" class="form u-search-form"><i class="icon fas fa-search fa-fw"></i> <input type="text" class="input u-search-input" placeholder="Search..."></form></div><ul class="switcher nav-list-h m-phone"><li><a class="s-search fa-solid fa-search fa-fw" target="_self" title="search"></a></li><li><a class="s-menu fa-solid fa-bars fa-fw" target="_self" title="menu"></a><ul class="menu-phone list-v navigation white-box"><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><span class="icon"><i class="fa-solid fa-folder-open fa-fw"></i></span> <span>分类</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><span class="icon"><i class="fa-solid fa-tags fa-fw"></i></span> <span>标签</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><span class="icon"><i class="fa-solid fa-archive fa-fw"></i></span> <span>归档</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/link/" title="友链" active-action="action-link"><span class="icon"><i class="fa-solid fa-link fa-fw"></i></span> <span>友链</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><span class="icon"><i class="fa-solid fa-subway fa-fw"></i></span> <span>开往</span></a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><span class="icon"><i class="fa fa-language fa-fw fa-fw"></i></span> <span>English</span></a></li></ul></li></ul></div></div></div></header><div id="l_body"><div id="l_cover"></div><div id="safearea"><div class="body-wrapper"><div id="l_main" class=""><article itemscope itemtype="http://schema.org/Article" class="h-entry article post white-box reveal md shadow floatable blur article-type-post" id="post" itemscope itemprop="blogPost"><link itemprop="mainEntityOfPage" href="https://blog.sinzmise.top/posts/38964/"><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="汐塔魔法屋"></span><span hidden itemprop="post" itemscope itemtype="http://schema.org/Post"><meta itemprop="name" content="汐塔魔法屋"><meta itemprop="description" content="The Story,The Dream."></span><span hidden><meta itemprop="image" content="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"></span><div class="article-meta" id="top"><h1 class="title allow-select p-name" itemprop="name headline"> 小康大佬的说说方案 ———— ispeak搭建教程</h1><div class="new-meta-box"><div class="new-meta-item author p-author h-card" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" class="author u-url" href="https://blog.sinzmise.top/" rel="nofollow"><img itemprop="image" class="u-photo" no-lazy src="/img/avatar.png" alt="Author"><p itemprop="name" class="p-name">王九弦SZ·Ninty</p></a></div><div class="new-meta-item category"><i class="fa-solid fa-folder-open fa-fw" aria-hidden="true"></i> <a class="category-link" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/">站点折腾</a> <span hidden itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" itemprop="url"><span itemprop="name p-category">站点折腾</span></a></span></div><div class="new-meta-item date" itemprop="dateCreated datePublished"><a class="notlink"><i class="fa-solid fa-calendar-alt fa-fw" aria-hidden="true"></i><p>发布于：<time class="dataToShow dt-published" datetime="2023-01-13T21:01:37+00:00" title="2023年1月13日">2023年1月13日</time></p></a></div><div class="new-meta-item browse"><a class="notlink"><p><i class="fa-solid fa-eye fa-fw" aria-hidden="true"></i><span id="busuanzi_value_page_pv"><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> <span>次浏览</span></p></a></div></div></div><div id="layoutHelper-page-plugins"></div><div id="post-body" itemprop="articleBody" class="e-content"><p>搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的<a target="_blank" rel="noopener" href="https://blog.xsnet.eu.org/posts/43224/">ispeak教程</a>失效了<br>没办法我只能重新写了这篇教程<br><span id="more"></span></p><h1 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h1><h2 id="后端部署"><a href="#后端部署" class="headerlink" title="后端部署"></a>后端部署</h2><h3 id="配置数据库"><a href="#配置数据库" class="headerlink" title="配置数据库"></a>配置数据库</h3><div class="note info"><p>以下内容来自：<a target="_blank" rel="noopener" href="https://discuss.js.org/guide/Get-MongoDB-DataBase.html">https://discuss.js.org/guide/Get-MongoDB-DataBase.html</a></p></div><ul><li>注册<a target="_blank" rel="noopener" href="https://www.mongodb.com/cloud/atlas/register">MongoDB</a>账号，注册完成后会提示你创建一个组织，并且输入一个项目昵称，选择编程语言(不选也可以)，随后点击右下角的 <code>Continue</code>(继续)，如果没有可以跟如下图执行，点击 <code>Create an Organization</code>(创建组织)<br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Organizations-Home.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Organizations-Home.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Organizations-Home"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Register-Organizations.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Register-Organizations.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Register-Organizations"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Organization.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Organization.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Create-Organization"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/New-Project.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/New-Project.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="New-Project"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Project-Name.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Project-Name.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Project-Name"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Project.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Create-Project.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Create-Project"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Build-Database.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Build-Database.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Build-Database"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Select-Free.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Select-Free.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Select-Free"><br> <img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/AWS-N.Virginia.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/AWS-N.Virginia.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="AWS-N.Virginia"></li><li>选择免费的共享数据库，随后会跳出选择地区(选择离你服务端近的即可)，点击 <code>Create Cluster</code>创建</li><li>随后您需要创建数据库用户，输入用户名和密码，继续向下滚动就是添加 IP 地址，最后点击下方的 <code>Finish and Close</code>(完成并关闭)按钮</li></ul><div class="note warning"><p><strong>注意</strong><br>服务器部署，则填服务器公网 IP<br><code>无服务器(ServerLess)</code>ServerLess 一般都是动态 IP，你无法得到一个固定 IP，我们建议填写 <code>0.0.0.0</code></p></div><p><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Add-IP.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Add-IP.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Add IP"></p><ul><li>稍作等待创建好数据库即可，随后点击 <code>Connect</code>(连接)，点击选择 <code>Connect you application</code>(连接应用程序)，然后复制连接数据库字符串</li></ul><div class="note warning"><p><strong>注意</strong><br>需要将字符串中的 <code>&lt;password&gt;</code>替换为您在第三步创建的数据库用户密码，修改 <code>myFirstDatabase</code>为你想要的数据库名称例如:<code>Discuss</code></p></div><p><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Connect.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Connect.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Connect"><br><img src="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Get-Connect.png" class="lazyload" data-srcset="https://discuss.js.org/img/guide/Get-MongoDB-DataBase/Get-Connect.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Get Connect"></p><h3 id="部署kkapi"><a href="#部署kkapi" class="headerlink" title="部署kkapi"></a>部署kkapi</h3><div class="tabs" id="tab-部署kkapi"><ul class="nav-tabs"><li class="tab active"><a class="#部署kkapi-1">Vercel部署（推荐）</a></li><li class="tab"><a class="#部署kkapi-2">服务器部署</a></li><li class="tab"><a class="#部署kkapi-3">docker 部署</a></li></ul><div class="tab-content"><div class="tab-pane active" id="部署kkapi-1"><ul><li>点击下方按钮，跳转至 Vercel 进行部署。<br><a target="_blank" rel="noopener" href="https://vercel.com/new/clone?repository-url=https://github.com/kkfive/kkapi-open/tree/vercel"><img src="https://vercel.com/button" class="lazyload" data-srcset="https://vercel.com/button" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="部署到Vercel"></a></li><li>配置环境变量：<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_wwcTzH8isA.10hmhosvut28.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_wwcTzH8isA.10hmhosvut28.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_wwcTzH8isA"><br>环境变量可能随项目的迭代而增加必填的环境变量，具体请参考<a target="_blank" rel="noopener" href="https://kkapi.js.org/reference/kkapi/environment.html">官网 —— kkapi环境变量</a></li><li>重新部署<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_owqMifozPi.37vcfu5vfpm0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_owqMifozPi.37vcfu5vfpm0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_owqMifozPi"><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_5WUBTLL0NZ.1nl1z1a7qiqo.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_5WUBTLL0NZ.1nl1z1a7qiqo.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_5WUBTLL0NZ"><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_mMprAjHb9O.3b2527plrfg.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_mMprAjHb9O.3b2527plrfg.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_mMprAjHb9O"></li><li>绑定域名（建议）<br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_miAwQcdm9f.3htnm9dlllq0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_miAwQcdm9f.3htnm9dlllq0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_miAwQcdm9f"></li><li>初始化账户<br>浏览器访问：<br>你刚刚复制的地址/api/user/init?userName=你想设置的账户名<br>如果不指定用户名则自动将账户名设置为admin</li></ul></div><div class="tab-pane" id="部署kkapi-2"><div class="note info"><p>以下内容来自：<a target="_blank" rel="noopener" href="https://kkapi.js.org/guide/setup/deploy.html#%E7%AC%AC%E4%BA%8C%E7%A7%8D%E9%83%A8%E7%BD%B2%E5%A7%BF%E5%8A%BF%EF%BC%9A%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%83%A8%E7%BD%B2">第二种部署姿势：服务器部署</a></p></div><ul><li>克隆源代码<br><code>git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git</code></li><li>安装依赖<br><code>yarn install</code><br>如果没有<code>yarn</code>则先允许<code>npm i yarn -g</code>进行安装</li><li>安装 pm2<br><code>npm i pm2 -g</code></li><li>编译项目<br><code>yarn build</code></li><li>配置环境变量<br>在项目目录新建文件<code>local.env</code>，将环境变量写入其中即可。例如：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">PORT=3000</span><br><span class="line">DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=admin</span><br><span class="line">DATABASE_USER=root</span><br><span class="line">DATABASE_PASSWORD=root</span><br><span class="line"># 加密密钥 测试</span><br><span class="line">SECRETKEY=xxxxxxxxxxxxxxx</span><br></pre></td></tr></table></figure> 其中 PORT 表示启动的端口</li><li>启动项目<br><code>pm2 start pm2.json</code><br>然后通过命令<code>curl http://127.0.0.1:3000/api/user/init</code>检查是否允许成功<br><img src="https://file.acs.pw/picGo/2022/02/27/20220227101623.png" class="lazyload" data-srcset="https://file.acs.pw/picGo/2022/02/27/20220227101623.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="image-20220227101623911"></li><li>更新项目<br>进入项目并执行一下命令<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git pull</span><br><span class="line">yarn build</span><br><span class="line">pm2 restart pm2.json</span><br></pre></td></tr></table></figure></li></ul></div><div class="tab-pane" id="部署kkapi-3"><p>尚未写完</p></div></div></div><h3 id="部署kkadmin"><a href="#部署kkadmin" class="headerlink" title="部署kkadmin"></a>部署kkadmin</h3><p>介绍：kkadmin是kkapi的后台，方便发布说说<br></p><div class="note tip"><p>以下部署姿势你只需要任选其一即可，无需全部部署。</p></div><p></p><div class="tabs" id="tab-部署kkadmin"><ul class="nav-tabs"><li class="tab"><a class="#部署kkadmin-1">Vercel部署</a></li><li class="tab active"><a class="#部署kkadmin-2">CF pages部署（推荐）</a></li><li class="tab"><a class="#部署kkadmin-3">其他环境部署</a></li></ul><div class="tab-content"><div class="tab-pane" id="部署kkadmin-1"><div class="note warning"><p>由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。<br>所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用</p></div><ul><li>Fork这个项目：<a target="_blank" rel="noopener" href="https://github.com/kkfive/kkadmin-open/">https://github.com/kkfive/kkadmin-open/</a></li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_6HMaGfN000.1csf0rae8okg.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_6HMaGfN000.1csf0rae8okg.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_6HMaGfN000"><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_UPsCgr2okQ.7k0gi7brxoc0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_UPsCgr2okQ.7k0gi7brxoc0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_UPsCgr2okQ"></p><ul><li>配置变量<br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_ktuszZjpej.7ftbduod9uc0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_ktuszZjpej.7ftbduod9uc0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_ktuszZjpej"></li></ul><p>VITE_GLOB_API_URL（必选）<br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_wqMbtdCCon.26m2h3r94d7k.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_wqMbtdCCon.26m2h3r94d7k.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_wqMbtdCCon"></p><ul><li>构建actions</li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_yymiOm8Kek.23xjzofdum3.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_yymiOm8Kek.23xjzofdum3.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_yymiOm8Kek"><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_4awdNaFJGz.1rdq0mxyfhog.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_4awdNaFJGz.1rdq0mxyfhog.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_4awdNaFJGz"><br><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_2uYyc6Qh4I.4p3ngtkhmh00.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_2uYyc6Qh4I.4p3ngtkhmh00.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_2uYyc6Qh4I"></p><ul><li>部署到Vercel<br>复制下面这个网址</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://vercel.com/new/import?s=https://github.com/SinInno/kkadmin-open/tree/vercel</span><br></pre></td></tr></table></figure><p>并将“SinInno”改为你Github的用户名后访问你刚刚修改的网址<br>PS：如果你Fork的这个项目有改Repository name，那么请将上面的“kkapi-open”改为你这个项目的Repository name</p><p>然后直接部署</p><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_GJbsx9xoOw.8zgxw8og644.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_GJbsx9xoOw.8zgxw8og644.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_GJbsx9xoOw"></p><p>部署完成后点“Go to Dashboard”，并点左上角的“Visit”</p><p><img src="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_Lyo0nIvIqF.d4g2uabkljk.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/StarWEB890/TuChuang@master/images/msedge_Lyo0nIvIqF.d4g2uabkljk.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_Lyo0nIvIqF"></p><p>账号输入你之前初始化账户的账户名<br>密码请输入默认密码：123456<br>登入面板后请更改默认密码！</p></div><div class="tab-pane active" id="部署kkadmin-2"><div class="note info"><p>如果你已经在 GitHub actions 部署了，那么 cf pages 部署时也可以选择 vercel 进行部署。也可以使用主干分支进行打包部署。<br>接下来的教程以使用 cf pages 构建为例介绍</p></div><ul><li>fork项目（可直接fork）</li><li>导入项目</li></ul><p><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_1bV5Of8ioS.xtthsj95ytc.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_1bV5Of8ioS.xtthsj95ytc.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_1bV5Of8ioS"><br><img src="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_CcnQ68DBFQ.2q893j8w72k0.webp" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/msedge_CcnQ68DBFQ.2q893j8w72k0.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="msedge_CcnQ68DBFQ"></p><ul><li>配置环境变量</li></ul><p>环境变量参考：<a target="_blank" rel="noopener" href="https://kkapi.js.org/reference/kkadmin/environment.html">官网 —— kkadmin环境变量</a></p><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227113526.png" class="lazyload" data-srcset="https://file.acs.pw/picGo/2022/02/27/20220227113526.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="配置环境变量"></p><ul><li>等待构建完成后即可</li></ul><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227114643.png" class="lazyload" data-srcset="https://file.acs.pw/picGo/2022/02/27/20220227114643.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="构建中"></p></div><div class="tab-pane" id="部署kkadmin-3"><p>其他环境部署基本可以直接使用 GitHub 构建后的 vercel 进行，毕竟只是 HTML</p></div></div></div><h2 id="前端配置"><a href="#前端配置" class="headerlink" title="前端配置"></a>前端配置</h2><h3 id="进入后台，查看个人ID"><a href="#进入后台，查看个人ID" class="headerlink" title="进入后台，查看个人ID"></a>进入后台，查看个人ID</h3><p><img src="https://file.acs.pw/picGo/2022/02/27/20220227131425.png" class="lazyload" data-srcset="https://file.acs.pw/picGo/2022/02/27/20220227131425.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="查看个人ID"></p><h3 id="前端引入"><a href="#前端引入" class="headerlink" title="前端引入"></a>前端引入</h3><div class="note info"><p>ipseak 使用 marked 依赖和 highlight 依赖，为了减少打包体积，并没有将该依赖打包，因此需要使用 cdn 进行外部引入。</p></div><div class="tabs" id="tab-前端引入ispeak"><ul class="nav-tabs"><li class="tab"><a class="#前端引入ispeak-1">使用Waline</a></li><li class="tab active"><a class="#前端引入ispeak-2">使用Twikoo</a></li><li class="tab"><a class="#前端引入ispeak-3">使用Discuss</a></li><li class="tab"><a class="#前端引入ispeak-4">使用Artalk</a></li></ul><div class="tab-content"><div class="tab-pane" id="前端引入ispeak-1"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.wl-power&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!-- CSS --&gt;</span></span><br><span class="line"><span class="code">&lt;link href=&quot;https://unpkg.com/@waline/client/dist/waline.css&quot; rel=&quot;stylesheet&quot; /&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://unpkg.com/@waline/client@v2/dist/waline.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> Waline.init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;,//不用改</span></span><br><span class="line"><span class="code"> serverURL: &#x27;&#x27;,//填写你的Waline服务端地址</span></span><br><span class="line"><span class="code"> path:&#x27;/speak/info.html?q=&#x27; + _id,//不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> emoji: [&quot;//unpkg.com/@waline/emojis@1.0.1/weibo&quot;,&quot;https://emoji.shojo.cn/bili/src/小黄脸&quot;,&quot;//unpkg.com/@waline/emojis@1.0.1/bilibili&quot;,&quot;https://emoji.shojo.cn/bili/src/枕边童话&quot;,&quot;https://emoji.shojo.cn/bili/src/咩栗&quot;,&quot;https://emoji.shojo.cn/bili/src/呜米&quot;,&quot;https://emoji.shojo.cn/bili/src/进击的冰糖&quot;,&quot;https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀&quot;,&quot;https://emoji.shojo.cn/bili/src/多多poi&quot;,&quot;https://emoji.shojo.cn/bili/src/穆小泠&quot;,&quot;https://emoji.shojo.cn/bili/src/早稻叽&quot;],// 表情包大全</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://discuss.js.org/&quot;&gt;&lt;strong&gt;Waline&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://unpkg.com/@waline/client/dist/waline.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/@waline/client@v2/dist/waline.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> Waline.init(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;,//不用改</span></span><br><span class="line"><span class="emphasis"> serverURL: &#x27;&#x27;,//填写你的Waline服务端地址</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + _</span>id,//不用改</span><br><span class="line"><span class="code"> //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> emoji: [&quot;//unpkg.com/@waline/emojis@1.0.1/weibo&quot;,&quot;https://emoji.shojo.cn/bili/src/小黄脸&quot;,&quot;//unpkg.com/@waline/emojis@1.0.1/bilibili&quot;,&quot;https://emoji.shojo.cn/bili/src/枕边童话&quot;,&quot;https://emoji.shojo.cn/bili/src/咩栗&quot;,&quot;https://emoji.shojo.cn/bili/src/呜米&quot;,&quot;https://emoji.shojo.cn/bili/src/进击的冰糖&quot;,&quot;https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀&quot;,&quot;https://emoji.shojo.cn/bili/src/多多poi&quot;,&quot;https://emoji.shojo.cn/bili/src/穆小泠&quot;,&quot;https://emoji.shojo.cn/bili/src/早稻叽&quot;],// 表情包大全</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br></pre></td></tr></table></figure></li></ul></div><div class="tab-pane active" id="前端引入ispeak-2"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.tk-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/twikoo&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> twikoo.init(&#123;</span></span><br><span class="line"><span class="code"> envId: &#x27;&#x27;, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="code"> //region: &#x27;ap-guangzhou&#x27;, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填</span></span><br><span class="line"><span class="code"> path: &#x27;/speak/info.html?q=&#x27; + _id, //不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> lang: &#x27;zh-CN&#x27;, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://twikoo.js.org/&quot;&gt;&lt;strong&gt;Twikoo&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://npm.elemecdn.com/twikoo&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> twikoo.init(&#123;</span></span><br><span class="line"><span class="emphasis"> envId: &#x27;&#x27;, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="emphasis"> //region: &#x27;ap-guangzhou&#x27;, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + speakId, // 不用改</span></span><br><span class="line"><span class="emphasis"> lang: &#x27;zh-CN&#x27;, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div><div class="tab-pane" id="前端引入ispeak-3"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.D-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/discuss@latest/dist/discuss.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> discuss.init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;,// 不用改</span></span><br><span class="line"><span class="code"> serverURLs: &#x27;&#x27;,//填写你的Discuss服务端地址</span></span><br><span class="line"><span class="code"> path: &#x27;/speak/info.html?q=&#x27; + _id,//不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="code"> ph: &#x27;千山万水总是情，给个评论行不行&#x27; ,//评论框占位符</span></span><br><span class="line"><span class="code"> imgLoading: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;//评论图片加载动画</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://discuss.js.org/&quot;&gt;&lt;strong&gt;Discuss&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://npm.elemecdn.com/discuss@latest/dist/discuss.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;; //api地址</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> discuss.init(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;,// 不用改</span></span><br><span class="line"><span class="emphasis"> serverURLs: &#x27;&#x27;,//填写你的Discuss服务端地址</span></span><br><span class="line"><span class="emphasis"> path: path + &#x27;?q=&#x27; + speakId,// 不用改</span></span><br><span class="line"><span class="emphasis"> //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）</span></span><br><span class="line"><span class="emphasis"> ph: &#x27;千山万水总是情，给个评论行不行&#x27; ,//评论框占位符</span></span><br><span class="line"><span class="emphasis"> imgLoading: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;//评论图片加载动画</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div><div class="tab-pane" id="前端引入ispeak-4"><ul><li>在博客目录下运行<code>hexo new page speaks</code></li><li>编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 说说</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">aside: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span><br><span class="line"> .speak-footer,.atk-list-footer&#123;</span><br><span class="line"><span class="code"> display:none;</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div id=&quot;ispeak&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;link</span></span><br><span class="line"><span class="code"> rel=&quot;stylesheet&quot;</span></span><br><span class="line"><span class="code"> href=&quot;https://npm.elemecdn.com/ispeak@4.4.0/style.css&quot;</span></span><br><span class="line"><span class="code">/&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://cdn.staticfile.org/marked/2.0.0/marked.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!-- CSS --&gt;</span></span><br><span class="line"><span class="code">&lt;link href=&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.css&quot; rel=&quot;stylesheet&quot; /&gt;</span></span><br><span class="line"><span class="code">&lt;!-- JS --&gt;</span></span><br><span class="line"><span class="code">&lt;script src=&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;script&gt;</span></span><br><span class="line"><span class="code"> function load_ispeak() &#123;</span></span><br><span class="line"><span class="code"> setTimeout(function() &#123;</span></span><br><span class="line"><span class="code"> var HEAD = document.getElementsByTagName(&#x27;head&#x27;)[0] || document.documentElement;</span></span><br><span class="line"><span class="code"> var src = &#x27;https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js&#x27;</span></span><br><span class="line"><span class="code"> var script = document.createElement(&#x27;script&#x27;)</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;type&#x27;,&#x27;text/javascript&#x27;)</span></span><br><span class="line"><span class="code"> script.onload = function() &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak()</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> script.setAttribute(&#x27;src&#x27;, src)</span></span><br><span class="line"><span class="code"> HEAD.appendChild(script)</span></span><br><span class="line"><span class="code"> &#125;, 1);</span></span><br><span class="line"><span class="code"> &#125;;</span></span><br><span class="line"><span class="code"> function pjax_ispeak() &#123;</span></span><br><span class="line"><span class="code"> if(!document.querySelectorAll(&quot;#ispeak&quot;)[0])return;</span></span><br><span class="line"><span class="code"> ispeak</span></span><br><span class="line"><span class="code"> .init(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;#ispeak&#x27;,//不用改</span></span><br><span class="line"><span class="code"> api: &#x27;&#x27;, //填写你kkapi地址（不是kkadmin后台地址！）</span></span><br><span class="line"><span class="code"> author: &#x27;&#x27;,//填写个人ID</span></span><br><span class="line"><span class="code"> pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）</span></span><br><span class="line"><span class="code"> loading_img: &#x27;https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif&#x27;,//加载动画</span></span><br><span class="line"><span class="code"> comment: function (speak) &#123;</span></span><br><span class="line"><span class="code"> const &#123; _id, title, content &#125; = speak</span></span><br><span class="line"><span class="code"> const contentSub = content.substring(0, 30)</span></span><br><span class="line"><span class="code"> new Artalk(&#123;</span></span><br><span class="line"><span class="code"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="code"> pageKey: &#x27;/speak/info.html?q=&#x27; + _id, //不用改，除非你将上面的speak改为别的文件夹昵称</span></span><br><span class="line"><span class="code"> pageTitle: title || contentSub, // 不用改</span></span><br><span class="line"><span class="code"> server: &#x27;&#x27;, //填写你的Artalk服务端地址</span></span><br><span class="line"><span class="code"> site: &#x27;&#x27; // 填写你的站点名</span></span><br><span class="line"><span class="code"> &#125;)</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code"> &#125;</span></span><br><span class="line"><span class="code"> load_ispeak();</span></span><br><span class="line"><span class="code"> document.addEventListener(&#x27;pjax:complete&#x27;, function () &#123;</span></span><br><span class="line"><span class="code"> pjax_ispeak();</span></span><br><span class="line"><span class="code"> &#125;);</span></span><br><span class="line"><span class="code">&lt;/script&gt;</span></span><br><span class="line"><span class="code">&lt;!--建议标注末尾链接--&gt;</span></span><br><span class="line"><span class="code">&lt;p style=&quot;width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;&quot;&gt;Powered by &lt;a href=&quot;https://www.antmoe.com/speak/&quot;&gt;&lt;strong&gt;iSpeak&lt;/strong&gt;&lt;/a&gt; | Comment by &lt;a href=&quot;https://artalk.js.org/&quot;&gt;&lt;strong&gt;Artalk&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt; </span></span><br><span class="line"><span class="code">&#123;% endraw %&#125;</span></span><br></pre></td></tr></table></figure></li><li>在[blogroot]\source\speaks\下新建info.md，内容为下：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Speak</span><br><span class="line">aside: false</span><br><span class="line">comments: false</span><br><span class="line"><span class="section">description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">&lt;!-- CSS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;content&#x27;</span>&gt;</span></span></span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;/speaks/&#x27;,查看全部,far fa-hand-point-right,block center blue larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;ispeak-comment&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;!-- JS --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/artalk@2.3.4/dist/Artalk.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/marked@4.0.18/marked.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"> const searchParams = new URLSearchParams(window.location.search);</span><br><span class="line"> const speakId = searchParams.get(&#x27;q&#x27;);</span><br><span class="line"> const path = window.location.pathname;</span><br><span class="line"> const apiURL = &#x27;https://（你的api地址）/api/ispeak&#x27;;</span><br><span class="line"> const markedRender = (body, loading<span class="emphasis">_img=&#x27;https://bu.dusays.com/2022/05/01/626e88f349943.gif&#x27;) =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const renderer = &#123;</span></span><br><span class="line"><span class="emphasis"> image(href, title, text) &#123;</span></span><br><span class="line"><span class="emphasis"> return `<span class="language-xml"><span class="language-javascript">&lt;a href=<span class="string">&quot;$&#123;href&#125;&quot;</span> target=<span class="string">&quot;_blank&quot;</span> data-fancybox=<span class="string">&quot;group&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;fancybox&quot;</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">speak-src</span>=<span class="string">&quot;$&#123;href&#125;&quot;</span> <span class="attr">src</span>=<span class="string">$&#123;loading_img&#125;</span> <span class="attr">alt</span>=<span class="string">&#x27;$&#123;text&#125;&#x27;</span>&gt;</span></span></span></span></span></span><br><span class="line"><span class="emphasis"> <span class="language-xml"><span class="language-handlebars"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span></span>`</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> marked.setOptions(&#123;</span></span><br><span class="line"><span class="emphasis"> renderer: new marked.Renderer(),</span></span><br><span class="line"><span class="emphasis"> highlight: function (code) &#123;</span></span><br><span class="line"><span class="emphasis"> if (hljs) &#123;</span></span><br><span class="line"><span class="emphasis"> return hljs.highlightAuto(code).value</span></span><br><span class="line"><span class="emphasis"> &#125; else &#123;</span></span><br><span class="line"><span class="emphasis"> return code</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;,</span></span><br><span class="line"><span class="emphasis"> pedantic: false,</span></span><br><span class="line"><span class="emphasis"> gfm: true,</span></span><br><span class="line"><span class="emphasis"> tables: true,</span></span><br><span class="line"><span class="emphasis"> breaks: true,</span></span><br><span class="line"><span class="emphasis"> sanitize: false,</span></span><br><span class="line"><span class="emphasis"> smartLists: true,</span></span><br><span class="line"><span class="emphasis"> smartypants: false,</span></span><br><span class="line"><span class="emphasis"> xhtml: false</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> marked.use(&#123; renderer &#125;)</span></span><br><span class="line"><span class="emphasis"> return marked.parse(body)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> fetch(`$&#123;apiURL&#125;/get/$&#123;speakId&#125;`)</span></span><br><span class="line"><span class="emphasis"> .then(response =&gt; response.json())</span></span><br><span class="line"><span class="emphasis"> .then(res =&gt; &#123;</span></span><br><span class="line"><span class="emphasis"> const data = res.data;</span></span><br><span class="line"><span class="emphasis"> if(data)&#123;</span></span><br><span class="line"><span class="emphasis"> const &#123;title,content&#125; = data;</span></span><br><span class="line"><span class="emphasis"> const contentSub = content.substring(0, 30);</span></span><br><span class="line"><span class="emphasis"> document.querySelector(&#x27;.content&#x27;).innerHTML = markedRender(content);</span></span><br><span class="line"><span class="emphasis"> if(title)&#123;</span></span><br><span class="line"><span class="emphasis"> document.title = title;</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> new Artalk(&#123;</span></span><br><span class="line"><span class="emphasis"> el: &#x27;.ispeak-comment&#x27;, // 不用改</span></span><br><span class="line"><span class="emphasis"> pageKey: path + &#x27;?q=&#x27; + speakId, // 不用改</span></span><br><span class="line"><span class="emphasis"> pageTitle: title || contentSub, // 不用改</span></span><br><span class="line"><span class="emphasis"> server: &#x27;&#x27;, //填写你的Artalk服务端地址</span></span><br><span class="line"><span class="emphasis"> site: &#x27;&#x27; // 填写你的站点名</span></span><br><span class="line"><span class="emphasis"> &#125;)</span></span><br><span class="line"><span class="emphasis"> &#125;</span></span><br><span class="line"><span class="emphasis"> &#125;);</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure></li></ul></div></div></div></div><div class="footer"></div><div class="article-meta" id="bottom"><div class="new-meta-box"><div class="new-meta-item date" itemprop="dateModified"><a class="notlink"><i class="fa-solid fa-edit fa-fw" aria-hidden="true"></i><p>更新于：<time class="dataToShow dt-updated" datetime="2024-10-27T10:23:58+00:00" title="2024年10月27日">2024年10月27日</time></p></a></div><div class="new-meta-item meta-tags"><a class="tag" href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" rel="nofollow"><i class="fa-solid fa-hashtag fa-fw" aria-hidden="true"></i><p>站点折腾</p></a></div><div class="new-meta-item meta-tags"><a class="tag" href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/" rel="nofollow"><i class="fa-solid fa-hashtag fa-fw" aria-hidden="true"></i><p>页面魔改</p></a></div> <span hidden itemprop="keywords">站点折腾 页面魔改</span><div class="new-meta-item share -mob-share-list"><div class="-mob-share-list share-body"> <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://blog.sinzmise.top/posts/38964/&title=小康大佬的说说方案 ———— ispeak搭建教程 - 汐塔魔法屋&summary=搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的ispeak教程失效了没办法我只能重新写了这篇教程"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qq.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qq.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://blog.sinzmise.top/posts/38964/&title=小康大佬的说说方案 ———— ispeak搭建教程 - 汐塔魔法屋&summary=搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的ispeak教程失效了没办法我只能重新写了这篇教程"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qzone.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/qzone.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener" target="_blank" href="http://service.weibo.com/share/share.php?url=https://blog.sinzmise.top/posts/38964/&title=小康大佬的说说方案 ———— ispeak搭建教程 - 汐塔魔法屋&summary=搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的ispeak教程失效了没办法我只能重新写了这篇教程"><img src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/weibo.png" class="lazyload" data-srcset="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/logo/128/weibo.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a></div></div></div></div><div class="prev-next"><a class="prev" href="/posts/61417/"><p class="title"><i class="fa-solid fa-angle-double-left" aria-hidden="true"></i>自建Meting服务</p><p class="content">听人说Meting官方API证书过期了，也就是说MetingAPI得自建了然后很快啊，有人就搞出了自建MetingAPI的Vercel版本 教程后端部署Vercel部署（推荐）服务器部署点击下方...</p></a><a class="next" href="/posts/22945/"><p class="title">butterfly主题添加音乐页面（适配手机）<i class="fa-solid fa-angle-double-right" aria-hidden="true"></i></p><p class="content">本博客已经更换主题 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案（等会为啥开头这么像这...</p></a></div></article><article class="post white-box shadow floatable blur" id="comments"><span hidden><meta itemprop="discussionUrl" content="/posts/38964/#comments"></span><p ct><i class="fa-solid fa-comments"></i> 评论</p><div id="layoutHelper-comments"></div></article></div><aside id="l_side" class="not-select default-cursor" itemscope itemtype="http://schema.org/WPSideBar"><section class="widget nextsite desktop pjax"><div class="site-brand-wrapper"><div class="site-meta"> <a href="/" class="brand" rel="start"><span class="site-title">汐塔魔法屋</span></a><p class="site-subtitle" itemprop="description">Ceta Magical House</p></div><div class="site-nav-toggle"> <button aria-label="切换导航栏"><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul class="next-main"><li class="next-main-item"><a href="/categories/" title="分类" active-action="action-categories"><i class="menu-item-icon fa-solid fa-folder-open fa-fw"></i> 分类</a></li><li class="next-main-item"><a href="/tags/" title="标签" active-action="action-tags"><i class="menu-item-icon fa-solid fa-tags fa-fw"></i> 标签</a></li><li class="next-main-item"><a href="/archives/" title="归档" active-action="action-archives"><i class="menu-item-icon fa-solid fa-archive fa-fw"></i> 归档</a></li><li class="next-main-item"><a href="/link/" title="友链" active-action="action-link"><i class="menu-item-icon fa-solid fa-link fa-fw"></i> 友链</a></li><li class="next-main-item"><a target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" title="开往" active-action="action-https:wwwtravellingscngohtml"><i class="menu-item-icon fa-solid fa-subway fa-fw"></i> 开往</a></li><li class="next-main-item"><a target="_blank" rel="noopener" href="https://en.blog.sinzmise.top/" title="English" active-action="action-https:enblogsinzmisetop"><i class="menu-item-icon fa fa-language fa-fw fa-fw"></i> English</a></li><li class="next-main-item"><a href="javascript:void(0)" title="搜索" active-action="action-javascript:void(0)" onclick="OpenSearch()"><i class="menu-item-icon fa-solid fa-search fa-fw"></i> 搜索</a></li></ul></nav></section><section class="widget nextblogger desktop pjax h-card"><div class="content"> <a class="avatar u-url flat-box" href="https://blog.sinzmise.top/"><img no-lazy class="site-author-image u-photo" itemprop="image" src="/img/avatar.png" alt="王九弦SZ·Ninty"></a><div class="site-author-box"><p class="site-author-name p-name" itemprop="name">王九弦SZ·Ninty</p><p class="site-author-description" itemprop="description">种下故事的种子，随着风和光生根发芽</p></div><div class="links-of-author"><span class="links-of-author-item"><a href="/atom.xml" title="RSS" alt="汐塔魔法屋" rel="me"><i class="fa-solid fa-rss fa-fw"></i></a></span><span class="links-of-author-item"><a href="mailto:email@sinzmise.top" title="Email" alt="汐塔魔法屋" class="u-email" rel="me"><i class="fa-solid fa-envelope fa-fw"></i></a></span><span class="links-of-author-item"><a target="_blank" href="https://github.com/SinzMise/" title="Github" alt="汐塔魔法屋" rel="me noopener"><i class="fab fa-github fa-fw"></i></a></span></div></div></section><section class="widget category desktop pjax"><header><a href="/categories/"><span class="icon"><i class="fa-solid fa-folder-open fa-fw" aria-hidden="true"></i></span> <span class="name">文章分类</span></a></header><div class="content"><ul class="entry navigation"><li><a class="flat-box" title="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" href="/categories/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" active-action="action-categoriesE4B8AAE4BABAE5B08FE8AEB0"><div class="name">个人小记</div><div class="badge">(19)</div></a></li><li><a class="flat-box" title="/categories/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" href="/categories/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" active-action="action-categoriesE6AD8CE69BB2E694B6E99B86"><div class="name">歌曲收集</div><div class="badge">(1)</div></a></li><li><a class="flat-box" title="/categories/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" href="/categories/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" active-action="action-categoriesE6B8B8E6888FE79BB8E585B3"><div class="name">游戏相关</div><div class="badge">(4)</div></a></li><li><a class="flat-box" title="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" href="/categories/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" active-action="action-categoriesE7AB99E782B9E68A98E885BE"><div class="name">站点折腾</div><div class="badge">(14)</div></a></li><li><a class="flat-box" title="/categories/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" href="/categories/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" active-action="action-categoriesE9A1B9E79BAEE68A98E885BE"><div class="name">项目折腾</div><div class="badge">(3)</div></a></li></ul></div></section><section class="widget tagcloud desktop pjax"><header><a href="/tags/"><span class="icon"><i class="fa-solid fa-tags fa-fw" aria-hidden="true"></i></span> <span class="name">热门标签</span></a></header><div class="content"> <a href="/tags/Flash%E7%9B%B8%E5%85%B3/" style="font-size:14px;color:#999">Flash相关</a> <a href="/tags/Steam%E6%B8%B8%E6%88%8F/" style="font-size:14px;color:#999">Steam游戏</a> <a href="/tags/Windows%E8%BD%AF%E4%BB%B6/" style="font-size:15.67px;color:#8e8e8e">Windows软件</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E5%B0%8F%E8%AE%B0/" style="font-size:24px;color:#555">个人小记</a> <a href="/tags/%E5%85%B6%E5%AE%83%E6%B8%B8%E6%88%8F/" style="font-size:17.33px;color:#828282">其它游戏</a> <a href="/tags/%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/" style="font-size:14px;color:#999">加载动画</a> <a href="/tags/%E6%82%AC%E6%B5%AE%E5%AE%A0%E7%89%A9-%E7%9C%8B%E6%9D%BF%E5%A8%98/" style="font-size:14px;color:#999">悬浮宠物/看板娘</a> <a href="/tags/%E6%AD%8C%E6%9B%B2%E6%94%B6%E9%9B%86/" style="font-size:14px;color:#999">歌曲收集</a> <a href="/tags/%E6%B8%B8%E6%88%8F%E7%9B%B8%E5%85%B3/" style="font-size:19px;color:#777">游戏相关</a> <a href="/tags/%E7%AB%99%E7%82%B9%E5%BA%95%E9%83%A8%E9%AD%94%E6%94%B9/" style="font-size:14px;color:#999">站点底部魔改</a> <a href="/tags/%E7%AB%99%E7%82%B9%E6%8A%98%E8%85%BE/" style="font-size:22.33px;color:#606060">站点折腾</a> <a href="/tags/%E8%87%AA%E5%BB%BA%E9%83%A8%E7%BD%B2/" style="font-size:20.67px;color:#6c6c6c">自建部署</a> <a href="/tags/%E9%A1%B5%E9%9D%A2%E9%AD%94%E6%94%B9/" style="font-size:17.33px;color:#828282">页面魔改</a> <a href="/tags/%E9%A1%B9%E7%9B%AE%E6%8A%98%E8%85%BE/" style="font-size:17.33px;color:#828282">项目折腾</a></div></section><div class="widget-sticky pjax"><section class="widget desktop"><header><span class="icon"><i class="fa-solid fa-award fa-fw" aria-hidden="true"></i></span> <span class="name">站点信息</span></header><div class="content"><div class="webinfo"><div class="webinfo-item"><div>文章数目：</div><div>41 篇</div></div><div class="webinfo-item"><div>本站访客数：</div><div><span id="busuanzi_value_site_uv"><i class="fa-solid fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 人</div></div><div class="webinfo-item"><div>本站总访问量：</div><div><span id="busuanzi_value_site_pv"><i class="fa-solid fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 次</div></div><div class="webinfo-item"><div>最后活动时间：</div><div id="last-update-show">2024-10-27 日</div></div></div></div></section></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div></aside><pjax><script>window.pdata={ispage:!0,commentPath:"",commentPlaceholder:"",commentConfig:{}},document.getElementById("l_header")&&document.getElementById("l_header").classList.add("show")</script></pjax></div><footer class="footer clearfix" itemscope itemtype="http://schema.org/WPFooter"><br><br><br><div class="social-wrapper" itemprop="about" itemscope itemtype="http://schema.org/Thing"> <a href="https://www.travellings.cn/go.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="开往-友链接力"><img src="https://www.travellings.cn/assets/logo.gif" class="lazyload" data-srcset="https://www.travellings.cn/assets/logo.gif" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a href="https://blogscn.fun/" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="本站已加入BLOGS·CN"><img src="https://photo.xiangming.site/img/blogscn.png" class="lazyload" data-srcset="https://photo.xiangming.site/img/blogscn.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a> <a href="https://blogscn.fun/random.html" class="social flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url" alt="BLOGS·CN随机访问"><img src="https://photo.xiangming.site/img/footer.gif" class="lazyload" data-srcset="https://photo.xiangming.site/img/footer.gif" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></a></div><div><p>博客内容遵循 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p></div> 由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 | 主题 <a href="https://github.com/volantis-x/hexo-theme-volantis/#6.0.0-alpha.0" target="_blank" class="codename">Volantis</a><div class="copyright"><p><a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/previous">←</a> An <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍 <a target="_blank" rel="noopener" href="https://xn--sr8hvo.ws/next">→</a><br>©2021 · <a href="/">中弦局·汐塔魔法屋</a><br><a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033">萌ICP备20231033号</a> | <a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20231033">MIIT备20240818号</a> | <a target="_blank" rel="noopener" href="https://guan.ma/hao/2024000155/">官码2024000155号</a><br>我加入的：<a target="_blank" rel="noopener" href="https://zhblogs.ohyee.cc/">中文博客列表</a> | <a target="_blank" rel="noopener" href="https://storeweb.cn/member/o/1585">个站商店</a> | <a target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/995">BlogFinder</a> | <a target="_blank" rel="noopener" href="https://sites.applinzi.com/site-info?siteType=life&amp;siteId=64cb373190e35300a8eec654">站点聚合平台</a> | <a target="_blank" rel="noopener" href="https://boke.lu/">博客录</a> | <a target="_blank" rel="noopener" href="https://rssblog.cn/member/d711afd659d65c2ba2d3b18697818cf7/">RssBlog</a> | <a target="_blank" rel="noopener" href="https://blogscn.fun/">笔墨迹</a> | <a target="_blank" rel="noopener" href="https://daohang.lusongsong.com/">博客大全</a></p></div></footer><a id="s-top" class="fa-solid fa-arrow-up fa-fw" title="top"></a></div></div><div><script>volantis.dom.bodyAnchor=volantis.dom.$(document.getElementById("safearea")),volantis.dom.topBtn=volantis.dom.$(document.getElementById("s-top")),volantis.dom.wrapper=volantis.dom.$(document.getElementById("wrapper")),volantis.dom.coverAnchor=volantis.dom.$(document.querySelector("#l_cover .cover-wrapper")),volantis.dom.switcher=volantis.dom.$(document.querySelector("#l_header .switcher .s-search")),volantis.dom.header=volantis.dom.$(document.getElementById("l_header")),volantis.dom.search=volantis.dom.$(document.querySelector("#l_header .m_search")),volantis.dom.mPhoneList=volantis.dom.$(document.querySelectorAll("#l_header .m-phone .list-v")),top.location!=self.location&&(top.location=self.location),volantis.css("https://jsd.cdn.storisinz.site/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css")</script><script src="/js/app.js"></script><script>function loadIssuesJS(){null!=document.getElementById("sites-api")&&"undefined"==typeof SitesJS&&volantis.js("/js/plugins/tags/sites.js");null!=document.getElementById("friends-api")&&"undefined"==typeof FriendsJS&&volantis.js("/js/plugins/tags/friends.js");null!=document.getElementById("contributors-api")&&"undefined"==typeof ContributorsJS&&volantis.js("/js/plugins/tags/contributors.js")}loadIssuesJS(),volantis.pjax.push((()=>{loadIssuesJS()}))</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script><script>window.lazyLoadOptions={elements_selector:".lazyload",threshold:0},window.addEventListener("LazyLoad::Initialized",(function(n){window.lazyLoadInstance=n.detail.instance}),!1),document.addEventListener("DOMContentLoaded",(function(){lazyLoadInstance.update()})),document.addEventListener("pjax:complete",(function(){lazyLoadInstance.update()}))</script><script>window.FPConfig={delay:0,ignoreKeywords:["#"],maxRPS:6,hoverDelay:0}</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/libs/flying-pages/flying-pages.min.js"></script><script>function load_twikoo(){document.querySelectorAll("#twikoo_container")[0]&&volantis.js("https://jsd.cdn.storisinz.site/npm/twikoo@1.6.39/dist/twikoo.min.js",pjax_twikoo)}function pjax_twikoo(){if(!document.querySelectorAll("#twikoo_container")[0])return;let o=pdata.commentPath,t=pdata.commentPlaceholder||"";if(0==o.length){o=""||decodeURI(window.location.pathname)}twikoo.init(Object.assign(Object.assign({path:null,envId:"https://tk.pl.blog.sinzmise.top/",placeholder:null,visitor:!1},{el:"#twikoo_container",path:o,placeholder:t,onCommentLoaded:function(){if("undefined"==typeof VolantisFancyBox){const o=setInterval((()=>{"undefined"!=typeof VolantisFancyBox&&(clearInterval(o),VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])',"Comments"))}))}else VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])',"Comments")}}),pdata.commentConfig))}volantis.layoutHelper("comments",'<div id="twikoo_container"><i class="fa-solid fa-cog fa-spin fa-fw fa-2x"></i></div>'),load_twikoo(),volantis.pjax.push((()=>{"undefined"==typeof twikoo?load_twikoo():pjax_twikoo()}),"twikoo")</script><script defer="defer" src="https://jsd.cdn.storisinz.site/npm/penndu@1.0.0/bsz.js" data-pjax></script><script>async function loadSearchScript(){return await volantis.js("https://jsd.cdn.storisinz.site/npm/algoliasearch@4.14.2/dist/algoliasearch-lite.umd.js"),await volantis.js("https://jsd.cdn.storisinz.site/npm/instantsearch.js@4.44.0/dist/instantsearch.production.min.js"),volantis.js("/js/search/algolia.js")}function loadSearchService(){document.querySelectorAll(".input.u-search-input").forEach((e=>{e.removeEventListener("focus",loadSearchService,!1)})),document.querySelectorAll(".u-search-form").forEach((e=>{e.addEventListener("submit",(e=>{e.preventDefault()}),!1)}))}function OpenSearch(e=""){"undefined"==typeof SearchService?loadSearchScript().then((()=>{SearchService.setQueryText(e),SearchService.search()})):(SearchService.setQueryText(e),SearchService.search())}if(loadSearchScript(),window.location.search&&/^\?s=/g.test(window.location.search)){OpenSearch(decodeURI(window.location.search).replace(/\ /g,"-").replace(/^\?s=/g,""))}document.querySelectorAll(".input.u-search-input").forEach((e=>{e.addEventListener("focus",loadSearchService,!1)}))</script><script>function pjax_highlightjs_copyCode(){(document.querySelector(".highlight .code pre")||document.querySelector(".article pre code"))&&VolantisApp.utilCopyCode(".highlight .code pre, .article pre code")}volantis.requestAnimationFrame(pjax_highlightjs_copyCode),volantis.pjax.push(pjax_highlightjs_copyCode)</script><script>function load_swiper(){document.querySelectorAll(".swiper-container")[0]&&(volantis.css("https://jsd.cdn.storisinz.site/npm/swiper@8.3.2/swiper-bundle.min.css"),volantis.js("https://jsd.cdn.storisinz.site/npm/swiper@8.3.2/swiper-bundle.min.js").then((()=>{pjax_swiper()})))}function pjax_swiper(){volantis.swiper=new Swiper(".swiper-container",{slidesPerView:"auto",spaceBetween:8,centeredSlides:!0,loop:!0,pagination:{el:".swiper-pagination",clickable:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}})}load_swiper(),volantis.pjax.push((()=>{document.querySelectorAll(".swiper-container")[0]&&(void 0===volantis.swiper?load_swiper():pjax_swiper())}))</script><pjax></pjax><script>function listenSidebarTOC(){const t=document.querySelectorAll(".toc li");if(!t.length)return;const e=[];Array.from(t).forEach((t=>{const n=t.querySelector(".toc-link"),i=document.getElementById(n.getAttribute("href")?decodeURI(n.getAttribute("href")).replace("#",""):n.getAttribute("toc-action").split("toc-")[1]);return e.push(i),n.getAttribute("href")&&(n.setAttribute("toc-action","toc-"+decodeURI(n.getAttribute("href")).replace("#","")),n.removeAttribute("href")),i&&i.id&&n.addEventListener("click",(t=>{t.preventDefault(),volantis.scroll.to(i,{addTop:5,observer:!0}),history.pushState(null,document.title,"#"+i.id)})),i}));function n(t){if(t.classList.contains("active-current"))return;document.querySelectorAll(".toc .active").forEach((t=>{t.classList.remove("active","active-current")})),t.classList.add("active","active-current");let e=t.parentNode;for(;!e.matches(".toc");)e.matches("li")&&e.classList.add("active"),e=e.parentNode}volantis.activateNavIndex=0,n(t[volantis.activateNavIndex]),e[0]&&volantis.scroll.push((()=>{if(e[0].getBoundingClientRect().top>=0)volantis.activateNavIndex=0;else if(e[e.length-1].getBoundingClientRect().top<0)volantis.activateNavIndex=e.length-1;else for(let t=0;t<e.length;t++){const n=e[t],i=e[(t+1)%e.length];if(n.getBoundingClientRect().top<0&&i.getBoundingClientRect().top>=0){volantis.activateNavIndex=t;break}}n(t[volantis.activateNavIndex])}))}document.addEventListener("DOMContentLoaded",(()=>{volantis.requestAnimationFrame(listenSidebarTOC)})),volantis.pjax.push(listenSidebarTOC)</script><script>document.onreadystatechange=function(){if("complete"==document.readyState){const{saveData:e,effectiveType:t}=navigator.connection||navigator.mozConnection||navigator.webkitConnection||{};("none"==getComputedStyle(document.querySelector("#safearea"),null).display||e||/2g/.test(t))&&(document.querySelectorAll(".reveal").forEach((function(e){e.style.opacity="1"})),document.querySelector("#safearea").style.display="block")}}</script><script type="application/ld+json">[{"@context":"http://schema.org","@type":"Organization","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},{"@context":"http://schema.org","@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/","sameAs":["https://github.com/volantis-x"],"description":"The Story,The Dream."},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://blog.sinzmise.top/","name":"汐塔魔法屋"}},{"@type":"ListItem","position":2,"item":{"@id":"https://blog.sinzmise.top/categories/站点折腾/","name":"站点折腾"}},{"@type":"ListItem","position":3,"item":{"@id":"https://blog.sinzmise.top/posts/38964/","name":"小康大佬的说说方案 ———— ispeak搭建教程"}}]},{"@context":"http://schema.org","@type":"WebSite","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","keywords":null,"description":"The Story,The Dream.","author":{"@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/","description":"The Story,The Dream."},"publisher":{"@type":"Organization","name":"汐塔魔法屋","url":"https://blog.sinzmise.top/","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"potentialAction":{"@type":"SearchAction","name":"Site Search","target":{"@type":"EntryPoint","urlTemplate":"https://blog.sinzmise.top?s={search_term_string}"},"query-input":"required name=search_term_string"}},{"@context":"http://schema.org","@type":"BlogPosting","headline":"小康大佬的说说方案 ———— ispeak搭建教程","description":"这篇文章是我之前写过的教程的重写","inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.sinzmise.top/posts/38964/"},"author":{"@type":"Person","name":"王九弦SZ·Ninty","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"https://blog.sinzmise.top/"},"publisher":{"@type":"Organization","name":"汐塔魔法屋","logo":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/npm/volantis-static@0.0.1660614606622/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"url":"https://blog.sinzmise.top/posts/38964/","wordCount":61,"datePublished":"2023-01-13T21:01:37.000Z","dateModified":"2024-10-27T10:23:58.814Z","articleSection":"站点折腾","keywords":"站点折腾,页面魔改","image":{"@type":"ImageObject","url":"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/20230114/msedge_GVRhG42nuu.1g9uz8t24io0.webp","width":1024,"height":768}}]</script><script src="https://jsd.cdn.storisinz.site/npm/pjax@0.2.8/pjax.min.js"></script><script>var pjax;document.addEventListener("DOMContentLoaded",(function(){pjax=new Pjax({elements:'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([onclick="return false;"]):not([onclick="return!1"]):not([target="_blank"]):not([target="view_window"]):not([href$=".xml"])',selectors:["head title","head meta[name=keywords]","head meta[name=description]","#l_cover","#l_main","#pjax-header-nav-list",".pjax","pjax"],cacheBust:!1,timeout:5e3})})),document.addEventListener("pjax:send",(function(e){try{var t=window.location.pathname,n=e.triggerElement.href,a=[""];""!=a[0]&&a.forEach((e=>{-1==t.indexOf(e)&&-1==n.indexOf(e)||(window.location.href=n)}))}catch(e){}volantis.pjax.method.send.start()})),document.addEventListener("pjax:complete",(function(){document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach((e=>{const t=e.text||e.textContent||e.innerHTML||"",n=document.createElement("script");Object.keys(e.attributes).forEach((t=>{n.setAttribute(e.attributes[t].nodeName,e.attributes[t].nodeValue)})),t&&n.appendChild(document.createTextNode(t)),e.parentNode.replaceChild(n,e)})),volantis.pjax.method.complete.start()})),document.addEventListener("pjax:error",(function(e){"pjax"===volantis.debug?(console.error(e),console.log("pjax error: \n"+JSON.stringify(e))):(volantis.pjax.method.error.start(),window.location.href=e.triggerElement.href)}))</script></div><script data-pjax src="https://jsd.cdn.storisinz.site/npm/oh-my-live2d"></script><script>const oml2d=OML2D.loadOml2d({menus:{items:t=>[t[0],t[2],t[3]]},mobileDisplay:!1,models:[{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_6/dujiaoshou_6.model3.json",mobilePosition:[-10,23],mobileScale:.1,mobileStageStyle:{width:180,height:166},motionPreloadStrategy:"IDLE",position:[-120,-30],scale:.06,stageStyle:{width:250,height:400}},{path:"https://files.blog.sinzmise.top/live2d/dujiaoshou_4/dujiaoshou_4.model3.json",scale:.06,position:[-50,-25],stageStyle:{width:250,height:300},mobileScale:.08,mobilePosition:[0,0],mobileStageStyle:{width:180}}],parentElement:document.body,primaryColor:"var(--primary)",sayHello:!1,tips:{style:{width:230,height:120,left:"calc(50% + 6px)",top:"-100px"},mobileStyle:{width:180,height:80,left:"calc(50% - 30px)",top:"-100px"},idleTips:{interval:15e3,message:function(){return axios.get("https://v1.hitokoto.cn?c=i").then((function(t){return t.data.hitokoto})).catch((function(t){console.error(t)}))}}}})</script></body></html>