本博客主要介绍如何为自己的Github Blog页面添加子菜单功能。

方法

本blog发现Github搭建的blog并没有文章的子菜单功能,因此,我通过js脚本,实现了当blog加载完成后,自动生成子菜单的功能。

blog.nav.menu.js代码如下:

  
/*!
 * Xiexianbin blog nav menu
 * Copyright 2015 me@xiexianbin.cn, Per.
 * Licensed under http://www.apache.org/licenses/LICENSE-2.0
 */

var BlogNavMenu = {

	htmlDecode: function(text) {
		var temp = document.createElement("div");
		temp.innerHTML = text;
		var output = temp.innerText || temp.textContent;
		temp = null;
		return output;
	},

	/*
	create blog nav menu
	el: blog content DIV Container for jquery 
	mt is h2, and st is h3
	*/
	create: function(el, mt, st, interval) {
		/* get {{ content }} 's DIV Container */
		if (!el || el.length < 1)
		  return false;
		/* get all mt and st nodes in the special div */
		var nodes = el.find(mt+','+st);
		/* create blog sidebar nav Container */
		var divSideBar = $('#blog_nav_menu');
		var divSideBarTab = $('<span class="help-block">Navigation</span>');
		divSideBar.append(divSideBarTab);
        
		/* create nav Container */
		var divSideBarContents = $('<ul class="nav bs-docs-sidenav"></ul>');
		divSideBar.append(divSideBarContents);
        
        /* Statistics mt and st */
		var num = 0; 
		mt = mt.toUpperCase();
		st = st.toUpperCase();
		is_mt = false;
		var anchorTitle = "anchor";
		var item1 = '';
		var item2 = '';
		var nodetext = '';

		/* list all h2 and h3 */
		$.each(nodes, function() {
			var $this = $(this);
			switch ($this.get(0).tagName) {
				case mt:
					/* h2 */
					is_mt = true;
					divSideBarContents.append(item1);
					item1 = $("<li></li>");
					item2 == ''
					break;
				case st:
					/* h3 */
					is_mt = false;
					if ( item2 == ''){
						item2 = $('<ul class="nav"></ul>');
						item1.append(item2)
					}
					break;
			}
			
			/* get the test of h2 and h3  */
			nodetext = $this.text().replace(/<\/?[^>]+>/g, "");
			nodetext = nodetext.replace(/&nbsp;/ig, ""); /*replace all &nbsp;*/
			nodetext = BlogNavMenu.htmlDecode(nodetext);
			
			$this.attr("id", anchorTitle + num);
			a_url = '<a class="anchorjs-link nav-anchor" href="#' + anchorTitle + num + '" aria-label="Anchor link for: grid intro"></a>'
			$this.append(a_url)
			
			if (is_mt == true){
				tmp = $("<a></a>");
				tmp.text(nodetext);
				tmp.attr("href", "#" + anchorTitle + num);
				item1.append(tmp);
			}else{
				tmp1 = $("<li></li>");
				tmp2 = $("<a></a>");
				tmp2.text(nodetext);
				tmp2.attr("href", "#" + anchorTitle + num);
				tmp1.append(tmp2);
				item2.append(tmp1);
			}
			num++;
		})
		divSideBarContents.append(item1);
		divSideBarContents.append('<a class="back-to-top" href="#top">To Top</a>');

		if (num == 0)
		  return false;
	}
};

jQuery(function($) {
	$(document).ready(function() {
		/* when the blog page upload finish, then create blog nav menu */
		BlogNavMenu.create($("#blog_content"), "h2", "h3", 10);
		/*stick*/
		$('#blog_nav_menu').stickUp();
	});
});