Breadcrumb

[danndaghost]

Hello, i add breadcrumb to apaxy, tell me if you want to up or see it. Thx!

[f13dev]

Hello danndaghost, I've noticed that the breadcrumb isn't included in the latest release. Could you share how you achieved adding the breadcrumb?

[DanielDK100]

@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 :)

[danndaghost]

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>

[oupala]

This issue should be converted to a pull request.

[oupala]

Could you please open a pull request for this change?

[oupala]

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.