jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
7.11k stars 1.29k forks source link

Valine评论框背景样式未能正确加载 #277

Closed constown closed 4 years ago

constown commented 4 years ago

I want to create a Bug report

Butterfly Information

Butterfly Version: 2020.7.18最新的dev版本

Platform: windows

Browser: 谷歌浏览器

Expected behavior

valine评论框背景修改!

Snipaste_2020-07-18_23-31-09

Actual behavior

Snipaste_2020-07-18_23-33-39

Steps to reproduce the behavior

主题配置文件设置: image

bg: /images/comment_bg.png

确认了文件位置无误,通过浏览器F12添加样式,修改

.v[data-class=v] .veditor {
    width: 100%;
    min-height: 8.75em;
    font-size: .875em;
    background: transparent;
    resize: vertical;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

中的background属性可正确显示。

测试后,在最新的稳定版中,该设置可以正确生效。以下是两个样式的对比。 dev: Snipaste_2020-07-18_23-39-55 稳定版: image

在dev版本中未能正确获取到该样式。

#vcomment textarea {
    background: url(/images/comment_bg.png) 100% 100% no-repeat;
}

在去除掉所有自定义样式后,该问题任然存在,应该未受我的自定义样式影响。

Screenshots

Website

https://blog.juanertu.com/

Describe the bug

HackerYunen commented 4 years ago

在文件butterfly\source\css_layout\third-party.styl中可以找到:

if hexo-config('valine.enable')
  #vcomment
    button
      padding: .3rem .8rem
      border-color: $button-color
      background-color: $light-blue
      color: $button-color
      font-size: .7rem
      transition: all .3s

      &:hover
        background-color: $theme-button-hover-color

    if hexo-config('valine.bg')
      textarea
        background: url(hexo-config('valine.bg')) 100% 100% no-repeat

而最新版的_config.yml:

valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)

没有提供enable属性,故样式不加载 原因:没有彻底的移除对enable属性的依赖 临时解决办法:添加上enable: true属性。