使用Jekyll在Github上搭建博客 – 子菜单的实现

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

方法

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

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

{% highlight html %} {% raw %} /*!

• 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(); }); }); {% endraw %} {% endhighlight %}