使用AJAX加載pushState和Jekyll

我正在嘗試爲我們的工作室創建一個啓動模板，以便在開發Jekyll站點時使用，並且我希望能夠執行頁面動畫轉換。我的理解是，最好的方法是使用AJAX加載來自每個頁面的不同內容，然後使用pushState更新URL和瀏覽器歷史記錄。使用AJAX加載pushState和Jekyll

我已經計算出了執行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; 
    } 

    }); 
});

傑奇模板

<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 /> [email protected] 
       </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>

所以用這個當前的代碼，加載網頁內容與阿賈克斯和瀏覽器pushState的的功能是所有的工作。

來源

2017-03-28 Tyler Bramer