Single page website approach
Question
I'm currently developing a website and I would like to gather the experts' opinions out there to know whether I'm taking the right direction or not as I'd literally zero knowledge in web design prior to starting its development two days ago. I hope the question is not too vague and can be backed up with actual facts and not just 'opinions'
As for numerous websites available on the internet, mine has permanent header and footer that all pages share. Therefore, when I was reflecting on how to design the website, I came up with two choices :
- Create an HTML header and footer that I would re-import in each and every page
- Create a template page with the header and footer and import/modify only the content in that page (within the 'section 'tag' in my case).
Wrongly or justly, I opted for the second option because I considered it would make more sense and actually simplify the 'content HTML file' as it would basically just have to contain the actual article. I also thought it would make for a neater approach and more fluid navigation experience as no page transition would be observable when changing from one article to the other (as literally the whole browsing experience is done in one page).
However, this solution comes with its own problems. For instance, as the URL remains the same, how to share one article with a friend by the mean of the URL? Not possible... I, therefore, implemented a workaround solution. The idea is simple: modifying the URL by appending some arguments. It works fine but I'm wondering if it's not overkilled. Moreover, I fear the page is actually refreshed whenever the URL is modified (be it just to change one argument...). Is that the case?
Here is my script. If no arguments are passed to the URL, the website displays the main page in English and add those arguments to the URL (page=home and lang=en). I've noticed however that the page is loaded two times with this approach... (it's reloaded when I modify the URL as mentioned above...). How can I avoid this behavior?
<script>
$(document).ready(function() {
var params, mainUrl;
mainUrl = window.location.href;
params = window.location.search.substr(1);
if (!params) { //if params is empty
linkName = "home-en";
window.location.href = mainUrl + "?page=home&lang=en";
} else {
var n = params.search("page=") + 5;
var m = params.search("&lang=");
linkName = params.substr(n, m - n);
lang = params.substr(m + 6);
}
$('#' + lang).addClass('selected');
document.body.className = lang;
document.body.className = 'en'
$("#included-content").load(linkName + "-" + lang + ".html");
$('.link').click(function(element) {
newLinkName = $(this).attr('id');
window.location.href = mainUrl.replace("page=" + linkName, "page=" + newLinkName);
$("#included-content").load(linkName + "-" + lang + ".html");
return false;
});
var buttons = $('#languages button');
buttons.on('click', function(e) {
buttons.removeClass('selected');
$(this).addClass('selected');
var newlang = $(this).attr('id');
window.location.href = mainUrl.replace("&lang=" + lang, "&lang=" + newlang);
$("#included-content").load(linkName + "-" + lang + ".html");
});
});
</script>
Here is the body :
<body>
<div id="wrapper">
<header>
<h1> Title</h1>
<div id="languages">
<button id="en" type="button" onclick="document.body.className = 'en'">En</button>
<button id="fr" type="button" onclick="document.body.className = 'fr'">Fr</button>
</div>
</header>
<nav>
<ul lang="en">
<li><a href="" class="link" id="home">Home</a></li>
<li><a href="" class="link" id="books">Books</a></li>
<li><a href="" class="link" id="articles">Articles</a></li>
<li><a href="" class="link" id="biography">Bio</a></li>
</ul>
<ul lang="fr">
<li><a href="" class="link" id="home">Accueil</a></li>
<li><a href="" class="link" id="books">Livres</a></li>
<li><a href="" class="link" id="articles">Articles</a></li>
<li><a href="" class="link" id="biography">Bio</a></li>
</ul>
</nav>
<section>
<div id="included-content"></div>
</section>
<footer>
<p> Author © all rights reserved</p>
</footer>
</div>
</body>
The id s in the list share its name with the HTML files (home-fr.html or biography-en.html for instance).
So, my question is basically to know if it's a decent approach and if it's being done similarly in 'real website applications'? I know that to deal with the website language, passing an argument to the URL is the proper approach but I'm worried that it's overcomplicating everything for the pages. I'm also wondering if it does really provide advantages when it comes to the navigation experience. I'm thinking that maybe nowadays when changing from one page to another that share the same header and footer, the browser is able to keep them on the page and doesn't need to erase and then re-draw those.
I hope I've been able to speak my mind clearly. Is this approach viable?
1 answers
solution1
2 ACCPTED 2018-01-10 13:54:40
you should try using the hash # in the url so your application knows what url you looking for, for example
example.com/#/share/post/546
Using javascript it will be accessible via
window.location.hash
So you simply pass it to your application
For example
var url = window.location.hash;
//jquery script
jQuery('#appbody').load(url);
I hope this insight was helpful, as this will stop any possible refreshing and enables sharing of link
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.