Loading... ## 1.修改aside.php 目录```/build/usr/themes/handsome/component/aside.php``` 原: ``` .... <?php $mypattern1 = "<li><a href=\"{url}\" target=\"_blank\" title=\"{title}\"><span>{name}</span></a></li>"; Links_Plugin::output($mypattern1, 0, "ten");?> </ul> </li> </ul> </nav> <!-- nav --> </div> </div> </aside> ``` 改: ``` .... <?php $mypattern1 = "<li><a href=\"{url}\" target=\"_blank\" title=\"{title}\"><span>{name}</span></a></li>"; Links_Plugin::output($mypattern1, 0, "ten");?> </ul> </li> </ul> </nav> <!-- nav --> </div> <!-- 改这里 开始 --> <a><img src="/usr/img/kotori.png" id="kotori" class="hidekotori" data-toggle="tooltip" data-placement="right" data-original-title="返回顶部"></a> <!-- 改这里 结束 --> </div> </aside> ``` ## 2.修改headnav.php ---------- 目录```/build/usr/themes/handsome/component/headnav.php``` 原: ``` <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <header id="header" class="app-header navbar" role="menu"> <!-- navbar header（交集处） --> <?php echo Content::slectNavbarHeader(); ?> ...... ``` 改: ``` <!--在这里加 开始--> <div id="bg"></div> <!--在这里加 结束--> <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <header id="header" class="app-header navbar" role="menu"> <!-- navbar header（交集处） --> <?php echo Content::slectNavbarHeader(); ?> ...... ``` ##3.添加css - ---------- ``` html.bg{ background-image: -moz-radial-gradient(-20% 140%, ellipse , rgba(143,192,193,.6) 30%,rgba(255,255,227,0) 50%), -moz-radial-gradient(60% 40%,ellipse, #d9e3e5 10%,rgba(44,70,76,.0) 60%), -moz-linear-gradient(-45deg, rgba(143,181,158,.8) -10%,rgba(213,232,211,.8) 80% ) ; background-image: -o-radial-gradient(-20% 140%, ellipse , rgba(143,192,193,.6) 30%,rgba(255,255,227,0) 50%), -o-radial-gradient(60% 40%,ellipse, #d9e3e5 10%,rgba(44,70,76,.0) 60%), -o-linear-gradient(-45deg, rgba(143,181,158,.8) -10%,rgba(213,232,211,.8) 80% ) ; background-image: -ms-radial-gradient(-20% 140%, ellipse , rgba(143,192,193,.6) 30%,rgba(255,255,227,0) 50%), -ms-radial-gradient(60% 40%,ellipse, #d9e3e5 10%,rgba(44,70,76,.0) 60%), -ms-linear-gradient(-45deg, rgba(143,181,158,.8) -10%,rgba(213,232,211,.8) 80% ) ; background-image: -webkit-radial-gradient(-20% 140%, ellipse , rgba(143,192,193,.6) 30%,rgba(255,255,227,0) 50%), -webkit-radial-gradient(60% 40%,ellipse, #d9e3e5 10%,rgba(44,70,76,.0) 60%), -webkit-linear-gradient(-45deg, rgba(143,181,158,.8) -10%,rgba(213,232,211,.8) 80% ) ; } /*scrollbar*/ *::-webkit-scrollbar{width:8px!important;height:8px!important}*::-webkit-scrollbar-thumb{border-radius:4px;background-color:#999!important}*::-webkit-scrollbar-track-piece{background:#eee!important}*::-webkit-scrollbar-thumb:hover{background-color:#777!important}*::-webkit-scrollbar-thumb:active{background-color:#555!important} /*app*/ @media (min-width:1800px){.app.container{width:1500px}.app.container .app-aside,.app.container .app-header{max-width:1500px}.app-aside-fixed .aside-wrap{width:249px}.app-aside,.navbar-header{width:249px}.app-content,.app-footer,.navbar-collapse{margin-left:249px}.app-aside-fixed .aside-wrap .navi-wrap>*{width:249px}.asideBar{width:300px!important}#tag_toc.fixed #toc{width:259px}} /*main*/ .list-group-item{background-color:rgba(255,255,255,.8)}.thumb-lg{width:130px}#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content{background-color:transparent!important}#alllayout.app-aside-folded .tooltip{display:none!important}#bg{background-image:url(/usr/img/bg/homepage_bg1.jpg);background-size:cover;background-position:right bottom;background-repeat:no-repeat;position:fixed;z-index:-1;top:50px;left:0;right:0;bottom:0;transition:all .3s}.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}.standpage,aside,aside *{transition:all .3s}@media screen and (min-width:768px){.topButton.panel.panel-default{display:none}#bg,.standpage{left:200px}.standpage{height:calc(100% - 101px);width:calc(100% - 200px)}.app-aside-folded #bg,.app-aside-folded .standpage{left:60px}.app-aside-folded .standpage{width:calc(100% - 60px)}}@media screen and (min-width:1800px){#bg,.standpage{left:249px}.standpage{width:calc(100% - 249px)}}.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}.wrapper-md .panel,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.9)}.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}.wrapper-md article,.wrapper-md>#comments{border-radius:5px;overflow:hidden}.bg-auto:before{bottom:51px}@media screen and (max-width:991px){#bg{background-image:url(/usr/img/bg/homepage_bg2.jpg)!important;background-position:center center!important}aside.col.no-border-xs{border:0;opacity:1!important;background-color:rgba(255,255,255,.8)}}@media screen and (min-width:992px){aside.col.w-md.b-l{background-color:rgba(255,255,255,.7)}aside.col.w-md.b-l:hover{background-color:#fff}}header.wrapper-md{background-color:rgba(246,248,248,.93)!important}.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:5px}#index-post-img{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}.blog-post>.panel #index-post-img .item-thumb,.index-post-title a{transition:all .2s}.blog-post>.panel:hover #index-post-img .item-thumb{transform:scale(1.05)}#footer>.wrapper{background-color:rgba(237,241,242,.8)}.streamline{margin-left:20px;padding-right:10px}.streamline .comment-body{position:relative}.streamline .comment-body .m-l-lg:before{background-color:rgba(255,255,255,.9);content:" ";position:absolute;width:calc(100% + 10px);height:calc(100% + 20px);top:-10px;left:0;z-index:-1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.125)}aside.col.w-md.no-border-xs{transition:all .3s}.visible-xs-inline{display:inline-block!important}@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}}.tocify-item{background-color:rgba(255,255,255,.8)}.tocify-item.active{color:#7266ba;font-weight:700}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}#kotori:hover{left:0;bottom:0}#kotori.hidekotori{left:-110px;bottom:-110px}@media screen and (max-width:767px){#kotori{display:none}.blog-post>.panel:hover #index-post-img .item-thumb{transform:none!important}}.index-post-title a:hover{color:#2ebaae}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;border-top-color:#ddd;padding-top:5px}.max-img{max-height:400px}.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}.lg-backdrop{background-color:rgba(0,0,0,.8)}.skPlayer-name{font-family: "Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}html.fancybox-enabled{overflow-y:auto}.fancybox-bg{background-color:rgba(0,0,0,.95)}.fancybox-arrow:after{background-color:rgba(0,0,0,.8)}.blog-post .post-meta.wrapper-lg{padding-top:15px}.share,.yellow,.red,.lblue,.green{background-position-y: 50%}.timeline .tl-date{color:#fff;text-shadow: 0 0 4px #000}body.modal-open{overflow-y: auto;padding-right: 0 !important}.reply2view{background-color:transparent;border:solid 1px #bbb}#content{transition:all .3s}.OwO .OwO-logo{height:28px}#postpage pre{transition:all 0.2s} /*img*/ img[mw400]{max-width:400px!important;width:100%}.mw400{max-width:400px} /*search*/ @media screen and (min-width:1200px){#searchform{width:calc(100% - 760px)}}@media screen and (min-width:1141px) and (max-width:1199px){#searchform{width:calc(100% - 702px)}}@media screen and (min-width:992px) and (max-width:1140px){#searchform{width:calc(100% - 559px)}}@media screen and (min-width:768px) and (max-width:991px){#searchform{width:calc(100% - 315px)}}@media screen and (min-width:768px){#searchform{max-width:300px}#searchform .form-group,#searchform .input-group{width:100%}#searchform #keyword{width:150px;padding-right:33px;border-radius:500px;transition:width .4s}#searchform #keyword:focus,#searchform:hover #keyword{width:100%}#searchform .input-group-btn{height:100%;transition:left .4s;width:33px;left:117px;position:absolute;z-index:10}#searchform #keyword:focus+.input-group-btn,#searchform:hover #keyword+.input-group-btn{left:calc(100% - 33px)}}#searchform button{margin:0;border:0;height:30px} /*category-spread*/ #category-spread-btn{cursor:pointer}#category-spread-list{height:411px;overflow-y:hidden}#category-spread-list.no-spread{height:165px} ``` ---------- ## 4.添加js - ``` function setSth(){var sbChildren=$("#sidebar").children();if(sbChildren.length>0){var sbLast=$(sbChildren[sbChildren.length-1]);var screenTop=$(window).scrollTop();var sbLastBottom=sbLast.offset().top+sbLast.height();var judge=screenTop-sbLastBottom;var aside=$("aside.col.w-md.no-border-xs");if(judge>0){aside.css("opacity","0")}else{aside.css("opacity","1")}}if($(document).scrollTop()<300){$("#kotori").addClass("hidekotori")}else{$("#kotori").removeClass("hidekotori")}}setInterval("setSth()",300);var OriginTitile=document.title;var titleTime;document.addEventListener("visibilitychange",function(){if(document.hidden){document.title="嘤嘤嘤不要丢下我！。ﾟ(ﾟﾉД｀ﾟ)ﾟ｡";clearTimeout(titleTime)}else{document.title="欢迎回来！(*´∀｀*)";titleTime=setTimeout(function(){document.title=OriginTitile},1000)}});function reinitIframe(){if(document.getElementById("aboutPage")){var iframe=document.getElementById("aboutPage");var mainc=iframe.contentWindow.document.getElementById("mainc");try{var height=mainc.scrollHeight;iframe.style.height=height+"px"}catch(ex){}}}window.setInterval("reinitIframe()",300);$("#kotori").click(function(){$("body,html").animate({scrollTop:0},600)}); function getsay() { if($(".letterspacing").length >0) { $.ajax({ url: "https://hitokoto.lil.cx?encode=jsonp", dataType: "jsonp", async: true, jsonp: "callback", jsonpCallback: "callback", success: function(result) { $(".letterspacing").html(result.say + "=="+result.source ) }, error: function() { $(".letterspacing").html("读取失败") } }); } } getsay(); ``` > pjax回调函数也要加上`getsay();` ## 5.添加背景图&返回首页图 - 1. 创建目录```/home/wwwroot/网站/build/usr/img/``` 2. 创建目录```/home/wwwroot/网站/build/usr/img/bg/``` 3. 上传```homepage_bg1.jpg```和```homepage_bg2.jpg```图片到目录```/home/wwwroot/网站/build/usr/img/bg/``` 4. 上传```kotori.png```图片到目录```/home/wwwroot/网站/build/usr/img/``` > 注:homepage_bg1.jpg homepage_bg1.jpg为背景图 ,kotori.png为返回顶部图 最后修改：2017 年 12 月 05 日 © 允许规范转载 打赏 赞赏作者 赞 如果觉得我的文章对你有用，请随意赞赏