Hexo Matery主题添加 Waline 评论系统

网上好像没什么教程，那我来写一个吧。

Waline 的官方教程在这里 https://waline.js.org/guide/get-started/

首先前两步小朋友都会做，建议直接看官方教程

LeadCloud 数据库

以及 Vercel 部署

好，那么进入正题。

相信看这篇文章的同学和我一样几乎不会 JavaScript 或者 CSS 相关的东西。

很简单，我们找到 /matery/layout/_partial ，创建一个 waline.ejs 的文件，如下

<link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
    // href="<%- theme.jsDelivr.url %><%- url_for(theme.libs.css.waline) %>"
/>

<div class="card waline-card" data-aos="fade-up">
  <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
      <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
      <span>评论</span>
  </div>
  <div id="waline" class="card-content" style="display: grid">
  </div>
</div>


<!-- <script src="//cdn.jsdelivr.net/npm/@waline/client"></script> -->
<!-- <script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.waline) %>"></script> -->
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  // import { init } from "<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.waline) %>";
  
  //...
  const locale = {
    nick: '<%- theme.waline.locale.name.nick %>',
    nickError: '<%- theme.waline.locale.name.nickError %>',
    mail: '<%- theme.waline.locale.name.mail %>',
    mailError: '<%- theme.waline.locale.name.mailError %>',
    link: '<%- theme.waline.locale.name.link %>',
    optional: '<%- theme.waline.locale.name.optional %>',
    placeholder: '<%- theme.waline.locale.name.placeholder %>',
    sofa: '<%- theme.waline.locale.name.sofa %>',
    submit: '<%- theme.waline.locale.name.submit %>',
    like: '<%- theme.waline.locale.name.like %>',
    cancelLike: '<%- theme.waline.locale.name.cancelLike %>',
    reply: '<%- theme.waline.locale.name.reply %>',
    cancelReply: '<%- theme.waline.locale.name.cancelReply %>',
    comment: '<%- theme.waline.locale.name.comment %>',
    refresh: '<%- theme.waline.locale.name.refresh %>',
    more: '<%- theme.waline.locale.name.more %>',
    preview: '<%- theme.waline.locale.name.preview %>',
    emoji: '<%- theme.waline.locale.name.emoji %>',
    uploadImage: '<%- theme.waline.locale.name.uploadImage %>',
    seconds: '<%- theme.waline.locale.name.seconds %>',
    minutes: '<%- theme.waline.locale.name.minutes %>',
    hours: '<%- theme.waline.locale.name.hours %>',
    days: '<%- theme.waline.locale.name.days %>',
    now: '<%- theme.waline.locale.name.now %>',
    uploading: '<%- theme.waline.locale.name.uploading %>',
    login: '<%- theme.waline.locale.name.login %>',
    logout: '<%- theme.waline.locale.name.logout %>',
    admin: '<%- theme.waline.locale.name.admin %>',
    sticky: '<%- theme.waline.locale.name.sticky %>',
    word: '<%- theme.waline.locale.name.word %>',
    wordHint: '<%- theme.waline.locale.name.wordHint %>',
    anonymous: '<%- theme.waline.locale.name.anonymous %>',
    level0: '<%- theme.waline.locale.name.level0 %>',
    level1: '<%- theme.waline.locale.name.level1 %>',
    level2: '<%- theme.waline.locale.name.level2 %>',
    level3: '<%- theme.waline.locale.name.level3 %>',
    level4: '<%- theme.waline.locale.name.level4 %>',
    level5: '<%- theme.waline.locale.name.level5 %>',
    gif: '<%- theme.waline.locale.name.gif %>',
    gifSearchPlaceholder: '<%- theme.waline.locale.name.gifSearchPlaceholder %>',
    profile: '<%- theme.waline.locale.name.profile %>',
    approved: '<%- theme.waline.locale.name.approved %>',
    waiting: '<%- theme.waline.locale.name.waiting %>',
    spam: '<%- theme.waline.locale.name.spam %>',
    unsticky: '<%- theme.waline.locale.name.unsticky %>',
    oldest: '<%- theme.waline.locale.name.oldest %>',
    latest: '<%- theme.waline.locale.name.latest %>',
    hottest: '<%- theme.waline.locale.name.hottest %>',
    reactionTitle: '<%- theme.waline.locale.name.reactionTitle %>',
  };
  init({
    el: '#waline',
    serverURL: '<%- theme.waline.serverURL %>',
    avatar: '<%- theme.waline.avatar %>',  
    requiredMeta: ['nick', 'mail'],  
    wordLimit: <%- theme.waline.wordLimit %>,
    // 9 emoji most
    reaction: [
      '/libs/waline/emojis/bmoji_thumb_up.png',
      '/libs/waline/emojis/bmoji_give_love.png',
      '/libs/waline/emojis/bmoji_what.png',
      '/libs/waline/emojis/bmoji_hmm.png',
      '/libs/waline/emojis/bmoji_unavailble_doge.png',
      '/libs/waline/emojis/bmoji_onlooker.png',
    ],
    emoji: [
      'https://unpkg.com/@waline/[email protected]/bmoji',
    ],
    // ...
    locale,
  });
</script>

然后在主题的 _config.yml 文件里写上这些

waline:
  enable: true
  serverURL: https://你的服务器.vercel.app/
  avatar: 'identicon' # Gravatar style : ''/mp/identicon/monsterid/wavatar/retro/hide
  wordLimit: 2000
  locale:
    name:
      #字段
      nick: 昵称(必填)
      nickError: 昵称不能少于3个字符
      mail: 邮箱(必填)
      mailError: 请填写正确的邮件地址
      link: 网站
      optional: 可选
      placeholder: 欢迎评论呀 awa~❤️
      sofa: 来发评论吧~
      submit: 提交
      like: 喜欢
      cancelLike: 取消喜欢
      reply: 回复
      cancelReply: 取消回复
      comment: 评论
      refresh: 刷新
      more: 加载更多...
      preview: 预览
      emoji: 表情
      uploadImage: 上传图片
      seconds: 秒前
      minutes: 分钟前
      hours: 小时前
      days: 天前
      now: 刚刚
      uploading: 正在上传
      login: 登录
      logout: 退出
      admin: 博主
      sticky: 置顶
      word: 字
      wordHint: 评论字数应在 $0 到 $1 字之间！\n当前字数：$2
      anonymous: 匿名
      level0: 潜水
      level1: 冒泡
      level2: 吐槽
      level3: 活跃
      level4: 话痨
      level5: 传说
      gif: 表情包
      gifSearchPlaceholder: 搜索表情包
      profile: 个人资料
      approved: 通过
      waiting: 待审核
      spam: 垃圾
      unsticky: 取消置顶
      oldest: 按倒序
      latest: 按正序
      hottest: 按热度
      reactionTitle: 你认为这篇文章怎么样？
      # 字段结束