Problem occur when using Pjax/Pjax函数重载问题 #649

ojhdt · 2020-03-23T10:40:48Z

Please make sure you took care of the following things before you submit this issue. Thank you!

I have set up and configured my blog according to the Hexo docs and the Icarus docs;
I have looked up Github issues and found no solutions to my problems.

我尝试为Icarus添加Pjax，在启动成功后出现以下问题：

LightGallery失效
back-to-top 按键移位到页面左下角
点击toc时页面滚动动画丢失

希望得到解决方案，提供可用重载方法及编辑位置。

ppoffice · 2020-03-23T13:34:34Z

请描述你添加pjax所做的修改

ojhdt · 2020-03-23T13:46:17Z

请描述你添加pjax所做的修改

在<head>内引入Nprogress，Jquery与Pjax

<head>
...
<!-- require Nprogress -->
<script src='https://unpkg.com/[email protected]/nprogress.js'></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.cssnprogress.css"/>
<!-- require Jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- require Pjax -->
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
...
</head>

在</body>前引入Pjax启动函数

...
<script>
$(document).pjax('a[target!=_blank]', '#pjax-container', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
}).on('pjax:send',
function() {
    NProgress.start();
}).on('pjax:complete',
function() {
    NProgress.done();
});
</script>
</body>
</html>

将layout.ejs内一个 container 加入id="pjax-container"用作刷新区域

    <%- _partial('common/navbar') %>
    <% function main_column_class() {
        switch (column_count()) {
            case 1:
                return 'is-12';
            case 2:
                return 'is-8-tablet is-8-desktop is-8-widescreen';
            case 3:
                return 'is-8-tablet is-8-desktop is-6-widescreen'
        }
        return '';
    } %>
    <section class="section">
        <div class="container" id="pjax-container">
            <div class="columns">
                <div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
                <%- _partial('common/widget', { position: 'left' }) %>
                <%- _partial('common/widget', { position: 'right' }) %>
            </div>
        </div>
    </section>
    <%- _partial('common/footer') %>
    <%- _partial('common/scripts') %>

    <% if (has_config('search.type')) { %>
    <%- _partial('search/' + get_config('search.type')) %>
    <% } %>

ppoffice · 2020-03-23T15:36:44Z

@ojhdt 下面是一个简单的patch用来修复你提到的前两点问题，核心思想是在pjax每次加载结束后重新加载主题所需的JavaScript脚本。如果你发现有其他JavaScript问题，也可以举一反三的修改。至于点击toc没有滚动动画，好像Icarus本身也没有滚动动画这个功能。最后主题中已经提供jQuery 3.x了，你不用再引入2.x版本的jQuery。你可以把pjax放到它后面。

hexo-theme-icarus/layout/common/scripts.ejs

Line 1 in e1cffe7

<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>

diff --git a/source/js/back-to-top.js b/source/js/back-to-top.js
index 8cf8cc4..b3d3ca9 100644
--- a/source/js/back-to-top.js
+++ b/source/js/back-to-top.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+function loadBackToTop() {
     var $button = $('#back-to-top');
     var $footer = $('footer.footer');
     var $mainColumn = $('.column-main');
@@ -153,4 +153,6 @@ $(document).ready(function () {
     $('#back-to-top').on('click', function () {
         $('body, html').animate({ scrollTop: 0 }, 400);
     });
-});
\ No newline at end of file
+}
+$(document).ready(loadBackToTop);
+$(document).on('pjax:end', loadBackToTop);
\ No newline at end of file
diff --git a/source/js/gallery.js b/source/js/gallery.js
index 5747842..5979549 100644
--- a/source/js/gallery.js
+++ b/source/js/gallery.js
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function () {
+function loadGallery() {
     if (typeof ($.fn.lightGallery) === 'function') {
         $('.article').lightGallery({ selector: '.gallery-item' });
     }
@@ -8,4 +8,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
         $('.justified-gallery').justifiedGallery();
     }
-});
\ No newline at end of file
+}
+document.addEventListener('DOMContentLoaded', loadGallery);
+$(document).on('pjax:end', function () { setTimeout(loadGallery) });
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index 6b36fd9..ad3fa47 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,4 +1,4 @@
-(function ($) {
+function loadMain($) {
     $('.article img:not(".not-gallery-item")').each(function () {
         // wrap images with link and add caption if possible
         if ($(this).parent('a').length === 0) {
@@ -186,4 +186,6 @@
             link.target = '_blank';
         });
     }
-})(jQuery);
+}
+loadMain(jQuery);
+$(document).on('pjax:end', function() { loadMain(jQuery) });

ojhdt · 2020-03-24T00:32:08Z

@ppoffice
感谢你提供的代码
我发现在引入Aplayer后，点击toc就出现了滚动动画，这使得我认为是Icarus本身的功能。效果可以查看鄙站。
该处使用的Aplayer修复了toc点击中文无法跳转的问题。

ojhdt · 2020-03-26T16:11:26Z

@ppoffice 很抱歉再次打扰您
BackToTop工作的很好，但LightGallery仍然存在问题，具体体现在：

在完整刷新网页时，点击图片后会直接打开图片url
Pjax部分刷新时，彻底失效，即图片无法点击，无法放大

另外，在Pjax下的Valine评论读取存在滞后，出现读取上一篇浏览过的文章的评论的情况。

stale · 2020-04-15T16:02:03Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale · 2020-04-15T17:40:06Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 · 2024-05-01T06:18:10Z

已并入主线：#1287 。

ppoffice added the discussion Any questions about this theme. label Mar 23, 2020

stale bot added the wontfix Something that will not be done or fixed. label Apr 15, 2020

stale bot closed this as completed Apr 22, 2020

ppoffice mentioned this issue May 8, 2020

希望加入pjax功能 #722

Closed

PJ-568 mentioned this issue Feb 25, 2024

引入 Pjax 以加速网页切换速度 #1277

Closed

7 tasks

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 17, 2024

feat(core): Add preliminary support for PJAX

5267ac8

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 mentioned this issue Apr 17, 2024

feat(core): Add preliminary support for PJAX #1287

Merged

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 25, 2024

feat(core): Add preliminary support for PJAX

e7d62c6

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 25, 2024

feat(core): Add preliminary support for PJAX

5c5bb42

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 25, 2024

feat(core): Add preliminary support for PJAX

38b3d55

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 25, 2024

feat(core): Add preliminary support for PJAX

e566158

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

PJ-568 added a commit to PJ-568/hexo-theme-icarus that referenced this issue Apr 25, 2024

feat(core): Add preliminary support for PJAX

03ac6b9

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem occur when using Pjax/Pjax函数重载问题 #649

Problem occur when using Pjax/Pjax函数重载问题 #649

ojhdt commented Mar 23, 2020

ppoffice commented Mar 23, 2020

ojhdt commented Mar 23, 2020

ppoffice commented Mar 23, 2020 •

edited

Loading

ojhdt commented Mar 24, 2020

ojhdt commented Mar 26, 2020

stale bot commented Apr 15, 2020

stale bot commented Apr 15, 2020

PJ-568 commented May 1, 2024

Problem occur when using Pjax/Pjax函数重载问题 #649

Problem occur when using Pjax/Pjax函数重载问题 #649

Comments

ojhdt commented Mar 23, 2020

ppoffice commented Mar 23, 2020

ojhdt commented Mar 23, 2020

ppoffice commented Mar 23, 2020 • edited Loading

ojhdt commented Mar 24, 2020

ojhdt commented Mar 26, 2020

stale bot commented Apr 15, 2020

stale bot commented Apr 15, 2020

PJ-568 commented May 1, 2024

ppoffice commented Mar 23, 2020 •

edited

Loading