https://hugo-blog-starter.vercel.app/posts/ Recent content in Posts on hugo-blog-starter https://hugo-blog-starter.vercel.app/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E https://hugo-blog-starter.vercel.app/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E Hugo -- 0.124.0 zh-cn Mon, 05 Aug 2024 11:06:30 +0800 https://hugo-blog-starter.vercel.app/2024/03/%E9%80%9A%E8%BF%87vercel%E9%83%A8%E7%BD%B2hugo%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/ Wed, 13 Mar 2024 22:51:42 +0800 https://hugo-blog-starter.vercel.app/2024/03/%E9%80%9A%E8%BF%87vercel%E9%83%A8%E7%BD%B2hugo%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/ <h2 id="背景">背景</h2> <p>本文编写目的主要是帮助小白快速部署一个简洁好看的私人静态博客，支持他人评论，文章统计等功能，具备被google、baidu等搜索引擎索引等特点。 为什么要自建一个私人博客？ 这一点很简单，1、博客掌握在自己手上，大平台也是可以说跑就跑的(狗头)；2、自建一个好看的博客成就感更足，培养自己的动手能力</p> <h2 id="博客选型">博客选型</h2> <p>为什么不用动态博客，而用静态博客？ 动态博客的页面是在用户访问时动态生成的，通常使用服务器端脚本语言（如 PHP、Python、Ruby 等）和数据库来生成页面内容，需要服务器成本</p> <h2 id="快速开始">快速开始</h2> <ol> <li> <p>自身可翻墙(github和vercel使用前提)</p> </li> <li> <p>创建好github和vercel账号，这一步基本随便建</p> </li> <li> <p>尽量自己有一个域名，没有的话也没关系，就是国内无法访问而已，也可以考虑通过<a href="https://dash.cloudflare.com/">cloudflare</a>加速</p> </li> <li> <p>访问<a href="https://github.com/luolin1024/hugo-vercel-starter">hugo-vercel-starter</a>，可以快速部署自带doit主题静态博客，注意填写好hugo版本即可部署 <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725155511.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725155511.png" alt="image.png" /> </a> </div> </p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725155640.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725155640.png" alt="image.png" /> </a> </div> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160244.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160244.png" alt="image.png" /> </a> </div> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160312.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160312.png" alt="image.png" /> </a> </div> </p> </li> <li> <p>最后，访问vercel给出的域名即可，我这里vercel给的域名<a href="https://demo-vercel-blog.vercel.app/">hugo博客demo (demo-vercel-blog.vercel.app)</a></p> </li> </ol> <h2 id="案例">案例</h2> <p><a href="https://demo-vercel-blog.vercel.app/">hugo博客demo (demo-vercel-blog.vercel.app)</a></p> <h2 id="自定义域名指向该静态博客">自定义域名指向该静态博客</h2> <p>前提：自己有一个域名 域名添加到cloudflare管理，并配置dns解析服务器，完成后即可添加对应的域名解析vercel给的xxx.xxx.app域名</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160623.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160623.png" alt="image.png" /> </a> </div> </p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160803.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160803.png" alt="image.png" /> </a> </div> </p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160736.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160736.png" alt="image.png" /> </a> </div> </p> <p>上面cloudflare设置完成后在vercel里面添加自己的域名解析对应的app <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160905.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240725160905.png" alt="image.png" /> </a> </div> </p> <h2 id="hugo-vercel-starter更换papermod">hugo-vercel-starter更换PaperMod</h2> <h3 id="背景以及快速更换">背景以及快速更换</h3> <p>个人感觉papermod更换字体后更加的美观，于是更换成了papermod主题，效果如下：</p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805100413.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805100413.png" alt="image.png" /> </a> </div> </p> <p>于是乎，折腾了一下，中间也走了不少弯路，对于使用<a href="https://github.com/luolin1024/hugo-vercel-starter">luolin1024/hugo-vercel-starter: 用于通过vercel快速搭建一个hugo静态博客 (github.com)</a>的小伙伴来说，需要自己处理的内容：</p> <ol> <li> <p>使用最新的master分支</p> </li> <li> <p>评论改为自己的waline系统，建议参考下面的<code>添加评论</code> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805104446.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805104446.png" alt="image.png" /> </a> </div> </p> </li> <li> <p>浏览统计需要自己搭建，可直接看下面的添加浏览统计</p> </li> <li> <p>自己修改一下config.yml（博客名、logo啥的）</p> </li> </ol> <h2 id="papermod具体更换内容">PaperMod具体更换内容</h2> <h3 id="更换字体">更换字体</h3> <p>博客改用<a href="https://lxgw.github.io/">落霞孤鹜系列字体</a>，正文使用 LXGW WenKai Lite 字体，代码块英文使用 JetBrains Mono 字体，中文使用 LXGW WenKai Screen 字体，公式使用 Arial 字体。</p> <ol> <li>打开<code>themes/PaperMod/layouts/partials/extend_head.html</code>文件，这个是会插入到 <code>&lt;head&gt;&lt;/head&gt;</code> 中间的内容，添加如下代码：</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- 文章字体设置 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.min.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nt">body</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s2">&#34;LXGW WenKai Lite&#34;</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s2">&#34;LXGW WenKai Screen&#34;</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></div><ol start="2"> <li>打开<code>themes/PaperMod/assets/css/extended/blank.css</code> ，这个是可以自定义样式的地方，添加：</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">/* ========== 正文字体：落霞孤鹜 ========== */ </span></span><span class="line"><span class="cl">body { </span></span><span class="line"><span class="cl"> font-family: &#34;LXGW WenKai Lite&#34;, sans-serif !important; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">/* ========== 代码字体：JetBrains Mono ========== */ </span></span><span class="line"><span class="cl">code { </span></span><span class="line"><span class="cl"> font-family: &#34;JetBrains Mono&#34;, &#34;LXGW WenKai Screen&#34;, &#34;LXGW WenKai Lite&#34;, sans-serif; </span></span><span class="line"><span class="cl">} </span></span></code></pre></div><ol> <li>为了让 MathJax 公式更加美观，需要在<code>themes/PaperMod/layouts/partials/mathjax.html</code>文件的<code>MathJax.Hub.Config</code>配置中添加：</li> </ol> <pre tabindex="0"><code>&#34;HTML-CSS&#34;: { availableFonts: [&#34;Arial&#34;, &#34;TeX&#34;], preferredFont: &#34;TeX&#34;, webFont: &#34;TeX&#34; } </code></pre><p>​ 示例：$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$</p> <p>参考：<a href="https://kdjlyy.github.io/posts/site/hugo-papermod-optimization/">PaperMod主题优化 | 向着悠远的苍穹 (kdjlyy.github.io)</a></p> <h3 id="文章toc放侧边栏">文章toc放侧边栏</h3> <p>首先找到目录 layouts/partials/toc.html ，把之前的代码换成如下代码</p> <pre tabindex="0"><code>{{- $headers := findRE &#34;&lt;h[1-6].*?&gt;(.|\n])+?&lt;/h[1-6]&gt;&#34; .Content -}} {{- $has_headers := ge (len $headers) 1 -}} {{- if $has_headers -}} &lt;aside id=&#34;toc-container&#34; class=&#34;toc-container wide&#34;&gt; &lt;div class=&#34;toc&#34;&gt; &lt;details {{if (.Param &#34;TocOpen&#34;) }} open{{ end }}&gt; &lt;summary accesskey=&#34;c&#34; title=&#34;(Alt + C)&#34;&gt; &lt;span class=&#34;details&#34;&gt;{{- i18n &#34;toc&#34; | default &#34;Table of Contents&#34; }}&lt;/span&gt; &lt;/summary&gt; &lt;div class=&#34;inner&#34;&gt; {{- $largest := 6 -}} {{- range $headers -}} {{- $headerLevel := index (findRE &#34;[1-6]&#34; . 1) 0 -}} {{- $headerLevel := len (seq $headerLevel) -}} {{- if lt $headerLevel $largest -}} {{- $largest = $headerLevel -}} {{- end -}} {{- end -}} {{- $firstHeaderLevel := len (seq (index (findRE &#34;[1-6]&#34; (index $headers 0) 1) 0)) -}} {{- $.Scratch.Set &#34;bareul&#34; slice -}} &lt;ul&gt; {{- range seq (sub $firstHeaderLevel $largest) -}} &lt;ul&gt; {{- $.Scratch.Add &#34;bareul&#34; (sub (add $largest .) 1) -}} {{- end -}} {{- range $i, $header := $headers -}} {{- $headerLevel := index (findRE &#34;[1-6]&#34; . 1) 0 -}} {{- $headerLevel := len (seq $headerLevel) -}} {{/* get id=&#34;xyz&#34; */}} {{- $id := index (findRE &#34;(id=\&#34;(.*?)\&#34;)&#34; $header 9) 0 }} {{- /* strip id=&#34;&#34; to leave xyz, no way to get regex capturing groups in hugo */ -}} {{- $cleanedID := replace (replace $id &#34;id=\&#34;&#34; &#34;&#34;) &#34;\&#34;&#34; &#34;&#34; }} {{- $header := replaceRE &#34;&lt;h[1-6].*?&gt;((.|\n])+?)&lt;/h[1-6]&gt;&#34; &#34;$1&#34; $header -}} {{- if ne $i 0 -}} {{- $prevHeaderLevel := index (findRE &#34;[1-6]&#34; (index $headers (sub $i 1)) 1) 0 -}} {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}} {{- if gt $headerLevel $prevHeaderLevel -}} {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}} &lt;ul&gt; {{/* the first should not be recorded */}} {{- if ne $prevHeaderLevel . -}} {{- $.Scratch.Add &#34;bareul&#34; . -}} {{- end -}} {{- end -}} {{- else -}} &lt;/li&gt; {{- if lt $headerLevel $prevHeaderLevel -}} {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}} {{- if in ($.Scratch.Get &#34;bareul&#34;) . -}} &lt;/ul&gt; {{/* manually do pop item */}} {{- $tmp := $.Scratch.Get &#34;bareul&#34; -}} {{- $.Scratch.Delete &#34;bareul&#34; -}} {{- $.Scratch.Set &#34;bareul&#34; slice}} {{- range seq (sub (len $tmp) 1) -}} {{- $.Scratch.Add &#34;bareul&#34; (index $tmp (sub . 1)) -}} {{- end -}} {{- else -}} &lt;/ul&gt; &lt;/li&gt; {{- end -}} {{- end -}} {{- end -}} {{- end }} &lt;li&gt; &lt;a href=&#34;#{{- $cleanedID -}}&#34; aria-label=&#34;{{- $header | plainify -}}&#34;&gt;{{- $header | safeHTML -}}&lt;/a&gt; {{- else }} &lt;li&gt; &lt;a href=&#34;#{{- $cleanedID -}}&#34; aria-label=&#34;{{- $header | plainify -}}&#34;&gt;{{- $header | safeHTML -}}&lt;/a&gt; {{- end -}} {{- end -}} &lt;!-- {{- $firstHeaderLevel := len (seq (index (findRE &#34;[1-6]&#34; (index $headers 0) 1) 0)) -}} --&gt; {{- $firstHeaderLevel := $largest }} {{- $lastHeaderLevel := len (seq (index (findRE &#34;[1-6]&#34; (index $headers (sub (len $headers) 1)) 1) 0)) }} &lt;/li&gt; {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}} {{- if in ($.Scratch.Get &#34;bareul&#34;) (add . $firstHeaderLevel) }} &lt;/ul&gt; {{- else }} &lt;/ul&gt; &lt;/li&gt; {{- end -}} {{- end }} &lt;/ul&gt; &lt;/div&gt; &lt;/details&gt; &lt;/div&gt; &lt;/aside&gt; &lt;script&gt; let activeElement; let elements; window.addEventListener(&#39;DOMContentLoaded&#39;, function (event) { checkTocPosition(); elements = document.querySelectorAll(&#39;h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]&#39;); // Make the first header active activeElement = elements[0]; const id = encodeURI(activeElement.getAttribute(&#39;id&#39;)).toLowerCase(); document.querySelector(`.inner ul li a[href=&#34;#${id}&#34;]`).classList.add(&#39;active&#39;); }, false); window.addEventListener(&#39;resize&#39;, function(event) { checkTocPosition(); }, false); window.addEventListener(&#39;scroll&#39;, () =&gt; { // Check if there is an object in the top half of the screen or keep the last item active activeElement = Array.from(elements).find((element) =&gt; { if ((getOffsetTop(element) - window.pageYOffset) &gt; 0 &amp;&amp; (getOffsetTop(element) - window.pageYOffset) &lt; window.innerHeight/2) { return element; } }) || activeElement elements.forEach(element =&gt; { const id = encodeURI(element.getAttribute(&#39;id&#39;)).toLowerCase(); if (element === activeElement){ document.querySelector(`.inner ul li a[href=&#34;#${id}&#34;]`).classList.add(&#39;active&#39;); } else { document.querySelector(`.inner ul li a[href=&#34;#${id}&#34;]`).classList.remove(&#39;active&#39;); } }) }, false); const main = parseInt(getComputedStyle(document.body).getPropertyValue(&#39;--article-width&#39;), 10); const toc = parseInt(getComputedStyle(document.body).getPropertyValue(&#39;--toc-width&#39;), 10); const gap = parseInt(getComputedStyle(document.body).getPropertyValue(&#39;--gap&#39;), 10); function checkTocPosition() { const width = document.body.scrollWidth; if (width - main - (toc * 2) - (gap * 4) &gt; 0) { document.getElementById(&#34;toc-container&#34;).classList.add(&#34;wide&#34;); } else { document.getElementById(&#34;toc-container&#34;).classList.remove(&#34;wide&#34;); } } function getOffsetTop(element) { if (!element.getClientRects().length) { return 0; } let rect = element.getBoundingClientRect(); let win = element.ownerDocument.defaultView; return rect.top + win.pageYOffset; } &lt;/script&gt; {{- end }} </code></pre><p>接下来，找到目录 css/extended/blank.css ，复制如下代码</p> <pre tabindex="0"><code>:root { --nav-width: 1380px; --article-width: 650px; --toc-width: 300px; } .toc { margin: 0 2px 40px 2px; border: 1px solid var(--border); background: var(--entry); border-radius: var(--radius); padding: 0.4em; } .toc-container.wide { position: absolute; height: 100%; border-right: 1px solid var(--border); left: calc((var(--toc-width) + var(--gap)) * -1); top: calc(var(--gap) * 2); width: var(--toc-width); } .wide .toc { position: sticky; top: var(--gap); border: unset; background: unset; border-radius: unset; width: 100%; margin: 0 2px 40px 2px; } .toc details summary { cursor: zoom-in; margin-inline-start: 20px; padding: 12px 0; } .toc details[open] summary { font-weight: 500; } .toc-container.wide .toc .inner { margin: 0; } .active { font-size: 110%; font-weight: 600; } .toc ul { list-style-type: circle; } .toc .inner { margin: 0 0 0 20px; padding: 0px 15px 15px 20px; font-size: 16px; /*目录显示高度*/ max-height: 83vh; overflow-y: auto; } .toc .inner::-webkit-scrollbar-thumb { /*滚动条*/ background: var(--border); border: 7px solid var(--theme); border-radius: var(--radius); } .toc li ul { margin-inline-start: calc(var(--gap) * 0.5); list-style-type: none; } .toc li { list-style: none; font-size: 0.95rem; padding-bottom: 5px; } .toc li a:hover { color: var(--secondary); } </code></pre><p>参考自：<a href="https://www.sulvblog.cn/posts/blog/hugo_toc_side/">Hugo博客目录放在侧边 | PaperMod主题 | Sulv&rsquo;s Blog (sulvblog.cn)</a></p> <h3 id="添加浏览统计">添加浏览统计</h3> <p>busuanzi 插件可以提供站点访问量和文章阅读数的计数服务，但是访问很慢，不建议使用 替换方案：1. 自建umima后台可看流量情况。2. 前台博客界面可使用<a href="https://bsz.dusays.com/">不蒜子 - 杜老师说旗下免费统计平台 (dusays.com)</a></p> <h4 id="umima直接部署在vercel上">umima直接部署在vercel上</h4> <ol> <li>在vercel新建一个postgres就行</li> <li>通过umima官方文档的一键部署直接部署，参考<a href="https://umami.is/docs/guides/running-on-vercel">Running on Vercel – Umami</a></li> <li>部署完成后可以得到自己的跟踪链接,需在starter中替换： <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805103427.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805103427.png" alt="image.png" /> </a> </div> </li> </ol> <p>弃用<a href="https://github.com/Qexo/Qexo">Qexo/Qexo: A Quick, Powerful and Pretty Online Manager for Hexo. (github.com)</a>，原因：vercel部署失败</p> <p>弃用<a href="https://github.com/finisky/finicounter">finisky/finicounter: A simple website page views counter for static websites (github.com)</a> ，原因仅统计pv，未统计uv</p> <h3 id="添加评论">添加评论</h3> <p>基于 GitHub issues 的评论工具不大建议使用，强制需要人登录，感觉对用户不友好 建议使用<code>waline</code>，参考官网文档<a href="https://waline.js.org/guide/deploy/vercel.html">Vercel 部署 | Waline</a>支持vercel快速部署，完成后找到<code>/layouts/partials/comments.html</code>,更换为</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{- /* Comments area start */ -}} </span></span><span class="line"><span class="cl">{{- /* to add comments read =&gt; https://gohugo.io/content-management/comments/ */ -}} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/@waline/client@v2/dist/waline.css&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;waline&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">init</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/@waline/client@v2/dist/waline.mjs&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">locale</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nick</span><span class="o">:</span> <span class="s1">&#39;昵称&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickError</span><span class="o">:</span> <span class="s1">&#39;请填写昵称&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mail</span><span class="o">:</span> <span class="s1">&#39;邮箱&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mailError</span><span class="o">:</span> <span class="s1">&#39;请填写正确的邮件地址&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">link</span><span class="o">:</span> <span class="s1">&#39;网址&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">optional</span><span class="o">:</span> <span class="s1">&#39;可选&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">placeholder</span><span class="o">:</span> <span class="s1">&#39;仅填写昵称即可发表回复。\n填写邮箱可收到回复提醒。\n评论区支持 Markdown 语法及预览。\n&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sofa</span><span class="o">:</span> <span class="s1">&#39;来发评论吧~&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">submit</span><span class="o">:</span> <span class="s1">&#39;提交&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">like</span><span class="o">:</span> <span class="s1">&#39;喜欢&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cancelLike</span><span class="o">:</span> <span class="s1">&#39;取消喜欢&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">reply</span><span class="o">:</span> <span class="s1">&#39;回复&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cancelReply</span><span class="o">:</span> <span class="s1">&#39;取消回复&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">comment</span><span class="o">:</span> <span class="s1">&#39;评论&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">refresh</span><span class="o">:</span> <span class="s1">&#39;刷新&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">more</span><span class="o">:</span> <span class="s1">&#39;加载更多...&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">preview</span><span class="o">:</span> <span class="s1">&#39;预览&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emoji</span><span class="o">:</span> <span class="s1">&#39;表情&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">uploadImage</span><span class="o">:</span> <span class="s1">&#39;上传图片&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">seconds</span><span class="o">:</span> <span class="s1">&#39;秒前&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">minutes</span><span class="o">:</span> <span class="s1">&#39;分钟前&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hours</span><span class="o">:</span> <span class="s1">&#39;小时前&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">days</span><span class="o">:</span> <span class="s1">&#39;天前&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">now</span><span class="o">:</span> <span class="s1">&#39;刚刚&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">uploading</span><span class="o">:</span> <span class="s1">&#39;正在上传&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">login</span><span class="o">:</span> <span class="s1">&#39;管理&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">logout</span><span class="o">:</span> <span class="s1">&#39;退出&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">admin</span><span class="o">:</span> <span class="s1">&#39;博主&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sticky</span><span class="o">:</span> <span class="s1">&#39;置顶&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">word</span><span class="o">:</span> <span class="s1">&#39;字&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">wordHint</span><span class="o">:</span> <span class="s1">&#39;评论字数应在 $0 到 $1 字之间！\n当前字数：$2&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">anonymous</span><span class="o">:</span> <span class="s1">&#39;匿名&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level0</span><span class="o">:</span> <span class="s1">&#39;潜水&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level1</span><span class="o">:</span> <span class="s1">&#39;冒泡&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level2</span><span class="o">:</span> <span class="s1">&#39;吐槽&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level3</span><span class="o">:</span> <span class="s1">&#39;活跃&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level4</span><span class="o">:</span> <span class="s1">&#39;话痨&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">level5</span><span class="o">:</span> <span class="s1">&#39;传说&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gif</span><span class="o">:</span> <span class="s1">&#39;表情包&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gifSearchPlaceholder</span><span class="o">:</span> <span class="s1">&#39;搜索表情包&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">profile</span><span class="o">:</span> <span class="s1">&#39;个人资料&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">approved</span><span class="o">:</span> <span class="s1">&#39;通过&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">waiting</span><span class="o">:</span> <span class="s1">&#39;待审核&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">spam</span><span class="o">:</span> <span class="s1">&#39;垃圾&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">unsticky</span><span class="o">:</span> <span class="s1">&#39;取消置顶&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">oldest</span><span class="o">:</span> <span class="s1">&#39;按倒序&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">latest</span><span class="o">:</span> <span class="s1">&#39;按正序&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hottest</span><span class="o">:</span> <span class="s1">&#39;按热度&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">reactionTitle</span><span class="o">:</span> <span class="s1">&#39;你认为这篇文章怎么样？&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="nx">init</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// options </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#waline&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">serverURL</span><span class="o">:</span> <span class="s1">&#39;https://blogcomments.luolin.online&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emoji</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 表情 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">search</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// GIF 表情包 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">reaction</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 文章反应 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">requiredMeta</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;nick&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageSize</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">imageUploader</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">copyright</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageview</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">like</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">{{- /* Comments area end */ -}} </span></span></code></pre></div><p>注意，serverURL需要改用自己的url</p> <h3 id="github-action自动部署">Github Action自动部署</h3> <p>PaperMod默认安装完成后通过GitHub Action部署会遇到报错，需要去掉PaperMod主题下的.github文件夹 <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805102242.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805102242.png" alt="image.png" /> </a> </div> </p> <p> <div class="post-img-view"> <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805110504.png"> <img src="https://cdn.jsdelivr.net/gh/luolin1024/image@main/img/20240805110504.png" alt="image.png" /> </a> </div> </p> <h3 id="优化seo">优化SEO</h3> <p>config.yml中配置：</p> <pre tabindex="0"><code>permalinks: posts: /:year/:month/:title/ </code></pre><p>原因：1、与原始目录/title有区别，可以避免后续修改目录名称导致链接失效；2、仅为title的话也会导致链接失效可以避免不同目录下的title冲突；</p> <h3 id="使用fancybox实现图片灯箱放大功能">使用Fancybox实现图片灯箱/放大功能</h3> <p>参考： <a href="https://atpx.com/blog/hugo-fancybox/">Hugo 使用 Fancybox 实现图片灯箱/放大功能 - atpX</a></p>