nicecode/nicenote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ddc005c13c
nicenote/public/material主题使用攻略.html
江志雄 47a8d7d0fb 2.0版博客上线
2018-05-26 17:58:20 +08:00

1303 lines
58 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>
material主题使用攻略 |
Jzxer&#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,hexo">
<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="Jzxer&#39;s Blog">
<meta name="msapplication-starturl" content="http://blog.jzxer.cn/material主题使用攻略.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="Jzxer&#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/material主题使用攻略.html">
<meta property="og:type" content="blog">
<meta property="og:title" content="material主题使用攻略 | Jzxer&#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="hexo">
<meta property="article:published_time" content="Wed Feb 15 2017 19:59:16 GMT+0800">
<meta property="article:modified_time" content="Mon Jan 22 2018 13:59:38 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/material主题使用攻略.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "http://blog.jzxer.cn/material主题使用攻略.html",
"headline": "material主题使用攻略",
"datePublished": "Wed Feb 15 2017 19:59:16 GMT+0800",
"dateModified": "Mon Jan 22 2018 13:59:38 GMT+0800",
"author": {
"@type": "Person",
"name": "Jzxer",
"image": {
"@type": "ImageObject",
"url": "/img/avatar.png"
},
"description": "对的，坚持！,,错的，放弃！"
},
"publisher": {
"@type": "Organization",
"name": "Jzxer&#39;s Blog",
"logo": {
"@type":"ImageObject",
"url": "/img/favicon.png"
}
},
"keywords": ",hexo全栈,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-2"><a class="post-toc-link" href="#安装-Material"><span class="post-toc-number">1.</span> <span class="post-toc-text">安装[Material]</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#启用-Material"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">启用[Material]</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#更新-Material"><span class="post-toc-number">2.</span> <span class="post-toc-text">更新[Material]</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#配置主题"><span class="post-toc-number">3.</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="#head"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">head</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#url"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">url</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#scheme"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">scheme</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#uiux"><span class="post-toc-number">3.4.</span> <span class="post-toc-text">uiux</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#js-effect"><span class="post-toc-number">3.5.</span> <span class="post-toc-text">js_effect</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#reading"><span class="post-toc-number">3.6.</span> <span class="post-toc-text">reading</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background"><span class="post-toc-number">3.7.</span> <span class="post-toc-text">background</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#dropdown"><span class="post-toc-number">3.8.</span> <span class="post-toc-text">dropdown</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创建文章"><span class="post-toc-number">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="#使用命令行"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">使用命令行</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#格式"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">格式</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创建「关于我」页面"><span class="post-toc-number">5.</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">6.</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="#创建页面"><span class="post-toc-number">6.1.</span> <span class="post-toc-text">创建页面</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#添加数据"><span class="post-toc-number">6.2.</span> <span class="post-toc-text">添加数据</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创建「图库」页面"><span class="post-toc-number">7.</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="#创建页面-1"><span class="post-toc-number">7.1.</span> <span class="post-toc-text">创建页面</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#添加数据-1"><span class="post-toc-number">7.2.</span> <span class="post-toc-text">添加数据</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创建「标签云」页面"><span class="post-toc-number">8.</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="#创建页面-2"><span class="post-toc-number">8.1.</span> <span class="post-toc-text">创建页面</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创建「私有」页面"><span class="post-toc-number">9.</span> <span class="post-toc-text">创建「私有」页面</span></a></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">
material主题使用攻略
</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>Jzxer</strong>
<span>2月 15, 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,iVBORw0KGgoAAAANSUhEUgAAAN4AAADeCAAAAAB3DOFrAAACZUlEQVR42u3aQXLCMAwFUO5/6fYAHZwvyTEp87JioAS/LGz1S6+fr75eeHh4eHh4eHh4D+O94uvvt9avq/effBcPDw/vPO9iq13y3i0ov0P+sKK14eHh4R3kvdtw16+TT9cbev6767/Bw8PD+y+89WZdPRLw8PDwvpXXQ04KcTw8PLxn8pJ/+Ndh63opuyKPG7MWPDw8vJhXDQ5Ovj7a38PDw8MLeOWRpuDnk219fZxsG7rCw8PDu4GXb8QJuxf+5o2xZD14eHh4Z3iTsdT5qEF1VKsc4+Lh4eHdxquye0Vzr7AuHDN4eHh4N/PyxeWNseqgQPWdi/vj4eHh3cyrbtw9fM5OmnPNyQg8PDy8rbx85LS60fceWW90FQ8PD+85vHwsoPqwqoX4+h08PDy8k7z8GOhFD3vDjosYBQ8PD+8gbx0BJIdErzSfBLiFrAUPDw9vE2++0U+GAyZtMDw8PLzP8vK2UzVomIe2oxgXDw8P7wbepH1VLXyrv5UX+nh4eHjneb3yehLjRoFssBI8PDy8T/HyG1U3/bxYr5bOeHh4eJ/lzYPX6hBV3mwrH0V4eHh4B3mTQKHXKuuFEaOZMjw8PLytvDsK6CSSSNhJDIGHh4d3hteLVqsNs/zR9EYT8PDw8E7yXvGVFLjNrbzIvjiQ8PDw8I7wei38XeNT1RGEi/vj4eHhHeTlG3TO6B0Ak0gCDw8P75m8UVjQKqALYDw8PLwH8/KhgTwgziOPG0tqPDw8vK1hRB7IVocG8tjiYrV4eHh4R3h52ZoUvj3wpD2Gh4eHd5L3fRceHh4eHh4eHt4Drl8DKaWBr2qz1wAAAABJRU5ErkJggg==">
</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/hexo/">hexo</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="/material主题使用攻略.html" class="leancloud-views_num" data-flag-title="material主题使用攻略">
&nbsp;浏览量
</span>
</li>
</a>
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=material主题使用攻略&url=http://blog.jzxer.cn/material主题使用攻略.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=material主题使用攻略&url=http://blog.jzxer.cn/material主题使用攻略.html&via=Jzxer" 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/material主题使用攻略.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/material主题使用攻略.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/material主题使用攻略.html&title=material主题使用攻略" 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=Jzxer&#39;s Blog&title=material主题使用攻略&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=http://blog.jzxer.cn/img/favicon.ico&url=http://blog.jzxer.cn/material主题使用攻略.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">
<h2 id="安装-Material"><a href="#安装-Material" class="headerlink" title="安装[Material]"></a>安装[Material]</h2><pre><code class="bash">npm install hexo-meterial
</code></pre>
<p>该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material</p>
<h3 id="启用-Material"><a href="#启用-Material" class="headerlink" title="启用[Material]"></a>启用[Material]</h3><p>找到主题文件下的_config.template.yml 改成 _config.yml</p>
<h2 id="更新-Material"><a href="#更新-Material" class="headerlink" title="更新[Material]"></a>更新[Material]</h2><pre><code class="bash">npm update hexo-material
</code></pre>
<p>让后将文件复制到 Material 主题文件中</p>
<h2 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h2><h3 id="head"><a href="#head" class="headerlink" title="head"></a>head</h3><ul>
<li>favicon: 网站的 favicon</li>
<li>high_res_favicon: 高清 favicon</li>
<li>apple_touch_icon: iOS 主屏按钮图标</li>
<li>keywords: 网站关键词</li>
</ul>
<h3 id="url"><a href="#url" class="headerlink" title="url"></a>url</h3><ul>
<li>rss: 设置生成的 rss 或 atom url</li>
<li>daily_pic: 设置 daily_pic 模块 点击时跳转的 url</li>
<li>logo: 设置 logo 点击时跳转的 url</li>
</ul>
<h3 id="scheme"><a href="#scheme" class="headerlink" title="scheme"></a>scheme</h3><ul>
<li>Paradox<br>默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。</li>
<li>Isolation<br>Paradox 的至简样式，简洁明了。</li>
</ul>
<h3 id="uiux"><a href="#uiux" class="headerlink" title="uiux"></a>uiux</h3><p>用于设置主题 UI 与 UX。</p>
<ul>
<li>heme_color: 主题主要颜色。主题的大部分地方使用此颜色。</li>
<li>theme_sub_color: 主题辅助颜色。</li>
<li>hyperlink_color: 超链接颜色。</li>
<li>button_color: 按钮颜色，例如 toTop 或 menu_button。</li>
<li>android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。</li>
<li>nprogress_color: 页面加载时顶部加载进度条的颜色。</li>
<li>nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。</li>
</ul>
<h3 id="js-effect"><a href="#js-effect" class="headerlink" title="js_effect"></a>js_effect</h3><p>用来控制 Material 主题中自带的多种 js 特性。</p>
<ul>
<li>fade: 页面加载时部分模块的渐显效果，默认为 true。</li>
<li>smoothscroll: 页面平滑滚动特效，默认为 false。</li>
</ul>
<h3 id="reading"><a href="#reading" class="headerlink" title="reading"></a>reading</h3><p>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</p>
<ul>
<li>entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。</li>
</ul>
<h3 id="background"><a href="#background" class="headerlink" title="background"></a>background</h3><p>用于设置站点背景。</p>
<ul>
<li>purecolor: 填入颜色代码。则站点使用纯色背景。</li>
<li>bgimg: 背景地址，默认调用 主题文件夹 -&gt; source -&gt; img 中的 bg.png。可更换此图片或者自己填入 url。</li>
<li>bing: 用于启用“必应美图”的图片作为背景。</li>
</ul>
<h3 id="dropdown"><a href="#dropdown" class="headerlink" title="dropdown"></a>dropdown</h3><p>用于设置 Paradox 侧边栏用户下拉菜单，默认为空。</p>
<pre><code>dropdown:
page:
link: &quot;mailto: someone@example.com&quot;
icon: email
divider: 设置成 true 后会在归档按钮底部增加一条分割线。
</code></pre><h2 id="创建文章"><a href="#创建文章" class="headerlink" title="创建文章"></a>创建文章</h2><h3 id="使用命令行"><a href="#使用命令行" class="headerlink" title="使用命令行"></a>使用命令行</h3><pre><code>hexo new &lt;title&gt;
</code></pre><p>手动创建也行</p>
<h3 id="格式"><a href="#格式" class="headerlink" title="格式"></a>格式</h3><pre><code>layout 布局 post
title 标题 文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
thumbnail 缩略图地址
toc 显示 TOC 按钮 true
comment 显示评论 true
notag 不生成标签按钮 false
top 置顶 false
</code></pre><h2 id="创建「关于我」页面"><a href="#创建「关于我」页面" class="headerlink" title="创建「关于我」页面"></a>创建「关于我」页面</h2><p>新建一个 about 页面：</p>
<pre><code>hexo new page &quot;about&quot;
</code></pre><h2 id="创建「友情链接」页面"><a href="#创建「友情链接」页面" class="headerlink" title="创建「友情链接」页面"></a>创建「友情链接」页面</h2><h3 id="创建页面"><a href="#创建页面" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。<br>然后在文件内创建一个名为 index.md 的 Markdown 文件。<br>在 index.md 文件内写入如下内容即可。</p>
<pre><code>---
title: links
date:
layout: links
---
</code></pre><blockquote>
<p>title 可修改，layout 不可修改。</p>
</blockquote>
<h3 id="添加数据"><a href="#添加数据" class="headerlink" title="添加数据"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>
<p>然后在文件内创建一个名为 links.yml 的文件。</p>
<p>单个友情链接的格式为：</p>
<pre><code>Name:
link: http://example.com
avatar: http://example.com/avatar.png
descr: &quot;这是一个描述&quot;
</code></pre><h2 id="创建「图库」页面"><a href="#创建「图库」页面" class="headerlink" title="创建「图库」页面"></a>创建「图库」页面</h2><h3 id="创建页面-1"><a href="#创建页面-1" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。</p>
<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>
<p>在 index.md 文件内写入如下内容即可。</p>
<pre><code>---
title: gallery
date:
layout: gallery
---
</code></pre><h3 id="添加数据-1"><a href="#添加数据-1" class="headerlink" title="添加数据"></a>添加数据</h3><p>同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。</p>
<p>然后在文件内创建一个名为 gallery.yml 的文件。</p>
<p>单个图片的格式为：</p>
<pre><code>Name:
full_link: http://example.com/full-image.png
thumb_link: http://example.com/thumb-image.png
descr: &quot;这是一个描述&quot;
</code></pre><h2 id="创建「标签云」页面"><a href="#创建「标签云」页面" class="headerlink" title="创建「标签云」页面"></a>创建「标签云」页面</h2><h3 id="创建页面-2"><a href="#创建页面-2" class="headerlink" title="创建页面"></a>创建页面</h3><p>在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。</p>
<p>然后在文件内创建一个名为 index.md 的 Markdown 文件。</p>
<p>在 index.md 文件内写入如下内容即可。</p>
<pre><code>---
title: tags
date:
layout: tags
---
</code></pre><h2 id="创建「私有」页面"><a href="#创建「私有」页面" class="headerlink" title="创建「私有」页面"></a>创建「私有」页面</h2><p>如果某篇文章不想显示在站点中，只需要在 front-matter 中加入</p>
<pre><code>layout: private
</code></pre>
<blockquote style="margin: 2em 0 0;padding: 0.5em 1em;border-left: 3px solid #F44336;background-color: #F5F5F5;list-style: none;">
<p><strong>
<a href="#" target="_blank">转载请注明出处，谢谢！</a>
</strong>
<br>
<strong>本文链接：</strong><a href="http://blog.jzxer.cn/material主题使用攻略.html">http://blog.jzxer.cn/material主题使用攻略.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="/电吉他即兴原理.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="/我是愤怒.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="Jzxer'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>
<li class="divider"></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/04/">四月 2018<span class="sidebar_archives-count">8</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">6</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">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">3</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">8</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">8</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">2</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>
<li class="divider"></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/APP/">APP<span class="sidebar_archives-count">1</span></a></li><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">2</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">5</span></a></li><li><a class="sidebar_archives-link" href="/categories/nodeJS/">nodeJS<span class="sidebar_archives-count">4</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">2</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">3</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">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">10</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">6</span></a>
</ul>
</li>
<li class="divider"></li>
<!-- Pages -->
<li>
<a href="/gallery" title="图库">
<i class="material-icons sidebar-material-icons">dashboard</i>
图库
</a>
</li>
<li class="divider"></li>
<li>
<a href="/tags" title="标签">
<i class="material-icons sidebar-material-icons">label</i>
标签
</a>
</li>
<li class="divider"></li>
<li>
<a href="/footprint" title="我的足迹">
<i class="material-icons sidebar-material-icons">flight</i>
我的足迹
</a>
</li>
<li class="divider"></li>
<li>
<a href="/about" title="关于我">
<i class="material-icons sidebar-material-icons">face</i>
关于我
</a>
</li>
<!-- Article Number -->
<li>
<a href="/archives">
文章总数
<span class="sidebar-badge">61</span>
</a>
</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 -->
<span id="footer-image">
<a href="#" target="_blank" title="upyun_logo">
<img src="/img/favicon.ico" alt="upyun_logo"><!--
--></a>
</span>
</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;2017&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Jzxer's Blog
<br>
<a href="/atom.xml" rel="nofollow">热爱生活，热爱生命！</a>
</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