Hiển thị bình luận mới nhất thông qua API Waline

1
/**
2
 * Lấy và xử lý dữ liệu bình luận mới nhất
3
 * Lấy bình luận mới nhất thông qua Waline API và định dạng hiển thị
4
 */
5

6
// Định nghĩa interface cho dữ liệu bình luận
7
interface WalineComment {
8
  nick: string;        // Tên hiệu người bình luận
9
  comment: string;     // Nội dung bình luận
10
  url: string;         // URL trang bình luận
11
  avatar: string;      // URL avatar
12
  time: number;        // Timestamp thời gian bình luận
13
  like?: number;       // Số lượt thích
14
  addr?: string;       // Địa chỉ
15
}
16

17
// Định nghĩa interface cho phản hồi API
18
interface WalineResponse {
19
  data: WalineComment[];
20
}
21

22
/**
23
 * Lấy dữ liệu bình luận mới nhất
24
 * @param limit Giới hạn số lượng bình luận
25
 * @returns Dữ liệu bình luận đã được định dạng
26
 */
27
export async function fetchRecentComments(limit: number = 5): Promise<WalineComment[]> {
28
  try {
29
    // Địa chỉ backend Waline Hãy thay thế phần này bằng địa chỉ dịch vụ backend Waline bạn <!-- [!code highlight:2] -->
30
    const response = await fetch('https://<Waline Domain của bạn>/api/comment?type=recent');
31
    if (!response.ok) {
32
      throw new Error(`Lấy bình luận thất bại: ${response.status}`);
33
    }
34

35
    const data: WalineResponse = await response.json();
36
    return data.data.slice(0, limit);
37
  } catch (error) {
38
    console.error('Lỗi khi lấy bình luận mới nhất:', error);
39
    return [];
40
  }
41
}
42

43
/**
44
 * Định dạng thời gian bình luận
45
 * @param timestamp Timestamp
46
 * @returns Chuỗi thời gian đã định dạng
47
 */
48
export function formatCommentTime(timestamp: number): string {
49
  const date = new Date(timestamp);
50
  const now = new Date();
51
  const diff = now.getTime() - date.getTime();
52

53
  // Trong vòng một phút
54
  if (diff < 60 * 1000) {
55
    return 'Vừa xong';
56
  }
57

58
  // Trong vòng một giờ
59
  if (diff < 60 * 60 * 1000) {
60
    return `${Math.floor(diff / (60 * 1000))} phút trước`;
61
  }
62

63
  // Trong vòng một ngày
64
  if (diff < 24 * 60 * 60 * 1000) {
65
    return `${Math.floor(diff / (60 * 60 * 1000))} giờ trước`;
66
  }
67

68
  // Trong vòng một tuần
69
  if (diff < 7 * 24 * 60 * 60 * 1000) {
70
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))} ngày trước`;
71
  }
72

73
  // Các trường hợp khác hiển thị ngày cụ thể
74
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
75
}
76

77
/**
78
 * Làm sạch thẻ HTML
79
 * @param html Chuỗi HTML
80
 * @returns Văn bản thuần đã được làm sạch
81
 */
82
export function stripHtml(html: string): string {
83
  // Sử dụng biểu thức chính quy thay thế thao tác DOM, có thể chạy ở phía server
84
  return html.replace(/<[^>]*>/g, '');
85
}
86

87
/**
88
 * Cắt ngắn văn bản
89
 * @param text Văn bản gốc
90
 * @param length Độ dài tối đa
91
 * @returns Văn bản đã được cắt ngắn
92
 */
93
export function truncateText(text: string, length: number = 100): string {
94
  if (text.length <= length) return text;
95
  return text.substring(0, length) + '...';
96
}

1
/* Kiểu thành phần bình luận mới nhất */
2
.recent-comments {
3
  background-color: hsl(var(--background) / var(--un-bg-opacity, 1));
4
  border: 1px solid hsl(var(--border) / var(--un-border-opacity, 1));
5
  border-radius: var(--radius);
6
  padding: 1rem;
7
  margin-bottom: 1.5rem;
8
  margin-top: 0;
9
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
10
}
11

12
.recent-comments-title {
13
  font-size: 1.2rem;
14
  font-weight: 500;
15
  margin-bottom: 1rem;
16
  color: hsl(var(--foreground) / var(--un-text-opacity, 1));
17
  display: flex;
18
  align-items: center;
19
  gap: 0.5rem;
20
}
21

22
.recent-comments-title svg {
23
  width: 1.2rem;
24
  height: 1.2rem;
25
}
26

27
.comment-list {
28
  display: flex;
29
  flex-direction: column;
30
  gap: 1rem;
31
}
32

33
.comment-item {
34
  display: flex;
35
  gap: 0.75rem;
36
  padding-bottom: 1rem;
37
  border-bottom: 1px solid hsl(var(--border) / 0.5);
38
}
39

40
.comment-item:last-child {
41
  border-bottom: none;
42
  padding-bottom: 0;
43
}
44

45
.comment-avatar {
46
  width: 2.5rem;
47
  height: 2.5rem;
48
  border-radius: 50%;
49
  overflow: hidden;
50
  flex-shrink: 0;
51
}
52

53
.comment-avatar img {
54
  width: 100%;
55
  height: 100%;
56
  object-fit: cover;
57
}
58

59
.comment-content {
60
  flex: 1;
61
  min-width: 0;
62
}
63

64
.comment-meta {
65
  display: flex;
66
  justify-content: space-between;
67
  align-items: center;
68
  margin-bottom: 0.25rem;
69
}
70

71
.comment-author {
72
  font-weight: 500;
73
  color: hsl(var(--foreground) / var(--un-text-opacity, 1));
74
  font-size: 0.9rem;
75
  white-space: nowrap;
76
  overflow: hidden;
77
  text-overflow: ellipsis;
78
}
79

80
.comment-time {
81
  font-size: 0.8rem;
82
  color: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
83
}
84

85
.comment-text {
86
  font-size: 0.9rem;
87
  color: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
88
  line-height: 1.5;
89
  overflow: hidden;
90
  text-overflow: ellipsis;
91
  display: -webkit-box;
92
  -webkit-line-clamp: 2;
93
  -webkit-box-orient: vertical;
94
  word-break: break-word;
95
}
96

97
.comment-link {
98
  display: block;
99
  font-size: 0.8rem;
100
  color: hsl(var(--primary) / var(--un-text-opacity, 1));
101
  margin-top: 0.25rem;
102
  text-decoration: none;
103
  transition: opacity 0.2s;
104
}
105

106
.comment-link:hover {
107
  opacity: 0.8;
108
}
109

110
.comment-empty {
111
  text-align: center;
112
  padding: 1rem 0;
113
  color: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
114
  font-size: 0.9rem;
115
}
116

117
/* Thiết kế đáp ứng */
118
@media (max-width: 768px) {
119
  .comment-avatar {
120
    width: 2rem;
121
    height: 2rem;
122
  }
123

124
  .comment-author {
125
    font-size: 0.85rem;
126
  }
127

128
  .comment-time {
129
    font-size: 0.75rem;
130
  }
131

132
  .comment-text {
133
    font-size: 0.85rem;
134
    -webkit-line-clamp: 2;
135
  }
136
}

1
---
2
import { fetchRecentComments, formatCommentTime, stripHtml, truncateText } from '@/plugins/recentcomment';
3
import { Icon } from 'astro/user';
4

5
// Lấy dữ liệu bình luận mới nhất
6
const comments = await fetchRecentComments(5);
7
---
8

9
<div class="recent-comments">
10
  <div class="recent-comments-title">
11
    <Icon name="list" />
12
    <span>Bình luận mới nhất</span>
13
  </div>
14

15
  <div class="comment-list">
16
    {comments.length > 0 ? (
17
      comments.map((comment) => (
18
        <div class="comment-item">
19
          <div class="comment-avatar">
20
            <img src={comment.avatar} alt={comment.nick} loading="lazy" />
21
          </div>
22
          <div class="comment-content">
23
            <div class="comment-meta">
24
              <span class="comment-author">{comment.nick}</span>
25
              <span class="comment-time">{formatCommentTime(comment.time)}</span>
26
            </div>
27
            <div class="comment-text" set:html={truncateText(stripHtml(comment.comment), 100)} />
28
            <a href={comment.url ? comment.url.replace(/\/$/, '') : '#'} class="comment-link">Xem chi tiết →</a>
29
          </div>
30
        </div>
31
      ))
32
    ) : (
33
      <div class="comment-empty">Chưa có dữ liệu bình luận</div>
34
    )}
35
  </div>
36
</div>
37

38
<script>
39
  // Dọn dẹp thẻ HTML phía client
40
  document.addEventListener('astro:page-load', () => {
41
    const commentTexts = document.querySelectorAll('.comment-text');
42
    commentTexts.forEach(element => {
43
      // Đảm bảo liên kết mở trong cửa sổ mới
44
      const links = element.querySelectorAll('a');
45
      links.forEach(link => {
46
        link.setAttribute('target', '_blank');
47
        link.setAttribute('rel', 'noopener noreferrer');
48
      });
49
    });
50
  });
51
</script>
52

53
<style is:global>
54
  @import '@/assets/styles/rc.css';
55
</style>

1
---
2
import RecentComments from '@/components/RecentComments.astro' //Nhập thành phần # [!code ++]
3
---
4

5
<PageLayout meta={{ title: 'Home' }} highlightColor='#FFF8DC'>
6
  <main class='flex w-full flex-col items-center'>
7
    <div id='content' class='animate flex flex-col md:flex-row gap-y-10 md:gap-x-6 md:w-4/5 lg:w-5/6'>
8
    <!--RecentComments-->
9
        <div class='md:w-1/3 md:mt-0'> # [!code ++]
10
        <RecentComments /> # [!code ++]
11
        </div> # [!code ++]
12
      <!--RecentComments-->
13
    </div>
14
    <Quote class='mt-12' />
15
  </main>
16
</PageLayout>