title: Use AJAX loading with pushState and Jekyll
body: <p>I'm attempting to create a starting template for our studio to use when developing Jekyll sites and I want to have the ability to do page animation transitions. It is my understanding that the best approach to this would be to load in the different content from each page using AJAX and then using pushState to update the url and browser history. </p>
  
  <p>I have worked out the code to do the AJAX loading and do all of the pushState entries, and have the back and forward buttons working for history as well. <strong>The thing I'm having issues with is updating the page title.</strong> I want to put it in the ajaxLoad function so that it happens both when the user clicks links and when they use the back and forward buttons for the browser history. But I'm not exactly sure what code to use to accomplish this.</p>
  
  <p>I guess another question I would ask, since this is my first time trying to accomplish a task such as this, is: <strong>Is this coded in a sensible fashion? Or should I approach any methods differently?</strong></p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>$(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) &gt; -1 || url.indexOf(':') === -1) {
  
        history.pushState({
          url: url,
          title: title
        }, title, url);
  
        loadPage(url);
        return false;
      }
  
    });
  });
  </code></pre>
  
  <p><strong>jekyll template</strong>
      
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;{{ page.title }}&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="/css/main.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="site"&gt;
          &lt;div class="header"&gt;
              &lt;h1 class="title"&gt;&lt;a href="/"&gt;{{ site.name }}&lt;/a&gt;&lt;/h1&gt;
              &lt;a class="extra" href="/"&gt;home&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
            {{ content }}
          &lt;/div&gt;
  
          &lt;div class="footer"&gt;
              &lt;div class="contact"&gt;
                  &lt;p&gt;
                      Your Name is&lt;br /&gt; What You Are&lt;br /&gt; you@example.com
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="contact"&gt;
                  &lt;p&gt;
                      &lt;a href="https://github.com/yourusername"&gt;github.com/yourusername&lt;/a&gt;&lt;br /&gt;
                      &lt;a href="https://twitter.com/yourusername"&gt;twitter.com/yourusername&lt;/a&gt;&lt;br /&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script src="/js/jquery-3.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="/js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>So with this current code, the functionality of loading the page content with ajax and the browser pushState are all working.</p>