pushState 및 Jekyll을 사용하여 AJAX 로딩하기

Jekyll 사이트를 개발할 때 사용할 스튜디오의 시작 템플릿을 만들려고하고 있는데 페이지 애니메이션 전환 기능을 원합니다. 이것에 대한 최선의 접근 방법은 AJAX를 사용하여 각 페이지의 다른 내용을로드 한 다음 pushState를 사용하여 URL 및 브라우저 기록을 업데이트하는 것입니다.pushState 및 Jekyll을 사용하여 AJAX 로딩하기

나는 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 아약스와 페이지 내용 브라우저를로드하는 기능이 있습니다 모든 일.

http://barbajs.org/

Barba.js 모든 AJAX 성능을 처리하는 아름다운 일을하고 있습니다

출처

2017-03-28 Tyler Bramer