-
Notifications
You must be signed in to change notification settings - Fork 2
1%
wagnlinzh/wagnlinzh.github.io
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
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="">
浏览量
</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 © <script type="text/javascript">var fd = new Date();document.write(fd.getFullYear());</script> 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>
About
1%
Topics
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published