请问如何在带有 pjax 的页面下使用

memset0 commented 5 years ago

我使用和一个带有 pjax 的博客主题，并使用了 Valine 作为评论系统。我发现在从一个页面切换到另一个页面时， Valine 不会显示。具体表现类似于 #109 （但那个 issue ）没人回复，我使用了 #66 中的方式后，切换页面之后提示 Code : Not initialized ，求教如何解决。

目前我的代码是：

{% if theme.valine.appid and theme.valine.appkey %}
<!-- valine Comments -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js" data-no-instant></script>
<script src='//unpkg.com/valine/dist/Valine.min.js' data-no-instant></script>
<script type="text/javascript">
    var valine_option = {
        el: '#vcomments',
        notify: {{ theme.valine.notify }},
        verify: {{ theme.valine.verify }},
        app_id: "{{ theme.valine.appid }}",
        app_key: "{{ theme.valine.appkey }}",
        placeholder: "{{ theme.valine.placeholder }}",
        avatar: '{{ theme.valine.avatar }}'
    };
    var valine = new Valine(valine_option);
    $(document).on({
        'pjax:end': function () {
            valine.init(valine_option);
        }
    });
</script>
{% endif %}

问题页面可在 memset0.cn 的任意两个带评论的页面切换。

求教如何解决 @xCss ，谢谢。

xCss commented 5 years ago

抱歉，目前来说，Valine对Pjax并不兼容。。。

还在寻找解决办法。

memset0 commented 5 years ago

谢谢回复。

现在我发现如果第一个页面没有 Valine ，那么在第二个页面可以正常加载 Valine .

是否有什么方法删掉已经 init 过的 Valine 然后再重新 init 一个呢？

xCss commented 5 years ago

@memset0 Valine本身是可以重新init的，但是leancloud的av对象不支持，不管怎么搞都是操作同一个av对象。故。。。

xCss commented 5 years ago

@memset0 新的解决方案：

在<head>中加载AV文件和Valine文件
正确填写Valine配置

<!doctype html>
<html>
<head>
<!-- 你的代码（请确保已加载jQuery） -->

<!-- 在head中加载AV文件和Valine文件 -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
</head>
<body>
<div  id="pjax-box">
    <!-- 你的文章内容 -->

    <!-- Comments -->
    <div class="comment"></div>
      <script>
          new Valine({
              el: '.comment' ,
              notify: false, 
              verify: false, 
              appId: 'your appId',
              appKey: 'your appKey',
              placeholder: 'Just Go Go',
              path: window.location.pathname // **请确保必须写该属性
          });
      </script>
</div>
<script>
    // **请确认你的jQuery库已加载
    $(document).pjax('a', '#pjax-box', {fragment:'#pjax-box', timeout:8000}).on('pjax:complete', function() {
        // pjax 加载完成要做的操作
    }).on('pjax:start', function() { 
      // pjax 加载开始需要做的操作 比如 NProgress.start();
    }).on('pjax:end',   function() {
      // pjax 加载结束需要做的操作 比如 NProgress.done();
      // 其他操作;
    });
</script>
</body>
</html>

memset0 commented 5 years ago

@xCss

谢谢！~

inkss commented 3 years ago

pjax 情况下，此两处存在重复的事件监听 paste keydown ，这边可不可以改成先 off 再 on

xCss / Valine

请问如何在带有 pjax 的页面下使用 #138