Cann't open the online encrypted post

[ComplicatedPhenomenon]

Expected Behavior

When I tested the site locally, it seems fine, the post shows up after I type in the password, yet there is no response when doing online test.

Actual Behavior

Steps to Reproduce the Problem

1. [x] hexo clean && hexo g && hexo d, didn't work
2. [x] remove hexo-blog-encrypt and resinstall, didn't work

Specifications

(The version of the project, operating system, hardware etc.)

hexo: 3.8.0
hexo-cli: 1.1.0
os: Darwin 18.5.0 darwin x64
node: 11.5.0
v8: 7.0.276.38-node.13
uv: 1.24.0
zlib: 1.2.11
ares: 1.15.0
modules: 67
nghttp2: 1.34.0
napi: 3
llhttp: 1.0.1
http_parser: 2.8.0
openssl: 1.1.0j
icu: 63.1
unicode: 11.0
cldr: 34.0
tz: 2018e

[D0n9X1n]

It looks like jQuery link is invalid when online.

Can you change the jquery link to https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js, you can find this link in your template file or your settings.

You can refer to this： https://github.com/MikeCoder/hexo-blog-encrypt/pull/73

[ComplicatedPhenomenon]

Thanks for your response, I use the theme next and I've looked up its source directory tree, I have no idea of where this template file is.

[D0n9X1n]

Can you give me a link to your page?

Also I mean template file is /node_modules/hexo-blog-encrypt/template.html, sorry for the misleading.

[ComplicatedPhenomenon]

No problem. https://complicatedphenomenon.gitlab.io/2018/01/27/life/

[ComplicatedPhenomenon]

My original /node_modules/hexo-blog-encrypt/template.html is as below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</script>

</script> type="text/javascript">

</script>
<div id="hbe-security">
  <div class="hbe-input-container">
  <input type="password" class="hbe-form-control" id="pass" placeholder="{{message}}" />
    <label for="pass">{{message}}</label>
    <div class="bottom-line"></div>
  </div>
</div>
<div id="decryptionError" style="display: none;">{{decryptionError}}</div>
<div id="noContentError" style="display: none;">{{noContentError}}</div>
<div id="encrypt-blog" style="display:none">
{{content}}
</div>

The link is already the latest one, seems no need to modify

[D0n9X1n]

I get you problem. In your post, the JQuery link is at the last, but the plugin call jQuery in the middle.

I don't know whether you customized template in your post, like https://github.com/MikeCoder/hexo-blog-encrypt#change-template. I don't find <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in your post.

I recommend you to add a jquery link before blog-encrypt.js.

The default one is:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hbe-security">
  <div class="hbe-input-container">
  <input type="password" class="hbe-form-control" id="pass" placeholder="{{message}}" />
    <label for="pass">{{message}}</label>
    <div class="bottom-line"></div>
  </div>
</div>
<div id="decryptionError" style="display: none;">{{decryptionError}}</div>
<div id="noContentError" style="display: none;">{{noContentError}}</div>
<div id="encrypt-blog" style="display:none">
{{content}}
</div>

[ComplicatedPhenomenon]

It's wired, what I provide is indeed different from yours. But I didn't modify a thing of this plugin. Moreover, I also host this website on Gitlab, this problem appears too. on Gitlab, CI & CD is done automatically with .gitlab-ci.yml.

image: node:11.5.0

cache:
  paths:
    - node_modules/

before_script:
  - npm install hexo-cli -g
  - test -e package.json && npm install
  - hexo generate

pages:
  script:
    - hexo generate
  artifacts:
    paths:
      - public
  only:
    - master

Sorry, I was supposed to give you https://complicatedphenomenon.github.io/2018/01/27/life at first.

[D0n9X1n]

Try adding <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in https://github.com/theme-next/hexo-theme-next/blob/master/layout/_partials/head/head.swig. As

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"/>
<meta name="theme-color" content="{{ theme.android_chrome_color }}"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...

It may help.

[ComplicatedPhenomenon]

The solution works, although I didn't make myself clear, you find the problem finally. Thanks 🍻

[D0n9X1n]

Actually, no... I don't know why your blog remove the jquery link generated by hexo-blog-encrypt. But accroding to you, it works fine offline. So it's possible caused by CI or something between you and the website.

[qinyunkai]

文章封面总是多出来一串字符