search

next-theme / hexo-theme-next

🎉 Elegant and powerful theme for Hexo.
https://theme-next.js.org
Other
2.47k stars 437 forks source link

主题页面动画变慢的问题 #138

Closed ryzzn closed 4 years ago

ryzzn 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

Expected behavior

页面加载速度正常。

在这个版本上是正常的：8.0.0-rc.4 后续的npm hexo-theme-next的几个版本尝试了下都不行，包括8.0.0, 8.0.1, 8.0.2。

Actual behavior

相同的配置文件，在8.0.0以后的版本渲染会慢很多，正常的渲染是整体一拨的，但是在8.0.0以后的某个版本以后渲染首页的时候是一个标题一个标题渲染，然后在具体内容。整个过程大概需要三四秒钟。

Steps to reproduce the behavior

Environment Information

Node.js and NPM Information

❯ node -v && npm -v
v12.18.3
6.14.6

Package dependencies Information

❯ npm ls --depth 0
hexo-site@0.0.0 /Users/ryzn/Documents/blog/ryzn-me
├── hexo@5.2.0
├── hexo-deployer-ali-oss@1.0.0
├── hexo-deployer-git@2.1.0
├── hexo-excerpt@1.1.6
├── hexo-generator-archive@1.0.0
├── hexo-generator-category@1.0.0
├── hexo-generator-feed@3.0.0
├── hexo-generator-index@2.0.0
├── hexo-generator-seo-friendly-sitemap@0.1.1
├── hexo-generator-tag@1.0.0
├── hexo-git-backup@0.1.3
├── hexo-less@0.1.0
├── hexo-related-popular-posts@5.0.1
├── hexo-renderer-ejs@1.0.0
├── hexo-renderer-marked@3.3.0
├── hexo-renderer-stylus@2.0.1
├── hexo-renderer-tiddly@0.0.1 (git+https://github.com/ryzzn/hexo-renderer-tiddly.git#cd291f26ee4b0f5a93f55373d8252eabd5c7f05d)
├── hexo-server@2.0.0
├── hexo-theme-next@8.0.0
└── hexo-wordcount@6.0.1

Hexo Configuration

NexT Configuration

# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

pace:
  enable: true
  theme: minimal

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

可以试试设置：

motion:
  enable: true
  async: true
ryzzn commented 4 years ago

可以试试设置：

motion:
  enable: true
  async: true

嗯，谢谢。async以后效果好很多了（sidebar和body里面的文章可以一起加载了），不过貌似文章的标题和内容还是同步加载的（等标题都动画完了以后再加载内容）。

ryzzn commented 4 years ago

非常感谢，前端小白表示自己搞定了。

  1. 关闭header和body的动画
  2. 将header和body的visibility改成inherit
motion:
  enable: true
  async: true
  transition:
    post_header: none
    post_body: none
.use-motion .post-header, .use-motion .post-body
  visibility: inherit
KairuiLiu commented 3 years ago

我遇到了类似的问题, 但是我的问题是, 通过链接进入的页面显示正常, 但是站内链接跳转后只显示header与footer,

使用Network看到文章已经加载完成, artical的高度也是正确的, 但是所有文章中所有内容都是visibility: hidden

非常感谢，前端小白表示自己搞定了。

  1. 关闭header和body的动画
  2. 将header和body的visibility改成inherit
motion:
  enable: true
  async: true
  transition:
    post_header: none
    post_body: none
.use-motion .post-header, .use-motion .post-body
  visibility: inherit

我使用这个方法解决了问题, 还是请作者修复一下

KairuiLiu commented 3 years ago

我遇到了类似的问题, 但是我的问题是, 通过链接进入的页面显示正常, 但是站内链接跳转后只显示header与footer,

使用Network看到文章已经加载完成, artical的高度也是正确的, 但是所有文章中所有内容都是visibility: hidden

非常感谢，前端小白表示自己搞定了。

  1. 关闭header和body的动画
  2. 将header和body的visibility改成inherit
motion:
  enable: true
  async: true
  transition:
    post_header: none
    post_body: none
.use-motion .post-header, .use-motion .post-body
  visibility: inherit

我使用这个方法解决了问题, 还是请作者修复一下

这个似乎与pjax的版本有关系, 我关闭了CDN中的pjax地址, 使用npm安装了pjax, 问题就解决了

stevenjoezhang commented 3 years ago

CDN 地址不用单独设置，最新版默认会用 jsdelivr

github-actions[bot] commented 2 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.

stevenjoezhang commented 7 months ago

sidebar 动画的渲染顺序也调整了： https://github.com/next-theme/hexo-theme-next/commit/f7014d3f1630d30576f2fdf5f4da182ef8759612