sinzmise-cetastories 2.0.0-1729391228528 → 2.0.0-1729391855695

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) 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/atom.xml +31 -31
  38. package/bbs/bbs.html +1 -1
  39. package/bbs/index.html +1 -1
  40. package/categories/index.html +1 -1
  41. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  42. package/categories//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  43. package/categories//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  44. package/categories//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  45. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  46. package/categories//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  47. package/categories//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  48. package/charts/index.html +1 -1
  49. package/comments/index.html +1 -1
  50. package/essay/index.html +1 -1
  51. package/fcircle/index.html +1 -1
  52. package/games +7 -5
  53. package/index.html +1 -1
  54. package/link/index.html +1 -1
  55. package/music/index.html +1 -1
  56. package/package.json +1 -1
  57. package/page/2/index.html +1 -1
  58. package/page/3/index.html +1 -1
  59. package/page/4/index.html +1 -1
  60. package/posts/10021/index.html +1 -1
  61. package/posts/10045/index.html +1 -1
  62. package/posts/10733/index.html +1 -1
  63. package/posts/10996/index.html +1 -1
  64. package/posts/12779/index.html +1 -1
  65. package/posts/13624/index.html +1 -1
  66. package/posts/15688/index.html +1 -1
  67. package/posts/15748/index.html +1 -1
  68. package/posts/15799/index.html +1 -1
  69. package/posts/15842/index.html +1 -1
  70. package/posts/16107/index.html +1 -1
  71. package/posts/18063/index.html +1 -1
  72. package/posts/20412/index.html +1 -1
  73. package/posts/21375/index.html +1 -1
  74. package/posts/22945/index.html +1 -1
  75. package/posts/23021/index.html +1 -1
  76. package/posts/27531/index.html +1 -1
  77. package/posts/28536/index.html +1 -1
  78. package/posts/28733/index.html +1 -1
  79. package/posts/29196/index.html +1 -1
  80. package/posts/38917/index.html +1 -1
  81. package/posts/38964/index.html +1 -1
  82. package/posts/42487/index.html +1 -1
  83. package/posts/42580/index.html +1 -1
  84. package/posts/45875/index.html +1 -1
  85. package/posts/46640/index.html +1 -1
  86. package/posts/48762/index.html +1 -1
  87. package/posts/50710/index.html +1 -1
  88. package/posts/52677/index.html +1 -1
  89. package/posts/53662/index.html +1 -1
  90. package/posts/54386/index.html +1 -1
  91. package/posts/54481/index.html +1 -1
  92. package/posts/54787/index.html +1 -1
  93. package/posts/56467/index.html +1 -1
  94. package/posts/57692/index.html +1 -1
  95. package/posts/58203/index.html +1 -1
  96. package/posts/61417/index.html +1 -1
  97. package/posts/646/index.html +1 -1
  98. package/posts/64856/index.html +1 -1
  99. package/posts/64935/index.html +1 -1
  100. package/search.xml +17 -17
  101. package/seas/index.html +1 -1
  102. package/tags/Flash/347/233/270/345/205/263/index.html +1 -1
  103. package/tags/Steam/346/270/270/346/210/217/index.html +1 -1
  104. package/tags/Windows/350/275/257/344/273/266/index.html +1 -1
  105. package/tags/index.html +1 -1
  106. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/index.html +1 -1
  107. package/tags//344/270/252/344/272/272/345/260/217/350/256/260/page/2/index.html +1 -1
  108. package/tags//345/205/266/345/256/203/346/270/270/346/210/217/index.html +1 -1
  109. package/tags//345/212/240/350/275/275/345/212/250/347/224/273/index.html +1 -1
  110. 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
  111. package/tags//346/255/214/346/233/262/346/224/266/351/233/206/index.html +1 -1
  112. package/tags//346/270/270/346/210/217/347/233/270/345/205/263/index.html +1 -1
  113. package/tags//347/253/231/347/202/271/345/272/225/351/203/250/351/255/224/346/224/271/index.html +1 -1
  114. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/index.html +1 -1
  115. package/tags//347/253/231/347/202/271/346/212/230/350/205/276/page/2/index.html +1 -1
  116. package/tags//350/207/252/345/273/272/351/203/250/347/275/262/index.html +1 -1
  117. package/tags//351/241/265/351/235/242/351/255/224/346/224/271/index.html +1 -1
  118. package/tags//351/241/271/347/233/256/346/212/230/350/205/276/index.html +1 -1
  119. package/update/index.html +1 -1
  120. package/weichuncai/chuncai.json +1 -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:26:32.637Z"><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.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:26:32"}</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-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>