GitHub - wagnlinzh/wagnlinzh.github.io: 1%

Branches Tags
Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
2015		2015
2016		2016
2017		2017
about		about
archives		archives
categories		categories
css		css
fonts		fonts
gallery		gallery
images		images
img		img
js		js
page		page
tags		tags
.DS_Store		.DS_Store
atom.xml		atom.xml
index.html		index.html
readme.html		readme.html
search.xml		search.xml
Repository files navigation

<!DOCTYPE html>
<html>
    <head>
    <!-- Title -->
    
    <title>
        wanglinzhizhi
    </title>
    
    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    
    <!-- Meta & INfo -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0D47A1">
    <meta name="author" content="wanglinzhizhi">
    <meta name="description" content="游走在上下文无关文法间">
    <meta name="keywords" content="wanglinzhizhi, Web, 移动Web, WebApp, F2E, Node ES6 JavaScript, Vue, CSS3, HTML5, Express, 算法, OS, 程序员的浪漫, 前后端分离, 前端架构, 架构, 游走在上下文无关文法间, 通往Web全栈的路上">
    
    <!--iOS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">
    
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="wanglinzhizhi">
    
    <!-- The Open Graph protocol -->
    <meta property="og:url" content="http://www.wanglinzhizhi.me">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="wanglinzhizhi">
    <meta property="og:description" content="游走在上下文无关文法间">
    
     <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">
        
        
            <script src="/js/ie-blocker.en.js"></script>
        
    <![endif]-->
    
    <!-- Import CSS -->
    <link rel="stylesheet" href="/css/material.min.css">
    <link rel="stylesheet" href="/css/style.min.css">
    <!-- Config CSS -->


<!-- Other Styles -->
<style>
	body, html{
		font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	
    a{
        color: #2196F3
    }
    
    .mdl-card__media,
    #search-label,
    #search-form-label:after,
    #scheme-Paradox .hot_tags-count,
    #scheme-Paradox .sidebar_archives-count,
    #scheme-Paradox .sidebar-colored .sidebar-header,
    #scheme-Paradox .sidebar-colored .sidebar-badge{
        background-color: #1565C0 !important
    }
    
	/* Sidebar User Drop Down Menu Text Color */
	#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
    #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus{
        color: #1565C0 !important
    }
    
    #post_entry-right-info,
    .sidebar-colored .sidebar-nav li:hover > a,
    .sidebar-colored .sidebar-nav li:hover > a i,
    .sidebar-colored .sidebar-nav li > a:hover,
    .sidebar-colored .sidebar-nav li > a:hover i,
    .sidebar-colored .sidebar-nav li > a:focus i,
    .sidebar-colored .sidebar-nav > .open > a,
    .sidebar-colored .sidebar-nav > .open > a:hover,
    .sidebar-colored .sidebar-nav > .open > a:focus,
    #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{
        color: #1565C0 !important
    }
    
    .toTop{
        background: #757575 !important
    }
		
	.material-layout .material-post>.material-nav,
	.material-layout .material-index>.material-nav,
	.material-nav a{
		color: #757575;
	}
		
	#scheme-Paradox .MD-burger-layer {
		background-color: #757575;
	}

	#scheme-Paradox #post-toc-trigger-btn{
		color: #757575;
	}
	
	.post-toc a:hover{
		color: #2196F3;
		text-decoration: underline;
	}
</style>


<!-- Theme Background Related-->

    <style>
        body{
            background-color: #F5F5F5
        }
		
		/* blog_info bottom background */
        #scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
            background-color: #fff;
        }
    </style>




<!-- Fade Effect -->

    <style>
        .fade {
            transition: all 800ms linear;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            opacity: 1;
        }

        .fade.out{
            opacity: 0;
        }
    </style>

	<script src="/js/jquery.min.js"></script>
	
	<link rel="stylesheet" href="/css/highlight/atom-one-dark.css">
	
	<!-- UC Browser Compatible-->
	<script>
		var agent = navigator.userAgent.toLowerCase();
		if(agent.indexOf('ucbrowser')>0) {
			document.write('<link rel="stylesheet" href="/css/uc.css">');
		   alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
		}
	</script>
    
    <!-- Custom Head -->
    
</head>
	
	

    <body id="scheme-Paradox">

		
        <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
				
			
			
            <!-- Main Container -->
            <main class="material-layout__content" id="main">
				
                <!-- Top Anchor -->
                <div id="top"></div>
				
				
                <!-- Hamburger Button -->
                <button class="MD-burger-icon sidebar-toggle">
                    <span class="MD-burger-layer"></span>
                </button>
				
				
                <!-- Post TOC -->


<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">
		
        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
	<!-- Paradox Post Header -->
	
		
			<!-- Random Thumbnail -->
			<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
				<script>
    
    var randomNum;
    randomNum = Math.floor(Math.random() * 5 + 1);
    
    $(".post_thumbnail-random").css('background-image', 'url(' + '/img/random/' + randomNum + '.png' + ')');
    
</script>

		
	
        <p class="article-headline-p">
            
        </p>
    </div>

	

				
				
					<!-- Paradox Post Info -->
					<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
    
    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/me.jpeg" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>wanglinzhizhi</strong>
        <span>May 29, 2017</span>
    </div>
    
    <div class="section-spacer"></div>
	
    <!-- Favorite -->
<!--
    <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
        <i class="material-icons" role="presentation">favorite</i>
        <span class="visuallyhidden">favorites</span>
    </button>
-->
    
    <!-- Tags (bookmark) -->
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        
    </ul>
    
    <!-- Share -->
    <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    
    
    <!-- Leancloud Views -->
    <a class="post_share-link" href="#">
        <li class="mdl-menu__item">
            <span id="/readme.html" class="leancloud-views_num" data-flag-title="">
     &nbsp;浏览量
</span>
        </li>
    </a>
    
    
    
    
    <!-- Share Twitter -->
    <a class="post_share-link" href="https://twitter.com/intent/tweet?text=&url=http://www.wanglinzhizhi.me//readme.html&via=wanglinzhizhi" target="_blank">
        <li class="mdl-menu__item">
            分享到 Twitter
        </li>
    </a>
    
    <!-- Share Google+ -->
    <a class="post_share-link" href="https://plus.google.com/share?url=http://www.wanglinzhizhi.me//readme.html" target="_blank">
        <li class="mdl-menu__item">
            分享到 Google+
        </li>
    </a>
    
    <!-- Share Weibo -->
    <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=&url=http://www.wanglinzhizhi.me//readme.html&pic=&searchPic=false&style=simple" target="_blank">
        <li class="mdl-menu__item">
            分享到微博
        </li>
    </a>
</ul>
</div>
				

                <!-- Post Content -->
                <div id="post-content" class="markdown-Github mdl-color-text--grey-700 mdl-card__supporting-text fade out">
	
		<h2 id="wanglinzhizhi’s-blog"><a href="#wanglinzhizhi’s-blog" class="headerlink" title="wanglinzhizhi’s blog"></a>wanglinzhizhi’s blog</h2>
	
	
	
	
</div>
				
				

                <!-- Post Comments -->
                
                    


                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    
    <!-- Prev Nav -->
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
</nav>
        </div>
    </div>

				
				
					<!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay "></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored  sidebar-fixed-left" role="navigation">
	<div id="sidebar-main">
	    <!-- Sidebar Header -->
		<div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
    <i class="material-icons">clear_all</i>
    <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/me.jpeg" alt="wanglinzhizhi's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        wanglinzhizhi@hotmail.com
        <b class="caret"></b>
    </a>
</div>

		<!-- Sidebar Navigation  -->
		<ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
			
                <li>
                    <a href="mailto:wanglinzhizhi@hotmail.com" target="_blank" title="Email Me">
						<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    <li id="sidebar-first-li">
        <a href="/" target="_self">
            <i class="material-icons sidebar-material-icons">home</i>
             主页
        </a>
    </li>

    <!-- I'm Feeling Lucky -->
<!--
    <li class="dropdown">
        <a href="" target="_self">
            <i class="material-icons sidebar-material-icons">explore</i>
             sidebar.imlucky
        </a>
    </li>
-->

	
    <!-- Archives  -->
    <li class="dropdown">
        <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
            <i class="material-icons sidebar-material-icons">inbox</i>
             归档
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
            <a class="sidebar_archives-link" href="/archives/2017/07/">July 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">March 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">February 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">January 2017<span class="sidebar_archives-count">73</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/02/">February 2016<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/01/">January 2016<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/12/">December 2015<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/08/">August 2015<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/06/">June 2015<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/04/">April 2015<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/03/">March 2015<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2015/01/">January 2015<span class="sidebar_archives-count">1</span></a>
        </ul>
    </li>

    <!-- Divider -->
    <li class="divider"></li>


    <!-- Pages  -->
	
		<li>
			<a href="/tags" title="Tags">
				Tags
			</a>
		</li>
	
		<li>
			<a href="/gallery" title="Gallery">
				Gallery
			</a>
		</li>
	
		<li>
			<a href="/about" title="About">
				About
			</a>
		</li>
	

    <!-- Article Numebr  -->
    <li>
        <a href="/archives">
             文章总数
             <span class="sidebar-badge">104</span>
        </a>
    </li>
</ul>

		<!-- Sidebar Divider -->
		<div class="sidebar-divider"></div>

	</div>
    
    <!-- Sidebar Sponsor -->
    


</aside>

				
				
				
				
				<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
	
	
		<!-- Paradox Footer Left Section -->
		<div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    
    
    
    <!-- Facebook -->
    
    
    
    <!-- Google + -->
    
    
    
    <!-- Weibo -->
    
    
    
    <!-- Instagram -->
    
    
    
    <!-- Tumblr -->
    
    
    
    <!-- Github -->
    
    <a href="https://github.com/wagnlinzh" target="view_window"><button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-github.png);">
        <span class="visuallyhidden">Github</span>
    </button></a>
    
</div>


		<!--Copyright-->
		<div id="copyright">Copyright&nbsp;©&nbsp;<script type="text/javascript">var fd = new Date();document.write(fd.getFullYear());</script>&nbsp;wanglinzhizhi</div>

		<!-- Paradox Footer Right Section -->

		<!-- 
		I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright.
		It will not impact the appearance and can give developers a lot of support :)

		很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
		它不会影响美观并可以给开发者很大的支持。 :) 
		-->

		<div class="mdl-mini-footer--right-section">
			<div>
				<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
				<div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
			</div>
		</div>
	
    
</footer>
                
				<!-- Import File -->
<script src="/js/highlight.min.js"></script>
<script src="/js/js.min.js"></script>
<script src="/js/nprogress.js"></script>

<script type="text/javascript">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    
    $('#nprogress .bar').css({
        'background': '#2196F3'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #2196F3, 0 0 15px #2196F3'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#2196F3',
        'border-left-color': '#2196F3'
    });
    
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>


	<script src="/js/smoothscroll.js"></script>



    <!-- Leancloud -->
	<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
	<script>
		AV.initialize("EObBAbqpQfNFLuV5SjbVgoxq-gzGzoHsz", "qPdmjfSU3DDmPPH9ui0cUW4z");
	</script>
    <script>
	function showTime(Counter) {
		var query = new AV.Query(Counter);
		$(".leancloud-views_num").each(function() {
			var url = $(this).attr("id").trim();
			query.equalTo("url", url);
			query.find({
				success: function(results) {
					if (results.length == 0) {
						var content = '0 ' + $(document.getElementById(url)).text();
						$(document.getElementById(url)).text(content);
						return;
					}
					for (var i = 0; i < results.length; i++) {
						var object = results[i];
						var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
						$(document.getElementById(url)).text(content);
					}
				},
				error: function(object, error) {
					console.log("Error: " + error.code + " " + error.message);
				}
			});

		});
	}

	function addCount(Counter) {
		var Counter = AV.Object.extend("Counter");
		url = $(".leancloud-views_num").attr('id').trim();
		title = $(".leancloud-views_num").attr('data-flag-title').trim();
		var query = new AV.Query(Counter);
		query.equalTo("url", url);
		query.find({
			success: function(results) {
				if (results.length > 0) {
					var counter = results[0];
					counter.fetchWhenSave(true);
					counter.increment("time");
					counter.save(null, {
						success: function(counter) {
							var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
							$(document.getElementById(url)).text(content);
						},
						error: function(counter, error) {
							console.log('Failed to save Visitor num, with error message: ' + error.message);
						}
					});
				} else {
					var newcounter = new Counter();
					newcounter.set("title", title);
					newcounter.set("url", url);
					newcounter.set("time", 1);
					newcounter.save(null, {
						success: function(newcounter) {
							console.log("newcounter.get('time')="+newcounter.get('time'));
							var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
							$(document.getElementById(url)).text(content);
						},
						error: function(newcounter, error) {
							console.log('Failed to create');
						}
					});
				}
			},
			error: function(error) {
				console.log('Error:' + error.code + " " + error.message);
			}
		});
	}
	$(function() {
		var Counter = AV.Object.extend("Counter");
		if ($('.leancloud-views_num').length == 1) {
			addCount(Counter);
		} else if ($('.post-title-link').length > 1) {
			showTime(Counter);
		}
	}); 
</script>








<!-- Swiftye -->


<!-- Local Search-->

	<script>
	var searchFunc = function(path, search_id, content_id) {
    'use strict';
    $.ajax({
        url: path,
        dataType: "xml",
        success: function( xmlResponse ) {
            // get the contents from search data
            var datas = $( "entry", xmlResponse ).map(function() {
                return {
                    title: $( "title", this ).text(),
                    content: $("content",this).text(),
                    url: $( "url" , this).text()
                };
            }).get();
            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);
            $input.addEventListener('input', function(){
                var str='<ul class=\"search-result-list\">';                
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length <= 0) {
                    return;
                }
                // perform local searching
                datas.forEach(function(data) {
                    var isMatch = true;
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty titles and contents
                    if(data_title != '' && data_content != '') {
                        keywords.forEach(function(keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            if( index_title < 0 && index_content < 0 ){
                                isMatch = false;
                            } else {
                                if (index_content < 0) {
                                    index_content = 0;
                                }
                                if (i == 0) {
                                    first_occur = index_content;
                                }
                            }
                        });
                    }
                    // show search results
                    if (isMatch) {
                        str += "<li><a href='"+ data_url +"' class='search-result-title' target='_blank'>"+ data_title;
                        var content = data.content.trim().replace(/<[^>]+>/g,"");
                        if (first_occur >= 0) {
                            // cut out characters
                            var start = first_occur - 6;
                            var end = first_occur + 6;
                            if(start < 0){
                                start = 0;
                            }
                            if(start == 0){
                                end = 10;
                            }
                            if(end > content.length){
                                end = content.length;
                            }
                            var match_content = content.substr(start, end); 
                            // highlight all keywords
                            keywords.forEach(function(keyword){
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS, "<em class=\"search-keyword\">"+keyword+"</em>");
                            })
                            str += "<p class=\"search-result\">" + match_content +"...</p>" +"</a>";
                        }
                    }
                })
                $resultContent.innerHTML = str;
            })
        }
    })
}
</script>

	<script>
        var inputArea = document.querySelector("#search");
        var getSearchFile = function(){
            var path = "search.xml";
            searchFunc(path, 'search', 'local-search-result');
        }

        inputArea.onfocus = function(){ getSearchFile() }
	</script>


<!-- Window Load-->
<script>
    $(window).load(function() {
        // Post_Toc parent position fixed
        $(".post-toc-wrap").parent(".mdl-menu__container").css("position", "fixed");
    });
</script>

<!-- MathJax Load-->

            </main>
        </div>
		
    </body>
		
	
</html>
wagnlinzh/wagnlinzh.github.io

Folders and files

Latest commit

History

Repository files navigation

About

Topics

Resources

Stars

Watchers

Forks

Languages
