Fail to display central style for image after encryption

[pokedo0]

Issue

文章加密后图片样式居中失败

Expected Behavior

没加密的文章能正常显示

Actual Behavior

加密后的文章图片样式居中失败，每次强制刷新 (ctrl + F5)后有概率显示

Steps to Reproduce the Problem

1. https://pokedo0.github.io/uncategorized/test-encrypt-8/ 加密后文章，密码为8。 只有 强制刷新 (ctrl + F5)后有概率显示
2. https://pokedo0.github.io/uncategorized/test-no-encrypt/ 无加密文章，可正常显示
3. see as below

https://user-images.githubusercontent.com/23151451/103167616-9c893080-4867-11eb-976b-87d61bcdf0e0.mp4

Specifications

hexo: 5.3.0 hexo-cli: 4.2.0 os: Windows_NT 10.0.19042 win32 x64 node: 14.15.3 v8: 8.4.371.19-node.17 uv: 1.40.0 zlib: 1.2.11 brotli: 1.0.9 ares: 1.16.1 modules: 83 nghttp2: 1.41.0 napi: 7 llhttp: 2.1.3 openssl: 1.1.1g cldr: 37.0 icu: 67.1 tz: 2020a unicode: 13.0

node -v v14.15.3

---

• icarus 主题疑似可已修改的js部分

https://github.com/AlphaLxy/hexo-theme-icarus/blob/master/source/js/main.js

(function($, moment, ClipboardJS, config) {

    console.log('enter main js function') // added by me

    $('.article img:not(".not-gallery-item")').each(function() {
        // wrap images with link and add caption if possible
        if ($(this).parent('a').length === 0) {
            $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');
            if (this.alt) {
                // $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');
                $(this).after('<p class="has-text-centered is-size-6 caption">' + '<br>' + '</p>');
            }
        }

        console.log('do wrap img function')  // added by me
    });

• 图片居中功能的代码在原主题并没有，可以看一下我添加的代码部分 https://github.com/AlphaLxy/hexo-theme-icarus/blob/master/include/style/article.styl

[D0n9X1n]

给 issue 点个赞, 描述的非常详细.

这个是一个已知问题, 因为前端解密的内容是不会触发 main.js 的, 因为 main.js 只会在 onload 的时候加载一次. 输入密码之后刷新, 则是解密部分在图片居中那段代码之前, 所以会触发居中.

解决办法就是参考 callback 部分说明, 在原文里面加一个 callback. 试试. 这样能确保在解秘之后依旧能运行代码.

---
title: 'Theme Test Default'
date: 2020-12-23 22:21:50
tags:
theme: default
password: hello
message: This is encrypted by Theme: default
---

你的正文......

<script>
$('.article img:not(".not-gallery-item")').each(function() {
  // wrap images with link and add caption if possible
  if ($(this).parent('a').length === 0) {
    $(this).wrap(
        '<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');
    if (this.alt) {
      // $(this).after('<p class="has-text-centered is-size-6 caption">' +
      // this.alt + '</p>');
      $(this).after(
          '<p class="has-text-centered is-size-6 caption">' +
          '<br>' +
          '</p>');
    }
  }

  console.log('do wrap img function')  // added by me
});
</script>

[pokedo0]

好的 原文这样确实可行。

关于上文强制刷新后有概率出现 正常样式，我观察到是。 只要保证 blog-encrypt.js 的 decrypt()所有code先执行完，早于之后 main.js函数，那么之后的都可正常渲染。

不知道是否跟encrypt里的async部分异步代码有关，会导致执行时间有差异，使得之后main js先后执行顺序也有差异。

• 正常
• 不正常

[D0n9X1n]

对的, 执行顺序也是一个原因.

[pokedo0]

对的, 执行顺序也是一个原因.

😂 嗯 所以是除了 原文+callback 的话没有其他办法了吗，我看 js 里面还有其他的一些渲染 function 应该也没有执行到，按道理那些缺少的都要塞到 callback里面去。。

[D0n9X1n]

对的, 这就是会有 callback 机制的原因... 各个主题都又不一样的地方, 不太现实一一适配... 看看哪些影响了就加进去,没影响就可以不管了..

[pokedo0]

对的, 这就是会有 callback 机制的原因... 各个主题都又不一样的地方, 不太现实一一适配... 看看哪些影响了就加进去,没影响就可以不管了..

好的 不容易🙈