feat(blog): 添加博客工具函数以处理文章数据和分类标签

fix(blog): 删除不再使用的博客工具函数文件

src/components/blog/Comments.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
 import type { WalineInstance, WalineInitOptions } from '@waline/client';
 import { init } from '@waline/client';
 import '@waline/client/style';
+import '@/styles/waline-custom.css';
 
 import type { Lang } from '@/types/i18n';
 
@@ -28,6 +29,8 @@ export default function Comments({ lang = 'en', ...props }: CommentsProps) {
       serverURL: import.meta.env.PUBLIC_WALINE_SERVER_URL,
       lang: walineLang,
       dark: getTheme(),
+      pageview: true,
+      comment: true,
       path,
     });
 

src/styles/waline-custom.css

@@ -0,0 +1,342 @@
+/**
+ * Waline Custom Styles
+ * 适配网站主题风格 - 紫色渐变主题
+ */
+
+/* ========== 基础变量覆盖 ========== */
+:root {
+  /* 主题色 - 使用网站的紫色渐变accent */
+  --waline-theme-color: #8B5CF6;
+  --waline-active-color: #EC4899;
+
+  /* 背景色 */
+  --waline-bg-color: oklch(1 0 0);
+  --waline-bg-color-light: oklch(0.97 0 0);
+  --waline-bg-color-hover: oklch(0.93 0 0);
+
+  /* 文字颜色 */
+  --waline-color: oklch(0.4 0 0);
+  --waline-light-grey: oklch(0.65 0 0);
+  --waline-dark-grey: oklch(0.3 0 0);
+
+  /* 边框颜色 */
+  --waline-border-color: oklch(0.87 0 0);
+
+  /* 其他颜色 */
+  --waline-badge-color: #8B5CF6;
+  --waline-info-bg-color: oklch(0.97 0 0);
+  --waline-info-color: oklch(0.55 0 0);
+  --waline-bq-color: oklch(0.93 0 0);
+
+  /* 代码块背景 */
+  --waline-code-bg-color: oklch(0.25 0 0);
+
+  /* 圆角 - 与网站一致 */
+  --waline-border-radius: var(--radius, 0.75rem);
+
+  /* 阴影 */
+  --waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
+
+  /* 头像圆角 - 使用网站风格 */
+  --waline-avatar-radius: var(--radius-md, 0.5rem);
+
+  /* 按钮样式 */
+  --waline-btn-radius: var(--radius, 0.75rem);
+}
+
+/* ========== 暗黑模式 ========== */
+.dark {
+  --waline-bg-color: oklch(0.205 0 0);
+  --waline-bg-color-light: oklch(0.269 0 0);
+  --waline-bg-color-hover: oklch(0.32 0 0);
+
+  --waline-color: oklch(0.9 0 0);
+  --waline-light-grey: oklch(0.6 0 0);
+  --waline-dark-grey: oklch(0.75 0 0);
+
+  --waline-border-color: oklch(1 0 0 / 15%);
+
+  --waline-info-bg-color: oklch(0.269 0 0);
+  --waline-info-color: oklch(0.6 0 0);
+  --waline-bq-color: oklch(0.269 0 0);
+
+  --waline-code-bg-color: oklch(0.12 0 0);
+
+  --waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
+}
+
+/* ========== 评论面板样式 ========== */
+.wl-panel {
+  border-radius: var(--waline-border-radius) !important;
+  border: 1px solid var(--waline-border-color) !important;
+  box-shadow: var(--waline-box-shadow) !important;
+  background: var(--waline-bg-color) !important;
+}
+
+/* ========== 输入框样式 ========== */
+.wl-header {
+  border-bottom-color: var(--waline-border-color) !important;
+}
+
+.wl-header label {
+  color: var(--waline-color) !important;
+}
+
+.wl-header input {
+  background: transparent !important;
+}
+
+.wl-editor {
+  background: var(--waline-bg-color-light) !important;
+  border-radius: var(--waline-btn-radius) !important;
+}
+
+.wl-editor:focus {
+  background: var(--waline-bg-color-hover) !important;
+}
+
+/* ========== 按钮样式 ========== */
+.wl-btn {
+  border-radius: var(--waline-btn-radius) !important;
+  font-size: 0.875em !important;
+  transition: all 0.2s ease !important;
+}
+
+.wl-btn:hover {
+  border-color: var(--waline-theme-color) !important;
+  color: var(--waline-theme-color) !important;
+  background: var(--waline-bg-color-light) !important;
+}
+
+.wl-btn.primary {
+  background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
+  border: none !important;
+  color: white !important;
+  font-weight: 500 !important;
+}
+
+.wl-btn.primary:hover {
+  background: linear-gradient(135deg, #7C3AED, #DB2777) !important;
+  border: none !important;
+  color: white !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+
+/* ========== 头部标签页 ========== */
+.wl-header label {
+  transition: all 0.2s ease !important;
+}
+
+.wl-header label:hover {
+  background: var(--waline-bg-color-light) !important;
+}
+
+/* ========== 评论卡片样式 ========== */
+.wl-card {
+  border-bottom-color: var(--waline-border-color) !important;
+}
+
+.wl-card:first-child {
+  margin-inline-start: 0 !important;
+}
+
+.wl-nick {
+  color: var(--waline-color) !important;
+}
+
+.wl-time {
+  color: var(--waline-info-color) !important;
+}
+
+.wl-content {
+  color: var(--waline-color) !important;
+  line-height: 1.8 !important;
+}
+
+/* ========== 徽章样式 ========== */
+.wl-badge {
+  background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
+  border: none !important;
+  color: white !important;
+  font-size: 0.7em !important;
+  padding: 2px 8px !important;
+  border-radius: 9999px !important;
+}
+
+/* ========== 操作按钮 ========== */
+.wl-action {
+  color: var(--waline-light-grey) !important;
+  transition: all 0.2s ease !important;
+}
+
+.wl-action:hover {
+  color: var(--waline-theme-color) !important;
+  transform: scale(1.1);
+}
+
+.wl-action.active {
+  color: var(--waline-active-color) !important;
+}
+
+/* ========== 评论操作 ========== */
+.wl-delete:hover,
+.wl-like:hover,
+.wl-reply:hover,
+.wl-edit:hover {
+  color: var(--waline-theme-color) !important;
+}
+
+.wl-delete.active,
+.wl-like.active,
+.wl-reply.active,
+.wl-edit.active {
+  color: var(--waline-active-color) !important;
+}
+
+/* ========== 排序按钮 ========== */
+.wl-sort li {
+  color: var(--waline-info-color) !important;
+  transition: all 0.2s ease !important;
+}
+
+.wl-sort li:hover {
+  color: var(--waline-theme-color) !important;
+}
+
+.wl-sort li.active {
+  color: var(--waline-theme-color) !important;
+  font-weight: 600;
+}
+
+/* ========== 表情弹窗 ========== */
+.wl-emoji-popup {
+  border-radius: var(--waline-border-radius) !important;
+  box-shadow: var(--waline-box-shadow) !important;
+  background: var(--waline-bg-color) !important;
+  border: 1px solid var(--waline-border-color) !important;
+}
+
+.wl-emoji-popup .wl-tab.active {
+  background: var(--waline-bg-color-light) !important;
+}
+
+.wl-emoji-popup button:hover {
+  background: var(--waline-bg-color-hover) !important;
+}
+
+/* ========== GIF 弹窗 ========== */
+.wl-gif-popup {
+  border-radius: var(--waline-border-radius) !important;
+  box-shadow: var(--waline-box-shadow) !important;
+  background: var(--waline-bg-color) !important;
+  border: 1px solid var(--waline-border-color) !important;
+}
+
+/* ========== 评论统计 ========== */
+.wl-count {
+  color: var(--waline-theme-color) !important;
+  font-size: 1.5em !important;
+  font-weight: 700 !important;
+}
+
+/* ========== 空状态 ========== */
+.wl-empty {
+  color: var(--waline-info-color) !important;
+}
+
+/* ========== 头像样式 ========== */
+.wl-avatar {
+  border-radius: var(--waline-avatar-radius) !important;
+  border: 2px solid var(--waline-border-color) !important;
+  box-shadow: var(--waline-box-shadow) !important;
+}
+
+/* ========== 回复引用框 ========== */
+.wl-quote {
+  border-left-color: var(--waline-border-color) !important;
+}
+
+/* ========== 预览区域 ========== */
+.wl-preview .wl-content {
+  background: var(--waline-bg-color-light) !important;
+  border-radius: var(--waline-btn-radius) !important;
+}
+
+/* ========== 反应区域 ========== */
+.wl-reaction-title {
+  color: var(--waline-color) !important;
+}
+
+.wl-reaction-item.active .wl-reaction-text {
+  color: var(--waline-theme-color) !important;
+}
+
+.wl-reaction-votes {
+  border-color: var(--waline-theme-color) !important;
+  color: var(--waline-theme-color) !important;
+}
+
+.wl-reaction-item.active .wl-reaction-votes {
+  background: var(--waline-theme-color) !important;
+  color: white !important;
+}
+
+/* ========== 加载动画 ========== */
+.wl-loading svg {
+  color: var(--waline-theme-color) !important;
+}
+
+/* ========== 滚动条样式 ========== */
+[data-waline] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+[data-waline] ::-webkit-scrollbar-track-piece {
+  background: var(--waline-bg-color-light);
+  border-radius: 3px;
+}
+
+[data-waline] ::-webkit-scrollbar-thumb {
+  background: var(--waline-theme-color);
+  border-radius: 3px;
+}
+
+[data-waline] ::-webkit-scrollbar-thumb:hover {
+  background: var(--waline-active-color);
+}
+
+/* ========== 链接样式 ========== */
+[data-waline] a {
+  color: var(--waline-theme-color) !important;
+  text-decoration: none !important;
+  transition: all 0.2s ease !important;
+}
+
+[data-waline] a:hover {
+  color: var(--waline-active-color) !important;
+}
+
+/* ========== 代码块样式 ========== */
+.wl-content pre,
+.wl-content pre[class*="language-"] {
+  background: var(--waline-code-bg-color) !important;
+  border-radius: var(--waline-btn-radius) !important;
+}
+
+/* ========== 移动端适配 ========== */
+@media (max-width: 640px) {
+  .wl-panel {
+    border-radius: var(--radius-md, 0.5rem) !important;
+  }
+
+  .wl-btn {
+    font-size: 0.8em !important;
+    padding: 0.4em 0.8em !important;
+  }
+
+  .wl-editor {
+    min-height: 6em !important;
+  }
+}