首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typecho增加首页大图

Typecho增加首页大图

作者头像
小东东
发布2023-03-20 11:32:25
7780
发布2023-03-20 11:32:25
举报
文章被收录于专栏:小东东小东东

修改index.php

  • 路径 usr/themes/Joe/index.php

代码

截图

<!--首页大图-->
        <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

代码

截图

<!-- 首页大图 -->
        <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

代码

截图

<!-- 首页大图 -->
<link rel="stylesheet" href="/usr/themes/Joe/assets/css/custom.css">
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 修改index.php
  • 修改post.php
  • 创建custom.css
  • 修改header.php,引入css
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档