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

关于标签页置顶回滚问题 #34

Closed Yousazoe closed 3 years ago

Yousazoe commented 3 years ago

你好是这样的,我在NexT主题中使用了标签云插件后在我的归档页和标签页下拉到最后页面会出现回滚的情况,在sidebar中注释掉标签云代码回复正常,请问这是插件的bug吗?

附上出错的网址:

f12: 自己前端水平有限也不太明白,下面附上我的sidebar:

{% macro render(display_toc) %}
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      {%- set display_toc = page.toc.enable and display_toc %}
      {%- if display_toc %}
        {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
        {%- set display_toc = toc.length > 1 and display_toc %}
      {%- endif %}

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          {{ __('sidebar.toc') }}
        </li>
        <li class="sidebar-nav-overview">
          {{ __('sidebar.overview') }}
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
        {%- if display_toc %}
          <div class="post-toc motion-element">{{ toc }}</div>
        {%- endif %}
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

        {{- next_inject('sidebar') }}
      </div>

      <!-- hitokoto 

      <p></p>

      <div class="hitokoto-title">
      <i class="fas fa-adjust"></i>
      <b>一言</b>
      </div>

      <div id="hitokoto">:D 获取中...</div>
      <center><p id="hitofrom">:D 获取中...</p></center>

      <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
      <script>
      fetch('https://v1.hitokoto.cn')
        .then(function (res){
          return res.json();
        })
        .then(function (data) {
          var hitokoto = document.getElementById('hitokoto');
          hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
          var hitofrom = document.getElementById('hitofrom');
          hitofrom.innerText = "——" + data.from + '\xa0'; 
        })
        .catch(function (err) {
          console.error(err);
        })
      </script>
      -->
+      {% if site.tags.length > 1 %}
+      <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
+      <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
+      <div class="widget-wrap">
+          <h5 class="widget-title"></h5>
+          <div id="myCanvasContainer" class="widget tagcloud">
+              <canvas width="250" height="250" id="resCanvas" style="width:100%">
+                 {{ list_tags() }}
+              </canvas>
+         </div>
+      </div>
+      {% endif %}

      {%- if theme.back2top.enable and theme.back2top.sidebar %}
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
      {%- endif %}

    </div>
  </aside>
  <div id="sidebar-dimmer">
  </div>
{% endmacro %}

配置文件如下:

# hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica # 字体
  textColor: '#555' # 字体颜色
  textHeight: 14 # 字体高度
  outlineColor: '#FFFFFF' # 字体背景色
  maxSpeed: 0.1 # 标签云最大移动速度   

安装版本:

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-abbrlink": "^2.2.1",
    "hexo-baidu-url-submit": "^0.0.6",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.9",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index-pin-top": "^0.2.2",
    "hexo-generator-searchdb": "^1.3.3",
    "hexo-generator-sitemap": "^2.1.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-helper-live2d": "^3.1.1",
    "hexo-lazyload": "^1.3.6",
    "hexo-lazyload-image": "^1.0.9",
    "hexo-neat": "^1.0.9",
    "hexo-related-popular-posts": "^5.0.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-symbols-count-time": "^0.7.1",
    "hexo-tag-aplayer": "^3.0.4",
+   "hexo-tag-cloud": "^2.1.2",
    "hexo-tag-dplayer": "^0.3.3",
    "hexo-theme-landscape": "^0.0.3",
    "hexo-wordcount": "^6.0.1"
  }
}
Yousazoe commented 3 years ago

测试了一下,手机端因为不显示标签云和sidebar所以没有这种情况

D0n9X1n commented 3 years ago

MacOS [Firefox, Safari] 和 Windows [Firefox, Edge(Chromium)] 均未出现你描述的情况.

建议去主题问问, 自定义侧边栏的 div 是不是加在这个部位比较合适. 以及页面是如何判断到达顶部和到达底部的. 看着像加到了不正确的 div 里面, 导致判断出现问题.

Yousazoe commented 3 years ago

谢谢!