Я использую купленный шаблон HTML / Ajax и подключаю его к моей серверной части Django. Тем не менее, когда я пытаюсь использовать относительные URL (например: / contact / about-us), страница не загружается и остается пустой.
Я думаю, что это как-то связано с загрузкой страницы Ajax темы. Потому что, когда используются такие URL: contact.html & about-us.html, страницы загружаются. Проверьте демонстрацию темы здесь: http://clapat.ro/themes/tetris/index.html
Это фрагмент кода, который загружает страница Ajax:
function AjaxLoad() {
jQuery(document).ready(function(){
var isAnimating = false,
newLocation = '';
firstLoad = false;
//trigger smooth transition from the actual page to the new one
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
*/
var newPageArray = location.pathname.split('/'),
//this is the url of the page to be loaded
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating && newLocation != newPage ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
// trigger page animation
$('body').addClass('page-is-changing');
$('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
loadNewContent(url, bool);
newLocation = url;
$('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
//if browser doesn't support CSS transitions
if( !transitionsSupported() ) {
loadNewContent(url, bool);
newLocation = url;
}
}
function loadNewContent(url, bool) {
url = ('' == url) ? 'index.html' : url;
var section = $('<div class="cd-main-content "></div>');
section.load(url+' .cd-main-content > *', function(event){
// load new content and replace <main> content with the new one
$('main').html(section);
var clapat_title = event.match(/<title[^>]*>([^<]+)<\/title>/)[1];
$('head title').html( clapat_title );
$('html, body').scrollTop(0);
//if browser doesn't support CSS transitions - dont wait for the end of transitions
var delay = ( transitionsSupported() ) ? 30 : 0;
setTimeout(function(){
//wait for the end of the transition on the loading bar before revealing the new content
$('body').removeClass('page-is-changing');
$('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
isAnimating = false;
$('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
FirstLoad();
HeroSection();
LazyLoad();
MasonryPortfolio();
HideShowHeader();
PageProgress();
FooterAppear();
Sliders();
Lightbox();
AppearIteam();
BackToTop();
ContactForm();
CollagePlus();
PlayVideo();
if( !transitionsSupported() ) isAnimating = false;
}, delay);
if(url!=window.location && bool){
window.history.pushState({path: url},'',url);
}
});
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
});
}// End Ajax Load
Как я могу настроить это так, чтобы он принимал относительные URL? Потому что я мало знаю о JavaScript. Вся помощь приветствуется.