修改index.php
- 路径
usr/themes/Joe/index.php
代码
截图
代码语言：javascript复制<!--首页大图-->
<div class="HeaderImg" style="background: url('<?php $this->options->IndexLogo() ?>') center;background-size:cover;">
<div class="infomation">
<div id="xdd" class="title"><?php $this->options->title(); ?></div>
<div class="desctitle">
<span class="motto joe_motto"></span>
</div>
</div>
<section class="HeaderImg_bottom">
<svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0"></use>
<use xlink:href="#gentle-wave" x="48" y="3"></use>
<use xlink:href="#gentle-wave" x="48" y="5"></use>
<use xlink:href="#gentle-wave" x="48" y="7"></use>
</g>
</svg>
</section>
</div>
<!-- 一个一个字蹦出来 -->
<script type="text/javascript">
var i = ;
var timer = null;
var str = document.getElementById("xdd").innerHTML;
var div1 = document.getElementById("xdd");
timer = setInterval(function(){
div1.innerHTML = str.slice(,i);
i ;
if(i>str.length){
clearInterval(timer);
}
},);
</script>修改post.php
- 路径
usr/themes/Joe/post.php
代码
截图
代码语言：javascript复制<!-- 首页大图 -->
<div class="HeaderImg" style="background: url(<?php echo _getThumbnails($this)[] ?>) center;background-size:cover;">
<div class="infomation">
<div id="xdd" class="title"><?php $this->title() ?></div>
<div class="desctitle">
<div class="item">
<span class="text"><?php $this->date('Y-m-d'); ?></span>
<span class="line">/</span>
<span class="text"><?php $this->commentsNum('%d'); ?> 评论</span>
<span class="line">/</span>
<span class="text" id="Joe_Article_Views"><?php _getViews($this); ?> 阅读</span>
<span class="line">/</span>
<span class="text" id="Joe_Article_Views"><?php _getAgree($this) ?> 点赞</span>
</div>
</div>
</div>
<section class="HeaderImg_bottom">
<svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0"></use>
<use xlink:href="#gentle-wave" x="48" y="3"></use>
<use xlink:href="#gentle-wave" x="48" y="5"></use>
<use xlink:href="#gentle-wave" x="48" y="7"></use>
</g>
</svg>
</section>
</div>
<!-- 一个一个字蹦出来 -->
<script type="text/javascript">
var i = ;
var timer = null;
var str = document.getElementById("xdd").innerHTML;
var div1 = document.getElementById("xdd");
timer = setInterval(function(){
div1.innerHTML = str.slice(,i);
i ;
if(i>str.length){
clearInterval(timer);
}
},);
</script>创建custom.css
- 路径
usr/themes/Joe/assets/css
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* .Reward{text-align:center;margin-left:px;color:var(--minor);font-size:px}.Reward .footer_flex{width:px;height:px;background-color:#f56c6c;border-radius:%;position:relative;z-index:;display:flex;justify-content:center;align-items:center;margin-bottom:px}.Reward .footer_flex:hover{background-color:var(--theme);cursor:pointer}.Reward .footer_flex:hover .flex_rows{display:block}.Reward .footer_flex .flex_rows{box-shadow:px px px px var(--theme);cursor:auto;height:px;width:px;position:absolute;top:-215px;background:var(--background);display:none;border-radius:px}.Reward .footer_flex .flex_rows::after{content:"";position:absolute;bottom:-16px;left:;right:;margin:auto;width:px;border:px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(px px px var(--theme))}.Reward .footer_flex .flex_rows .flex-footer{overflow:hidden;margin:px;position:relative;width:px;height:px}.Reward .footer_flex .flex_rows .flex-footer .RewardImg{width:px;position:absolute;left:}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li{float:left;overflow:hidden}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li img{width:px;border-radius:px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn{display:inline-flex;border-radius:px;position:absolute;border:px solid var(--classC);bottom:px;left:}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:nth-of-type(n ){border-left:px solid var(--classC)}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li div{height:px;font-size:px;color:var(--routine);padding:px;border-radius:px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:hover{cursor:pointer}.imgUpload_btn{margin:-10px auto px;text-align:right}.imgUpload_btn span{cursor:pointer;margin-right:px}.top-social{position:relative;padding:px ;width:px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:px;text-align:center;position:relative;height:px}.top-social li a{height:%}.top-social li div{height:%}.top-social li img{height:%}.top-social li .WeChatInner{display:none;position:absolute;box-shadow:px px px px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-180px;left:-50px;transform:translate3d(, px, );width:px;height:px;z-index:}.top-social li .WeChatInner::before{content:"";position:absolute;bottom:-16px;left:;right:;margin:auto;display:inline-block;width:px;border:px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(px px px var(--theme))}.top-social li .WeChatInner img{border-radius:px;width:px;height:auto;margin:px;background:none}.top-social li:hover .WeChatInner{display:block}.pe-social{width:%}.joe_comment__respond-form .foot{justify-content:flex-start}.joe_comment__respond-form .foot .joe_owo__contain{position:static}.joe_comment__respond-form .foot .joe_owo__contain .box{position:absolute;bottom:%;margin-bottom:px;left:px;padding-top:px;border:px solid rgba(,,,.15);border-color:transparent;box-shadow: px px rgba(,,,.08)}.joe_comment__respond-form .foot .comment_box{cursor:pointer;text-align:center;color:var(--routine);height:px;line-height:px;background:var(--background);opacity:.85;border-radius:px;width:px;margin-left:px}.joe_comment__respond-form .foot .comment_box:hover{background:var(--theme);color:#fff}.joe_comment__respond-form .foot .comment_box .dropdown-menu{cursor:default;position:absolute;top:auto;bottom:%;margin-bottom:px;z-index:;display:none;min-width:px;padding:px ;font-size:px;text-align:left;list-style:none;background-color:var(--background);color:var(--minor);background-clip:padding-box;border:px solid rgba(,,,.15);border-color:transparent;border-radius:px;box-shadow: px px rgba(,,,.08)}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image{width:px;padding:px px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p{margin: px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p textarea{resize:vertical}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .form-control{display:block;width:%;padding:px px;font-size:px;line-height:1.42857143;border:px solid #ccc;border-radius:px;border-color:transparent;background:var(--classD);color:#4e5358;max-height:px;min-height:px;box-shadow:none;transition:border-color ease-in-out .15s,background ease-in-out .15s,box-shadow ease-in-out .15s,opacity ease-in-out .3s}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right{text-align:right}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .error{float:left;color:var(--theme);-webkit-animation:s ease-in-out s infinite normal none running shaked;animation:s ease-in-out s infinite normal none running shaked}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but{border-radius:px;display:inline-block;line-height:1.44;background:var(--theme);color:#fff;padding:.3em em}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but:hover{-webkit-animation:s ease-in-out s infinite normal none running shaked;animation:s ease-in-out s infinite normal none running shaked}.joe_comment__respond-form .foot .press-down{background:var(--theme) !important;color:#fff !important}.HeaderImg{position:relative;width:%;height:rem;display:flex;margin-top:-4rem;justify-content:center;align-items:center;flex-direction:column;height: calc(vh px);}.HeaderImg.minImg{max-width:rem;height:rem;margin:auto}.HeaderImg.minImg .infomation .desctitle{font-size:1.5rem}.HeaderImg img{-o-object-fit:cover;object-fit:cover}.HeaderImg .infomation{position:absolute;line-height:}.HeaderImg .infomation .title{font-size:rem;font-weight:;color:#fff;text-align:center;text-shadow: .1875rem .3125rem #1c1f21;letter-spacing:.3rem}.HeaderImg .infomation .desctitle{display:flex;align-items:center;justify-content:center;text-align:center;color:#f3f3f3;font-size:rem;padding: rem;text-shadow: .1875rem .3125rem #1c1f21}.HeaderImg .HeaderImg_bottom{width:%;position:absolute;left:;bottom:-5px}.HeaderImg .HeaderImg_bottom .waves-svg{width:%;height:rem}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use{-webkit-animation:move-forever s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;animation:move-forever s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:first-child{-webkit-animation-delay:-2s;animation-delay:-2s;-webkit-animation-duration:s;animation-duration:s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(){-webkit-animation-delay:-3s;animation-delay:-3s;-webkit-animation-duration:s;animation-duration:s;fill:var(--background);opacity:.8}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(){-webkit-animation-delay:-4s;animation-delay:-4s;-webkit-animation-duration:s;animation-duration:s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(){-webkit-animation-delay:-5s;animation-delay:-5s;-webkit-animation-duration:s;animation-duration:s;fill:var(--background)}@-webkit-keyframes move-forever{0%{transform:translate3d(-90px, , )}to{transform:translate3d(px, , )}}@keyframes move-forever{0%{transform:translate3d(-90px, , )}to{transform:translate3d(px, , )}}.HeaderImg:before{content:"";position:absolute;top:;left:;width:%;height:%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5 AAAABmJLR0QA/wD/AP gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)}@media(max-width: px){.HeaderImg{height:rem;margin-top:;height: calc(vh px);}.HeaderImg.minImg{width:%;height:rem}.HeaderImg .infomation .title{font-size:1.5rem}.HeaderImg .infomation .desctitle{font-size:0.9rem}.HeaderImg .HeaderImg_bottom .waves-svg{height:rem}}.joe_aside.inactive{display:none}.joe_main{position:relative}@media(max-width: px){.joe-stretch{display:none}}.joe-stretch{height:%;position:absolute;top:;right:;padding:px }.joe-stretch .contain{position:-webkit-sticky;position:sticky;transition:top .5s;-webkit-animation:swingIconSet s infinite linear alternate;animation:swingIconSet s infinite linear alternate;z-index:}@-webkit-keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(deg)}}@keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(deg)}}.joe-stretch .contain::before{content:"";position:absolute;top:;left:;width:px;height:px;border-top:px solid var(--minor);border-right:px solid var(--minor);transition:border .35s}.joe-stretch .contain svg{position:absolute;top:px;left:-3px;width:px;height:px;fill:var(--minor);cursor:pointer;transition:fill .35s}.joe-stretch .contain:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.joe-stretch .contain:hover svg{fill:var(--theme)}.joe-stretch .contain:hover::before{border-color:var(--theme)}.joe-stretch.active{display:block}.joe_action_item.read_book{visibility:hidden;transform:scale()}.joe_action_item.read_book.active{visibility:visible;transform:scale()}.joe_action_item.read_book svg{transform:scale();opacity:;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale();opacity:}
*/修改header.php，引入css
- 路径
usr/themes/Joe/public/header.php
代码
截图
代码语言：javascript复制<!-- 首页大图 -->
<link rel="stylesheet" href="/usr/themes/Joe/assets/css/custom.css">
