search

D0n9X1n / hexo-tag-cloud

Yet, just another tag cloud plugin for hexo.
https://www.npmjs.com/package/hexo-tag-cloud
MIT License
147 stars 27 forks source link

Tag Cloud显示空白 #11

Closed BillYang2016 closed 6 years ago

BillYang2016 commented 6 years ago

按照文档安装成功后，却未成功显示，反而显示为空白。 1 查看源代码后发现tags均已导入，但是却未正常显示，请问这是什么问题？ 2

BillYang2016 commented 6 years ago

手动将tagcanvas.js tagcloud.js放入/public/js中即可正常运行，但是为什么没有自动生成呢？

D0n9X1n commented 6 years ago

参考下：https://github.com/MikeCoder/hexo-tag-cloud/issues/7。 你是不是用了 hexo -d g 这样的组合命令，可能这样的命令没有调用一些钩子函数。

BillYang2016 commented 6 years ago

没有使用组合命令 正常的 hexo clean + hexo s都无法显示出来，实际上应该是tagcanvas.js tagcloud.js这两个文件没有自动复制到/public/js的原因，是我没有安装正常吗？

D0n9X1n commented 6 years ago

这个是需要 hexo g 才会触发复制的。 你试下 hexo clean && hexo g 呢

BillYang2016 commented 6 years ago

确实是这样呢，谢谢！

leafjame commented 4 years ago

启动后tagcanvas.js tagcloud.js这两个文件都在/public/js目录下，还是出不来，和楼主说的一样，浏览器源代码已经显示有元素了，但是页面空白，怎么回事。。之前还是好的，也没改这方面的什么东西，后来就发现出不来了，请问下是什么情况呀？。。hexo版本 3.9.0，next版本5.1.4

qianlinyi commented 3 years ago

启动后tagcanvas.js tagcloud.js这两个文件都在/public/js目录下，还是出不来，和楼主说的一样，浏览器源代码已经显示有元素了，但是页面空白，怎么回事。。之前还是好的，也没改这方面的什么东西，后来就发现出不来了，请问下是什么情况呀？。。hexo版本 3.9.0，next版本5.1.4

我也是这个问题，之前都显示正常，最近突然显示空白了，请问你解决了吗？

D0n9X1n commented 3 years ago

看看 console 有没有输出? 还有对应的 js 文件的链接是不是 http 但是网站是 https? 最近 Chrome 和 Firefox 都禁止网页加载混合内容, 不知道是不是这个原因. No More Mixed Messages About HTTPS

qianlinyi commented 3 years ago

看看 console 有没有输出? 还有对应的 js 文件的链接是不是 http 但是网站是 https? 最近 Chrome 和 Firefox 都禁止网页加载混合内容, 不知道是不是这个原因. No More Mixed Messages About HTTPS

谢谢你的回复，我今天也查到了，改成http也不显示，请问怎么查看js文件的链接呢？

D0n9X1n commented 3 years ago

打开 network, 如果是有效的 js 文件, 应该会有这样的一个 request.

image
D0n9X1n commented 3 years ago

如果还是不对的话, 试试把链接改成绝对路径. 以 next 为例, 就是把 src 里面改成绝对路径.

{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="https://yourblog/js/tagcloud.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://yourblog/js/tagcanvas.js"></script>
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{% endif %}
qianlinyi commented 3 years ago

打开 network, 如果是有效的 js 文件, 应该会有这样的一个 request.

image

在这里插入图片描述

qianlinyi commented 3 years ago

如果还是不对的话, 试试把链接改成绝对路径. 以 next 为例, 就是把 src 里面改成绝对路径.

{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="https://yourblog/js/tagcloud.js'"></script>
  <script type="text/javascript" charset="utf-8" src="https://yourblog/js/tagcanvas.js'"></script>
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{% endif %}

请问你这个链接是否多了一个单引号，我这边改了链接之后报下面的错误： Failed to load resource: the server responded with a status of 404 () tagcloud.js':1 Failed to load resource: the server responded with a status of 404 () tagcanvas.js':1

D0n9X1n commented 3 years ago

是的, 多了个单引号. 那看看 console 有没有异常输出?

qianlinyi commented 3 years ago

是的, 多了个单引号. 那看看 console 有没有异常输出?

这是改了之后的，console并没有异常输出，原本标签云的位置还是显示空白/(ㄒoㄒ)/~~，下面是network关于tagcloud的所有信息，麻烦你看一下，我并不是很懂js这一块的东西╥﹏╥... Request URL: https://qianlinyi.cn/js/tagcloud.js Request Method: GET Status Code: 200 (from memory cache) Remote Address: 185.199.110.153:443 Referrer Policy: strict-origin-when-cross-origin accept-ranges: bytes access-control-allow-origin: age: 0 cache-control: max-age=600 content-encoding: gzip content-length: 536 content-type: application/javascript; charset=utf-8 date: Fri, 19 Feb 2021 08:37:42 GMT etag: W/"602f78be-564" expires: Fri, 19 Feb 2021 08:47:42 GMT last-modified: Fri, 19 Feb 2021 08:37:18 GMT server: GitHub.com strict-transport-security: max-age=31556952 vary: Accept-Encoding via: 1.1 varnish x-cache: MISS x-cache-hits: 0 x-fastly-request-id: 8c07825675989302f516d95f476f5ac9978017a1 x-github-request-id: 4602:3BB7:9598D:B6376:602F78D5 x-proxy-cache: MISS x-served-by: cache-hkg17924-HKG x-timer: S1613723862.965307,VS0,VE220 :authority: qianlinyi.cn :method: GET :path: /js/tagcloud.js :scheme: https accept: /* accept-encoding: gzip, deflate, br accept-language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6 referer: https://qianlinyi.cn/ sec-fetch-dest: script sec-fetch-mode: no-cors sec-fetch-site: same-origin user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

D0n9X1n commented 3 years ago

管他什么 js, ts, nodejs, just learn it LOL.

console 里面跑一下下面这段试试.

 console.log('tag cloud plugin rock and roll!');

     try {
         TagCanvas.textFont = 'Helvetica';
         TagCanvas.textColour = '#333';
         TagCanvas.textHeight = 15;
         TagCanvas.outlineColour = '#E2E1C1';
         TagCanvas.maxSpeed = 0.03;
         TagCanvas.freezeActive = true;
         TagCanvas.outlineMethod = 'block';
         TagCanvas.minBrightness = 0.2;
         TagCanvas.depth = 0.92;
         TagCanvas.pulsateTo = 0.6;
         TagCanvas.initial = [0.1,-0.1];
         TagCanvas.decel = 0.98;
         TagCanvas.reverse = true;
         TagCanvas.hideTags = false;
         TagCanvas.shadow = '#ccf';
         TagCanvas.shadowBlur = 3;
         TagCanvas.weight = false;
         TagCanvas.imageScale = null;
         TagCanvas.fadeIn = 1000;
         TagCanvas.clickToFront = 600;
         TagCanvas.lock = false;
         TagCanvas.Start('resCanvas');
         TagCanvas.tc['resCanvas'].Wheel(true)
     } catch(e) {
         console.log(e);
         document.getElementById('myCanvasContainer').style.display = 'none';
     }
qianlinyi commented 3 years ago

console

是直接复制粘贴，然后回车运行吗

D0n9X1n commented 3 years ago

对

qianlinyi commented 3 years ago

管他什么 js, ts, nodejs, just learn it LOL.

console 里面跑一下下面这段试试.

 console.log('tag cloud plugin rock and roll!');

     try {
         TagCanvas.textFont = 'Helvetica';
         TagCanvas.textColour = '#333';
         TagCanvas.textHeight = 15;
         TagCanvas.outlineColour = '#E2E1C1';
         TagCanvas.maxSpeed = 0.03;
         TagCanvas.freezeActive = true;
         TagCanvas.outlineMethod = 'block';
         TagCanvas.minBrightness = 0.2;
         TagCanvas.depth = 0.92;
         TagCanvas.pulsateTo = 0.6;
         TagCanvas.initial = [0.1,-0.1];
         TagCanvas.decel = 0.98;
         TagCanvas.reverse = true;
         TagCanvas.hideTags = false;
         TagCanvas.shadow = '#ccf';
         TagCanvas.shadowBlur = 3;
         TagCanvas.weight = false;
         TagCanvas.imageScale = null;
         TagCanvas.fadeIn = 1000;
         TagCanvas.clickToFront = 600;
         TagCanvas.lock = false;
         TagCanvas.Start('resCanvas');
         TagCanvas.tc['resCanvas'].Wheel(true)
     } catch(e) {
         console.log(e);
         document.getElementById('myCanvasContainer').style.display = 'none';
     }

你好这是运行之后的截图，昨天我加了一个网页崩溃的js，会不会是这两个冲突了啊😂 在这里插入图片描述

D0n9X1n commented 3 years ago

如果是有监听在 window.onload 事件上的函数, 那确实会冲突.

看上去试试下面这段应该就能显示了.

 console.log('tag cloud plugin rock and roll!');
 document.getElementById('myCanvasContainer').style.display = 'inline';
 try {
   TagCanvas.textFont = 'Helvetica';
   TagCanvas.textColour = '#333';
   TagCanvas.textHeight = 15;
   TagCanvas.outlineColour = '#E2E1C1';
   TagCanvas.maxSpeed = 0.03;
   TagCanvas.freezeActive = true;
   TagCanvas.outlineMethod = 'block';
   TagCanvas.minBrightness = 0.2;
   TagCanvas.depth = 0.92;
   TagCanvas.pulsateTo = 0.6;
   TagCanvas.initial = [0.1, -0.1];
   TagCanvas.decel = 0.98;
   TagCanvas.reverse = true;
   TagCanvas.hideTags = false;
   TagCanvas.shadow = '#ccf';
   TagCanvas.shadowBlur = 3;
   TagCanvas.weight = false;
   TagCanvas.imageScale = null;
   TagCanvas.fadeIn = 1000;
   TagCanvas.clickToFront = 600;
   TagCanvas.lock = false;
   TagCanvas.Start('resCanvas');
   TagCanvas.tc['resCanvas'].Wheel(true)
 } catch (e) {
   console.log(e);
 }

如果可以的话, 简单的改法就是把这段加到你的那段代码的后面执行.

qianlinyi commented 3 years ago

console.log('tag cloud plugin rock and roll!'); document.getElementById('myCanvasContainer').style.display = 'inline'; try { TagCanvas.textFont = 'Helvetica'; TagCanvas.textColour = '#333'; TagCanvas.textHeight = 15; TagCanvas.outlineColour = '#E2E1C1'; TagCanvas.maxSpeed = 0.03; TagCanvas.freezeActive = true; TagCanvas.outlineMethod = 'block'; TagCanvas.minBrightness = 0.2; TagCanvas.depth = 0.92; TagCanvas.pulsateTo = 0.6; TagCanvas.initial = [0.1, -0.1]; TagCanvas.decel = 0.98; TagCanvas.reverse = true; TagCanvas.hideTags = false; TagCanvas.shadow = '#ccf'; TagCanvas.shadowBlur = 3; TagCanvas.weight = false; TagCanvas.imageScale = null; TagCanvas.fadeIn = 1000; TagCanvas.clickToFront = 600; TagCanvas.lock = false; TagCanvas.Start('resCanvas'); TagCanvas.tc['resCanvas'].Wheel(true) } catch (e) { console.log(e); } 确实显示了，万分感谢，请问这是为什么呢😂

D0n9X1n commented 3 years ago

没看过你的代码, 不过盲猜你应该是直接 window.onload = function (){...} 这样有个副作用就是会覆盖已经存在的绑定在 onload 事件的函数。这个插件就是之一。 比较好的做法就是先判断有没有原来的 onload 函数，有的话，自己的函数放在后面执行。比如：

 function addLoadEvent(func) {
     var oldonload = window.onload;
     if (typeof window.onload != 'function') {
         window.onload = func;
     } else {
         window.onload = function() {
             oldonload();
             func();
         }
     }
 }
qianlinyi commented 3 years ago

如果是有监听在 window.onload 事件上的函数, 那确实会冲突.

看上去试试下面这段应该就能显示了.

 console.log('tag cloud plugin rock and roll!');
 document.getElementById('myCanvasContainer').style.display = 'inline';
 try {
   TagCanvas.textFont = 'Helvetica';
   TagCanvas.textColour = '#333';
   TagCanvas.textHeight = 15;
   TagCanvas.outlineColour = '#E2E1C1';
   TagCanvas.maxSpeed = 0.03;
   TagCanvas.freezeActive = true;
   TagCanvas.outlineMethod = 'block';
   TagCanvas.minBrightness = 0.2;
   TagCanvas.depth = 0.92;
   TagCanvas.pulsateTo = 0.6;
   TagCanvas.initial = [0.1, -0.1];
   TagCanvas.decel = 0.98;
   TagCanvas.reverse = true;
   TagCanvas.hideTags = false;
   TagCanvas.shadow = '#ccf';
   TagCanvas.shadowBlur = 3;
   TagCanvas.weight = false;
   TagCanvas.imageScale = null;
   TagCanvas.fadeIn = 1000;
   TagCanvas.clickToFront = 600;
   TagCanvas.lock = false;
   TagCanvas.Start('resCanvas');
   TagCanvas.tc['resCanvas'].Wheel(true)
 } catch (e) {
   console.log(e);
 }

如果可以的话, 简单的改法就是把这段加到你的那段代码的后面执行.

大佬说的太准了，昨天那个网页崩溃的js的确就是这样的，你抽空看一下，如果我改下面这个js不在之前的代码后面添应该怎么改呢？ / 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 / window.onload = function() { var OriginTitile = document.title; var titleTime; document.addEventListener('visibilitychange', function() { if(document.hidden) { document.title = '(●—●)喔哟，崩溃啦！'; clearTimeout(titleTime); } else { document.title = '(/≧▽≦/)咦！页面又好了！'; titleTime = setTimeout(function() { document.title = OriginTitile; }, 2000); } }); };

D0n9X1n commented 3 years ago 
window.onload = function() {
  console.log('tag cloud plugin rock and roll!');
  document.getElementById('myCanvasContainer').style.display = 'inline';
  try {
    TagCanvas.textFont = 'Helvetica';
    TagCanvas.textColour = '#333';
    TagCanvas.textHeight = 15;
    TagCanvas.outlineColour = '#E2E1C1';
    TagCanvas.maxSpeed = 0.03;
    TagCanvas.freezeActive = true;
    TagCanvas.outlineMethod = 'block';
    TagCanvas.minBrightness = 0.2;
    TagCanvas.depth = 0.92;
    TagCanvas.pulsateTo = 0.6;
    TagCanvas.initial = [0.1, -0.1];
    TagCanvas.decel = 0.98;
    TagCanvas.reverse = true;
    TagCanvas.hideTags = false;
    TagCanvas.shadow = '#ccf';
    TagCanvas.shadowBlur = 3;
    TagCanvas.weight = false;
    TagCanvas.imageScale = null;
    TagCanvas.fadeIn = 1000;
    TagCanvas.clickToFront = 600;
    TagCanvas.lock = false;
    TagCanvas.Start('resCanvas');
    TagCanvas.tc['resCanvas'].Wheel(true)
  } catch (e) {
    console.log(e);
    document.getElementById('myCanvasContainer').style.display = 'none';
  }

 /* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = '(●—●)喔哟，崩溃啦！';
      clearTimeout(titleTime);
    } else {
      document.title = '(/≧▽≦/)咦！页面又好了！';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
};
qianlinyi commented 3 years ago 
window.onload = function() {
  console.log('tag cloud plugin rock and roll!');
  document.getElementById('myCanvasContainer').style.display = 'inline';
  try {
    TagCanvas.textFont = 'Helvetica';
    TagCanvas.textColour = '#333';
    TagCanvas.textHeight = 15;
    TagCanvas.outlineColour = '#E2E1C1';
    TagCanvas.maxSpeed = 0.03;
    TagCanvas.freezeActive = true;
    TagCanvas.outlineMethod = 'block';
    TagCanvas.minBrightness = 0.2;
    TagCanvas.depth = 0.92;
    TagCanvas.pulsateTo = 0.6;
    TagCanvas.initial = [0.1, -0.1];
    TagCanvas.decel = 0.98;
    TagCanvas.reverse = true;
    TagCanvas.hideTags = false;
    TagCanvas.shadow = '#ccf';
    TagCanvas.shadowBlur = 3;
    TagCanvas.weight = false;
    TagCanvas.imageScale = null;
    TagCanvas.fadeIn = 1000;
    TagCanvas.clickToFront = 600;
    TagCanvas.lock = false;
    TagCanvas.Start('resCanvas');
    TagCanvas.tc['resCanvas'].Wheel(true)
  } catch (e) {
    console.log(e);
    document.getElementById('myCanvasContainer').style.display = 'none';
  }

 /* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = '(●—●)喔哟，崩溃啦！';
      clearTimeout(titleTime);
    } else {
      document.title = '(/≧▽≦/)咦！页面又好了！';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
};

已经好了，刚刚可能是github上传慢的问题，谢谢你百忙之中抽时间来回答我的问题！