[优化] 最新版Waline客户端存在CSS样式问题

[rqh656418510]

问题描述 | Describe the bug

问题一：用户登录后，头像显示的不是圆形头像

问题二：在文章页面的最底部回复评论时，表情包区域会出现显示不全的问题，使用的主题是 NexT 8.4

部署方式 | Deploy Type

• 服务部署在哪里？ | Where your waline deploy?
  • [ ] Vercel
  • [ ] CloudBase
  • [x] Docker
  • [ ] VPS, Virtual Host
  • [ ] Other
• 数据存储在哪里？| Where your comment data store?
  • [ ] LeanCloud(https://leancloud.app)
  • [ ] LeanCloud(https://leancloud.cn)
  • [ ] CloudBase
  • [ ] MongoDB
  • [x] MySQL
  • [ ] SQLite
  • [ ] PostgreSQL
  • [ ] GitHub

[Mister-Hope]

Roger that. The second one should be a bug, I will fix it very soon.

The fisrt one actually, is expected. The gravatar is suqare. And quite a lot of website is displaying square avatar. E.g.:

Evan You's gravatar, screenshot on npm

But as a enhancement, I also agree that users should be able to config easily to get a round avatar. This will be added in newer version.

---

Translation:

收到。 第二个应该是一个错误，我会尽快修复。

实际上，第一个是预期的。 Gravatar本身就是方形的，很多网站也同样直接展示方形的头像。 例如：

尤雨溪的头像，npm上的屏幕截图

但是，作为增强，我也同意用户应该能够轻松配置以获得圆形头像。 这将在较新的版本中添加。

[rqh656418510]

在最新版本的 Waline 客户端中，表情包图片新增了 class="vemoji" 样式，由于数据库中旧的评论记录缺少该样式，这会导致新旧评论的表情包图片显示大小不一致；同理，评论管理页面中的表情包图片与文章页面上的表情包图片显示大小也不一致

[Mister-Hope]

在最新版本的 Waline 客户端中，表情包图片新增了 class="vemoji" 样式，由于数据库中旧的评论记录缺少该样式，这会导致新旧评论的表情包图片显示大小不一致；同理，评论管理页面中的表情包图片与文章页面上的表情包图片显示大小也不一致

这是一个旧版本的问题了，锅应该扣在@lizheming大哥的头上。他最开始完全转义HTML，导致他只能用image标签，这样用户如果自定义比较大分辨率的表情包就是会显示的很大。新版修复了这个问题，但没法对老的做修复。

如果实在需要修复的话，只能制作一个迁移助手，全部导出处理后再导入，原因如下：

旧的emoji只用img标签，没有任何的class，这样无法通过css进行选中。

如果使用css选中img标签的话，会使得正常插入评论中的图片变得跟字一样大，这显然是不合理的。

[Mister-Hope]

今天很忙，明天我尽快修复你反馈的头两个问题。😉

[rqh656418510]

在最新版本的 Waline 客户端中，表情包图片新增了 class="vemoji" 样式，由于数据库中旧的评论记录缺少该样式，这会导致新旧评论的表情包图片显示大小不一致；同理，评论管理页面中的表情包图片与文章页面上的表情包图片显示大小也不一致

这是一个旧版本的问题了，锅应该扣在@lizheming大哥的头上。他最开始完全转义HTML，导致他只能用image标签，这样用户如果自定义比较大分辨率的表情包就是会显示的很大。新版修复了这个问题，但没法对老的做修复。

如果实在需要修复的话，只能制作一个迁移助手，全部导出处理后再导入，原因如下：

旧的emoji只用img标签，没有任何的class，这样无法通过css进行选中。

如果使用css选中img标签的话，会使得正常插入评论中的图片变得跟字一样大，这显然是不合理的。

文章页面新旧版表情包图片大小的显示问题，已经通过SQL手动维护旧的评论数据解决了，但评论后台管理页面缺少了 vemoji 的 CSS 样式，希望这个也能加上，否则评论后台管理页面中的 class="vemoji" 不生效

[lizheming]

啊这，怎么就背上锅了... 没有 class 也是可以控制样式的呀... 之前我都是让大家这么设置样式的 😂

.v img[src^=https://img.t.sinajs.cn] {
    width: 1.25em;
    margin: .25em;
}

[Mister-Hope]

啊这，怎么就背上锅了... 没有 class 也是可以控制样式的呀... 之前我都是让大家这么设置样式的 😂

.v img[src^=https://img.t.sinajs.cn] {
    width: 1.25em;
    margin: .25em;
}

长见识了，我是第一次知道css的属性子串选择器

[Mister-Hope]

我把它加到文档里吧

[Mister-Hope]

@lizheming emoji表情可能是 next主题的最外层div设置了 overflow:hidden?有空的时候可以排查一下。目前@waline/client自己是没有问题的。

[Mister-Hope]

 .v img[src^=https://img.t.sinajs.cn] {
   width: 1.25em;
     margin: .25em;
 }

我把它加到文档里吧

另外旧版本emoji兼容已经添加到文档中。

[Mister-Hope]

头像问题已于 https://github.com/lizheming/waline/commit/b9dc2c6a044dff0bfa1beb860b2c8044f7dee764 修复

[YiHui-Liu]

啊这，怎么就背上锅了... 没有 class 也是可以控制样式的呀... 之前我都是让大家这么设置样式的 😂

.v img[src^=https://img.t.sinajs.cn] {
    width: 1.25em;
    margin: .25em;
}

我需要使用.v[data-class='v'] .vcontent img[src^="https://img.t.sinajs.cn"]（加上引号）才有作用，是否为个例？ 然后可以添加vertical-align: middle;属性

[Mister-Hope]

@YiHui-Liu 感谢指正，已在文档中更正。

[Mister-Hope]

@lizheming emoji表情可能是 next主题的最外层div设置了 overflow:hidden?有空的时候可以排查一下。目前@waline/client自己是没有问题的。

@rqh656418510 有空的话可以帮忙定位一下这个问题，或者给一个可以复现的网页链接。我这边复现不了。

[clay-world]

@lizheming emoji表情可能是 next主题的最外层div设置了 overflow:hidden?有空的时候可以排查一下。目前@waline/client自己是没有问题的。

@rqh656418510 有空的话可以帮忙定位一下这个问题，或者给一个可以复现的网页链接。我这边复现不了。

抱歉，这边暂时定位不了问题，不过在这篇博客 https://www.techgrow.cn/posts/ccd6f2d4.html 里可以复现

[Mister-Hope]

@clay-world

.comments 的 overflow: hidden 影响了正常显示。

这样所有的问题均已被修复或解决，等待 @lizheming 有空的时候发新版本。

[lizheming]

@Mister-Hope @waline/client@0.17.0 已发布