建站技术 | 使博客更好地接入 Waline
<h2 id="前言">前言</h2>
<p>近期为我的网站进行了一次整体的升级,修复了个人主页和云盘的诸多 bug,新增了更多功能。其中包括优化 Waline 的使用,在这里记录下来以供他人参考。</p>
<p>这里我使用的是 Hugo 以及 stack 主题,使用其他方式的可以更多的参考 waline 的官方文档。</p>
<h2 id="迁移到最新版本-waline">迁移到最新版本 Waline</h2>
<h3 id="客户端">客户端</h3>
<p>由于 stack 模板中所接入的 waline 版本为 V2,或者像我一样从更远古的版本就开始魔改的话引入的是 V1,因此这里我们先来迁移到 V3 版本。</p>
<p>直接按照<a class="link" href="https://waline.js.org/guide/get-started/#html-%E5%BC%95%E5%85%A5-%E5%AE%A2%E6%88%B7%E7%AB%AF" target="_blank" rel="noopener"
>官方文档</a>中的引入方式修改代码即可,这里贴上我将 stack 模板修改后的代码。</p>
<p><code>layouts\partials\comments\provider\waline.html</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">link</span> <span style="color:#e06c75">rel</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"stylesheet"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://unpkg.com/@waline/client@v3/dist/waline.css"</span>/>
</span></span><span style="display:flex;"><span><<span style="color:#e06c75">div</span> <span style="color:#e06c75">id</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline"</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline-container"</span>></<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span><<span style="color:#e06c75">style</span>>
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">waline-container</span> {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">background-color</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">background</span>);
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">border-radius</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">border</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">radius</span>);
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">box-shadow</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">shadow</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">l1</span>);
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">padding</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">padding</span>);
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">--waline-font-size</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">article</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">font</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">size</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">waline-container</span> .<span style="color:#e5c07b">wl-count</span> {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">color</span>: <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card</span><span style="color:#56b6c2">-</span><span style="color:#e5c07b">text</span><span style="color:#56b6c2">-</span><span style="color:#e5c07b">color</span><span style="color:#56b6c2">-</span><span style="color:#e06c75">main</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">style</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>{{- $showReaction := (default true .Params.reaction) -}}
</span></span><span style="display:flex;"><span>{{- with .Site.Params.comments.waline -}}
</span></span><span style="display:flex;"><span>{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
</span></span><span style="display:flex;"><span>{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" "commentsorting" "commentSorting" "recaptchav3key" "recaptchaV3Key" "turnstilekey" "turnstileKey" -}}
</span></span><span style="display:flex;"><span>{{- $replaceLocaleKeys := dict "reactiontitle" "reactionTitle" "gifsearchplaceholder" "gifSearchPlaceholder" "nickerror" "nickError" "mailerror" "mailError" "wordhint" "wordHint" "cancellike" "cancelLike" "cancelreply" "cancelReply" "uploadimage" "uploadImage" -}}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>{{- range $key, $val := . -}}
</span></span><span style="display:flex;"><span> {{- if ne $val nil -}}
</span></span><span style="display:flex;"><span> {{- $replaceKey := index $replaceKeys $key -}}
</span></span><span style="display:flex;"><span> {{- $k := default $key $replaceKey -}}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> {{- if eq $k "locale" -}}
</span></span><span style="display:flex;"><span> {{- $locale := dict -}}
</span></span><span style="display:flex;"><span> {{- range $lkey, $lval := $val -}}
</span></span><span style="display:flex;"><span> {{- if ne $lval nil -}}
</span></span><span style="display:flex;"><span> {{- $replaceLKey := index $replaceLocaleKeys $lkey -}}
</span></span><span style="display:flex;"><span> {{- $lk := default $lkey $replaceLKey -}}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> {{- $locale = merge $locale (dict $lk $lval) -}}
</span></span><span style="display:flex;"><span> {{- end -}}
</span></span><span style="display:flex;"><span> {{- end -}}
</span></span><span style="display:flex;"><span> {{- $config = merge $config (dict $k $locale) -}}
</span></span><span style="display:flex;"><span> {{- else if eq $k "reaction" -}}
</span></span><span style="display:flex;"><span> {{- $config = merge $config (dict $k (cond $showReaction $val false)) -}}
</span></span><span style="display:flex;"><span> {{- else -}}
</span></span><span style="display:flex;"><span> {{- $config = merge $config (dict $k $val) -}}
</span></span><span style="display:flex;"><span> {{- end -}}
</span></span><span style="display:flex;"><span> {{- end -}}
</span></span><span style="display:flex;"><span>{{- end -}}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><<span style="color:#e06c75">script</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"module"</span>>
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">import</span> { <span style="color:#e06c75">init</span> } <span style="color:#e06c75">from</span> <span style="color:#98c379">'https://unpkg.com/@waline/client@v3/dist/waline.js'</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">init</span>({{ <span style="color:#e06c75">$config</span> <span style="color:#56b6c2">|</span> <span style="color:#e06c75">jsonify</span> <span style="color:#56b6c2">|</span> <span style="color:#e06c75">safeJS</span> }});
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">script</span>>
</span></span><span style="display:flex;"><span>{{- end -}}
</span></span></code></pre></div><p>这里我使用的 VSCode 虽然安装了 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=budparr.language-hugo-vscode" target="_blank" rel="noopener"
>Hugo Language and Syntax Support</a> 插件,但依旧无法正确判断 Hugo 语言语法,倒数第三行会报错,只要能正常运行即可。</p>
<p>另外,除了引入 V3 以外,这里也包括了 <code>locale</code> 大小写的修复,<a class="link" href="#%e6%9b%b4%e5%a4%9a%e7%9a%84-waline-%e5%ae%a2%e6%88%b7%e7%ab%af%e9%85%8d%e7%bd%ae" >后文</a>会提到,以及在 FrontMatter 中新增了一个自定义属性 <code>reaction</code>,用以开关文章反应,默认为 <code>true</code>。</p>
<p>刷新网页,如果发现评论系统右下角变成了 Powered by <a class="link" href="https://github.com/walinejs/waline" target="_blank" rel="noopener"
>Waline</a> v3.3.0 就说明升级成功了。</p>
<p>如果你曾经已经接入 Waline 的更多功能例如统计,那么你可能需要注意按照<a class="link" href="https://waline.js.org/migration/v2.html" target="_blank" rel="noopener"
>官方的迁移指南</a>修改你的代码。</p>
<h3 id="服务端">服务端</h3>
<p>由于数据库与服务端分开部署,所以升级服务端理所当然无需担心会丢失数据。</p>
<p>在管理端 UI 界面最上方可以看到当前最新版本为 <code>@waline/vercel@1.32.0</code>。</p>
<p>官方给的方式是将自己的 waline github 库中的 <code>package.json</code> 中的 <code>@waline/vercel</code> 版本修改为最新的即可。当然理论上来说,我们这里用的是 <code>latest</code>,直接在 Vercel 控制台中重部署即可。</p>
<p>我这里版本差的有点多,所以选择将自己的库 pull 下来,然后替换成官方的 <a class="link" href="https://github.com/walinejs/waline/tree/main/example" target="_blank" rel="noopener"
>waline/example at main · walinejs/waline · GitHub</a> 再 push 回去。</p>
<p>接着回到 Vercel 控制台,看到已经重新部署了,打开管理端也可以看到上方不再显示版本更新提示。</p>
<h2 id="关于-vercel-墙内-dns-污染">关于 Vercel 墙内 Dns 污染</h2>
<p>这里顺带一提,污染会导致墙内无法访问,进而墙内无法加载 Waline。</p>
<p>解决方法:自定义域名,并且 CNAME 换成 <code>cname-china.vercel-dns.com</code>。</p>
<p>本身访问速度已经较快了,建议关掉自定义域名 Cloudflare 代理,不然会出现 Cloudflare 的代理 ip 地址。</p>
<h2 id="配置邮件提醒">配置邮件提醒</h2>
<p>本步骤需要修改较多的环境变量,你可以在这里查看相关的服务端环境变量配置的详细信息:<a class="link" href="https://waline.js.org/reference/server/env.html#markdown" target="_blank" rel="noopener"
>服务端环境变量 | Waline</a>。</p>
<h3 id="配置-gmail-邮箱">配置 Gmail 邮箱</h3>
<p>首先需要对谷歌邮箱账号进行一些设置。</p>
<p>在邮箱设置的<strong>转发和 POP/IMAP</strong> 中启用 IMAP。</p>
<p><figure
class="gallery-image"
style="
flex-grow: 112;
flex-basis: 269px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/1.png" data-size="714x635">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/1.png"
width="714"
height="635"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/1_hu_737cc89507a54088.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/1_hu_bdaa0ac07ade0670.png 1024w"
loading="lazy"
alt="启用 IMAP">
</a>
<figcaption>启用 IMAP</figcaption>
</figure></p>
<p>然后在<a class="link" href="https://security.google.com/settings/security/apppasswords" target="_blank" rel="noopener"
>这里</a>生成谷歌账号的应用专用密码,复制下来一会用。</p>
<p>随后按照官方指南 <a class="link" href="https://waline.js.org/guide/features/notification.html#%E9%82%AE%E4%BB%B6%E9%80%9A%E7%9F%A5" target="_blank" rel="noopener"
>评论通知 | Waline</a> 配置 Vercel 上的环境变量即可:</p>
<ul>
<li>
<p><code>SMTP_SERVICE</code>:填 <code>Gmail</code></p>
</li>
<li>
<p><code>SMTP_USER</code>:填谷歌邮箱</p>
</li>
<li>
<p><code>SMTP_PASS</code>:填刚刚获取的应用专用密码,有 16 位,记得删除空格</p>
</li>
<li>
<p><code>SITE_NAME</code>:填博客的名字</p>
</li>
<li>
<p><code>SITE_URL</code>:要带 <code>https://</code>,不带最后一个斜杠,例如 <code>https://blog.reincarnatey.net</code></p>
</li>
<li>
<p><code>AUTHOR_EMAIL</code>:填自己常用的邮箱,用来接受评论通知</p>
</li>
</ul>
<h3 id="套上自己的-cloudflare-邮箱">套上自己的 Cloudflare 邮箱</h3>
<p>当然直接用谷歌邮箱发还是过于粗糙,这里希望再套上自己的 Cloudflare 邮箱实现更好的效果。这里的操作就类似于创建 Cloudflare 邮箱然后绑定到谷歌邮箱的别名上,详细可以在网络上搜索相关博客,这里只简单记录一下步骤。</p>
<ol>
<li>
<p>在 Cloudflare 电子邮件路由设置中创建邮箱地址,需要这一步是因为待会要收一个验证邮件(当然可以像我一样设置 Catch-All 就不用这一步)</p>
</li>
<li>
<p>谷歌账号需要开启一些设置(例如开启双重验证)</p>
</li>
<li>
<p>像刚刚一样再创建一个应用专用密码</p>
</li>
<li>
<p>在谷歌邮箱账号设置中在<strong>账号与导入</strong>页面选择<strong>添加其他电子邮件地址</strong></p>
<ol>
<li>
<p>第一步名称和电子邮件地址填写你要导入的名称和电子邮件地址,例如 <code>失迹的博客</code> 和 <code>noreply@reincarnatey.net</code>,勾选作为别名</p>
</li>
<li>
<p><code>SMTP服务器</code>:填 <code>smtp.gmail.com</code></p>
</li>
<li>
<p><code>用户名</code>:填你的谷歌邮箱</p>
</li>
<li>
<p><code>密码</code>:填刚刚获取的应用专用密码,记得删空格</p>
</li>
</ol>
</li>
<li>
<p>别名电子邮件会收到一封邮件,完成验证</p>
</li>
<li>
<p>添加 Vercel 的环境变量为新的邮箱信息,与在谷歌那边填的一致即可</p>
<ol>
<li>
<p><code>SENDER_NAME</code>:自定义发件人名字,如 <code>失迹的博客</code></p>
</li>
<li>
<p><code>SENDER_EMAIL</code>:自定义发件地址,如 <code>noreply@reincarnatey.net</code></p>
</li>
</ol>
</li>
</ol>
<p>这样就完成别名的设置了,如果要精致一点还可以为这个邮箱设置一个 gravatar。</p>
<p>我们发送一个回复,可以看到收到的邮件的发件人信息已经设置好了。</p>
<p><figure
class="gallery-image"
style="
flex-grow: 245;
flex-basis: 589px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/2.png" data-size="511x208">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/2.png"
width="511"
height="208"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/2_hu_1c551a5a8fabf24d.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/2_hu_d6d56c3ecac6d509.png 1024w"
loading="lazy"
alt="评论提醒邮件">
</a>
<figcaption>评论提醒邮件</figcaption>
</figure></p>
<h3 id="使用模板样式">使用模板样式</h3>
<p>这里我使用的模板修改自 <a class="link" href="https://www.sarakale.top/blog/posts/537344b2" target="_blank" rel="noopener"
>SaraKale’s blog</a>,非常感谢。</p>
<p>效果展示:</p>
<p><figure
class="gallery-image"
style="
flex-grow: 62;
flex-basis: 149px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/3.png" data-size="910x1462">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/3.png"
width="910"
height="1462"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/3_hu_a2f95159e3bf636.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/3_hu_58db888ce7dd7b19.png 1024w"
loading="lazy"
alt="访客评论被回复收到的">
</a>
<figcaption>访客评论被回复收到的</figcaption>
</figure> <figure
class="gallery-image"
style="
flex-grow: 66;
flex-basis: 159px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/4.png" data-size="909x1366">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/4.png"
width="909"
height="1366"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/4_hu_ce0e8c455384a2b2.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/4_hu_9974aa66cf36d48f.png 1024w"
loading="lazy"
alt="站长收到的">
</a>
<figcaption>站长收到的</figcaption>
</figure></p>
<ul>
<li>
<p><code>MAIL_SUBJECT</code>:<code>{{parent.nick | safe}},您在 『{{site.name | safe}}』 上的评论收到了回复</code></p>
</li>
<li>
<p><code>MAIL_TEMPLATE</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">style</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text/css"</span>>
</span></span><span style="display:flex;"><span> @<span style="color:#c678dd">media</span> <span style="color:#e06c75">screen</span> <span style="color:#e06c75">and</span> <span style="color:#56b6c2">(</span><span style="color:#e06c75">max-width</span>:<span style="color:#61afef">600px</span><span style="color:#56b6c2">)</span> {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">afterimg</span><span style="color:#56b6c2">,</span>
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">beforeimg</span> {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">display</span>: <span style="color:#e5c07b">none</span> <span style="color:#7f848e">!important</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">style</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"beforeimg"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:530px;height:317px;z-index:-100;pointer-events:none"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;"</span>>
</span></span><span style="display:flex;"><span> 您在<<span style="color:#e06c75">a</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-decoration:none;color: #9d2850;"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{site.url}}"</span>>『{{site.name |
</span></span><span style="display:flex;"><span> safe}}』</<span style="color:#e06c75">a</span>>上的留言收到一条回复</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"formmain"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"margin:40px auto;width:90%;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span>>😊Hi,{{parent.nick}},您曾发表的评论:</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;"</span>>
</span></span><span style="display:flex;"><span> {{parent.comment | safe}}</<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span>><<span style="color:#e06c75">strong</span>>{{self.nick}}</<span style="color:#e06c75">strong</span>> 回复您:</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;"</span>>
</span></span><span style="display:flex;"><span> {{self.comment | safe}}</<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span>><<span style="color:#e06c75">a</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-decoration:none; color:#cf5c83"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{site.postUrl}}"</span> <span style="color:#e06c75">target</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"_blank"</span>> 查看回复的完整內容
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">a</span>>,欢迎再次访问<<span style="color:#e06c75">a</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-decoration:none; color:#cf5c83"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{site.url}}"</span> <span style="color:#e06c75">target</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"_blank"</span>>
</span></span><span style="display:flex;"><span> {{site.name}} </<span style="color:#e06c75">a</span>>。
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">hr</span> />
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;"</span>>
</span></span><span style="display:flex;"><span> 本邮件为系统自动发送,请勿直接回复邮件哦,可到博文内容回复。<<span style="color:#e06c75">br</span> />{{site.url}}</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;margin:25px auto 5px auto;display:block;pointer-events:none"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"bottomhr"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"font-size:12px;text-align:center;color:#999"</span>>© 失迹的博客</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"afterimg"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:535px;height:317px;z-index:100;margin-left: -3px;"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">div</span>>
</span></span></code></pre></div></li>
<li>
<p><code>MAIL_SUBJECT_ADMIN</code>:<code>您有一条新的评论</code></p>
</li>
<li>
<p><code>MAIL_TEMPLATE_ADMIN</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE; width:100%;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">style</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text/css"</span>>
</span></span><span style="display:flex;"><span> @<span style="color:#c678dd">media</span> <span style="color:#e06c75">screen</span> <span style="color:#e06c75">and</span> <span style="color:#56b6c2">(</span><span style="color:#e06c75">max-width</span>:<span style="color:#61afef">600px</span><span style="color:#56b6c2">)</span> {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">afterimg</span><span style="color:#56b6c2">,</span>
</span></span><span style="display:flex;"><span> .<span style="color:#e5c07b">beforeimg</span> {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">display</span>: <span style="color:#e5c07b">none</span> <span style="color:#7f848e">!important</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">style</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"border-radius: 10px 10px 10px 10px;font-size:14px;color:#555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"beforeimg"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:530px;height:317px;pointer-events:none"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;"</span>>
</span></span><span style="display:flex;"><span> 您在 <<span style="color:#e06c75">a</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-decoration:none;color:#9d2850;"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{site.url}}"</span> <span style="color:#e06c75">target</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"_blank"</span>>{{site.name}}</<span style="color:#e06c75">a</span>>
</span></span><span style="display:flex;"><span> 上的文章有了新的评论</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"formmain"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom:-155px;z-index:100;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"margin:40px auto;width:90%;"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span>><<span style="color:#e06c75">strong</span>>{{self.nick}}</<span style="color:#e06c75">strong</span>> 发表了评论:</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;"</span>>
</span></span><span style="display:flex;"><span> {{self.comment | safe}}</<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-align:center;position: relative;z-index: 99;"</span>><<span style="color:#e06c75">a</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"text-decoration:none;color:#cf5c83"</span> <span style="color:#e06c75">href</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{site.postUrl}}"</span> <span style="color:#e06c75">target</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"_blank"</span>>查看回复的完整內容</<span style="color:#e06c75">a</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:100%;margin:25px auto 5px auto;display:block;pointer-events:none"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">p</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"bottomhr"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"font-size:12px;text-align:center;color:#999"</span>>© 失迹的博客</<span style="color:#e06c75">p</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">img</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"afterimg"</span> <span style="color:#e06c75">style</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"width:535px;height:317px;margin-left:-3px;"</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">src</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">div</span>>
</span></span></code></pre></div></li>
</ul>
<p>直接在 Vercel 设置环境变量即可,大胆复制进去。注意如果选择压行的话会丢掉一部分空格,需要手动补上否则不美观。</p>
<h2 id="更多的-waline-客户端配置">更多的 Waline 客户端配置</h2>
<p>可以在官方文档 <a class="link" href="https://waline.js.org/reference/client/props.html" target="_blank" rel="noopener"
>组件属性 | Waline</a> 中查看。</p>
<p>放上这里我的配置:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#e06c75">waline</span>:
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">serverURL</span>: https://waline.reincarnatey.net/
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">lang</span>: zh-CN
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">search</span>: <span style="color:#e5c07b">false</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">pageview</span>: <span style="color:#e5c07b">true</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">comment</span>: <span style="color:#e5c07b">true</span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">emoji</span>:
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bmoji
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/weibo
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction</span>:
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_heart_eyes.png
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_thumbsup.png
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_zhoumei.png
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_grievance.png
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_dizzy_face.png
</span></span><span style="display:flex;"><span> - https://npm.elemecdn.com/@waline/emojis@1.1.0/bilibili/bb_slap.png
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">requiredMeta</span>:
</span></span><span style="display:flex;"><span> - nick
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">locale</span>:
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">admin</span>: 站长
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">sofa</span>: 还没有人评论哦!快来抢沙发吧~
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">placeholder</span>: 欢迎留下宝贵的评论!请留下正确的邮箱以便有回复时进行邮箱提醒,请勿发布任何与本文章无关的内容。
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reactionTitle</span>: 这篇文章对你有帮助吗?
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction0</span>: 非常有用
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction1</span>: 有帮助
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction2</span>: 一般
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction3</span>: 无帮助
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction4</span>: 看不懂
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">reaction5</span>: 有错误
</span></span></code></pre></div><p>需要注意的是由于 <code>yaml</code> 读取为统一小写,而 Waline 的配置又大小写敏感,所以需要专门的步骤将大小写转换。</p>
<p>我在前文提供的 <code>layouts\partials\comments\provider\waline.html</code> 已包含了基本配置以及 <code>locale</code> 配置的大小写修复,其他配置同理。同时也包含新增了一个文章 FrontMatter 属性用以控制是否显示文章反应:<code>reaction: true</code>。</p>
<h2 id="接入浏览量与评论数统计">接入浏览量与评论数统计</h2>
<h3 id="文章页">文章页</h3>
<p>在 <code>config.yaml</code> 的 <code>waline</code> 配置中将 <code>pageview</code> 与 <code>comment</code> 都设置为 <code>true</code>。</p>
<p>并且修改 <code>layouts\partials\article\components\details.html</code>,将末尾的 <code><footer></code> 中的内容修改为:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">footer</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"article-time"</span>>
</span></span><span style="display:flex;"><span> {{ if not .Date.IsZero }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ partial "helper/icon" "date" }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">time</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"article-time--published"</span>>
</span></span><span style="display:flex;"><span> {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">time</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ end }}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> {{ if .Site.Params.article.readingTime }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ partial "helper/icon" "clock" }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">time</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"article-words"</span>>
</span></span><span style="display:flex;"><span> {{ $fixedWordCount := add .WordCount 224}}
</span></span><span style="display:flex;"><span> 约{{ div $fixedWordCount 225 }}分钟,共{{ .WordCount }}字
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">time</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ end }}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ partial "helper/icon" "view" }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">time</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"article-pageview"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">span</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline-pageview-count"</span> <span style="color:#e06c75">data-path</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{.RelPermalink}}"</span>>0</<span style="color:#e06c75">span</span>> 次浏览
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">time</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> {{ partial "helper/icon" "comment" }}
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">time</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"article-comment"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">span</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline-comment-count"</span> <span style="color:#e06c75">data-path</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"{{.RelPermalink}}"</span>>0</<span style="color:#e06c75">span</span>> 条评论
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">time</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">footer</span>>
</span></span></code></pre></div><p>另外虽然有提供 <code>.ReadingTime</code> 变量以供估算阅读时长,但官方设置的速度或许是基于英文的,个人感觉误差较大。所以这里根据网络上的数据,成人每分钟阅读约 200-250 字进行向上取整估算。</p>
<p>至于图标,按照<a class="link" href="https://blog.reincarnatey.net/2023/build-hugo-blog-with-stack-mod/#%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%A4%BE%E4%BA%A4%E5%AA%92%E4%BD%93%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8Frss" target="_blank" rel="noopener"
>这里</a>所使用的方式下载对应的图标 <code>view.svg</code> 和 <code>comment.svg</code>,并修改成适配暗黑模式后,扔到 <code>\assets\icons</code> 下即可。</p>
<p>由于文章页会直接引入完整的 Waline,所以不需要额外的引入了。可以看到在文章页面已经可以正常显示修改的内容了。</p>
<p><figure
class="gallery-image"
style="
flex-grow: 398;
flex-basis: 956px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/5.png" data-size="1020x256">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/5.png"
width="1020"
height="256"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/5_hu_34a61b0445310d9b.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/5_hu_530cc52a09c4e750.png 1024w"
loading="lazy"
alt="显示浏览量与评论数">
</a>
<figcaption>显示浏览量与评论数</figcaption>
</figure></p>
<h3 id="页脚">页脚</h3>
<p>这里希望在所有页面的页脚展示主页的浏览量。</p>
<p>由于除了文章以外的页面不会引入浏览量统计,所以这里需要额外引入,在 <code>layouts\partials\footer\footer.html</code> 的 <code><footer></code> 内添加:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#56b6c2"><</span><span style="color:#e06c75">script</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"module"</span><span style="color:#56b6c2">></span>
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">import</span> { <span style="color:#e06c75">pageviewCount</span> } <span style="color:#e06c75">from</span> <span style="color:#98c379">'https://unpkg.com/@waline/client@v3/dist/pageview.js'</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">pageviewCount</span>({
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">serverURL</span><span style="color:#56b6c2">:</span> <span style="color:#98c379">"{{.Site.Params.comments.waline.serverURL}}"</span>
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span><span style="color:#56b6c2"><</span>/script>
</span></span></code></pre></div><p>然后在页脚相关代码中,你需要展示的地方添加上显示的 <code>span</code> 即可,例如在某个地方添加:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>共 <<span style="color:#e06c75">span</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline-pageview-count"</span> <span style="color:#e06c75">data-path</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"/"</span>>0</<span style="color:#e06c75">span</span>> 次浏览
</span></span></code></pre></div><p>可以看到各页面都可以成功显示首页浏览量,同时这里悄悄解决了首页中浏览量显示的问题。</p>
<p><figure
class="gallery-image"
style="
flex-grow: 304;
flex-basis: 730px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/6.png" data-size="289x95">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/6.png"
width="289"
height="95"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/6_hu_3817a0b2eb7e5c3b.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/6_hu_b0c071a17e31293d.png 1024w"
loading="lazy"
alt="首页浏览量">
</a>
<figcaption>首页浏览量</figcaption>
</figure></p>
<blockquote>
<p>这里也可以测试,首页浏览量:<span class="waline-pageview-count" data-path="/">0</span></p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>首页浏览量:<<span style="color:#e06c75">span</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"waline-pageview-count"</span> <span style="color:#e06c75">data-path</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"/"</span>>0</<span style="color:#e06c75">span</span>>
</span></span></code></pre></div></blockquote>
<h3 id="首页">首页</h3>
<p>由于首页不开启评论功能,而页脚中只引入了浏览量统计,所以首页文章列表中显示不了评论数。我们希望能够显示出文章列表中各文章的评论数,需要额外的方式进行引入。</p>
<p>在 <code>layouts\index.html</code> 中 <code></section></code> 后面加上:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">script</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"module"</span>>
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">import</span> { <span style="color:#e06c75">commentCount</span> } <span style="color:#e06c75">from</span> <span style="color:#98c379">'https://unpkg.com/@waline/client@v3/dist/comment.js'</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">commentCount</span>({
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">serverURL</span><span style="color:#56b6c2">:</span> <span style="color:#98c379">"{{.Site.Params.comments.waline.serverURL}}"</span>
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">script</span>>
</span></span></code></pre></div><p>可以看到主页文章列表中,浏览量与回复数统计数据已经正常填充。</p>
<h2 id="接入最新评论挂件">接入最新评论挂件</h2>
<p><figure
class="gallery-image"
style="
flex-grow: 84;
flex-basis: 202px"
>
<a href="https://blog.reincarnatey.net/2024/0719-better-waline/7.png" data-size="624x738">
<img src="https://blog.reincarnatey.net/2024/0719-better-waline/7.png"
width="624"
height="738"
srcset="https://blog.reincarnatey.net/2024/0719-better-waline/7_hu_9fe46b7de86c06ac.png 480w, https://blog.reincarnatey.net/2024/0719-better-waline/7_hu_5cf1676e8a70e897.png 1024w"
loading="lazy"
alt="组件效果(自定义样式)">
</a>
<figcaption>组件效果(自定义样式)</figcaption>
</figure></p>
<p>可以在 <a class="link" href="https://waline.js.org/reference/client/api.html#recentcomments" target="_blank" rel="noopener"
>客户端 API | Waline</a> 页面查看这个挂件的 API。</p>
<p>这里我们以侧边栏组件的形式引入这个挂件,并设计成只有首页会出现。</p>
<p>在 <code>assets\scss\partials\widgets.scss</code> 的最下方添加:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-scss" data-lang="scss"><span style="display:flex;"><span><span style="color:#7f848e">/* Recent Comment widget */</span>
</span></span><span style="display:flex;"><span><span style="color:#e5c07b">.widget.recentComment</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-list</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">border-radius</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-border-radius</span>);
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">box-shadow</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">shadow-l1</span>);
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">background-color</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-background</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-list-item</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">display</span><span style="color:#56b6c2">:</span> <span style="color:#e06c75">flex</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">padding</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">0</span> <span style="color:#d19a66">1</span><span style="color:#d19a66">.25</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">align-items</span><span style="color:#56b6c2">:</span> <span style="color:#e06c75">center</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">&</span><span style="color:#61afef">:not</span><span style="color:#56b6c2">(</span><span style="color:#61afef">:last-of-type</span><span style="color:#56b6c2">)</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">border-bottom</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">1</span><span style="color:#d19a66">.4</span><span style="color:#e5c07b">px</span> <span style="color:#e06c75">solid</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-separator-color</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-card</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">flex</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">1</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">width</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">padding</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">20</span><span style="color:#e5c07b">px</span> <span style="color:#d19a66">10</span><span style="color:#e5c07b">px</span> <span style="color:#c678dd">!important</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">p</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">font-size</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">.8</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">margin-top</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">3</span><span style="color:#e5c07b">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">margin-bottom</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">0</span><span style="color:#e5c07b">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">white-space</span><span style="color:#56b6c2">:</span> <span style="color:#e06c75">nowrap</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">overflow</span><span style="color:#56b6c2">:</span> <span style="color:#e06c75">hidden</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">text-overflow</span><span style="color:#56b6c2">:</span> <span style="color:#e06c75">ellipsis</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">color</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-text-color-secondary</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-avatar</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">width</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">3</span><span style="color:#e5c07b">rem</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">border-radius</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">50</span><span style="color:#e5c07b">%</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-nick</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">font-size</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">.875</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">color</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-text-color-main</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.recent-comment-time</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">font-size</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">.75</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">color</span><span style="color:#56b6c2">:</span> <span style="color:#61afef;font-weight:bold">var</span>(<span style="color:#56b6c2">--</span><span style="color:#e06c75">card-text-color-tertiary</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.vemoji</span><span style="color:#56b6c2">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">.wl-emoji</span> {
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">height</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">1</span><span style="color:#d19a66">.25</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">margin</span><span style="color:#56b6c2">:</span> <span style="color:#56b6c2">-</span><span style="color:#d19a66">0</span><span style="color:#d19a66">.2</span><span style="color:#e5c07b">em</span> <span style="color:#d19a66">.1</span><span style="color:#e5c07b">em</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>创建文件 <code>layouts\partials\widget\recent-comment.html</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>{{ if .IsHome }}
</span></span><span style="display:flex;"><span><<span style="color:#e06c75">section</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"widget recentComment"</span> <span style="color:#e06c75">hidden</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"widget-icon"</span>>
</span></span><span style="display:flex;"><span> {{ partial "helper/icon" "comment" }}
</span></span><span style="display:flex;"><span> </<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">h2</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"widget-title section-title"</span>>最新评论</<span style="color:#e06c75">h2</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <<span style="color:#e06c75">div</span> <span style="color:#e06c75">class</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"recent-comment-list"</span>></<span style="color:#e06c75">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">section</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><<span style="color:#e06c75">script</span> <span style="color:#e06c75">type</span><span style="color:#56b6c2">=</span><span style="color:#98c379">"module"</span>>
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">import</span> { <span style="color:#e06c75">RecentComments</span> } <span style="color:#e06c75">from</span> <span style="color:#98c379">'https://unpkg.com/@waline/client@v3/dist/waline.js'</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">RecentComments</span>({
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">serverURL</span><span style="color:#56b6c2">:</span> <span style="color:#98c379">"{{.Site.Params.comments.waline.serverURL}}"</span>,
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">count</span><span style="color:#56b6c2">:</span> <span style="color:#d19a66">5</span>,
</span></span><span style="display:flex;"><span> }).<span style="color:#e06c75">then</span>((<span style="color:#e06c75">comments</span>) => {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">if</span> (<span style="color:#e06c75">comments</span>.<span style="color:#e06c75">comments</span>.<span style="color:#e06c75">data</span>.<span style="color:#e06c75">length</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">document</span>.<span style="color:#e06c75">getElementsByClassName</span>(<span style="color:#98c379">'recentComment'</span>)[<span style="color:#d19a66">0</span>].<span style="color:#e06c75">removeAttribute</span>(<span style="color:#98c379">"hidden"</span>);
</span></span><span style="display:flex;"><span> <span style="color:#e5c07b">document</span>.<span style="color:#e06c75">getElementsByClassName</span>(<span style="color:#98c379">'recent-comment-list'</span>)[<span style="color:#d19a66">0</span>].<span style="color:#e06c75">innerHTML</span> <span style="color:#56b6c2">=</span> <span style="color:#e06c75">comments</span>.<span style="color:#e06c75">comments</span>.<span style="color:#e06c75">data</span>.<span style="color:#e06c75">map</span>((<span style="color:#e06c75">comment</span>) =>
</span></span><span style="display:flex;"><span> <span style="color:#98c379">`<a class="recent-comment-list-item" href="</span><span style="color:#98c379">${</span><span style="color:#e06c75">comment</span>.<span style="color:#e06c75">url</span><span style="color:#98c379">}</span><span style="color:#98c379">" target="_blank">
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <img class="recent-comment-avatar" src="</span><span style="color:#98c379">${</span><span style="color:#e06c75">comment</span>.<span style="color:#e06c75">avatar</span><span style="color:#98c379">}</span><span style="color:#98c379">"/>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <div class="recent-comment-card">
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <div>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <span class="recent-comment-nick"></span><span style="color:#98c379">${</span><span style="color:#e06c75">comment</span>.<span style="color:#e06c75">nick</span><span style="color:#98c379">}</span><span style="color:#98c379"></span>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <span class="recent-comment-time"></span><span style="color:#98c379">${</span><span style="color:#c678dd">new</span> <span style="color:#e5c07b">Date</span>(<span style="color:#e06c75">comment</span>.<span style="color:#e06c75">time</span>).<span style="color:#e06c75">toISOString</span>().<span style="color:#e06c75">split</span>(<span style="color:#98c379">'T'</span>)[<span style="color:#d19a66">0</span>]<span style="color:#98c379">}</span><span style="color:#98c379"></span>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> </div>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> <p></span><span style="color:#98c379">${</span><span style="color:#e06c75">comment</span>.<span style="color:#e06c75">comment</span>.<span style="color:#e06c75">replaceAll</span>(<span style="color:#98c379">"<br>"</span>, <span style="color:#98c379">" "</span>).<span style="color:#e06c75">replaceAll</span>(<span style="color:#98c379">"\n"</span>, <span style="color:#98c379">" "</span>).<span style="color:#e06c75">replace</span>(<span style="color:#98c379">/<\/?a.*?>/g</span>, <span style="color:#98c379">""</span>)<span style="color:#98c379">}</span><span style="color:#98c379"></p>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> </div>
</span></span></span><span style="display:flex;"><span><span style="color:#98c379"> </a>`</span>
</span></span><span style="display:flex;"><span> ).<span style="color:#e06c75">join</span>(<span style="color:#98c379">''</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span></<span style="color:#e06c75">script</span>>
</span></span><span style="display:flex;"><span>{{ end }}
</span></span></code></pre></div><p>当然我们还需要在 <code>config.yaml</code> 中开启这个组件:</p>
<div class="highlight"><pre tabindex="0" style="color:#abb2bf;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#e06c75">params</span>:
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">widgets</span>:
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">enabled</span>:
</span></span><span style="display:flex;"><span> - recent-comment <span style="color:#7f848e"># 加上这一条</span>
</span></span></code></pre></div><p>最外面那一个 <code>if</code> 就是用来限制只在首页出现的。这里设定成获取到数据后再显示,以及将评论内容中的链接全部去掉了,设定成展示最近的 5 条评论。</p>
<p>由于官方样式令人堪忧,所以这里是获取数据后自定义。关于 <code>comment</code> 的属性,可以在 <a class="link" href="https://waline.js.org/reference/api/#api" target="_blank" rel="noopener"
>API | Waline</a> 中查看关于 <code>BaseWalineResponseComment</code> 的接口,这里简单介绍几个比较有用的:</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">含义</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">avatar</td>
<td style="text-align: left">string</td>
<td style="text-align: left">头像链接</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">comment</td>
<td style="text-align: left">string</td>
<td style="text-align: left">评论内容</td>
<td style="text-align: left">渲染成 html 后的</td>
</tr>
<tr>
<td style="text-align: left">like</td>
<td style="text-align: left">number</td>
<td style="text-align: left">评论喜欢数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">link</td>
<td style="text-align: left">string</td>
<td style="text-align: left">用户地址</td>
<td style="text-align: left">用户自己填写的,不建议用,避免出现乱七八糟的 backlink 和影响 SEO</td>
</tr>
<tr>
<td style="text-align: left">nick</td>
<td style="text-align: left">string</td>
<td style="text-align: left">用户昵称</td>
<td style="text-align: left">用户自己填写的</td>
</tr>
<tr>
<td style="text-align: left">orig</td>
<td style="text-align: left">string</td>
<td style="text-align: left">原始评论</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">time</td>
<td style="text-align: left">number</td>
<td style="text-align: left">评论时间</td>
<td style="text-align: left">时间戳,单位毫秒</td>
</tr>
<tr>
<td style="text-align: left">url</td>
<td style="text-align: left">string</td>
<td style="text-align: left">原文章地址</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p>当然,这里没有考虑到国际化的需求以及更多的可扩展性,欢迎有想法的朋友实现更高拓展性和更美观的侧边栏组件。</p>
<p>后续计划再更新一次,添加显示评论所在的原文章,会在之后关于侧边栏的文章中再次提及。</p>
<p>除此之外 Waline 还有一个 <a class="link" href="https://waline.js.org/reference/client/api.html#userlist" target="_blank" rel="noopener"
>UserList</a> 挂件,我这里并不需要,要接入的话也是类似的。</p>
<h2 id="结语">结语</h2>
<p>至此,我们已经捣鼓完了 Waline 大部分功能。你可以在官方手册中了解到更多的配置项以及我未提及的插件系统。</p>
<p>很遗憾此前我曾对模板进行过一次较大的改动,实现了例如独立出来的 <a class="link" href="https://blog.reincarnatey.net/solutions" target="_blank" rel="noopener"
>Solutions 题解区</a>以及 Algorithms 算法标签等,由于过于久远已经不记得调整内容无法写成文章,同时也因为放弃了拓展性的修改,无法合适地将我修改过后的主题开源。</p>
<p>当然,对博客主题的改造还远不止于此。后续的改造我也会保持记录,并发布文章,欢迎在评论区插眼或是订阅 RSS 以便关注后续更新。</p>
<p>有不足之处请见谅,有错误欢迎指正,也欢迎大家交换友链或是在评论区玩耍~</p>
<h2 id="附录">附录</h2>
<h3 id="参考文献">参考文献</h3>
<ol>
<li><a class="link" href="https://waline.js.org/" target="_blank" rel="noopener"
>Walin 官网</a></li>
<li><a class="link" href="https://www.eula.club/blogs/%E4%BD%BF%E7%94%A8Waline%E7%BB%99Hexo%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F.html#_4-2-gmail%E9%80%9A%E7%9F%A5" target="_blank" rel="noopener"
>使用Waline给Hexo静态博客添加评论系统 | Quantum Bit</a></li>
<li><a class="link" href="https://oragekk.me/blog/waline-mail.html#_1-4-waline%E9%82%AE%E4%BB%B6%E9%80%9A%E7%9F%A5%E6%A8%A1%E7%89%88index-js%E6%9C%8D%E5%8A%A1%E7%AB%AF%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0" target="_blank" rel="noopener"
>评论插件 Waline 之邮件通知配置 | Oragekk’s Blog</a></li>
<li><a class="link" href="https://blog.csdn.net/lyb8010/article/details/133748277" target="_blank" rel="noopener"
>Gmail发送邮件的配置方法_gmail smtp-CSDN博客</a></li>
<li><a class="link" href="https://www.sarakale.top/blog/posts/537344b2" target="_blank" rel="noopener"
>waline邮件通知模板样式一览 | SaraKale’s blog</a></li>
<li><a class="link" href="https://hugo.opendocs.io/functions/" target="_blank" rel="noopener"
>函数 | Hugo官方文档</a></li>
</ol>
<h3 id="版权信息">版权信息</h3>
<p>本文原载于 <a class="link" href="https://blog.reincarnatey.net" target="_blank" rel="noopener"
>reincarnatey.net</a>,遵循 CC BY-NC-SA 4.0 协议,复制请保留原文出处。</p>