Closed danndaghost closed 5 years ago
Hello danndaghost, I've noticed that the breadcrumb isn't included in the latest release. Could you share how you achieved adding the breadcrumb?
@f13dev I've created the following jQuery function to generate a breadcrumb navigation based on the URL:
function generateBreadcrumbs(hostname, path, rootDirectory, element) {
var breadcrumbs = path.split('/').slice(1, -1);
var concatenateBreadcrumbs = '';
if (breadcrumbs == 0) {
var rootDirectory = $('<span>').text(rootDirectory);
}
else {
var rootDirectory = $('<a>').attr('href', hostname).text(rootDirectory);
}
element.append(rootDirectory).append(' / ');
$.each(breadcrumbs, function(key, value) {
var breadcrumb = decodeURIComponent(value);
var isLastBreadcrumb = key == breadcrumbs.length -1;
concatenateBreadcrumbs += breadcrumb + '/';
if (isLastBreadcrumb) {
var span = $('<span>').text(breadcrumb);
element.append(span).append(' / ');
}
else {
var a = $('<a>').attr('href', hostname + '/' + concatenateBreadcrumbs).text(breadcrumb);
element.append(a).append(' / ');
}
});
}
Call the function this way:
generateBreadcrumbs(location.origin, location.pathname, 'Root', $('#breadcrumbs'));
Remember to add the HTML where the breadcrumbs should occur:
<h4 id="breadcrumbs"></h4>
You may have to play around with it a bit depending on how you've set up your own theme. Hope it helps :)
I do this on js
var uri = window.location.pathname.substr(1);
var arr = uri.split('/');
var url = ""
var bread = '<li><strong><a href="/">Home</a></strong></li>';
var cont = 1;
arr.forEach(function(value){
url = url + '/' + value;
if(value != ''){
if(arr.length == cont+1)
bread += "<li class='active'>"+decodeURI(value)+"</li>";
else
bread += "<li><a href='"+url+"'>"+decodeURI(value)+"</a></li>";
}
cont++;
});
document.getElementById("breadcrumbs").innerHTML = bread;
if (uri.substring(uri.length-1) != '/'){
var indexes = document.getElementsByClassName('indexcolname'),
i = indexes.length;
while (i--){
var a = indexes[i].getElementsByTagName('a')[0];
a.href = uri + '/' + a.getAttribute('href',2);
}
}
In the header
<ol class="breadcrumb" id="breadcrumbs">
</ol>
This issue should be converted to a pull request.
Could you please open a pull request for this change?
apaxy does not use jQuery so we cannot use proposal from @danielwinther. Thanks anyway for contributing.
I tried the solution from @danndaghost and it works well. It still needs some css styling though. I opened pull request #129 for testing purposes and to let anyone add the css styling.
Hello, i add breadcrumb to apaxy, tell me if you want to up or see it. Thx!