我正在尝试为我们的工作室创建一个起始模板，以便在开发 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的功能都可以工作。
最佳答案
在多次尝试编写自己的代码并不断遇到其正确执行的问题后，我发现了这个网站:
Barba.js 在处理所有 AJAX 性能方面做得非常出色，并且有一些很棒的内置代码用于设置自定义动画，甚至对于独特的页面也是如此。
您需要做的就是在模板中设置一个容器并将该容器用作 Barba 的目标元素。
关于javascript - 通过 PushState 和 Jekyll 使用 AJAX 加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43074162/