yilia主题使用Waline评论系统

2022-06-06

字数统计: 639字 | 阅读时长≈ 2分

重拾hexo，打算给博客加个评论系统。首选免费方案，去网上找了一圈，打算使用Waline评论系统。

作为一个没咋学过前端的小白，照着网上教程也还是把评论系统搭建起来了。过程中有些疑惑，刚开始很多东西都不太理解，也不太知道是在做啥，折腾了一段时间后，大致上有了一些概念。在此记录一下。

首先是确定目标，我打算给我的博客添加评论系统，使用Waline，进入官网,把介绍和快速上手看一看。
waline
如何部署，在快速上手里面已经讲的很清楚了，但是可能对于我这种小白来说，还需要花时间去理解。
struct
评论系统三个部分，客户端脚本 服务器部署 数据存储都是可选的，暂时先用着免费的。

服务器部署：使用Vercel这个免费的网站托管平台，将Waline项目部署到这个网站上。

数据存储：使用LeanCloud提供的数据存储服务。

客户端脚本：在html中引入一小段代码，不同的hexo主题的操作有所不同，我使用的是hexo-theme-yilia-plus，添加办法为：
1.进入主题对应的根目录下，下面的路径都以此目录为基础，比如我的主题是hexo-theme-yilia-plus，那就是这个目录下，修改_config.yml文件，添加如下代码：

# Waline评论系统
Waline:
  # (关闭请设置为false)
  enable: true

2.修改layout/_partial/head.ejs文件，在结束标签</head>之前添加如下代码：

<% if (theme.Waline && theme.Waline.enable){ %>
  <%# "Waline评论系统" %>
  <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"
  />
<% } %>

3.修改layout/_partial/article.ejs文件，在大约130多行处，可以看到changyan,disqus,gitment之类的字样，这些是主题里原有的评论系统，在这里找个合适的地方，添加如下代码：

<% if (theme.Waline && theme.Waline.enable){ %>
  <%# "Waline评论系统" %>
  <div id="waline" style="width: 96%;margin: 0 auto"></div>
  <script>
    Waline.init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
<% } %>

因为添加后发现评论宽度没有对齐，不太好看，于是使用了行内样式加入了width: 96%;margin: 0 auto属性。

最后更新时间： 2022-06-07 19:53:12