标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<h2 id="item-1" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1. 说明</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">Gitalk 的特性：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、使用 GitHub 登录 2、支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru] 3、支持个人或组织 4、无干扰模式（设置 distractionFreeMode 为 true 开启） 5、快捷键提交评论 （cmd|ctrl + enter）</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">使用Gitalk需要你做一些提前准备： 1、在github上创建一个仓库，Gitalk会把评论放在这个仓库的issues里面。 2、在github上申请一个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">GitHub OAuth application</code>，来让Gitalk有权限操作github上的仓库。<h2 id="item-2" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2. 安装使用</h2><h3 id="item-2-1" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2.1 安装</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">两种方式引入：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、直接在HTML文件中引入<pre class="html hljs language-xml" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css&quot;&gt;&lt;script&nbsp;src=&quot;//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js&quot;&gt;&lt;/script&gt;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">建议直接把文件下载后放在项目目录中，这样就可以不再依赖第三方网络了。 注意：如果连接失效了，请在<a href="https://link.segmentfault.com/?enc=pjVyZ2h8PLPIBCJYIWpKpA%3D%3D.ywOmL%2ByqQngPZ0QwGwBN5G4tTkEg47R714E0D4w7tZ1lDo9p%2FQ6j082kuBbdsoxsFMbEEUJw2oSTDeZZafkY9w%3D%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://www.bootcdn.cn/上搜索</a><code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">gitalk</code>然后找到对应资源链接复制过来。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2、通过npm安装<pre class="hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">npm&nbsp;i&nbsp;--save&nbsp;gitalk</pre><pre class="javascript hljs language-javascript" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">import&nbsp;&#39;gitalk/dist/gitalk.css&#39;import&nbsp;Gitalk&nbsp;from&nbsp;&#39;gitalk&#39;</pre><h3 id="item-2-2" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2.2 使用</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、首先需要在html文件中添加一个容器，Gitalk组件会在此处显示<pre class="html hljs language-xml" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">&lt;div&nbsp;id=&quot;gitalk-container&quot;&gt;&lt;/div&gt;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2、使用下面的JavaScript代码来生成Gitalk评论：<pre class="javascript hljs language-javascript" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">var&nbsp;gitalk&nbsp;=&nbsp;new&nbsp;Gitalk({&nbsp;&nbsp;clientID:&nbsp;&#39;2eb19afceda708b27e64&#39;,&nbsp;//&nbsp;GitHub&nbsp;Application&nbsp;Client&nbsp;ID
&nbsp;&nbsp;clientSecret:&nbsp;&#39;36aedb5a30321626a8631689fee5fafd5929f612&#39;,&nbsp;//&nbsp;GitHub&nbsp;Application&nbsp;Client&nbsp;Secret
&nbsp;&nbsp;repo:&nbsp;&#39;gitalk-comment&#39;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;存放评论的仓库
&nbsp;&nbsp;owner:&nbsp;&#39;yulilong&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;仓库的创建者，
&nbsp;&nbsp;admin:&nbsp;[&#39;yulilong&#39;],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;如果仓库有多个人可以操作，那么在这里以数组形式写出
&nbsp;&nbsp;id:&nbsp;location.pathname,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;用于标记评论是哪个页面的，确保唯一，并且长度小于50})

gitalk.render(&#39;gitalk-container&#39;);&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;渲染Gitalk评论组件</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">里面参数下面会讲解。 配置好后，页面最终效果(<a href="https://link.segmentfault.com/?enc=qK588QqFjqU8DCDh9zquQQ%3D%3D.uJzz1Kv%2F4KL9xOw3TD0xemaoVHREyweAhzRhiKR160A%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://gitalk.github.io/)</a>：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img class="lazy entered loaded exited" referrerpolicy="no-referrer" data-src="/img/bVbnZK9" alt="clipboard.png" title="clipboard.png" data-ll-status="loaded" src="https://segmentfault.com/img/bVbnZK9" style="box-sizing: border-box; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">注意：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、第一次Gitalk需要初始化评论，需要你先点击<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">使用GitHub登陆</code>，然后刷新页面才会初始化，或者自己去仓库里手动创建一个issues，并添加issues的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">labels</code>值为Gitalk的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">labels</code>参数和<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>参数的值。</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">new Gitalk</code>的参数中有github的仓库信息和<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">GitHub Application</code>信息，所以首先我们创建这两个。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">在github上创建一个仓库比较简单这里就不讲解了。 下面讲一下如何申请一个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">GitHub OAuth application</code><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">注意：如果你打算在自己网站使用<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Gitalk</code>，并且这个网站的源码在github的仓库上，那么你也可以直接使用这个仓库，<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Gitalk</code>只使用仓库的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Issues</code>。<h2 id="item-3" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">3. 申请一个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth application</code></h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">GitHub OAuth application</code>允许程序来操作你的github账户，可以对github中仓库读写。 详情介绍：<a href="https://link.segmentfault.com/?enc=%2FK6dhLM1oLl8m0xJM9rcDw%3D%3D.I5tLCOrd2tQeE%2BxROZyCG1T1Cbr3BEWb3KDbB8gC5qHj1hrKWDaqHOMphNUzJESXLTQZaVFp2fI2yekUeKkcRg%3D%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://developer.github.com/...</a><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">申请<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">GitHub OAuth application</code>流程：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、打开github网站登陆后，点击右上角的用户图标，选择<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Settings</code> 2、 在<a href="https://link.segmentfault.com/?enc=7AkoysoZEpa7NHJqHZ6LRA%3D%3D.OPF9tghgmcOi9Jur%2F0IpwcP6jgneCgZ6JVEIkP7j4BgpyRZBbOhUFoir7Renj7O0" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">Settings</a>页面选择<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Developer settings</code>选项。 3、在<a href="https://link.segmentfault.com/?enc=wzqjCasne8%2Fwo6OMCjnUyg%3D%3D.btrVrX%2Bg4pMthNnA1XGV9Z9G8wjLKuUN7RO%2FHprbzABq1VXFcTmszTNfN%2BRO5yKA" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">Developer settings</a>选择<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth Apps</code>,然后会在页面右边有一个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">New OAuth App</code>按钮，点击这个按钮就进入到新建<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth application</code>页面 4、也可以直接代开这个链接：<a href="https://link.segmentfault.com/?enc=hd%2BFbxGtVyGal402yVlTBQ%3D%3D.QUusv7dVmmo3Ukltin5l8jXS0jQw4JbvKaRm9hRoL%2FPdzhHvt3gsqTv4XsPWak2g" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://github.com/settings/a...</a>&nbsp;进入新建页面</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">在注册<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth</code>应用页面有如下几个参数需要填写：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">Application name：必填，OAuth的名字 Homepage URL：必填，你应用的网址，哪个网站用了Gitalk组件，就填写这个网址 Application description：选填，该OAuth的说明 Authorization callback URL：必填，授权成功后回调网址，跟<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Homepage URL</code>参数保持一致就好 这些参数在注册成功后是可以修改。</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">参数填好后，点<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Register application</code>按钮即可完成注册。 <img class="lazy entered loaded exited" referrerpolicy="no-referrer" data-src="/img/bVbnZMZ" alt="clipboard.png" title="clipboard.png" data-ll-status="loaded" src="https://segmentfault.com/img/bVbnZMZ" style="box-sizing: border-box; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/> 注册成功后会自动跳转到这个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth</code>应用的页面，或者在<a href="https://link.segmentfault.com/?enc=b1oAE8ozOWEdY9nJqywXAw%3D%3D.s1zFjeQEhv3H1Ftbr5hrLLmWgn%2BEcTkB9mVRc0Oqt6mHHUhcReYp3%2Fn%2B3KdpPcTi" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">Developer settings</a>选择<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth Apps</code>后就能看见你创建的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth</code>应用名字，点击它进入这个<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth</code>应用的页面：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img class="lazy entered loaded exited" referrerpolicy="no-referrer" data-src="/img/bVbnZM4" alt="clipboard.png" title="clipboard.png" data-ll-status="loaded" src="https://segmentfault.com/img/bVbnZM4" style="box-sizing: border-box; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/> <img class="lazy entered loaded exited" referrerpolicy="no-referrer" data-src="/img/bVbnZNe" alt="clipboard.png" title="clipboard.png" data-ll-status="loaded" src="https://segmentfault.com/img/bVbnZNe" style="box-sizing: border-box; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/> 在新创建的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth</code>应用里面的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Client ID</code>和<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Client Secret</code>就是我们需要的参数。<h2 id="item-4" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">4.&nbsp;<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Gitalk</code>的参数说明</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">在上面使用Gitalk的JavaScript代码中有一些参数：<pre class="javascript hljs language-javascript" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">var&nbsp;gitalk&nbsp;=&nbsp;new&nbsp;Gitalk({&nbsp;&nbsp;clientID:&nbsp;&#39;2eb19afceda708b27e64&#39;,&nbsp;//&nbsp;GitHub&nbsp;Application&nbsp;Client&nbsp;ID
&nbsp;&nbsp;clientSecret:&nbsp;&#39;36aedb5a30321626a8631689fee5fafd5929f612&#39;,&nbsp;&nbsp;repo:&nbsp;&#39;gitalk-comment&#39;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;存放评论的仓库
&nbsp;&nbsp;owner:&nbsp;&#39;yulilong&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;仓库的创建者，
&nbsp;&nbsp;admin:&nbsp;[&#39;yulilong&#39;],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;如果仓库有多个人可以操作，那么在这里以数组形式写出
&nbsp;&nbsp;id:&nbsp;location.pathname,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;用于标记评论是哪个页面的})</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">主要的参数：<ul style="box-sizing: border-box; padding-left: 2rem; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>clientID 类型：字符串，必填，申请的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth App</code>的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Client ID</code></li><li>clientSecret 类型：字符串，必填，申请的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">OAuth App</code>的<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">Client Secret</code></li><li>repo 类型：字符串，必填，github上的仓库名字，用于存放Gitalk评论</li><li>owner 类型：字符串，必填，github仓库的所有者的名字</li><li>admin 类型：数组(元素是字符串)，必填，github仓库的所有者和合作者 (对这个 repository 有写权限的用户)</li><li>id 类型：字符串，选填，页面的唯一标识。长度必须小于50。此参数用于评论和页面对应的标识，如果想让两个页面用一个评论，可设置两个页面的id一样。默认值：location.href(页面URL)</li><li>title 类型：字符串，选填，GitHub issue 的标题，默认值：document.title(HTML中title标签中的值)</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">注意：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">虽然<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>和<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">title</code>参数是不是必填的选项，但是这个两个参数很重要建议填上： 1、<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>参数用于评论记录和页面对应的唯一标记，有的时候发现好几个页面评论是一样的，就是由于配置<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>参数的时候，这几个页面的id是一样导致。由于<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>参数默认值是<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">location.href</code>页面URL，而有的时候URL中带着页面标题的链接，导致URL长度超过了50个字符长度，会导致创建评论issues失败(长度超过50个会创建失败)，这点要注意。 2、<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">title</code>用于在github仓库issues的标题，如果你想管理评论可以设置一下这个参数，来区分该评论是来自于那个文章。</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其他参数：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">number</code>: 类型：数字，选填，页面的 issue ID 标识，若未定义number属性则会使用id进行定位。默认值：-1 <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">labels</code>：类型：数组，选填，GitHub issue 的标签，默认值：[&#39;Gitalk&#39;] <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">body</code>：类型：字符串，选填， GitHub issue 的内容，默认值：URL + HTML中meta标签中description的值 <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">language</code>：类型：字符串，选填，设置语言，支持 [en, zh-CN, zh-TW]。默认值：navigator.language 或者 navigator.userLanguage <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">perPage</code>：类型：数字，选填，每次加载的数据大小，最多 100。默认值：10 <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">distractionFreeMode</code>：类型：布尔值，选填，类似Facebook评论框的全屏遮罩效果。默认值：false <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">pagerDirection</code>：类型：字符串，选填，评论排序方式，<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">last</code>为按评论创建时间倒叙，<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">first</code>为按创建时间正序。默认值：last <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">createIssueManually</code>：类型：布尔值，选填，如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。 默认值：false <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">proxy</code>：类型：字符串，选填，GitHub oauth 请求到反向代理，为了支持 CORS。默认值:<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token</code> <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">flipMoveOptions</code>：类型：对象，选填，评论列表的动画。<a href="https://link.segmentfault.com/?enc=X0eBL2Wwl0COcSkI5F88DA%3D%3D.WqU7%2B5u34zEwfoi3JatdAmufqrt30xWYaa9KYbfoq4Tjq38nv9eYzSCu6nfNmP8Ymi%2FVOE8uJd2cQYQHDTGR3RtYc20ghRkBMlJ6O34q6o1FmQ7zjpVPS0ptT48mtEppbOFA0csc%2FFceQPmBP9utdw%3D%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">参考</a> <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">enableHotKey</code>：类型：布尔值，选填，启用快捷键<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">(cmd/ctrl + enter)</code>提交评论。默认值：true</blockquote><h2 id="item-5" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">5. Gitalk实际使用例子</h2><h3 id="item-5-3" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">5.1 在<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">docsify</code>中使用</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">docsify是一个神奇的文档网站生成工具。详情介绍请看官网：<a href="https://link.segmentfault.com/?enc=zGAsi6wpMTcSPHv2Mypn0A%3D%3D.sNubNC4%2BoFwXzb3MA%2BBAOyQWGrEVZUmFwO3DAZR0F%2FM%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://docsify.js.org/#/zh-cn/</a> 使用docsify教程请查看：<a href="https://segmentfault.com/a/1190000017576714" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://segmentfault.com/a/11...</a><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">docsify支持Gitalk评论插件，需要引入一个JavaScript脚本文件： <code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">https://unpkg.com/docsify@4.8.6/lib/plugins/gitalk.min.js</code><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">一个实际使用例子：<pre class="javascript hljs language-javascript" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;//unpkg.com/gitalk/dist/gitalk.css&quot;&gt;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;//unpkg.com/gitalk/dist/gitalk.min.js&quot;&gt;&lt;/script&gt;

&nbsp;&nbsp;&lt;script&nbsp;src=&quot;//unpkg.com/docsify/lib/plugins/gitalk.min.js&quot;&gt;&lt;/script&gt;
&nbsp;&nbsp;&lt;script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;gitalk&nbsp;=&nbsp;new&nbsp;Gitalk({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientID:&nbsp;&#39;2eb19afceda708b27e64&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientSecret:&nbsp;&#39;36aedb5a30321626a8631689fee5fafd5929f612&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repo:&nbsp;&#39;gitalk-comment&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;owner:&nbsp;&#39;yulilong&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;admin:&nbsp;[&#39;yulilong&#39;],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;location.hash.match(/#(.*?)([?]|$)/)[1],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;location.hash.match(/#(.*?)([?]|$)/)[1],
&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;监听URL中hash的变化，如果发现换了一个MD文件，那么刷新页面，解决整个网站使用一个gitalk评论issues的问题。
&nbsp;&nbsp;&nbsp;&nbsp;window.onhashchange&nbsp;=&nbsp;function(event){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(event.newURL.split(&#39;?&#39;)[0]&nbsp;!==&nbsp;event.oldURL&nbsp;.split(&#39;?&#39;)[0])&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.reload()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;由于docsify/lib/plugins/gitalk.min.js文件中已经有下面代码了，所以不需要在写一次了
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;gitalk.render(&#39;gitalk-container&#39;)
&nbsp;&nbsp;&lt;/script&gt;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">说明：<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1、由于docsify的链接URL使用的是hash的方式，导致切换页面的时候不会刷新页面，导致整个网站的Gitalk评论使用的是一个评论，因此做了监听hash事件，来刷新页面，这样就能每次切换页面刷新，然后加载对应的评论。 2、关于Gitalk参数<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">id</code>的值，由于点击二级标题后，二级标题会以参数的形式出现在url上，导致长度有事超过了50，所以过滤掉URL中的参数，此外还能解决评论定位不到问题(二级标题会在URL上)。</blockquote><h3 id="item-5-4" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">5.2 在VuePress中使用</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">关于VuePress，请参考：<a href="https://link.segmentfault.com/?enc=wcxtgXwk3rnk7RnKJ20XKA%3D%3D.e%2FA1i9CFRMQifuR60TJUU8G31w1OHfJPrbxRtBYqVhw%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">https://vuepress.vuejs.org/zh/</a><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">我们需要创建<code style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; color: rgb(214, 51, 132); overflow-wrap: break-word;">.vuepress/enhanceApp.js</code>文件，内容如下：<pre class="js hljs language-javascript" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background-color: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; margin-top: 0px !important;">function&nbsp;integrateGitalk&nbsp;(router)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;linkGitalk&nbsp;=&nbsp;document.createElement(&#39;link&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;linkGitalk.href&nbsp;=&nbsp;&#39;https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;linkGitalk.rel&nbsp;=&nbsp;&#39;stylesheet&#39;;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(linkGitalk);&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;scriptGitalk&nbsp;=&nbsp;document.createElement(&#39;script&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;scriptGitalk.src&nbsp;=&nbsp;&#39;https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js&#39;;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(scriptGitalk);&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;path&nbsp;=&nbsp;&#39;&#39;;

&nbsp;&nbsp;&nbsp;&nbsp;router.afterEach((to)&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(scriptGitalk.onload)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(loadGitalk,&nbsp;5,&nbsp;to)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scriptGitalk.onload&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadGitalk(to.fullPath);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;loadGitalk&nbsp;(to)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(to.path&nbsp;!==&nbsp;path)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path&nbsp;=&nbsp;to.path;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;commentsContainer&nbsp;=&nbsp;document.getElementById(&#39;gitalk-container&#39;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;$page&nbsp;=&nbsp;document.querySelector(&#39;.page&#39;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(commentsContainer&nbsp;&amp;&amp;&nbsp;$page)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$page.removeChild(commentsContainer)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commentsContainer&nbsp;=&nbsp;document.createElement(&#39;div&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commentsContainer.id&nbsp;=&nbsp;&#39;gitalk-container&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commentsContainer.classList.add(&#39;content&#39;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($page)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$page.appendChild(commentsContainer);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;Gitalk&nbsp;!==&nbsp;&#39;undefined&#39;&nbsp;&amp;&amp;&nbsp;Gitalk&nbsp;instanceof&nbsp;Function)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderGitalk();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;renderGitalk&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;如果url路径有中文则使用decodeURIComponent，否则可以直接使用location.pathname
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;path&nbsp;=&nbsp;decodeURIComponent(location.pathname)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;gitalk&nbsp;=&nbsp;new&nbsp;Gitalk({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientID:&nbsp;&#39;2eb19afceda708b27e64&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientSecret:&nbsp;&#39;36aedb5a30321626a8631689fee5fafd5929f612&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repo:&nbsp;&#39;gitalk-comment&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;owner:&nbsp;&#39;yulilong&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;admin:&nbsp;[&#39;yulilong&#39;],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;path.split(&#39;/&#39;).pop()&nbsp;||&nbsp;path,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;path,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;唯一，并且长度小于50
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language:&nbsp;&#39;zh-CN&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gitalk.render(&#39;gitalk-container&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;window.loadGitalk&nbsp;=&nbsp;loadGitalk;
}export&nbsp;default&nbsp;({&nbsp;Vue,&nbsp;options,&nbsp;router&nbsp;})&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document&nbsp;&amp;&amp;&nbsp;integrateGitalk(router)
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(e.message)
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">保存文件后，重启vuePress服务即可。 效果如下图：<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img class="lazy entered loaded" referrerpolicy="no-referrer" data-src="/img/bVbv2Th" alt="clipboard.png" title="clipboard.png" data-ll-status="loaded" src="https://segmentfault.com/img/bVbv2Th" style="box-sizing: border-box; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/><h2 id="item-6" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">参考资料</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, &quot;Liberation Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://link.segmentfault.com/?enc=1r6pmHNGCOrjYVyFqddbdw%3D%3D.pN3bl7TVbPw8TMHfSkA2HoYuTIzTpmeNnhOXxZcQ57k%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">Gitalk 官网</a> <a href="https://link.segmentfault.com/?enc=%2BxzFsA9pdPPhZtAseJYZJg%3D%3D.5edgUwaOdKoCWQ4B%2BGuiR6ZMd3V5HoOZIs4nP4APfhLLqa4WuQhJvRN5LLNNOQCK1PfvgeUkUwenZ3W1x1iWbg%3D%3D" rel="nofollow" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); text-decoration-line: none;">Gitalk中文文档</a>