liaoxin/kjweiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.12 — 评论区重构

Browse Source 
- 自定义评论列表，支持嵌套回复显示
- 回复显示 @作者名 + 左侧虚线缩进
- 评论时间中文化 Y-m-d H:i:s，无 at 后缀
- 清理 CSS 冲突和残留规则
- 回复标题/按钮样式优化
This commit is contained in:
了心
2026-05-04 14:21:38 +08:00
parent 3c220cf468
commit e2b31e9a4b
2 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+39 -28
View File
@@ -142,10 +142,10 @@ Text Domain: kj-weji
/* 留言板 */
.comments-section { margin-top:48px; border-top:1px solid var(--border-light); padding-top:32px; }
.comments-section h3 { font-size:18px; font-weight:600; letter-spacing:0.08em; margin-bottom:20px; }
.comment-item { padding:16px 0; border-bottom:1px solid var(--border-light); }
.comment-item .comment-author { font-size:14px; font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.comment-item .comment-time { font-size:11px; color:var(--ink-lighter); }
.comment-item .comment-body { font-size:14px; color:var(--ink-light); margin-top:6px; line-height:1.8; }
.comment-form { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.comment-form textarea { width:100%; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--white); font-family:inherit; font-size:14px; color:var(--ink); resize:vertical; min-height:80px; }
.comment-form button { align-self:flex-end; background:var(--cinnabar); color:#fff; border:none; padding:8px 24px; border-radius:20px; cursor:pointer; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:13px; transition:background 0.2s; }
@@ -569,31 +569,42 @@ echo "done"
.login-modal__btn--go { background:var(--cinnabar); color:#fff; }
.login-modal__btn--go:hover { background:#a03a32; }
.comment-list li { list-style:none; padding:14px 0; border-bottom:1px solid var(--border-light); }
.comment-list .comment-body p { margin:4px 0; font-size:14px; color:var(--ink-light); line-height:1.8; }
.comment-list .comment-author { font-size:13px; font-weight:600; }
.comment-list .comment-author img { width:22px !important; height:22px !important; border-radius:50% !important; object-fit:cover !important; vertical-align:middle; margin-right:4px; }
.comment-list .comment-metadata { font-size:11px; color:var(--ink-lighter); }
.comment-list .comment-metadata a { color:var(--ink-lighter); text-decoration:none; }
.comment-list .reply { font-size:12px; }
.comment-list .reply a { color:var(--cinnabar); text-decoration:none; }
.comment-list .comment-respond { margin-top:12px; padding:12px; background:var(--paper-warm); border-radius:var(--radius); }
.comment-list .children { margin-left:24px; padding-left:0; border-left:2px solid var(--border-light); }
.comment-list .children li { border-bottom:none; }
.comment-reply-title { font-size:15px !important; font-weight:400 !important; letter-spacing:0.04em !important; margin-bottom:16px !important; }
.comment-reply-title a:not(#cancel-comment-reply-link) { color:var(--ink) !important; text-decoration:none !important; font-size:14px; font-weight:600; }
.comment-reply-title a:hover { color:var(--cinnabar) !important; }
#cancel-comment-reply-link { margin-left:12px; font-size:12px !important; color:var(--ink-lighter) !important; text-decoration:none !important; }
#cancel-comment-reply-link:hover { color:var(--cinnabar) !important; }
.comment-item { padding:14px 0; border-bottom:1px solid var(--border-light); list-style:none; }
.comment-item__meta { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.comment-avatar { width:22px !important; height:22px !important; border-radius:50% !important; object-fit:cover !important; }
/* 评论列表 */
.comment-item { padding:10px 0; border-bottom:1px dashed var(--border-light); list-style:none; }
.comment-item:last-child { border-bottom:none; }
.comment-item__meta { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.comment-avatar { width:18px !important; height:18px !important; border-radius:50% !important; object-fit:cover !important; }
.comment-item__author { font-size:13px; font-weight:600; }
.comment-item__replyto { font-size:11px; color:var(--cinnabar); }
.comment-item__time { font-size:11px; color:var(--ink-lighter); }
.comment-item__text { font-size:14px; color:var(--ink-light); line-height:1.8; }
.comment-item__reply { margin-top:4px; }
.comment-item__reply a { font-size:12px; color:var(--cinnabar); text-decoration:none; }
.comment-item__reply a:hover { color:var(--cinnabar-light); }
.comment-item__text { font-size:14px; color:var(--ink-light); line-height:1.7; }
.comment-item__reply { font-size:12px; }
.comment-item__reply a { color:var(--cinnabar); text-decoration:none; }
.comment-item--reply { margin-left:18px; padding:6px 0 6px 10px; border-bottom:1px dashed var(--border-light); border-left:1px dashed var(--border-light); }
.comment-item--reply:last-child { border-bottom:none; }