使用 AJAX 加载 pushState 和 Jekyll

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 的目标元素。

使用 AJAX 加载 pushState 和 Jekyll

Use AJAX loading with pushState and Jekyll

javascript

ajax

jquery

jekyll

pushstate