mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-25 11:28:13 +08:00
30 lines
29 KiB
JavaScript
30 lines
29 KiB
JavaScript
import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/en/guide/features/comments/","title":"Comments | Guide","lang":"en-US","frontmatter":{"title":"Comments","icon":"la:comment","createTime":"2025/10/08 11:58:59","permalink":"/en/guide/features/comments/","description":"Overview Article comments are powered by @vuepress/plugin-comment. The theme has built-in plugin support, so you can use it without reinstalling. In this theme, configure throug...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Comments\\",\\"image\\":[\\"https://ecosystem.vuejs.press/assets/leancloud-1-D6GvqV4-.png\\",\\"https://ecosystem.vuejs.press/assets/leancloud-2-B5wKvXiY.png\\",\\"https://ecosystem.vuejs.press/assets/leancloud-3-D7gbeXS0.png\\",\\"https://vercel.com/button\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-1.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-3.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-4.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-5.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-6.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-7.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-8.png\\",\\"https://ecosystem.vuejs.press/images/comment/vercel-9.png\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/features/comments/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Comments"}],["meta",{"property":"og:description","content":"Overview Article comments are powered by @vuepress/plugin-comment. The theme has built-in plugin support, so you can use it without reinstalling. In this theme, configure throug..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:image","content":"https://ecosystem.vuejs.press/assets/leancloud-1-D6GvqV4-.png"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/features/comments/"}]]},"readingTime":{"minutes":4.07,"words":1222},"git":{"createdTime":1759995965000,"updatedTime":1759995965000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/features/comments.md","headers":[],"bulletin":false}`),u={name:`comments.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`code-block-title`,"data-title":`.vuepress/config.ts`},h={class:`code-block-title-bar`},g={class:`title`};function _(c,l,u,_,v,y){let b=t(`VPIcon`),x=t(`CodeTabs`);return n(),i(`div`,null,[l[10]||=s(`h2`,{id:`overview`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#overview`},[s(`span`,null,`Overview`)])],-1),l[11]||=s(`p`,null,[a(`Article comments are powered by `),s(`a`,{href:`https://ecosystem.vuejs.press/zh/plugins/blog/comment/`,target:`_blank`,rel:`noopener noreferrer`},`@vuepress/plugin-comment`),a(`.`)],-1),l[12]||=s(`p`,null,`The theme has built-in plugin support, so you can use it without reinstalling.`,-1),l[13]||=s(`p`,null,`In this theme, configure through the following fields:`,-1),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(b,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress-theme-plume</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> comment</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // Service provider</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> provider</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">''</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// "Artalk" | "Giscus" | "Twikoo" | "Waline"</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // Whether comments are enabled by default</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> comment</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // Other configurations based on the service provider</span></span>
|
|
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // ...</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]),l[14]||=o(`<h3 id="service-providers" tabindex="-1"><a class="header-anchor" href="#service-providers"><span>Service Providers</span></a></h3><p><a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-comment</a> supports various comment service providers such as <code>"Artalk" | "Giscus" | "Twikoo" | "Waline"</code>.</p><p>You can configure based on your requirements.</p><ul><li><code>Giscus</code> is a comment system based on GitHub Discussions, easy to set up. <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/giscus/" target="_blank" rel="noopener noreferrer">View documentation</a></li><li><code>Waline</code> is a comment system that requires a backend, offering higher security. <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/waline/" target="_blank" rel="noopener noreferrer">View documentation</a></li><li><code>Twikoo</code> is a concise, secure, free static website comment system based on Tencent Cloud Base. <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/twikoo/" target="_blank" rel="noopener noreferrer">View documentation</a></li><li><code>Artalk</code> is a concise self-hosted comment system that you can easily deploy on your server and embed in frontend pages. <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/artalk/" target="_blank" rel="noopener noreferrer">View documentation</a></li></ul><div class="hint-container tip"><p class="hint-container-title">Recommended Comment Services</p><ul><li>For programmers and developers: Giscus</li><li>For the general public: Waline</li></ul></div><div class="hint-container note"><p class="hint-container-title">Note</p><p>Examples are forked from <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/" target="_blank" rel="noopener noreferrer">@vuepress/plugin-comment</a>, following the <a href="https://github.com/vuepress/ecosystem/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT</a> license.</p></div><h2 id="giscus" tabindex="-1"><a class="header-anchor" href="#giscus"><span>Giscus</span></a></h2><p>Giscus is a comment system based on GitHub Discussions, easy to set up.</p><h3 id="prerequisites" tabindex="-1"><a class="header-anchor" href="#prerequisites"><span>Prerequisites</span></a></h3><div class="vp-steps"><ol><li><p>You need to create a public repository and enable Discussions to serve as the location for storing comments.</p></li><li><p>You need to install the <a href="https://github.com/apps/giscus" target="_blank" rel="noopener noreferrer">Giscus App</a> to grant it permission to access the corresponding repository.</p></li><li><p>After completing the above steps, go to the <a href="https://giscus.app/zh-CN" target="_blank" rel="noopener noreferrer">Giscus page</a> to get your settings.</p><p>You only need to fill in the repository and Discussion category, then scroll to the "Enable giscus" section at the bottom of the page to obtain the four attributes: <code>data-repo</code>, <code>data-repo-id</code>, <code>data-category</code>, and <code>data-category-id</code>.</p></li></ol></div><h3 id="configuration" tabindex="-1"><a class="header-anchor" href="#configuration"><span>Configuration</span></a></h3><p>Set <code>provider: 'Giscus'</code> and pass <code>data-repo</code>, <code>data-repo-id</code>, <code>data-category</code>, and <code>data-category-id</code> as plugin options to <code>repo</code>, <code>repoId</code>, <code>category</code>, and <code>categoryId</code>.</p>`,12),s(`div`,m,[s(`div`,h,[s(`span`,g,[r(b,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[2]||=a(`.vuepress/config.ts`,-1)])]),l[3]||=o(`<div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vuepress-theme-plume</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> comment</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> provider</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Giscus</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// "Artalk" | "Giscus" | "Twikoo" | "Waline"</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> comment</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> repo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Your_Repo</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> repoId</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Your_RepoId</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> category</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Your_Category</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
|
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> categoryId</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Your_CategoryId</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]),l[15]||=o(`<h3 id="themes" tabindex="-1"><a class="header-anchor" href="#themes"><span>Themes</span></a></h3><p>By default, Giscus uses <code>light</code> or <code>dark</code> themes (based on the dark mode state).</p><p>If you want to customize themes for light and dark modes, you can set the <code>lightTheme</code> and <code>darkTheme</code> options using built-in theme keywords or custom CSS links starting with <code>https://</code>.</p><h2 id="waline" tabindex="-1"><a class="header-anchor" href="#waline"><span>Waline</span></a></h2><p>A secure comment system with a backend.</p><h3 id="installation" tabindex="-1"><a class="header-anchor" href="#installation"><span>Installation</span></a></h3><p>If you want to use Waline in the theme, you need to install <code>@waline/client</code> first.</p>`,7),r(x,{id:`0`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}],"tab-id":`npm-to-pnpm-yarn-npm`},{title0:e(({value:e,isActive:t})=>[r(b,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[4]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(b,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[5]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(b,{provider:`iconify`,name:`logos:npm-icon`}),l[6]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[7]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` @waline/client`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[8]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` @waline/client`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[9]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` @waline/client`)])])])],-1)]]),_:1}),l[16]||=o(`<h3 id="leancloud-setup-database" tabindex="-1"><a class="header-anchor" href="#leancloud-setup-database"><span>LeanCloud Setup (Database)</span></a></h3><div class="vp-steps"><ol><li><p><a href="https://console.leancloud.app/login" target="_blank" rel="noopener noreferrer">Login</a> or <a href="https://console.leancloud.app/register" target="_blank" rel="noopener noreferrer">Register</a> for <code>LeanCloud International</code> and enter the <a href="https://console.leancloud.app/apps" target="_blank" rel="noopener noreferrer">Console</a></p></li><li><p>Click <a href="https://console.leancloud.app/apps" target="_blank" rel="noopener noreferrer">Create Application</a> in the upper left corner and choose a name you like (please select the free development plan):</p><p><img src="https://ecosystem.vuejs.press/assets/leancloud-1-D6GvqV4-.png" alt="Create Application" width="901" height="733"></p></li><li><p>Enter the application, select <code>Settings</code> > <code>Application Keys</code> in the lower left corner. You can see your <code>APP ID</code>, <code>APP Key</code>, and <code>Master Key</code>. Please record them for later use.</p><p><img src="https://ecosystem.vuejs.press/assets/leancloud-2-B5wKvXiY.png" alt="ID and Key" width="1321" height="894"></p></li></ol></div><div class="hint-container warning"><p class="hint-container-title">Domestic version requires ICP filing</p><p>If you are using the LeanCloud domestic version (<a href="https://leancloud.cn" target="_blank" rel="noopener noreferrer">leancloud.cn</a>), we recommend switching to the international version (<a href="https://leancloud.app" target="_blank" rel="noopener noreferrer">leancloud.app</a>). Otherwise, you need to bind an <strong>already ICP-filed</strong> domain to the application, purchase an independent IP, and complete the ICP filing process:</p><ul><li>Log in to the domestic version and enter the application you need to use</li><li>Select <code>Settings</code> > <code>Domain Binding</code> > <code>API Access Domain</code> > <code>Bind New Domain</code> > Enter domain > <code>OK</code>.</li><li>Follow the instructions on the page to complete the CNAME resolution in DNS as required.</li><li>Purchase an independent IP and submit a work order to complete the ICP filing. (The current price for an independent IP is ¥50/month)</li></ul><p><img src="https://ecosystem.vuejs.press/assets/leancloud-3-D7gbeXS0.png" alt="Domain Settings" width="2891" height="1259"></p></div><h3 id="vercel-deployment-server" tabindex="-1"><a class="header-anchor" href="#vercel-deployment-server"><span>Vercel Deployment (Server)</span></a></h3><p><a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwalinejs%2Fwaline%2Ftree%2Fmain%2Fexample" target="_blank" rel="noopener noreferrer"><img src="https://vercel.com/button" alt="Vercel"></a></p><div class="vp-steps"><ol><li><p>Click the button above to jump to Vercel for server-side deployment.</p><div class="hint-container note"><p class="hint-container-title">Note</p><p>If you are not logged in, Vercel will prompt you to register or log in. Please use your GitHub account for quick login.</p></div></li><li><p>Enter a Vercel project name you like and click <code>Create</code> to continue:</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-1.png" alt="Create Project" width="2446" height="1946"></p></li><li><p>At this point, Vercel will help you create and initialize a repository based on the Waline template, with the repository name being the project name you entered earlier.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-3.png" alt="deploy" width="2446" height="1946"></p><p>After a minute or two, a full screen of fireworks will celebrate your successful deployment. Click <code>Go to Dashboard</code> to jump to the application's console.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-4.png" alt="deploy" width="2446" height="1946"></p></li><li><p>Click <code>Settings</code> at the top - <code>Environment Variables</code> to enter the environment variable configuration page, and configure the three environment variables <code>LEAN_ID</code>, <code>LEAN_KEY</code>, and <code>LEAN_MASTER_KEY</code>. Their values correspond to the <code>APP ID</code>, <code>APP KEY</code>, and <code>Master Key</code> obtained from LeanCloud in the previous step, respectively.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-5.png" alt="Set Environment Variables" width="2446" height="2138"></p><div class="hint-container note"><p class="hint-container-title">Note</p><p>If you are using the LeanCloud domestic version, please additionally configure the <code>LEAN_SERVER</code> environment variable with the value of your bound domain.</p></div></li><li><p>After configuring the environment variables, click <code>Deployments</code> at the top, then click the <code>Redeploy</code> button on the right side of the latest deployment to redeploy. This step is to make the environment variables you just set take effect.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-6.png" alt="redeploy" width="2446" height="2138"></p></li><li><p>At this point, it will jump to the <code>Overview</code> interface to start deployment. Wait a moment until the <code>STATUS</code> becomes <code>Ready</code>. Then click <code>Visit</code> to jump to the deployed website address, which is your server address.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-7.png" alt="redeploy success" width="2446" height="2138"></p></li></ol></div><h3 id="domain-binding-optional" tabindex="-1"><a class="header-anchor" href="#domain-binding-optional"><span>Domain Binding (Optional)</span></a></h3><div class="vp-steps"><ol><li><p>Click <code>Settings</code> - <code>Domains</code> at the top to enter the domain configuration page.</p></li><li><p>Enter the domain you want to bind and click <code>Add</code>.</p><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-8.png" alt="Add domain" width="1026" height="369"></p></li><li><p>Add a new <code>CNAME</code> record at your domain DNS provider.</p><table><thead><tr><th>Type</th><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>CNAME</td><td>example</td><td>cname.vercel-dns.com</td></tr></tbody></table></li><li><p>Wait for it to take effect. You can now access it via your own domain 🎉</p><ul><li>Comment system: example.your-domain.com</li><li>Comment management: example.your-domain.com/ui</li></ul><p><img src="https://ecosystem.vuejs.press/images/comment/vercel-9.png" alt="success" width="785" height="138"></p></li></ol></div><h3 id="client" tabindex="-1"><a class="header-anchor" href="#client"><span>Client</span></a></h3><h4 id="using-the-plugin" tabindex="-1"><a class="header-anchor" href="#using-the-plugin"><span>Using the Plugin</span></a></h4><p>Set <code>provider: "Waline"</code> in the plugin options, and set the server address <code>serverURL</code> to the value obtained in the previous step.</p><p>At this point, place the <code><CommentService></code> component in a suitable location on your website (usually at the bottom of the page) to use the Waline comment functionality.</p><div class="hint-container tip"><p class="hint-container-title">Tips</p><p>You can also pass other options supported by Waline (except <code>el</code>). For details, see <a href="https://ecosystem.vuejs.press/zh/plugins/blog/comment/waline/config.html" target="_blank" rel="noopener noreferrer">Waline Configuration</a>.</p></div><h3 id="comment-management-admin-panel" tabindex="-1"><a class="header-anchor" href="#comment-management-admin-panel"><span>Comment Management (Admin Panel)</span></a></h3><div class="vp-steps"><ol><li><p>After deployment is complete, please visit <code><serverURL>/ui/register</code> to register. The first person to register will be set as the administrator.</p></li><li><p>After logging in as an administrator, you can see the comment management interface. Here you can modify, mark, or delete comments.</p></li><li><p>Users can also register accounts through the comment box. After logging in, they will be redirected to their own profile page.</p></li></ol></div>`,15)])}var v=c(u,[[`render`,_]]);export{l as _pageData,v as default}; |