通過pushState和Jekyll使用AJAX加載

Question

我正在嘗試為我們的工作室創建一個起始模板，以便在開發Jekyll網站時使用，並且我希望能夠進行頁面動畫過渡。 據我了解，最好的方法是使用AJAX從每個頁面加載不同的內容，然后使用pushState更新url和瀏覽器歷史記錄。

我已經制定了執行AJAX加載和所有pushState條目的代碼，並具有用於歷史記錄的后退和前進按鈕。 我遇到的問題是更新頁面標題。 我想將其放在ajaxLoad函數中，以便在用戶單擊鏈接以及使用瀏覽器歷史記錄的后退和前進按鈕時發生。 但是我不確定要使用什么代碼來完成此任務。

我想我會問另一個問題，因為這是我第一次嘗試完成這樣的任務，是： 這是以一種明智的方式編碼的嗎？ 還是應該采用其他方法？

main.js

$(function() {
  var changedPage = false,

    /* ----- Do this when a page loads ----- */
    init = function() {
      /* ----- This is where I would run any page specific functions ----- */

      console.log("Initializing scripts");
    },

    /* ----- Do this for ajax page loads ----- */
    ajaxLoad = function(html) {
      init();

      /* ----- Here you could maybe add logic to set the HTML title to the new page title ----- */

      /* ----- Used for popState event (back/forward browser buttons) ----- */
      changedPage = true;
    },

    loadPage = function(url) {
      $("#content").load(url + " #content", ajaxLoad);
      console.log("Ajax Loaded");
    };

  /* ----- This runs on the first page load with no ajax ----- */
  init();

  $(window).on("popstate", function(e) {
    if (changedPage) loadPage(location.href);
    console.log("Popstate happened");
  });

  $(document).on('click', 'a', function() {
    var url = $(this).attr("href"),
      title = $(this).text();

    if (url.indexOf(document.domain) > -1 || url.indexOf(':') === -1) {

      history.pushState({
        url: url,
        title: title
      }, title, url);

      loadPage(url);
      return false;
    }

  });
});

jekyll模板

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{{ page.title }}</title>
    <meta name="viewport" content="width=device-width">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/main.css">

</head>

<body>

    <div class="site">
        <div class="header">
            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
            <a class="extra" href="/">home</a>
        </div>

        <div id="content">
          {{ content }}
        </div>

        <div class="footer">
            <div class="contact">
                <p>
                    Your Name is<br /> What You Are<br /> you@example.com
                </p>
            </div>
            <div class="contact">
                <p>
                    <a href="https://github.com/yourusername">github.com/yourusername</a><br />
                    <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
                </p>
            </div>
        </div>
    </div>
<script src="/js/jquery-3.2.0.min.js"></script>
<script src="/js/main.js"></script>
</body>

</html>

因此，使用此當前代碼，使用ajax加載頁面內容和瀏覽器pushState的功能都可以正常工作。

Answer 1

在嘗試多次編寫自己的代碼並不斷地對其執行正常工作產生問題之后，我找到了這個站點：

http://barbajs.org/

Barba.js在處理所有AJAX性能方面做得非常出色，並且具有一些出色的內置代碼，可用於設置自定義動畫，甚至用於唯一頁面。

您需要做的就是在模板中設置一個容器，並將該容器用作Barba的目標元素。

通過pushState和Jekyll使用AJAX加載

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-04 18:26:13

通過pushState和Jekyll使用AJAX加載

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-04 18:26:13

解決方案1
0 已采納 2017-08-04 18:26:13