templetes/paginator: new

5 files changed, 129 insertions, 3 deletions

diff --git a/content/_index.md b/content/_index.md
index d542b86..626a8b3 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,5 +1,5 @@
 +++
 template = "home.html"
 sort_by = "date"
-paginate_by = 10
+paginate_by = 2
 +++
diff --git a/content/test2.md b/content/test2.md
new file mode 100644
index 0000000..693a456
--- /dev/null
+++ b/content/test2.md
@@ -0,0 +1,12 @@
++++
+title = "夢記・三"
+date = 2012-10-02T15:00:00Z
++++
+
+最近許多事，無論是熱鬧的俄烏戰還是上海人怎麼樣。因為我是剛來上海，所以有時情況還要比可能住在小區的人糟糕——好歹居民們可以自己煮飯吃？而酒店裡一旦沒人接單外賣，又想節省不多的泡麵（真難吃⋯⋯），便只能餓著肚子，未來也不知發生什麼。
+
+卻也還是要過的，看微博和鳥巢，問責這問責那⋯⋯累了。最打擊我的事其實是，我的世界——別人不想知道。這倒也還好，我是個愛爭論的人，而與人爭論的過程，總是會忘記自己是人，照顧她人的情緒卻不顧自己一絲一毫。到最後，也只是狼狽不堪罷，那既然狼狽不堪，便也不關心你到底說了什麼，畢竟，狼狽不堪的樣子，難看。
+
+於是我便不想爭論了，累。我有了我自己的正義，那又如何呢？我現在只想一件事，便是爭論的這些人，只要都是善良的人，那其實也不錯？我在想，要麼換個論述方式吧（寫故事），要麼乾脆就別說話了。
+
+只是，真的嗎？我迎來了自我的再次毀滅。到底是不是「人都善良就可以了」呢？
\ No newline at end of file
diff --git a/content/test3.md b/content/test3.md
new file mode 100644
index 0000000..b619225
--- /dev/null
+++ b/content/test3.md
@@ -0,0 +1,12 @@
++++
+title = "夢記・四"
+date = 2012-10-02T15:00:00Z
++++
+
+看到這個 https://www.zhihu.com/question/510489151 便想起友人最近的遭遇，找到工作之後沒多久邊丟了工作，焦慮萬念俱灰，想著不如放棄罷了，現在又為了去日本住努力著，我支持她這麼做，但是，好多次想跟她說「現在這樣不也挺好嗎？」⋯⋯算了，我選擇閉嘴。
+
+出人頭地、錢錢錢錢錢錢錢，我跟她聊過錢的問題，我到底也想不明白如果我有錢我想做什麼⋯⋯買房子？買車？沒房子沒車好像也沒差，旅行，那有什麼地方好玩嗎？她說你不是喜歡唱歌又討厭自己的聲音嗎？可以去做聲帶手術呀，可是，總覺得有些不對。前幾天半夜吃著露天飯店的白切雞，另一友人跟我說，他想在晚上夜宵的時間點，像這樣擺攤給別人做飯，我那時覺得，這好酷呀。
+
+她後來又問我自考不自考，想為我找工作出謀劃策，我現在幫著別人用 Rust 寫代碼，她總是說「Rust 有工作機會嗎？你寫的代碼對找工作有用嗎？你也不小了不要那麼幼稚好不好？」，也許我確實不該這麼幼稚了⋯⋯
+
+我根本不想賺什麼大錢，如果說賺大錢只是為了變成像 Jesse Chan 這樣的人，張口閉口說別人的工作是垃圾⋯⋯唉，也是我確實該改掉幼稚的毛病了，有錢能活下去，可是，這跟我能不能和你聊真心話有關係嗎？好像沒有，我無論如何我都不敢跟你聊真心話，我不敢跟你聊半夜睡醒時自己的樣子⋯⋯那到底，我活著卻不像是活著，到底能算活著嗎？
diff --git a/templates/home.html b/templates/home.html
index 25c3032..a8dc282 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -24,6 +24,7 @@
         </div>
     </article>
     {% endfor %}
-{{ paginator.next }}
+{# {{ paginator.next }} #}
 </section>
-{% endblock %}
+{% include "paginator.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/paginator.html b/templates/paginator.html
new file mode 100644
index 0000000..4b091f7
--- /dev/null
+++ b/templates/paginator.html
@@ -0,0 +1,101 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{% if paginator.total_pages > 1 %}
+    <script>
+        var Home = location.href,
+        xhr,
+        xhrUrl = '';
+    
+        var Diaspora = {
+            L: function(url, f, err) {
+                if (url == xhrUrl) {
+                    return false;
+                }
+                xhrUrl = url;
+                if (xhr) {
+                    xhr.abort();
+                }
+                xhr = $.ajax({
+                    type: 'GET',
+                    url: url,
+                    timeout: 10000,
+                    success: function(data) {
+                        f(data);
+                        xhrUrl = '';
+                    },
+                    error: function(a, b, c) {
+                        if (b == 'abort') {
+                            err && err()
+                        } else {
+                            window.location.href = url;
+                        }
+                        xhrUrl = '';
+                    }
+                });
+            },
+            loading: function() {
+                var w = window.innerWidth;
+                var css = '<style class="loaderstyle" id="loaderstyle'+ w +'">'+
+                    '@-moz-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
+                    '@-webkit-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
+                    '.loader'+ w +'{-webkit-animation:loader'+ w +' 3s linear infinite;-moz-animation:loader'+ w +' 3s linear infinite;}'+
+                    '</style>';
+                $('.loaderstyle').remove()
+                $('head').append(css)
+                $('#loader').removeClass().addClass('loader'+ w).show()
+            },
+            loaded: function() {
+                $('#loader').removeClass().hide()
+            }
+        };
+    
+        $(function() {
+            $('body').on('click', function(e) {
+                var tag = $(e.target).attr('class') || '',
+                    rel = $(e.target).attr('rel') || '';
+                if (!tag && !rel) return;
+                switch (true) {
+                    // next page
+                    case (tag.indexOf('more') != -1):
+                        tag = $('.more');
+                        if (tag.data('status') == 'loading') {
+                            return false
+                        }
+                        var num = parseInt(tag.data('page')) || 1;
+                        if (num == 1) {
+                            tag.data('page', 1)
+                        }
+                        tag.html("{{ trans(key='olderArticle') }}").data('status', 'loading')
+                        Diaspora.loading()
+                        Diaspora.L(tag.attr('href'), function(data) {
+                            tag.hide();
+                            $('.license').hide();
+                            var link = $(data).find('.more').attr('href');
+                            if (link) {
+                                tag.attr('href', link).html("{{ trans(key='olderArticle') }}").data('status', 'loaded')
+                                tag.data('page', parseInt(tag.data('page')) + 1)
+                            }
+                            var tempScrollTop = $(window).scrollTop();
+                            $('body').append($(data).find('.posts'))
+                            $(window).scrollTop(tempScrollTop + 100);
+                            Diaspora.loaded()
+                            //$('html,body').animate({ scrollTop: tempScrollTop + 400 }, 500);
+                            if (link !== '/' && link != '') {
+                                $('body').append($(data).find('.page-nav'))
+                            }
+                        }, function() {
+                            tag.html("{{ trans(key='olderArticle') }}").data('status', 'loaded')
+                        })
+                        return false;
+                        break;
+                    default:
+                        return true;
+                        break;
+                }
+            });
+        })
+    </script>
+    
+    <nav class="page-nav">
+      <a href="{{ paginator.next }}" class="more">{{ trans(key='olderArticle') }}</a>
+    </nav>
+{% endif %}
\ No newline at end of file