找回密码
 立即注册
首页 业界区 安全 博客评论区优化

博客评论区优化

虾氲叱 2025-11-26 17:15:05
拯救“瞎眼”评论区 —— 麋鹿鲁哟主题 CSS 护眼补丁

首先声明并感谢 麋鹿鲁哟 博主,主题来自大神,整体体验很棒!
本文仅针对评论区阅读体验做小修小补,如果你也被字小、色浅、透明背景折磨到眼瞎,欢迎直接抄作业。
改造前后对比

改造前改造后
1.png
2.png
背景全透、字细色浅、对比度低白底黑字、16 px、500 字重,头像保留一句话:牺牲少许“仙气”,换来“不瞎”
快速上手(3 步)


  • 进入博客园后台 → 设置页面定制 CSS
  • 把滚动条拉到最底部。
  • 复制下方代码 → 粘贴 → 保存 → Ctrl + F5 强刷生效。
护眼补丁代码
  1. /* ===== 评论区高对比度护眼版 ===== */
  2. .feedbackCon {
  3.     color: #000 !important;
  4.     background: #ffffff !important;
  5.     border-radius: 8px;
  6.     padding: 18px !important;
  7.     margin-bottom: 18px !important;
  8.     line-height: 1.8 !important;
  9.     font-size: 16px !important;
  10.     border: 3px solid #e2e8f0 !important;
  11.     box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  12.     font-weight: 500 !important;
  13.     text-shadow: none !important;
  14.     -webkit-font-smoothing: antialiased !important;
  15.     -moz-osx-font-smoothing: grayscale !important;
  16. }
  17. .blog_comment_body {
  18.     color: #000 !important;
  19.     font-size: 16px !important;
  20.     line-height: 1.8 !important;
  21.     font-weight: 500 !important;
  22.     letter-spacing: 0.2px !important;
  23.     text-shadow: none !important;
  24. }
  25. /* 头像保留 */
  26. .comment-avatar {
  27.     display: block !important;
  28.     width: 48px !important;
  29.     height: 48px !important;
  30.     border: 1px solid #dcd6b3 !important;
  31.     padding: 3px !important;
  32.     border-radius: 50% !important;
  33.     float: left !important;
  34.     margin-right: 15px !important;
  35.     transition: transform .5s;
  36. }
  37. .comment-avatar:hover {
  38.     transform: rotateZ(360deg) !important;
  39. }
  40. /* 楼主张显 */
  41. .louzhu {
  42.     background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
  43.     color: #fff !important;
  44.     padding: 3px 10px !important;
  45.     border-radius: 15px !important;
  46.     font-size: 12px !important;
  47.     font-weight: bold !important;
  48. }
复制代码
还能再调?

需求改法字号再大font-size: 18px !important;字再黑color: #111 !important;圆角变小border-radius: 4px !important;结语

“仙气”与“护眼”不可兼得时,我选后者。
如果你也折腾出更好看的配色,欢迎来评论区反向种草!
再次感谢麋鹿鲁哟大神,让博客园也能拥有高颜值。
本文补丁仅作个人记录与分享,眼不瞎就是胜利 ✌️
[code][/code]
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

相关推荐

您需要登录后才可以回帖 登录 | 立即注册