Waline评论系统优化

Waline评论系统优化

发表于 · 分类：测试 · 标签：#测试, #界面

访问量 0

AI摘要

一、评论系统配置

Waline 评论系统的配置分布在 4 个层面：

层面位置配置内容
基础开关(hugo.toml#L246-L252)provider 切换、serverURL、placeholder
JS 初始化(themes/aiovtue/assets/js/comments.js#L397-L404)lang、emoji、dark 模式、locale 等所有 Waline 原生参数
CSS 样式(themes/aiovtue/assets/css/waline-comment.scss)输入框、卡片、头像、间距等视觉样式
服务端Waline 管理后台表情包、图片上传、反垃圾、邮件通知等

评论系统配置位置速查

你想改什么去哪里改
切换评论系统（Waline / Twikoo）hugo.toml → [params.comment] → provider
Waline 服务端地址hugo.toml → [params.waline] → serverURL
评论框占位文字hugo.toml → [params.waline] → placeholder
表情包（emoji 开关/自定义）comments.js → emoji 参数
输入框 placeholder 文字comments.js → locale 对象
评论卡片样式/颜色/间距waline-comment.scss
头像来源（Gravatar 等）Waline 服务端管理后台
图片上传/反垃圾/邮件通知Waline 服务端管理后台

二、表情面板优化

表情模板显示不全

(themes/aiovtue/assets/css/waline-comment.scss#L78) 中 .wl-panel 设置了 overflow: hidden：

scss
.wl-panel {
  margin: 0;
  border: 1px solid var(--wl-comment-input-border);
  border-radius: 12px;
  background: var(--wl-comment-card-bg);
  box-shadow: none;
  overflow: hidden;   // ← 这里裁剪了表情弹出面板
}

Waline 的表情面板是绝对定位在 .wl-panel 内部的，overflow: hidden 会把超出面板边界的内容（即表情弹出层）裁切掉。

解决方案

修改themes\aiovtue\assets\css\waline-comment.scss(77行附近)：

将

text
oldStr:   .wl-panel {
    margin: 0;
    border: 1px solid var(--wl-comment-input-border);
    border-radius: 12px;
    background: var(--wl-comment-card-bg);
    box-shadow: none;
    overflow: hidden;
  }

修改为：

text
newStr:   .wl-panel {
    margin: 0;
    border: 1px solid var(--wl-comment-input-border);
    border-radius: 12px;
    background: var(--wl-comment-card-bg);
    box-shadow: none;
    overflow: visible;
  }

三、昵称/邮箱/网址输入框优化（测试中~）

昵称/邮箱/网址输入框占位文字不显示

有两层原因：

① comments.js L397-404 Waline 初始化只传了 lang: 'zh-CN'，没有显式传 locale 对象。

在 Waline v3 中，仅靠 lang 有时不能可靠地设置输入框的 placeholder，需要显式传递 locale 对象来确保"昵称"“邮箱"“网址"等文字生效。

② waline-comment.scss L137-138 主题 CSS 隐藏了 label 标签：

scss
.wl-header label {
  display: none;
}

Waline 的默认输入框依赖 label 或 placeholder 来显示提示文字，主题选择用 placeholder 替代 label。但如果 placeholder 没有被正确设置，就什么也看不到。

解决方案

1.在 comments.js 的 Waline 初始化中添加 locale 配置。

修改themes\aiovtue\assets\js\comments.js(396行附近):

将

text
oldStr:     const instance = init({
      el: selector,
      serverURL,
      path: resolvedPath,
      lang: 'zh-CN',
      placeholder,
      dark: 'html.dark',
      emoji: true,
    })

修改为

text
newStr:     const instance = init({
      el: selector,
      serverURL,
      path: resolvedPath,
      lang: 'zh-CN',
      placeholder,
      dark: 'html.dark',
      emoji: true,
      locale: {
        nick: '昵称',
        mail: '邮箱',
        link: '网址（可选）',
        placeholder: placeholder || '分享你的想法...',
        sofa: '还没有评论，快来抢沙发吧~',
        submit: '提交',
        reply: '回复',
        cancel: '取消',
        more: '加载更多...',
        emoji: '表情',
        preview: '预览',
        uploadImage: '上传图片',
        logout: '退出登录',
        login: '登录',
        wordHint: '字数已达上限',
        anonymous: '匿名',
        level0: '路人',
        level1: '常客',
        level2: '铁粉',
        level3: '元老',
        level4: '骨灰',
        level5: '至尊',
        gif: '动图',
        gifSearchPlaceholder: '搜索动图',
        profile: '个人资料',
        sticky: '置顶',
        unsticky: '取消置顶',
        admin: '管理员',
      },
    })

2.让 placeholder 颜色更明显:

修改themes\aiovtue\assets\css\waline-comment.scss(151行附近):

将

text
oldStr:   .wl-header input::placeholder {
    color: #c0c4cc;
  }

修改为

text
              
newStr:   .wl-header input::placeholder {
    color: #8c939d;
  }