为blog装修和添加评论

装修是因为眼馋其他人漂亮的博客，于是犯下以代码小白之身妄图装修的罪行（X)。结果就是折腾了很久，自己累死死活在折腾了一半。这里要感谢塔塔的这篇博文，以及后面装修的文章，真的帮我了很多！塔塔，我的赛博恩人。

一些小工程

虽然是小工程也让我很辛苦呢……

首先是——换头像和网站图标

换头像换的很顺利呢！只要打开blog/assets/img，把原有的图片删掉、自己想要的图片改成avatar.png，放入img文件夹就行了

但是换网站图标就没有那么顺利了！
刚开始看到的方法是把下一个SVG图标，改成archives放入icons文件夹中。但我照搬之后没有任何用处。
抓耳挠腮研究了很久之后才在塔塔的一篇装修博客中找到方法。
方法如下

如果没有的话，在博客根目录创建一个static/img/文件夹
将自己的icon图标放进去
打开config.yaml文件，修改favicon这一行填入/img/图像名称.图像类型
保存。之后在本地加载博客的时候就能看见你想要的！心怡的icon！解决之后看到方法这么简单，想到自己之前研究了三个小时还失败了心情就格外复杂呢……

修改博客点击特效

失败了，pass

修改友链

修改友链其实是我从memE主题改为stack主题的最主要原因，我是真的搞不定怎么增加memE友情链接。

ps ：我努力了半天(是真的半天哦！）之后发现可能是因为网上大部分增加友链教程都是基于shortcode，但是memE并不支持shortcode呢！真的大发（寒国人语气）

知道这件事已经是我瞎弄了半天之后的事情了，气得我直接丢键盘进行一个发疯虽然并没有发疯但是真的开始疲惫了，最后含泪换了一个有友链的主题，并通过塔塔这篇装修文章找到了修改友链的正确方式。过程如下

layouts/shortcodes/ 下面新建 link.html 文件：

代码如下

{{ if .IsNamedParams }}
   {{- $src := .Get "logo" -}}
   {{- $small := .Get "logo_small" | default $src -}}
   {{- $large := .Get "logo_large" | default $src -}}
   <div class="friend-div">
       <a target="_blank" href={{ .Get "url"  | safeURL }} title={{ .Get "word" }} >
           <img class="lazyload"
                src="/svg/loading.min.svg"
                data-src={{ $src | safeURL }}
                alt={{ .Get "name" }}
                data-sizes="auto"
                data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" />
           <span class="friend-name">{{ .Get "name" }}</span>
           <span class="friend-info">{{ .Get "word" }}</span>
       </a>
   </div>
{{ end }}

新建layouts\page\links.html,在其中写入代码
代码如下

<footer class="article-footer">
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
    </section>
    {{ end }}

	{{ if and (.Site.Params.article.edit.enabled) (not (eq .Params.edit false)) }}
    <section class="article-edit">
        {{ partial "helper/icon" "external-link" }}
        <span><a href="https://github.com/iwyang/iwyang.github.io/edit/develop/content/{{ replace .File.Path "\\" "/" }}" target="_blank">在 GitHub 上编辑此页</a></span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-time">
        {{ partial "helper/icon" "clock" }}
        <span class="article-time--modified">
            {{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
        </span>
    </section>
    {{- end -}}
</footer>

友链头像放在\assets\link-img\，友链数据放在\data\links.json
此处是link.json内的代码，增删友链都在link.json内

[
  {
      "title": "",
      "website": "",
      "image": "",
   "description": ""
  },
  {
      "title": "",
      "website": "",
      "image": "",
   "description": ""
  }
]

接下来在本地打开博客，就可以看到一个全新的友情链接啦！

~~小惊喜~~
打开 content/page/friends/index.md，找到icon，输入assets/icons中的SVG图片名称，就可以修改link的图标啦！其实应该大部分人都知道，怕自己忘了写在这里提示自己！

增加烟花点击特效

在layouts/partials/footer/custom.html中加入代码

<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/mouse-click.js"></script>
<canvas
  width="1777"
  height="841"
  style="
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2147483647;
    pointer-events: none;
  "
></canvas>

保存就ok了

增加评论区

增加博客评论区真的难倒了我这个小白，期间搜了无数文章，顺便在毛象上发了个疯，最近两个月我是不太想再装修了。
添加评论区用的是waline，其实stack主题自带了评论区但是我不太喜欢，所以换成了waline。
主要是看的在 Hugo 主题 Stack 中轻松配置 Waline 评论系统和塔塔的blog加评论区（塔塔我的赛博恩人）
stack主题事先就支持waline，如果使用其他没有 Waline 支持的主题或其他博客系统，可以参考官方文档引入客户端。

安装waline

在waline官方教程里有介绍

1.在 LeanCloud 上部署数据库

2.在 Vercel 上部署服务端

这一步按照官方教程来就好了，没什么大问题
但是要记得如果用的是leancloud国际版设置变量的时候只要设置LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY`三个就好。

3.引入客户端

其实也很简单，教程里几乎没有人教CDN导入。但在如果不懂的话真的会抓耳挠腮半天想哭了都不知道怎么办（就比如我）。不过也可能是因为我比较笨乌乌。
CDN其实就是内容分发网络的意思，要引用的话再html文件后面加一个script标签就好了。
所以这一步其实就是在layouts/partials/comments/provider/walin.html文件中加入以下代码就可以了

  <script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />

  <div id="waline"></div>
  <script>
    Waline.init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>

官网在这里写这时候你的评论就可以成功运行了。
但是我在运行时并没有见到waline评论区，这让我狠狠困惑了几天。直到今天！在搜索config.yaml时我才看到，文件里有设置用哪个评论系统，所以这里要修改评论系统设定。在config.yaml第53行，把provider: disqus改成provider: waline就行啦。
其实stack主题支持waline系统，所以不用引入客户端，只需要把provider改成waline就行了，没反应过来是我的锅。（我真的是个笨蛋）

评论管理

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

tips 如果一直显示fail to fetch的话

检查一下自己在vercel的变量配置是不是有问题国际版的不需要域名，国内版的需要域名，多或者少都不行。
上面的问题的话，在网上找一下DNS解析错误的办法，断网重连试试看
为什么我会知道这个呢……因为我也经历了，还跑到开发者那边去问了……

总结

写到现在其实已经没什么想说的了！只想大喊一句，累死我了！！！以及，待会去码头整点薯条。