Turn OFF javascript with motion enable result in a blank page [solved]

wafer-li commented 6 years ago

I agree and want to create new issue

[x] Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
[x] Yes, I was on NexT Documentation Site.
[x] And yes, I already searched for current issues and this is not help to me.

Expected behavior

Still display content successfully without javascript.

Actual behavior

If I ban the javascript with motion enable, it will result in a blank page.

Steps to reproduce the behavior

Ban javascript from chrome
Refresh you page

Link to demo site with this issue: N/A
Link(s) to source code or any usefull link(s): N/A

Node.js and NPM Information

node
v9.4.0

npm
5.6.0

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.4"
  },
  "dependencies": {
    "hexo": "^3.4.4",
    "hexo-all-minifier": "^0.4.1",
    "hexo-deployer-git": "^0.3.1",
    "hexo-filter-plantuml": "^1.0.1",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-atom-markdown-writer-meta": "^0.1.1",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.0",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-seo-friendly-sitemap": "0.0.21",
    "hexo-generator-tag": "^0.2.0",
    "hexo-inject": "^1.0.0",
    "hexo-reference": "^1.0.3",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-kramed": "^0.1.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.3.1",
    "hexo-symbols-count-time": "^0.2.0",
    "hexo-wordcount": "^3.0.2"
  }
}

Hexo Information

Hexo version

hexo: 3.4.4
hexo-cli: 1.0.4
os: Darwin 17.3.0 darwin x64
http_parser: 2.7.0
node: 9.4.0
v8: 6.2.414.46-node.17
uv: 1.18.0
zlib: 1.2.11
ares: 1.13.0
modules: 59
nghttp2: 1.29.0
openssl: 1.0.2n
icu: 60.2
unicode: 10.0
cldr: 32.0.1
tz: 2017c

Hexo Configuration

NexT Information

NexT Version:

[x] Latest Master branch.
[] Latest Release version.
[] Old version -

NexT Scheme:

[] All schemes
[] Muse
[] Mist
[x] Pisces
[] Gemini

NexT Configuration:

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

Other Information

Screenshots:

I know it might sound stupid, obviously you could not use the motion effect without javascript.

But even if the visitor cannot see the the motion effect, it is necessary to display the blog content instead of just making it disappear.

ivan-nginx commented 6 years ago

Ban on localhost? Are u sure what this is ban? Because i'm not sure, and yes, sounds like very stupid. Reproduce steps please.

wafer-li commented 6 years ago

There is another example:

You could go to this site http://saili.science/

Then

In this setting, just ban the javascript as below:

Then go back to that site, and refresh.

ivan-nginx commented 6 years ago

Cool catch, but this is not called ban. It's called OFF javascript in browser manually and then, yes, motion will may brake all other JS files.

wafer-li commented 6 years ago

OK, sorry for my poor English.

For now, I just disable the motion to make the site visible when the user turns javascript off.

But it brings a drawback that makes everyone even those with JavaScript Enable cannot see the motion effect.

ivan-nginx commented 6 years ago

Added semi-half solution for that issue: d2be4fade1fc6818373463cf3a6e31e82935b453 But it's not recommened to off javascript because at least half of NexT functions will not work without JS (sidebar visible in Gemini/Pisces, sidebar TOC, selected menu item, fotter bottom alignment, some comments, etc.)

For real and 100% strong fix need to add something like warning message to user about disabled javascript and/or add all possible switches to use same features without JS.

theme-next / hexo-theme-next