sidebar 动画内部内容与背景脱离

constown commented 4 years ago

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate. 请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

[x] I am using the latest version of NexT.
[x] I have already read the Troubleshooting page of Hexo & Troubleshooting page of NexT.
[x] I have already searched for current issues, which does not help me.

Expected behavior

bug1

Actual behavior

Links to demo site with this issue:
Links to repository or source code of the blog: blog.juanertu.com
Screenshots:

Steps to reproduce the behavior

将NEXT更新至rc4版本后出现该问题。
使用数据文件的方式配置
引入的自定义样式列表已放在下文中
目前手动在 _data/style.styl 文件中修改了 sidebar 的属性 visibility 为 visible 来规避问题。

Environment Information

style.styl 自定义样式内容

// 隐藏 valine 的 powered by
.vcopy{
    display: none !important;
}

// valine 评论框对齐文章
div#comments.comments.v{
  margin-left: 0px ;
  margin-right: 0px ;
  border: 0px;
}

// Valine 隐藏系统信息
.vsys,.vpower{
  display:none !important;
}

.v[data-class=v] code{
    color: black;
  }

// 头像旋转特效
if (hexo-config('avatar.rotated')) {
  .site-author-image {
    transition: transform 0s ease-out;
    animation: rotate 5s linear infinite;
  }

  @keyframes rotate{from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
  }

  .site-author-image:hover {
    // transform: rotateZ(360deg);
  }
}

// 底部的网站信息样式
.upy {
  vertical-align:middle;
  display inline;
  margin-right: 0.5em
  }

.footer-a {
  border-bottom:none;
  color:#999
  }

.footer-a:hover{
  color:#999
  } 

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.95;
}

//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.9);
}
 .sidebar{
   visibility: visible
 }
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

// 背景
body {
  background-image:url(../images/bg.jpg);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  overflow-y: scroll
}

// 网站名称brand部分
.site-brand-container {
  background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%, #ddd6f3 0%);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  border-radius: 20px 20px 0 0
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
// 副标题
.site-subtitle {
    color: var(--brand-color);
}
// 顶部黑条

@media(min-width:992px) {
.headband {
    background: transparent;
    height: 10px;
}
}

@media(max-width:992px) {
.headband {
    background: transparent;
    height: 0px;
}
}

// 菜单栏
.menu {
  margin-top: 1em;
}

.menu .menu-item a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;}

.menu-item a.menu-item-active, .menu-item a:hover, .menu-item span.exturl.menu-item-active, .menu-item span.exturl:hover {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%, #ddd6f3 0%);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.menu .menu-item a:hover{
      transform:scale(1);
  }

.menu .menu-item a:hover:before, .menu .menu-item a:focus:before, .menu .menu-item a:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}
// 分割线
hr {
    position: relative;
    margin: 2rem auto;
    width: calc(100% - 4px);
    border: 2px dashed #a4d8fa;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

// 社交连接
.links-of-author {
  justify-content: flex-start;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: transparent;
  }

.post-body h2:before,.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before,{
    margin-right: 5px;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
}

.post-body h2:before{
  content: "🍦";
}

.post-body h3:before{
  content: "🌸";
}
.post-body h4:before{
  content: "⛄️";
}
.post-body h5:before{
  content: "🔥";
}
.post-body h6:before{
  content: "🌱";
}

NexT Configuration


# 是否提醒新版本
reminder: true

# 是否允许缓存
cache:
  enable: true

# 是否在文件生成后清除无用文件
minify: true

# 定义自定义文件路径
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

# ----------- #
# 网站信息设置 #                                                 
# ----------- #

# 网站图标设置
favicon:
  small: /images/favicon.png
  medium: /images/favicon.png
  apple_touch_icon: /images/favicon.png
  safari_pinned_tab: /images/favicon.png

# 页脚设置
footer:
  # 页面底部图标，动画和颜色
  icon:
    name: fas fa-heart
    animated: true
    color: '#807f7f'

  # 网站的版权信息，默认使用站点配置文件中的author
  copyright:

  # 是否显示网页底部的HEXO驱动和NEXT版本信息
  powered: false

# 是否打开文章末尾的版权信息
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

# ----------- #
# NEXT主题选择 #
# ----------- #

# 主题选择
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# --------- #
# 菜单栏设置 #
# --------- #

# 菜单设置
menu:
  home: / || fas fa-home
  categories: /categories/ || fas fa-th
  tags: /tags/ || fas fa-tags
  archives: /archives/ || fas fa-archive
  stars: /stars/ || fas fa-star
  about: /about/ || fas fa-user
  message: /message/ || fas fa-comments
  links: /links/ || fas fa-user-plus

# 是否显示菜单的图标和计数
menu_settings:
  icons: true
  badges: true

# --------- #
# 侧边栏设置 #
# --------- #

# 头像设置
avatar:
  url: /images/avatar.png
  rounded: true
  rotated: true

# 社交链接
social:
  GitHub: https://github.com/constown || fab fa-github
  E-mail: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=mvn19Onu9e302vz14vf78-a0_fX3 || fas fa-envelope
  博客主站: https://blog.juanertu.com || fas fa-atom fa-spin
  备用博客: https://constown.github.io/ || fas fa-atom fa-spin

# 社交链接设置是否只显示图标
social_icons:
  enable: true
  icons_only: false
  transition: true

# 文章目录设置
toc:
  enable: true
  number: false
  wrap: false
  expand_all: false
  max_depth: 6

# ----------- #
# 文章发布设置 #
# ----------- #

# 自动摘录
excerpt_description: true

# 阅读更多按钮
read_more_btn: true

# 文章头部信息设置
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

# 文章字数统计
symbols_count_time:
  separated_meta: false
  item_text_post: false
  item_text_total: false

# 文章底部标签的样式替换成tag
tag_icon: true

# 打赏设置
reward_settings:
  enable: false
  animation: false

# 打赏二维码
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# 文章底部相关文章推荐
related_posts:
  enable: true
  title: 相关文章推荐 
  display_in_home: false
  params:
    maxCount: 10
    #PPMixingRate: 0.5
    #isDate: false
    #isImage: false
    #isExcerpt: false

# ----------- #
# 主题其他设置 #
# ----------- #

# 代码块设置
codeblock:
  theme:
    light: agate
    dark: dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

# 返回按钮设置
back2top:
  enable: true
  # 在侧边栏中显示.
  sidebar: true
  # 显示进度.
  scrollpercent: true

# 阅读进度条
reading_progress:
  enable: true
  # 显示位置: top | bottom
  position: bottom
  color: "#37c6c0"
  height: 5px

# 书签
bookmark:
  enable: false
  color: "#222"
  save: auto

# 右上角显示GitHub图标
github_banner:
  enable: false
  permalink: https://github.com/constown
  title: Follow me on GitHub

# ------- #
# SEO设置 #
# ------- #

# 在移动设备上禁用百度转换.
disable_baidu_transformation: false

# 是否将站点副标题添加到索引.
index_with_subtitle: true

# 自动添加外部URL与Base64加密和解密。
exturl: true

# Google 站长管理工具验证码.
# See: https://www.google.com/webmasters
google_site_verification: 

# Bing 站长管理工具验证码.
# See: https://www.bing.com/webmaster
bing_site_verification: 

# Baidu 站长管理工具验证码.
# See: https://ziyuan.baidu.com/site
baidu_site_verification: 

# 启用百度推送.
baidu_push: true

# 百度统计
baidu_analytics: 

# ------------------ #
# 第三方工具和服务设置 #
# ------------------ #

# 数学公式支持
math:
  per_page: true
  mathjax:
    enable: true
    mhchem: false
  katex:
    enable: false
    copy_tex: false

pjax: true

# 懒加载图片.
lazyload: true

# Pangu Support
pangu: true

# ------- #
# 评论设置 #
# ------- #

# Valine

valine:
  enable: true
  appId: 
  appKey: 
  placeholder: 在这里留下你的足迹吧! (留下昵称和邮箱即可接收回复邮件提醒哦)
  avatar: robohash 
  meta: # Custom comment header
  - nick
  - mail
  pageSize: 10 
  language: zh-cn 
  visitor: false 
  comment_count: false
  recordIP: false 
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

# ------- #
# 统计设置 #
# ------- #

busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: fas fa-user
  total_views: true
  total_views_icon: fas fa-eye
  post_views: true
  post_views_icon: fas fa-eye

# ----------- #
# 本地搜索设置 #
# ----------- #

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: true

# -------- #
# Tags设置 #
# -------- #

# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

# Tabs tag
tabs:
  transition:
    tabs: true
    labels: true

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

# -------- #
# 动画设置 #
# -------- #
motion:
  enable: true
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInDown

# ---------- #
# CDN加载设置 #
# ---------- #

vendors:
  # Available values: local, jsdelivr, unpkg
  # internal: local

  anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js

  fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css

  mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

  # KaTeX
  katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
  copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
  copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

  pjax: //cdn.jsdelivr.net/gh/next-theme/pjax@0/pjax.min.js

  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js

  # Lazyload
  lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js

  # Pangu
  pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js

  # Valine
  valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js

  # Mermaid
  mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js

  # Internal version: 1.2.1
  velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
  velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js

  prism: //unpkg.com/prismjs@1/components/prism-core.min.js
  prism_autoloader: //unpkg.com/prismjs@1/plugins/autoloader/prism-autoloader.min.js
  prism_line_numbers: //unpkg.com/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js

# 搞怪网站标题
title_trick:
  enable: true
  leave: "(*^▽^*)我藏好了哦~"
  enter: "q(≧▽≦q)被你发现啦~"

Other Information

使用浏览器：谷歌浏览器

welcome[bot] commented 4 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 4 years ago

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

stevenjoezhang commented 4 years ago

谢谢反馈。目前 https://blog.juanertu.com/ 无法正常打开，原因是 velocity.js 没有正常加载。具体原因未知，解决方案是在 NexT 配置文件中禁用 motion:

motion:
  enable: false

最新的 master 分支重写了动画效果（见 #41），会包含在下个月发布的版本中。到时候可以再看看动画效果是否正常。

constown commented 4 years ago

谢谢反馈。目前 https://blog.juanertu.com/ 无法正常打开，原因是 velocity.js 没有正常加载。具体原因未知，解决方案是在 NexT 配置文件中禁用 motion:
motion:
  enable: false
最新的 master 分支重写了动画效果（见 #41），会包含在下个月发布的版本中。到时候可以再看看动画效果是否正常。

刚刚查看了网站，https://blog.juanertu.com/ 我这边可以正常访问。我目前网站使用的是前面所述的替代方案：修改sidebar的visibility属性。

已经收到了解决方案，期待下一个版本！

stevenjoezhang commented 4 years ago

看上去你已经更新到了最新的 master 分支。可以试试去掉

.sidebar {
    visibility: visible;
}

另外可以检查一下是否是自定义的内容导致的问题。如果移除全部自定义内容后问题消失，请关闭这个 Issue，谢谢。

constown commented 4 years ago

看上去你已经更新到了最新的 master 分支。可以试试去掉
.sidebar {
    visibility: visible;
}
另外可以检查一下是否是自定义的内容导致的问题。如果移除全部自定义内容后问题消失，请关闭这个 Issue，谢谢。

已经尝试过了，移除所有的自定义样式后，还是出现该问题！

stevenjoezhang commented 4 years ago

好的，已定位并修复这个问题： https://github.com/next-theme/hexo-theme-next/commit/79bb4c9ebecd89bdeec52be13cc805e177066ec0 之前有一处没有考虑周全： https://github.com/next-theme/hexo-theme-next/pull/41/commits/070fe6535bdb3932946998c3e456806c54a9d974 谢谢反馈！

github-actions[bot] commented 3 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.

next-theme / hexo-theme-next