新增文章页图片显示

_config.yml

@@ -8,6 +8,7 @@ author: CHANGEQ
 home_describe: A COLLEGE STUDENT WITH IDEALS AND BELIEFS.
 # 网站关键字
 keyword: 乔越博客,个人博客,hexo
+is_article_img: false  #false是否开启文章背景图显示(随机图片)
 # 网站描述
 web_description: 描述
 # 导航名称

layout/_partial/post_head.ejs

@@ -1,4 +1,4 @@
-<div class="header-bg">
+<div class="header-bg <%- theme.is_article_img?'bg-content-img':''  %>">
     <div class="bg-content">
         <ul class="tag">
             <% if(page.tags && page.tags.data.length) { %>
@@ -10,6 +10,14 @@
         <h1><%- page.title %></h1>
         <div class="article-info">
             <div class="article-author">
+                <% if(theme.is_article_img) { %>
+                <svg t="1604839279282" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                    xmlns="http://www.w3.org/2000/svg" p-id="2901" width="20" height="20">
+                    <path
+                        d="M513 956.3c-247.7 0-448-200.3-448-448S265.3 66.2 513 66.2s448 200.3 448 448-200.3 442.1-448 442.1z m0-830.9c-212.2 0-388.8 170.7-388.8 388.8C124.2 726.3 294.9 903 513 903c212.2 0 388.8-170.7 388.8-388.8S725.2 125.4 513 125.4z m0 430.2c-94.2 0-170.7-76.5-170.7-170.7S418.8 207.8 513 207.8s170.7 76.5 170.7 170.7S607.2 555.6 513 555.6z m0-289.1c-64.6 0-112 52.8-112 112s47.4 117.9 112 117.9 112-52.8 112-112-47.4-117.9-112-117.9z m0 689.8c-135.7 0-259-58.7-341.9-158.9l-11.8-17.8 11.8-17.8c76.5-117.9 206.2-188.5 347.8-188.5 135.7 0 265 64.6 341.9 182.6l11.8 17.8-11.8 17.8C778 897.1 648.7 956.3 513 956.3zM230.3 773.2C300.9 849.7 406.9 897 513 897c112 0 218.1-47.4 288.6-129.8-70.5-88.2-170.7-135.6-282.7-135.6s-218.1 53.3-288.6 141.6z"
+                        p-id="2902" fill="#ffffff"></path>
+                </svg>
+                <% }else{ %>
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                     <g>
                         <path fill="#12183A"
@@ -17,6 +25,7 @@
                         </path>
                     </g>
                 </svg>
+                <% } %>
                 <span> <a href=""><%- theme.author %></a></span>
                 <p><%- date(page.date, "YYYY-MM-DD HH:mm:ss") %></p>
             </div>

source/css/header.css

@@ -1 +1 @@
-*{margin:0;padding:0;}.header{position:fixed;width:100%;z-index:99;}.header-top{display:flex;height:100px;background:rgba(255,255,255,0.98);z-index:99;padding:0 calc((100% - 1160px)/2);}.header-move1{height:72px;transition:height .8s ease-in-out;box-shadow:0 10px 40px 0 rgba(50,50,50,0.08);}.header-move2{height:100px;transition:height .8s ease-in-out;}.header .header-top .h-left{display:flex;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1;}.header .header-top .h-left a{margin-left:18px;width:36px;height:36px;background-size:100% 100%;display:flex;justify-content:center;align-items:center;}.header .header-top .h-left a img{width:36px;height:36px;}.header .header-top .h-right{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;}@media screen and (min-width:600px){.header .header-top  .h-right-close{display:none;}}@media screen and (max-width:600px){.header .header-top .h-right{display:none;}.header .header-top .h-right-close{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;margin-right:1em;}.header .header-top .h-right-close svg{cursor:pointer;width:2em;height:2em;}}.header .header-top .h-right ul{display:flex;align-items:center;font-size:16px;font-weight:400;text-transform:uppercase;list-style:none;}.header .header-top .h-right ul li{padding:0 18px;white-space:nowrap}.header .header-top .h-right ul li a{color:#898fa0;text-decoration:none;}.header .header-top .h-right ul li a:hover{color:#12183A;}.header .header-top .h-right ul li .dot{display:inline-block;width:5px;height:5px;border-radius:50%;position:relative;top:-12px;left:2px;}.header .header-top .h-right .select a{color:#12183A;}.header .header-top .h-right .select .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#006AFF;position:relative;top:-12px;left:2px;}.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;margin:0 auto;}.header-bg .bg-content h1{display:flex;margin-top:40px;font-size:30px;font-weight:500;color:#12183a;flex:1;flex-direction:column;}.header-bg .bg-content h1 span{display:flex;font-size:15px;margin-top:10px;color:#898F9F;}
+*{margin:0;padding:0;}.header{position:fixed;width:100%;z-index:99;}.header-top{display:flex;height:100px;background:rgba(255,255,255,0.98);z-index:99;padding:0 calc((100% - 1160px)/2);}.header-move1{height:72px;transition:height .8s ease-in-out;box-shadow:0 10px 40px 0 rgba(50,50,50,0.08);}.header-move2{height:100px;transition:height .8s ease-in-out;}.header .header-top .h-left{display:flex;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1;}.header .header-top .h-left a{margin-left:18px;width:36px;height:36px;background-size:100% 100%;display:flex;justify-content:center;align-items:center;}.header .header-top .h-left a img{width:36px;height:36px;}.header .header-top .h-right{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;}@media screen and (min-width:600px){.header .header-top  .h-right-close{display:none;}}@media screen and (max-width:600px){.header .header-top .h-right{display:none;}.header .header-top .h-right-close{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;margin-right:1em;}.header .header-top .h-right-close svg{cursor:pointer;width:2em;height:2em;}}.header .header-top .h-right ul{display:flex;align-items:center;font-size:16px;font-weight:400;text-transform:uppercase;list-style:none;}.header .header-top .h-right ul li{padding:0 18px;white-space:nowrap}.header .header-top .h-right ul li a{color:#898fa0;text-decoration:none;}.header .header-top .h-right ul li a:hover{color:#12183A;}.header .header-top .h-right ul li .dot{display:inline-block;width:5px;height:5px;border-radius:50%;position:relative;top:-12px;left:2px;}.header .header-top .h-right .select a{color:#12183A;}.header .header-top .h-right .select .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#006AFF;position:relative;top:-12px;left:2px;}

source/css/page.css

@@ -1 +1 @@
-.header-bg{display:flex;width:100%;background:linear-gradient(to top,#f1f5fb,#f9fcff);flex-shrink:0}.header-bg .bg-content{display:flex;margin:0 auto;padding:196px 40px 160px;flex-basis:721px;flex-direction:column}.header-bg .bg-content .tag{display:flex;list-style:none;flex-wrap:wrap}.header-bg .bg-content .tag li{display:flex;margin-top:20px;margin-right:16px;padding:4px 12px;border-radius:15px;background:rgba(18,24,58,.06);line-height:20px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:ease-in-out;flex-grow:0}.header-bg .bg-content .tag li:hover{background:#bec8d3}.header-bg .bg-content .tag li a{color:#12183a;text-decoration:none;font-weight:600;font-size:12px}.header-bg .bg-content h1{margin:32px 0 24px;color:#12183a;font-weight:500;font-size:30px;line-height:1.6}.header-bg .bg-content .article-info{display:flex}.header-bg .bg-content .article-info .article-author{display:flex}.header-bg .bg-content .article-info .article-author span{margin-left:8px;color:#12183a;font-weight:500;font-size:15px}.header-bg .bg-content .article-info .article-author span a{color:#12183a;text-decoration:none;-webkit-transition:color .5s;-moz-transition:color .5s;-o-transition:color .5s;transition:ease-in-out}.header-bg .bg-content .article-info .article-author span a:hover{color:#006af7}.header-bg .bg-content .article-info .article-author p{margin-left:30px;color:#12183a;font-size:14px}.article-content img{display:flex;width:100%;height:100%}@media screen and (min-width:600px){.article-content .content{display:flex;padding:64px 40px;max-width:800px;font-size:18px;flex-direction:column}.article-content{display:flex;margin:0 auto;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center}}@media screen and (max-width:600px){.article-content{display:flex;margin:0 auto;padding:64px 16px;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column}}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out}.Last-Next{display:flex;margin:0 auto;margin-bottom:2em;max-width:980px;background:rgba(255,255,255,.8)}.Last-Next a{display:flex;color:#12183a;text-decoration:none;flex-grow:1;flex-basis:0}.Last-Next a .last{display:flex;height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;flex-grow:1;align-content:flex-start;justify-content:center;flex-direction:column;flex-basis:0;transition:all .5s ease-in-out}.Last-Next a .last:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .last span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .last p{font-size:16px}.Last-Next a .next{display:flex;height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;align-content:flex-end;flex-grow:1;justify-content:center;flex-direction:column;align-items:flex-end;flex-basis:0;transition:all .5s ease-in-out}.Last-Next a .next:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .next span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .next p{font-size:16px}
+.header-bg{display:flex;width:100%;background:linear-gradient(to top,#f1f5fb,#f9fcff);flex-shrink:0;position:relative}.bg-content-img{background:url('https://api.ixiaowai.cn/gqapi/gqapi.php');height:100%;background-size:cover}.bg-content-img .bg-content h1{color:#fff !important;z-index:2}.bg-content-img .bg-content .article-info .article-author p,span a,.icon{color:#fff !important;z-index:4 !important;position:relative}.bg-content-img .bg-content .tag li{color:#fff;z-index:4 !important;background:#fff !important}.bg-content-img:before{content:'';background-image:url('../image/pattern.png');background-repeat:repeat;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.header-bg .bg-content{display:flex;margin:0 auto;padding:196px 40px 160px;flex-basis:721px;flex-direction:column}.header-bg .bg-content .tag{display:flex;list-style:none;flex-wrap:wrap}.header-bg .bg-content .tag li{display:flex;margin-top:20px;margin-right:16px;padding:4px 12px;border-radius:15px;background:rgba(18,24,58,.06);line-height:20px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:ease-in-out;flex-grow:0}.header-bg .bg-content .tag li:hover{background:#bec8d3}.header-bg .bg-content .tag li a{color:#12183a;text-decoration:none;font-weight:600;font-size:12px}.header-bg .bg-content h1{margin:32px 0 24px;color:#12183a;font-weight:500;font-size:30px;line-height:1.6}.header-bg .bg-content .article-info{display:flex}.header-bg .bg-content .article-info .article-author{display:flex}.header-bg .bg-content .article-info .article-author span{margin-left:8px;color:#12183a;font-weight:500;font-size:15px}.header-bg .bg-content .article-info .article-author span a{color:#12183a;text-decoration:none;-webkit-transition:color .5s;-moz-transition:color .5s;-o-transition:color .5s;transition:ease-in-out}.header-bg .bg-content .article-info .article-author span a:hover{color:#006af7}.header-bg .bg-content .article-info .article-author p{margin-left:30px;color:#12183a;font-size:14px}.article-content img{display:flex;width:100%;height:100%}@media screen and (min-width:600px){.article-content .content{display:flex;padding:64px 40px;max-width:800px;font-size:18px;flex-direction:column}.article-content{display:flex;margin:0 auto;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center;z-index:2;position:relative}}@media screen and (max-width:600px){.article-content{display:flex;margin:0 auto;padding:64px 16px;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column}}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out}.Last-Next{display:flex;margin:0 auto;margin-bottom:2em;max-width:980px;background:rgba(255,255,255,.8)}.Last-Next a{display:flex;color:#12183a;text-decoration:none;flex-grow:1;flex-basis:0}.Last-Next a .last{display:flex;height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;flex-grow:1;align-content:flex-start;justify-content:center;flex-direction:column;flex-basis:0;transition:all .5s ease-in-out}.Last-Next a .last:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .last span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .last p{font-size:16px}.Last-Next a .next{display:flex;height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;align-content:flex-end;flex-grow:1;justify-content:center;flex-direction:column;align-items:flex-end;flex-basis:0;transition:all .5s ease-in-out}.Last-Next a .next:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .next span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .next p{font-size:16px}