Merge pull request #129 from oupala/feature/breadcrumb

feat: add a breadcrumb

apaxy/theme/apaxy.js

@@ -74,3 +74,29 @@ if (uri.substring(uri.length - 1) !== '/') {
 	});
 
 })(document);
+
+// generate a breadcrumb
+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("breadcrumb").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);
+        }
+}

apaxy/theme/header.html

@@ -1,4 +1,7 @@
 <div class="wrapper">
 <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
 
+<ol class="breadcrumb" id="breadcrumb">
+</ol>
+
 <input type="search" id="filter" placeholder="filter contents" />

apaxy/theme/style.css

@@ -250,3 +250,53 @@ tr.parent a[href^="/"] {
 .errorCode {
 	font-size: 80px;
 }
+
+/*------------------------------------*\
+    Breadcrumb
+\*------------------------------------*/
+
+.breadcrumb {
+    white-space: nowrap;
+    padding: 0;
+    margin: 0;
+}
+.breadcrumb li {
+    display: inline-block;
+    line-height: 26px;
+    margin: 0 9px 0 -10px;
+    padding: 0 15px;
+    position: relative;
+}
+.breadcrumb li::before,
+.breadcrumb li::after {
+    border-right: 1px solid #666666;
+    content: '';
+    display: block;
+    height: 50%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    transform: skewX(45deg);
+}
+.breadcrumb li::after {
+    bottom: 0;
+    top: auto;
+    transform: skewX(-45deg);
+}
+
+.breadcrumb li:last-of-type::before,
+.breadcrumb li:last-of-type::after {
+    display: none;
+}
+
+.breadcrumb li a {
+   letter-spacing: -1px;
+   text-decoration: none;
+}
+
+.breadcrumb li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
+.breadcrumb li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
+.breadcrumb li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
+.breadcrumb li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }