nicecode/nicenote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ddc005c13c
nicenote/public/urlMaker.html
江志雄 90b97799ce 自动部署
2018-07-13 16:54:43 +08:00

1323 lines
59 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html style="display: none;" lang="zh">
<head>
<meta charset="utf-8">
<!--
© Material Theme
https://github.com/viosey/hexo-theme-material
Version: 1.5.2 -->
<script>
window.materialVersion = "1.5.2"
// Delete localstorage with these tags
window.oldVersion = [
'codestartv1',
'1.3.4',
'1.4.0',
'1.4.0b1',
'1.5.0'
]
</script>
<!-- dns prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://cdn1.lncld.net"/>
<!-- Meta & Info -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Title -->
<title>
urlMaker |
Feax&#39;s Blog
</title>
<!-- Favicons -->
<link rel="icon shortcut" type="image/ico" href="/img/favicon.ico">
<link rel="icon" href="/img/favicon.png">
<meta name="format-detection" content="telephone=no"/>
<meta name="description" itemprop="description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta name="keywords" content="全栈,javascript,react,vue,webpack,koa2,react,webpack">
<meta name="theme-color" content="#70c2cd">
<!-- Disable Fucking Bloody Baidu Tranformation -->
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/ie-blocker.css">
<script src="/js/ie-blocker.zhCN.js"></script>
<![endif]-->
<!-- Import lsloader -->
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(a){try{localStorage.removeItem(a)}catch(b){}};lsloader.setLS=function(a,c){try{localStorage.setItem(a,c)}catch(b){}};lsloader.getLS=function(a){var c="";try{c=localStorage.getItem(a)}catch(b){c=""}return c};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var b=[];for(var a=0;a<localStorage.length;a++){b.push(localStorage.key(a))}b.forEach(function(e){var f=lsloader.getLS(e);if(window.oldVersion){var d=window.oldVersion.reduce(function(g,h){return g||f.indexOf("/*"+h+"*/")!==-1},false);if(d){lsloader.removeLS(e)}}})}catch(c){}};lsloader.clean();lsloader.load=function(f,a,b,d){if(typeof b==="boolean"){d=b;b=undefined}d=d||false;b=b||function(){};var e;e=this.getLS(f);if(e&&e.indexOf(versionString)===-1){this.removeLS(f);this.requestResource(f,a,b,d);return}if(e){var c=e.split(versionString)[0];if(c!=a){console.log("reload:"+a);this.removeLS(f);this.requestResource(f,a,b,d);return}e=e.split(versionString)[1];if(d){this.jsRunSequence.push({name:f,code:e});this.runjs(a,f,e)}else{document.getElementById(f).appendChild(document.createTextNode(e));b()}}else{this.requestResource(f,a,b,d)}};lsloader.requestResource=function(b,e,a,c){var d=this;if(c){this.iojs(e,b,function(h,f,g){d.setLS(f,h+versionString+g);d.runjs(h,f,g)})}else{this.iocss(e,b,function(f){document.getElementById(b).appendChild(document.createTextNode(f));d.setLS(b,e+versionString+f)},a)}};lsloader.iojs=function(d,b,g){var a=this;a.jsRunSequence.push({name:b,code:""});try{var f=new XMLHttpRequest();f.open("get",d,true);f.onreadystatechange=function(){if(f.readyState==4){if((f.status>=200&&f.status<300)||f.status==304){if(f.response!=""){g(d,b,f.response);return}}a.jsfallback(d,b)}};f.send(null)}catch(c){a.jsfallback(d,b)}};lsloader.iocss=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.iofonts=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.runjs=function(f,c,e){if(!!c&&!!e){for(var b in this.jsRunSequence){if(this.jsRunSequence[b].name==c){this.jsRunSequence[b].code=e}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var a=document.createElement("script");a.appendChild(document.createTextNode(this.jsRunSequence[0].code));a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else{if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var d=this;var a=document.createElement("script");a.src=this.jsRunSequence[0].path;a.type="text/javascript";this.jsRunSequence[0].status="loading";a.onload=function(){d.jsRunSequence.shift();if(d.jsRunSequence.length>0){d.runjs()}};document.body.appendChild(a)}}};lsloader.tagLoad=function(b,a){this.jsRunSequence.push({name:a,code:"",path:b,status:"failed"});this.runjs()};lsloader.jsfallback=function(c,b){if(!!this.jsnamemap[b]){return}else{this.jsnamemap[b]=b}for(var a in this.jsRunSequence){if(this.jsRunSequence[a].name==b){this.jsRunSequence[a].code="";this.jsRunSequence[a].status="failed";this.jsRunSequence[a].path=c}}this.runjs()};lsloader.cssfallback=function(e,c,b){if(!!this.cssnamemap[c]){return}else{this.cssnamemap[c]=1}var d=document.createElement("link");d.type="text/css";d.href=e;d.rel="stylesheet";d.onload=d.onerror=b;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(d,a)};lsloader.runInlineScript=function(c,b){var a=document.getElementById(b).innerText;this.jsRunSequence.push({name:c,code:a});this.runjs()}})();</script>
<!-- Import queue -->
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
<!-- Import CSS -->
<style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_css","/css/prettify.min.css?zp8STOU9v89XWFEnN+6YmQ==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_theme"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_theme","/css/prettify/vibrant-ink.min.css?e5E/qqGcGveS7VTH4M896w==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Config CSS -->
<!-- Other Styles -->
<style>
body, html {
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
overflow-x: hidden !important;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
a {
color: #679cc5;
}
.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: #785470 !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: #785470 !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: #785470 !important;
}
.toTop {
background: #1a1d3a !important;
}
.material-layout .material-post>.material-nav,
.material-layout .material-index>.material-nav,
.material-nav a {
color: #1a1d3a;
}
#scheme-Paradox .MD-burger-layer {
background-color: #1a1d3a;
}
#scheme-Paradox #post-toc-trigger-btn {
color: #1a1d3a;
}
.post-toc a:hover {
color: #679cc5;
text-decoration: underline;
}
</style>
<!-- Theme Background Related-->
<style>
body{
background-image: url(/img/bg.png);
}
</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>
<!-- Import Font -->
<!-- Import Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Import Material Icons -->
<style id="material_icons"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_icons","/css/material-icons.css?pqhB/Rd/ab0H2+kZp0RDmw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Import jQuery -->
<script>lsloader.load("jq_js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==", true)</script>
<!-- WebAPP Icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Feax&#39;s Blog">
<meta name="msapplication-starturl" content="http://blog.jzxer.cn/urlMaker.html">
<meta name="msapplication-navbutton-color" content="#70c2cd">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Feax&#39;s Blog">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/img/favicon.png">
<!-- Site Verification -->
<meta name="baidu-site-verification" content="z1eJ8hGeNJ" />
<!-- RSS -->
<link rel=alternate type="application/atom+xml" href="/atom.xml">
<!-- The Open Graph protocol -->
<meta property="og:url" content="http://blog.jzxer.cn/urlMaker.html">
<meta property="og:type" content="blog">
<meta property="og:title" content="urlMaker | Feax&#39;s Blog">
<meta property="og:image" content="/img/favicon.png">
<meta property="og:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta property="og:article:tag" content="react"> <meta property="og:article:tag" content="webpack">
<meta property="article:published_time" content="Mon Dec 18 2017 16:38:42 GMT+0800">
<meta property="article:modified_time" content="Fri May 25 2018 15:45:07 GMT+0800">
<!-- The Twitter Card protocol -->
<meta name="twitter:card" content="summary_large_image">
<!-- Add canonical link for SEO -->
<link rel="canonical" href="http://blog.jzxer.cn/urlMaker.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "http://blog.jzxer.cn/urlMaker.html",
"headline": "urlMaker",
"datePublished": "Mon Dec 18 2017 16:38:42 GMT+0800",
"dateModified": "Fri May 25 2018 15:45:07 GMT+0800",
"author": {
"@type": "Person",
"name": "Feax",
"image": {
"@type": "ImageObject",
"url": "/img/avatar.png"
},
"description": "对的，坚持！,,错的，放弃！"
},
"publisher": {
"@type": "Organization",
"name": "Feax&#39;s Blog",
"logo": {
"@type":"ImageObject",
"url": "/img/favicon.png"
}
},
"keywords": ",react,webpack全栈,javascript,react,vue,webpack,koa2",
"description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2",
}
</script>
<!-- Analytics -->
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?fd3e8c663917a054564de87b31397113';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Custom Head -->
</head>
<body id="scheme-Paradox" class="lazy">
<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 -->
<!-- Back Button -->
<!--
<div class="material-back" id="backhome-div" tabindex="0">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
href="#" onclick="window.history.back();return false;"
target="_self"
role="button"
data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_back</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</a>
</div>
-->
<!-- Left aligned menu below button -->
<button id="post-toc-trigger-btn"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">format_list_numbered</i>
</button>
<ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
<ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#urlMaker-开发流程"><span class="post-toc-number">1.</span> <span class="post-toc-text">urlMaker 开发流程</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#项目需求"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">项目需求</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#技术栈"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">技术栈</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#前期准备"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">前期准备</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#环境配置"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">环境配置</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#webpack-核心模块"><span class="post-toc-number">1.4.1.</span> <span class="post-toc-text">webpack 核心模块</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#entry"><span class="post-toc-number">1.4.1.1.</span> <span class="post-toc-text">entry</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#output"><span class="post-toc-number">1.4.1.2.</span> <span class="post-toc-text">output</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#module"><span class="post-toc-number">1.4.1.3.</span> <span class="post-toc-text">module</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#plugins"><span class="post-toc-number">1.4.1.4.</span> <span class="post-toc-text">plugins</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#webpack-推荐模块"><span class="post-toc-number">1.4.2.</span> <span class="post-toc-text">webpack 推荐模块</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#webpack-dev-server"><span class="post-toc-number">1.4.2.1.</span> <span class="post-toc-text">webpack-dev-server</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#html-webpack-plugin"><span class="post-toc-number">1.4.2.2.</span> <span class="post-toc-text">html-webpack-plugin</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#clean-webpack-plugin"><span class="post-toc-number">1.4.2.3.</span> <span class="post-toc-text">clean-webpack-plugin</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#extract-text-webpack-plugin"><span class="post-toc-number">1.4.2.4.</span> <span class="post-toc-text">extract-text-webpack-plugin</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#friendly-errors-webpack-plugin"><span class="post-toc-number">1.4.2.5.</span> <span class="post-toc-text">friendly-errors-webpack-plugin</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#package-json-配置"><span class="post-toc-number">1.4.3.</span> <span class="post-toc-text">package.json 配置</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#依赖包"><span class="post-toc-number">1.4.3.1.</span> <span class="post-toc-text">依赖包</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#1-autoprefixer-需要和-postcss-loader-一起使用"><span class="post-toc-number">1.4.3.1.1.</span> <span class="post-toc-text">1. autoprefixer(需要和 postcss-loader 一起使用)</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#2-babel-合集"><span class="post-toc-number">1.4.3.1.2.</span> <span class="post-toc-text">2. babel 合集</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#3-react-transform-catch-errors、redbox-react"><span class="post-toc-number">1.4.3.1.3.</span> <span class="post-toc-text">3. react-transform-catch-errors、redbox-react</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#4-copy-to-clipboard"><span class="post-toc-number">1.4.3.1.4.</span> <span class="post-toc-text">4. copy-to-clipboard</span></a></li></ol></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#项目挖坑大全"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">项目挖坑大全</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"><span class="post-toc-number">1.5.1.</span> <span class="post-toc-text">关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#关于图片打包"><span class="post-toc-number">1.5.2.</span> <span class="post-toc-text">关于图片打包</span></a></li></ol></li></ol></li></ol>
</ul>
<!-- 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 type="text/ls-javascript" id="post-thumbnail-script">
var randomNum = Math.floor(Math.random() * 19 + 1);
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
$('.post_thumbnail-random').addClass('lazy');
</script>
<p class="article-headline-p">
urlMaker
</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/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
</div>
<!-- Author Name & Date -->
<div>
<strong>Feax</strong>
<span>12月 18, 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>
-->
<!-- Qrcode -->
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">devices other</i>
<span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAAAAACs8KCBAAAB7klEQVR42u3aQXLCMAwF0Nz/0u0BmJgvKZQmfl4xTDB6LIRl6fh5xDowMDAwMDAwMP4N44jX66fOdjh7cv1OOQYMDIzNGG9S20vQZ0HksPWe6xgwMDB2Zpx9fRJKEuJZuM0YMDAwMAJGcrBbHwExMDAwPsGYJ+heSYyBgYFRLiDjJLt+/mu1OAYGxg0Z+aX8517/aX8DAwPjVozmoEOxQE0amV+YGcHAwLgJo5oc18e+XguzOpyBgYGxMyNPkZNAq9/VrMUxMDAex6hek82PgFUkBgYGRh7QZLQib1VGw2QYGBibMfLkOGlb5jtEPysGBgZG3BjoFbRJkh1Nt2FgYDyOkSTNalKuFq55DBgYGLsxeg3LfOTiqnT8pojFwMDYjFG9oO8Vusmeo4SLgYHxaMZk68kVXjm5Y2BgbMOoDrCuX+eJNT8OjhoDGBgYj2BclXAnwxbNCz4MDIxtGHlzMW9b9krcfDcMDIzdGNWVH+/WCbR3bYeBgbEn44hX3k7Ij4zJwRQDAwOjerBLnuyN1+dsDAyMnRnJJX4eSnXYoszDwMDAKA5D9C7XqskaAwMDo5pwe4fC6hHw4/8bGBgYt2JcVcRGJWjwzmjYAgMD43GMvDEwGQibtB8u7m9gYGDcinHfhYGBgYGBgYHx1fULzAN9guHACfMAAAAASUVORK5CYII=">
</ul>
<!-- 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">
<a class="post_tag-link" href="/tags/react/">react</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/webpack/">webpack</a>
</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="/urlMaker.html" class="leancloud-views_num" data-flag-title="urlMaker">
&nbsp;浏览量
</span>
</li>
</a>
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=urlMaker&url=http://blog.jzxer.cn/urlMaker.html&pic=http://blog.jzxer.cn/img/favicon.ico&searchPic=false&style=simple" target="_blank">
<li class="mdl-menu__item">
分享到微博
</li>
</a>
<!-- Share Twitter -->
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=urlMaker&url=http://blog.jzxer.cn/urlMaker.html&via=Feax" target="_blank">
<li class="mdl-menu__item">
分享到 Twitter
</li>
</a>
<!-- Share Facebook -->
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://blog.jzxer.cn/urlMaker.html" target="_blank">
<li class="mdl-menu__item">
分享到 Facebook
</li>
</a>
<!-- Share Google+ -->
<a class="post_share-link" href="https://plus.google.com/share?url=http://blog.jzxer.cn/urlMaker.html" target="_blank">
<li class="mdl-menu__item">
分享到 Google+
</li>
</a>
<!-- Share LinkedIn -->
<a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://blog.jzxer.cn/urlMaker.html&title=urlMaker" target="_blank">
<li class="mdl-menu__item">
分享到 LinkedIn
</li>
</a>
<!-- Share QQ -->
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Feax&#39;s Blog&title=urlMaker&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=http://blog.jzxer.cn/img/favicon.ico&url=http://blog.jzxer.cn/urlMaker.html" target="_blank">
<li class="mdl-menu__item">
分享到 QQ
</li>
</a>
<!-- Share Telegram -->
</ul>
</div>
<!-- Post Content -->
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
<h1 id="urlMaker-开发流程"><a href="#urlMaker-开发流程" class="headerlink" title="urlMaker 开发流程"></a>urlMaker 开发流程</h1><h2 id="项目需求"><a href="#项目需求" class="headerlink" title="项目需求"></a>项目需求</h2><ul>
<li>对 url 链接中的汉字和参数进行替换</li>
</ul>
<h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul>
<li><p>框架：react</p>
<blockquote>
<p>注意：路由用的是4.0版</p>
</blockquote>
</li>
<li><p>打包工具：webpack2.0</p>
</li>
<li>代码：es6</li>
<li>规范：ESlint</li>
</ul>
<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><ul>
<li>由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……</li>
<li>百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！</li>
</ul>
<h2 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h2><h3 id="webpack-核心模块"><a href="#webpack-核心模块" class="headerlink" title="webpack 核心模块"></a>webpack 核心模块</h3><h4 id="entry"><a href="#entry" class="headerlink" title="entry"></a>entry</h4><p>项目唯一入口</p>
<blockquote>
<p>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.</p>
</blockquote>
<h4 id="output"><a href="#output" class="headerlink" title="output"></a>output</h4><p>项目输出文件夹</p>
<blockquote>
<p>[name].[hash:8].js</p>
</blockquote>
<h4 id="module"><a href="#module" class="headerlink" title="module"></a>module</h4><p>html,js,css,img 处理组件</p>
<ul>
<li>css-loader</li>
<li>babel-loader</li>
<li>url-loader</li>
<li>style-loader</li>
<li>postcss-loader</li>
</ul>
<h4 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</h4><p>其他优化插件,该处只介绍 webpack 自带的一些插件库</p>
<ul>
<li><p>webpack.BannerPlugin</p>
<blockquote>
<p>给打包文件添加一个banner</p>
</blockquote>
</li>
<li><p>webpack.optimize.UglifyJsPlugin</p>
<blockquote>
<p>压缩 js</p>
</blockquote>
</li>
<li><p>webpack.optimize.OccurrenceOrderPlugin</p>
<blockquote>
<p>添加唯一 ID</p>
</blockquote>
</li>
</ul>
<h3 id="webpack-推荐模块"><a href="#webpack-推荐模块" class="headerlink" title="webpack 推荐模块"></a>webpack 推荐模块</h3><h4 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h4><p>热加载插件，在 script 中的命令参数：</p>
<blockquote>
<p>–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号<br>–progress: 显示合并代码进度<br>–colors: 在命令行中显示颜色<br>–content-base build: 指向设置的输出目录<br>–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。</p>
</blockquote>
<h4 id="html-webpack-plugin"><a href="#html-webpack-plugin" class="headerlink" title="html-webpack-plugin"></a>html-webpack-plugin</h4><p>根据预先的模板实例化一个html</p>
<pre><code class="js">new HtmlWebpackPlugin({
title: &#39;&#39;,
template: __dirname + &quot;/src/index.html&quot;,
minify: {
&quot;removeAttributeQuotes&quot;: true, // 移除注释
&quot;removeComments&quot;: true, // 移除空格
&quot;removeEmptyAttributes&quot;: true, // 移除空白行
},
chunks: [&#39;index&#39;, &#39;vendors&#39;], // 配置该html文件要添加的模块
// inject: &#39;body&#39;
})
</code></pre>
<h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><p>删除 webpack 缓存插件</p>
<pre><code class="js">new CleanWebpackPlugin(&#39;build/&#39;, { // 清除缓存文件
root: __dirname,
verbose: true,
dry: false
})
</code></pre>
<h4 id="extract-text-webpack-plugin"><a href="#extract-text-webpack-plugin" class="headerlink" title="extract-text-webpack-plugin"></a>extract-text-webpack-plugin</h4><p>将 css 抽离出 js</p>
<pre><code class="js">test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: &quot;style-loader&quot;, // 提取 css 文件
use: [{ // 编译文件
loader: &quot;css-loader&quot;,
options: {
// modules: true, // 组件化
minimize: true // 压缩
}
}, {
loader: &quot;postcss-loader&quot; // 将 css 添加前缀
}
]
})
</code></pre>
<h4 id="friendly-errors-webpack-plugin"><a href="#friendly-errors-webpack-plugin" class="headerlink" title="friendly-errors-webpack-plugin"></a>friendly-errors-webpack-plugin</h4><p>友好的错误提示插件</p>
<h3 id="package-json-配置"><a href="#package-json-配置" class="headerlink" title="package.json 配置"></a>package.json 配置</h3><h4 id="依赖包"><a href="#依赖包" class="headerlink" title="依赖包"></a>依赖包</h4><h5 id="1-autoprefixer-需要和-postcss-loader-一起使用"><a href="#1-autoprefixer-需要和-postcss-loader-一起使用" class="headerlink" title="1. autoprefixer(需要和 postcss-loader 一起使用)"></a>1. autoprefixer(需要和 postcss-loader 一起使用)</h5><blockquote>
<p>补全 css 前缀</p>
</blockquote>
<h5 id="2-babel-合集"><a href="#2-babel-合集" class="headerlink" title="2. babel 合集"></a>2. babel 合集</h5><pre><code class="json">babel-core
babel-loader
babel-plugin-react-transform
babel-preset-env
babel-preset-react
</code></pre>
<h5 id="3-react-transform-catch-errors、redbox-react"><a href="#3-react-transform-catch-errors、redbox-react" class="headerlink" title="3. react-transform-catch-errors、redbox-react"></a>3. react-transform-catch-errors、redbox-react</h5><blockquote>
<p>react 报错插件</p>
</blockquote>
<h5 id="4-copy-to-clipboard"><a href="#4-copy-to-clipboard" class="headerlink" title="4. copy-to-clipboard"></a>4. copy-to-clipboard</h5><blockquote>
<p>点击复制到剪贴板插件</p>
</blockquote>
<h2 id="项目挖坑大全"><a href="#项目挖坑大全" class="headerlink" title="项目挖坑大全"></a>项目挖坑大全</h2><h3 id="关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"><a href="#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）" class="headerlink" title="关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"></a>关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</h3><ul>
<li>引入和使用</li>
</ul>
<pre><code class="js">import { HashRouter as Router, Route, Link } from &#39;react-router-dom&#39;
ReactDOM.render(
&lt;Router&gt;
&lt;App&gt;
&lt;Route path=&quot;/&quot; exact component={Home} /&gt;
&lt;Route path=&quot;/goods&quot; component={Goods} /&gt;
&lt;Route path=&quot;/detail&quot; component={Detail} /&gt;
&lt;Route path=&quot;/active&quot; component={Active} /&gt;
&lt;/App&gt;
&lt;/Router&gt;
,
document.getElementById(&#39;app&#39;)
)
在父级 APP 中记得加入 this.props.children
</code></pre>
<blockquote>
<p>路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去</p>
</blockquote>
<h3 id="关于图片打包"><a href="#关于图片打包" class="headerlink" title="关于图片打包"></a>关于图片打包</h3><p>神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹</p>
<blockquote style="margin: 2em 0 0;padding: 0.5em 1em;border-left: 3px solid #F44336;background-color: #F5F5F5;list-style: none;">
<p><strong>
<p>转载请注明出处，谢谢!</p>
</strong>
<br>
<strong>本文链接：</strong><a href="http://blog.jzxer.cn/urlMaker.html">http://blog.jzxer.cn/urlMaker.html</a>
</p>
</blockquote>
</div>
<!-- Post Comments -->
<div id="comment" style='padding:10px;' class="vcomment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
return GUEST_INFO.indexOf(item) > -1
});
var notify = 'false' == true;
var verify = 'false' == true;
new Valine({
el: '.vcomment',
notify: notify,
verify: verify,
appId: "ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz",
appKey: "hUSwCACEEbPBcGUh42RMzy6P",
placeholder: "Just go go",
pageSize:'10',
avatar:'identicon',
lang:'zh-cn'
});
</script>
</div>
<!-- Post Prev & Next Nav -->
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<!-- Prev Nav -->
<a href="/learn-express.html" id="post_nav-newer" class="prev-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
新篇
</a>
<!-- Section Spacer -->
<div class="section-spacer"></div>
<!-- Next Nav -->
<a href="/我个人的coding风格.html" id="post_nav-older" class="next-content">
旧篇
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</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/avatar.png" alt="Feax's avatar">
</div>
<!-- Sidebar Email -->
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
710328466@qq.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="710328466@qq.com" target="_blank" title="给我发邮件">
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
给我发邮件
</a>
</li>
</ul>
</li>
<!-- Homepage -->
<li id="sidebar-first-li">
<a href="/">
<i class="material-icons sidebar-material-icons">home</i>
主页
</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/2018/06/">六月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/05/">五月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/10/">十月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/08/">八月 2016<span class="sidebar_archives-count">1</span></a>
</ul>
</li>
<!-- Categories -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
分类
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/categories/CSS/">CSS<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/HTML/">HTML<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/IDE/">IDE<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/JS/">JS<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/categories/nodeJS/">nodeJS<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/storage/">storage<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/vue/">vue<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/web前端/">web前端<span class="sidebar_archives-count">10</span></a></li><li><a class="sidebar_archives-link" href="/categories/web项目/">web项目<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/代理/">代理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/博客搭建/">博客搭建<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/安全/">安全<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/数据库/">数据库<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/服务器/">服务器<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/本地储存/">本地储存<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/版本管理/">版本管理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/生活/">生活<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/自动化/">自动化<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/阅读/">阅读<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/音乐/">音乐<span class="sidebar_archives-count">7</span></a>
</ul>
</li>
<!-- Pages -->
<li>
<a href="/timeline" title="时间轴">
<i class="material-icons sidebar-material-icons">calendar_today</i>
时间轴
</a>
</li>
<li class="divider"></li>
<li>
<a href="/tags" title="标签">
<i class="material-icons sidebar-material-icons">label</i>
标签
</a>
</li>
<li>
<a href="/gallery" title="图库">
<i class="material-icons sidebar-material-icons">dashboard</i>
图库
</a>
</li>
<li>
<a href="/footprint" title="我的足迹">
<i class="material-icons sidebar-material-icons">flight</i>
我的足迹
</a>
</li>
<li>
<a href="/about" title="关于我">
<i class="material-icons sidebar-material-icons">sentiment_satisfied_alt</i>
关于我
</a>
</li>
<li class="divider"></li>
<!-- Article Number -->
<li>
<a href="/archives">
文章总数
<span class="sidebar-badge">55</span>
</a>
</li>
<li class="divider"></li>
</ul>
<!-- Sidebar Footer -->
<!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->
<!-- Sidebar Divider -->
<!-- Theme Material -->
<!-- Help & Support -->
<!--
<a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.help
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</div>
</a>
-->
<!-- Feedback -->
<!--
<a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.feedback
<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>
-->
<!-- About Theme -->
<!--
-->
</div>
<!-- Sidebar Image -->
</aside>
<!-- Footer Top Button -->
<div id="back-to-top" class="toTop-wrap">
<a href="#top" class="toTop">
<i class="material-icons footer_top-i">expand_less</i>
</a>
</div>
<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
<!-- Paradox Footer Left Section -->
<div class="mdl-mini-footer--left-section sns-list">
<!-- Twitter -->
<a href="https://twitter.com/Rockhellbear" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
<span class="visuallyhidden">Twitter</span>
</button><!--
--></a>
<!-- Facebook -->
<!-- Google + -->
<!-- Weibo -->
<a href="http://weibo.com/5330486979/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
<span class="visuallyhidden">Weibo</span>
</button><!--
--></a>
<!-- Instagram -->
<a href="https://www.instagram.com/jzxer/?hl=zh-cn" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
<span class="visuallyhidden">Instagram</span>
</button><!--
--></a>
<!-- Tumblr -->
<!-- Github -->
<a href="https://github.com/j710328466" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
<span class="visuallyhidden">Github</span>
</button><!--
--></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/in/%E5%BF%97%E9%9B%84-%E6%B1%9F-338928105/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
<span class="visuallyhidden">LinkedIn</span>
</button><!--
--></a>
<!-- Zhihu -->
<!-- Bilibili -->
<a href="https://space.bilibili.com/73148384/#/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
<span class="visuallyhidden">Bilibili</span>
</button><!--
--></a>
<!-- Telegram -->
<!-- V2EX -->
</div>
<!--Copyright-->
<div id="copyright">
Copyright&nbsp;©&nbsp;2016&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Feax's Blog
<br>
<p>爱音乐，爱生活！</p>
</div>
<!-- Paradox Footer Right Section -->
<!--
I am 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 JS File -->
<script>lsloader.load("lazyload_js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==", true)</script>
<script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>
<script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>
<script type="text/ls-javascript" id="NProgress-script">
NProgress.configure({
showSpinner: true
});
NProgress.start();
$('#nprogress .bar').css({
'background': '#efe8d8'
});
$('#nprogress .peg').css({
'box-shadow': '0 0 10px #efe8d8, 0 0 15px #efe8d8'
});
$('#nprogress .spinner-icon').css({
'border-top-color': '#efe8d8',
'border-left-color': '#efe8d8'
});
setTimeout(function() {
NProgress.done();
$('.fade').removeClass('out');
}, 800);
</script>
<script>lsloader.load("sm_js","/js/smoothscroll.js?lOy/ACj5suSNi7ZVFVbpFQ==", true)</script>
<!-- Leancloud -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>
AV.initialize('ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz', 'hUSwCACEEbPBcGUh42RMzy6P');
</script>
<script type="text/ls-javascript" id="leancloud-views-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>
<!-- 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>
<!-- Import prettify js -->
<script>lsloader.load("prettify_js","/js/prettify.min.js?WN07fivHQSMKWy7BmHBB6w==", true)</script>
<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
$(window).on('load', function() {
// Post_Toc parent position fixed
$('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
});
$(function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
prettyPrint();
})
</script>
<!-- MathJax Load-->
<!-- Bing Background -->
<script type="text/ls-javascript" id="lazy-load">
// Offer LazyLoad
queue.offer(function(){
$('.lazy').lazyload({
effect : 'show'
});
});
// Start Queue
$(document).ready(function(){
setInterval(function(){
queue.execNext();
},200);
});
</script>
<!-- Custom Footer -->
<script>
(function(){
var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')
for (var i = 0; i < scriptList.length; ++i) {
var item = scriptList[i];
lsloader.runInlineScript(item.id,item.id);
}
})()
console.log('\n %c © Material Theme | Version: 1.5.2 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>
</main>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink