Fluid -45- 为 Waline 添加"近期评论"页面

本文最后更新于：2024年11月1日下午

近来发现邮件通知有时不灵，为了及时看到评论内容整了一个展示 Waline 近期评论的页面，本文记录操作流程。

需求

实时获取本站最新评论列表
为了不影响站点简洁和内容专注，配置单独的展示页面

实现思路

Waline API 调用获取最新评论信息
创建新 Page 展示页面
设计简洁优雅的样式

实现步骤

信息获取

API 调用：

1	`GET /api/comment?type=recent`

参数:

字段	类型	描述
count	number	返回最新评论的条数

以官网的 serverURL 为例，网页访问：

1	`http://waline.vercel.app/api/comment?type=recent&count=3`

会返回评论内容的 josn 信息：

{
  "errno": 0,
  "errmsg": "",
  "data": [
    {
      "status": "approved",
      "comment": "\u003Cp\u003E有点难登录啊\u003C/p\u003E\n",
      "link": "1.com",
      "nick": "默.小班",
      "url": "/",
      "pid": null,
      "rid": null,
      "user_id": 1124319,
      "sticky": null,
      "like": 23,
      "objectId": 810001,
      "browser": "Edge126.0",
      "os": "Android 10",
      "type": "guest",
      "label": "",
      "avatar": "http://thirdqq.qlogo.cn/ek_qqapp/AQUltdxEhz04o1zwhVBxVFqr2AdMN6mN4EkJsvkZm9zmsgOWE1fKkjPEaMYMK3aaBrGwn4FbSMib7zfib1LkL8XsjtvibPtkrufjibm5yVtfNcVicNk27Kwk/100",
      "orig": "有点难登录啊",
      "addr": "北京",
      "time": 1723288872000
    },
    {
      "status": "approved",
      "comment": "\u003Cimg alt=\"weibo_love\" src=\"//unpkg.com/@waline/emojis@1.1.0/weibo/weibo_love.png\" class=\"wl-emoji\"\u003E",
      "link": "https://blog.xdog.run/",
      "nick": "Xdog",
      "url": "/guide/deploy/vps.html",
      "pid": null,
      "rid": null,
      "user_id": 1694319,
      "sticky": null,
      "like": 0,
      "objectId": 780002,
      "browser": "Edge127.0",
      "os": "Windows 10",
      "type": "guest",
      "label": null,
      "avatar": "https://avatars.githubusercontent.com/u/86236027?v=4",
      "orig": "\u003Cimg class=\"wl-emoji\" src=\"//unpkg.com/@waline/emojis@1.1.0/weibo/weibo_love.png\" alt=\"weibo_love\"\u003E",
      "addr": "加利福尼亚",
      "time": 1723189025000
    },
    {
      "status": "approved",
      "comment": "\u003Cp\u003E我也迁移一下， LeanCloud 那个临时缓存很奇怪，会存取用户到 2000 条，导致评论加载不出来，隔一段时间就得删掉那个多出来的 Class\u003C/p\u003E\n",
      "link": "https://www.ccknbc.cc",
      "nick": "CC康纳百川",
      "url": "/",
      "pid": 270001,
      "rid": 60001,
      "user_id": 494319,
      "sticky": null,
      "like": 1,
      "objectId": 750001,
      "browser": "Edge127.0",
      "os": "Windows 11",
      "type": "guest",
      "label": "CC",
      "avatar": "https://avatars.githubusercontent.com/u/62093618?v=4",
      "orig": "我也迁移一下， LeanCloud 那个临时缓存很奇怪，会存取用户到 2000 条，导致评论加载不出来，隔一段时间就得删掉那个多出来的 Class",
      "addr": "",
      "time": 1722962581000
    }
  ]
}

网页代码

直球，替换 apiUrl 为自己的 waline Url 即可：

<style>
  body {
    font-family: Arial, sans-serif;
  }
  .comment-container {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
  }
  .comment-info {
    color: #666;
    font-size: 0.9em;
  }
  .comment-text {
    margin-top: 10px;
  }
  .comment-text a {
    color: #009baf; /* 确保链接颜色一致 */
    text-decoration: none; /* 移除下划线 */
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    vertical-align: middle;
  }
  .comment-link {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 0px;
  }
  .comment-link a {
    color: #999; /* 设置链接颜色更浅 */
    font-size: 0.8em; /* 设置链接字体更小 */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
  }
  .comment-link a:hover {
    color: #444; /* 鼠标悬停时颜色加深 */
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
  }
  .wl-emoji {
    display: inline-block;
    vertical-align: baseline;
    height: 1.25em;
    margin: -.125em .25em
  }
  #comments-intro {
    margin-bottom: 20px; /* 在标题和评论列表之间添加一些空间 */
    font-size: 1.5em; /* 增加字体大小 */
    color: #333; /* 深色字体，以便与背景形成对比 */
    font-weight: bold; /* 加粗字体 */
    text-align: left; 
  }
</style>



<script>
    // API URL
const apiUrl = 'http://waline.vercel.app/api/comment?type=recent&count=20';
// Function to create comment element
function createCommentElement(comment) {
  return `
    <div class="comment-container">
      <div>
        <strong>${comment.nick}</strong>
        <div class="comment-info">
          ${new Date(comment.time).toLocaleString()} |${comment.browser} | ${comment.os} |${comment.addr}
        </div>
        <div class="comment-text">${comment.comment}</div>
        <div class="comment-link"> <a href='${comment.url}'>查看原文</a> </div>
      </div>
    </div>
  `;
}
// Fetch comments and display them
fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
    const commentsContainer = document.getElementById('comments');
    data.data.forEach(comment => {
        console.log(comment);
      commentsContainer.innerHTML += createCommentElement(comment);
    });
  })
  .catch(error => {
    console.error('Fetching data failed:', error);
  });
</script>

<div id="comments"></div>

Fluid 页面配置

在 Hexo/source/ 创建文件夹 reccomments，其中创建 index.md 文件，写入文件头：

---
title: 小站近期评论
date: 2022-06-16 18:19:19
type: "reccomments"
layout: "reccomments"
comments: false
---

再加上上述网页代码。

Fluid layout 配置

在 Hexo/themes/fluid/layout 文件夹中加入 reccomments.ejs 文件：

<%
page.layout = "近期评论"
page.title = theme.reccomments.title || __('小站近期评论')
page.subtitle = ""
page.banner_img = theme.reccomments.banner_img
page.banner_img_height = theme.reccomments.banner_img_height
page.banner_mask_alpha = theme.reccomments.banner_mask_alpha
%>

<article class="page-content">
  <%- page.content %>

  <%- inject_point('pageComments') %>
</article>

<% if (/<[^>]+? class="[^"]*?markdown-body[^"]*?"/gims.test(page.content)) { %>
  <%- partial('_partials/markdown-plugins') %>
<% } %>

Fluid config 配置

修改 Hexo/_config.fluid.yml配置文件

加入 reccomments: 配置

reccomments:
  title: "近期评论"
  enable: true
  banner_img: https://uipv4.zywvvd.com:33030/HexoFiles/new/bg-trans.png
  banner_img_height: 50
  banner_mask_alpha: 0