网站LOGO
公爵书房 | 技术分享
页面加载中
10月3日
网站LOGO 公爵书房 | 技术分享
以指键之轻,承载知识之重
菜单
  • 公爵书房 | 技术分享
    以指键之轻,承载知识之重
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Joe 主题美化记录
    点击复制本页地址
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    Joe 主题美化记录

    公爵 · 原创 ·
    笔记 · joetypecho魔改美化
    共 19478 字 · 约 2 分钟 · 21

    头像呼吸灯

    在主题后台全局css里添加

    css 代码:
    /*头像呼吸光环和鼠标悬停旋转放大*/
    .avatar {
     border-radius: 50%;
     animation: light 4s ease-in-out infinite;
     transition: 0.5s;
    }
    .avatar:hover {
    transform: scale(1.15) rotate(720deg);
    }
    @keyframes light {
     0%{box-shadow: 0 0 4px #f00;}
     25%{box-shadow: 0 0 16px #0f0;} 
     50%{box-shadow: 0 0 4px #00f;}
     75%{box-shadow: 0 0 16px #0f0;} 
     100%{box-shadow: 0 0 4px #f00;}
    }

    调整内容宽度

    把1360px更换成你想要的宽度即可

    css 代码:
    #Joe .joe_container{
    max-width: 1360px;
    }

    自定义鼠标右键

    在主题后台自定义JS(body)里添加

    html 代码:
    <!-- 调用js -->
    <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
    <!-- 自定义右键菜单美化 -->
      <style type="text/css">
        a {text-decoration: none;}
        div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
    (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
        div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
        div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
        div.usercm ul li a{color:#666;padding:0 15px;display:block}
        div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
        div.usercm ul li a i{margin-right:10px}
        a.disabled{color:#c8c8c8!important;cursor:not-allowed}
        a.disabled:hover{background-color:rgba(255,11,11,0)!important}
        div.usercm{background:#fff !important;}
        </style>
    <div class="usercm" style="left: 199px; top: 5px; display: none;">
        <ul>
            <li><a href="https://blog.gjcloak.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
            <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
            <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
            <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
            <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
            <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
            <li><a href="https://blog.gjcloak.top/links"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
               <li><a href="https://blog.gjcloak.top/messagecenter"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        (function(a) {
            a.extend({
                mouseMoveShow: function(b) {
                    var d = 0,
                        c = 0,
                        h = 0,
                        k = 0,
                        e = 0,
                        f = 0;
                    a(window).mousemove(function(g) {
                        d = a(window).width();
                        c = a(window).height();
                        h = g.clientX;
                        k = g.clientY;
                        e = g.pageX;
                        f = g.pageY;
                        h + a(b).width() >= d && (e = e - a(b).width() - 5);
                        k + a(b).height() >= c && (f = f - a(b).height() - 5);
                        a("html").on({
                            contextmenu: function(c) {
                                3 == c.which && a(b).css({
                                    left: e,
                                    top: f
                                }).show()
                            },
                            click: function() {
                                a(b).hide()
                            }
                        })
                    })
                },
                disabledContextMenu: function() {
                    window.oncontextmenu = function() {
                        return !1
                    }
                }
            })
        })(jQuery);
        function getSelect() {
            "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
        };
        function baiduSearch() {
            var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
            "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
        };
        $(function() {
            for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
                d = !1;
                break
            }
            d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
        });
    </script>

    网站底部样式

    在头部文件加上两个链接

    html 代码:
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu@1.6.0/css/cydibu.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu/css/bootstrap-grid.min.css">

    footer页面放入以下代码

    html 代码:
    <!-- 好久不见 -->
    <div class="chenyuyc">
        <div class="footer-fav">
          <div class="container">
            <div class="fl site-info">
              <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2>
              <div class="site-p">
                  <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p>
              </div>
            </div>
            <div class="fr site-fav">
              <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div>
            <div class="site-girl">
                <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div>
                <div class="girl-info hide_md">
                  <h4>绿水本无忧,因风皱面</h4>
                  <h4>青山原不老,为雪白头</h4>
                </div>
            </div>
          </div>
        </div>
    </div>   

    刚放入上面代码还是不够的,我的目标是用这个代替原先的页脚信息,因此需要把原来页脚的部分代码加入到<div class="site-p"></div>

    最终效果

    html 代码:
    <#if settings.enable_footer!true>
      <footer class="joe_footer${(settings.footer_position=='fixed')?then(' fixed','')}${settings.enable_full_footer?then(' full','')}">
    <#if settings.footer_source=='both'  settings.footer_source=='theme'>
    <!-- 好久不见 -->
    <div class="chenyuyc">
        <div class="footer-fav">
          <div class="container">
            <div class="fl site-info">
              <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2>
              <div class="site-p">
                  <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p>
                  <#if settings.enable_birthday!false>
                  <p>
                    ${.now?string("yyyy")} © <a href="${blog_url!}" target="_blank" rel="noopener noreferrer">${user.nickname!}</a>
                  <#if settings.enable_icp && settings.icp?? && settings.icp?trim!=''> - <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">${settings.icp}</a></#if>
                  </p>
              <#if settings.enable_police && settings.police?? && settings.police?trim!=''>
                <#assign recordcode=settings.police?replace('[^\\d]','','ri')>
                <p class="site_police">
                  <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${recordcode}" target="_blank" rel="noopener noreferrer nofollow">${settings.police}</a>
                </p>
              <#if settings.enable_powerby!true><p class="site_powered">Powered by <a class="a-powered" href="https://halo.run/" target="_blank" rel="noopener noreferrer">Halo</a>&nbsp;&nbsp;? Theme by <a class="a-theme" title="当前主题:Joe2.0 V${theme.version!}" href="${theme.repo!}" target="_blank" rel="noopener noreferrer">M酷</a></p></#if>
              </#if>
                <div class="site_life">
                  <i class="joe-font joe-icon-jiasu"></i>已运行&nbsp;<strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒
                </div>
              </#if>
              </div>
            </div>
            <div class="fr site-fav">
              <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div>
            <div class="site-girl">
                <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div>
                <div class="girl-info hide_md">
                  <h4>绿水本无忧,因风皱面</h4>
                  <h4>青山原不老,为雪白头</h4>
                </div>
            </div>
          </div>
        </div>
    </div>      
          <!--<div class="joe_container${(settings.enable_rss==false && settings.enable_sitemap==false)?then(' central','')}">
            <div class="item">
              <#if settings.driven_by?? && settings.driven_by!='none'>
                <#assign driven_logo=BASE_RES_URL + '/source/img/cloud/' + settings.driven_by + '.svg'>
                <#switch settings.driven_by>  
                  <#case 'aliyun'>  
                    <#assign driven_url='https://www.aliyun.com'>
                    <#break>  
                  <#case 'tencent'>  
                    <#assign driven_url='https://cloud.tencent.com'>
                    <#break> 
                  <#case 'baidu'>  
                    <#assign driven_url='https://cloud.baidu.com'>
                    <#break>  
                  <#case 'upyun'>  
                    <#assign driven_url='https://www.upyun.com'>
                    <#break>  
                  <#case 'qiniu'>  
                    <#assign driven_url='https://www.qiniu.com'>
                    <#break>
                  <#case 'huawei'>  
                    <#assign driven_url='https://www.huaweicloud.com'>
                    <#break>    
                  <#case 'jinshan'>  
                    <#assign driven_url='https://www.ksyun.com'>
                    <#break>    
                  <#case 'custom'>
                    <#assign c_cloud=settings.custome_cloud?split('\n')>
                    <#assign driven_logo=(c_cloud[0]?? && c_cloud[0]?trim!='')?then(c_cloud[0]?trim,'')>
                    <#assign driven_url=(c_cloud[1]?? && c_cloud[1]?trim!='')?then(c_cloud[1]?trim,'')>
                    <#break>    
                  <#default>
                    <#assign driven_url=''>
                </#switch>
                <#assign clickable = driven_url != '' && driven_url != '#'>
                <p class="site_driven">本站点由
                  <a href="${clickable?then(driven_url,'javascript:;')}" ${clickable?then('target="_blank"','')} rel="noopener noreferrer nofollow">
                    <img class="${settings.driven_by}" src="${driven_logo}" onerror="Joe.errorImg(this)" alt="云服务商"/>
                  </a>提供云服务
                </p>
              </#if>
            </div>
            <div class="side-col">
            <#if settings.enable_rss==true  settings.enable_sitemap==true>
              <div class="item">
                <#if settings.enable_rss><a class="rss" href="${rss_url!}" target="_blank" rel="noopener noreferrer"><i class="joe-font joe-icon-rss-fill"></i>&nbsp;RSS</a></#if>
                <#if settings.enable_sitemap><a href="${sitemap_xml_url!}" target="_blank" rel="noopener noreferrer">站点地图</a></#if>
              </div>
            </#if>
            <#if settings.enable_busuanzi!false>
              <div class="item busuanzi-statistic">
                <span class="site-pv"><i class="joe-font joe-icon-zhexiantu"></i>访问量<em id="busuanzi_value_site_pv">0</em></span>
                <span class="site-uv"><i class="joe-font joe-icon-monitor"></i>访客量<em id="busuanzi_value_site_uv">0</em></span>
                <span class="site-page-pv"><i class="joe-font joe-icon-dianji"></i>本页访客<em id="busuanzi_value_page_pv">0</em></span>
              </div>
            </#if>
          </div>
          </div>
        </#if>
        <#if settings.footer_source=='both'  settings.footer_source=='backend'>
          <@global.footer />
        </#if>-->
      </footer>
    </#if>

    添加全屏头图显示

    创建HTML文件

    内容如下:

    html 代码:
    <!doctype html>
    <html>
            <section class="bg-hero py-md-0" style="background-image: url(https://cos.gjcloak.xyz/yun/%E5%9B%BE%E7%89%87/6171_2131898046.jpg?imageMogr2/format/webp/interlace/1/quality/80)">
                <div class="container">
                    <div class="row vh-md-100">
                        <div class="col-md-8 mx-auto my-auto text-white text-center">
                             <p class="lead mb-2 font-weight-bold"><br></p>
                            <h1 class="my-4"><big>Hi, I'm Cloak.</big></h1>
                            <p class="lead mb-5 font-weight-bold">
                                <span class="typist">公 爵 书 房</span>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </html>

    使用字体(可选)

    html 代码:
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PacificoInconsolata:400,700">

    添加CSS

    在前面创建的HTML文件里加入一下CSS代码:

    html 代码:
    .bg-hero {
      background-color: #3d5afe;
      background-size: cover;
      background-position: center center;
      position: relative; }
      .bg-hero:before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        left: 0;
        top: 0;
        content: "";
        background-color: rgba(0, 0, 0, 0.3); }
      .bg-hero .container {
        z-index: 2;
        position: relative; }
        .bg-hero .container h1 {
          font-family: Pacifico;
          font-weight: normal;
          color: #ffffff; }
          
    .py-md-0 {
        padding-top: 0 !important; }
        
    .py-md-0 {
        padding-bottom: 0 !important; }
        
    .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto; }
      @media (min-width: 576px) {
        .container {
          max-width: 540px; } }
      @media (min-width: 768px) {
        .container {
          max-width: 720px; } }
      @media (min-width: 992px) {
        .container {
          max-width: 960px; } }
      @media (min-width: 1200px) {
        .container {
          max-width: 1140px; } }
    
    .container-fluid {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto; }
      
      .navbar > .container,
      .navbar > .container-fluid {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: justify;
            justify-content: space-between; }
            
    @media (max-width: 575.99px) {
      .navbar-expand-sm > .container,
      .navbar-expand-sm > .container-fluid {
        padding-right: 0;
        padding-left: 0; } }
        
    @media (min-width: 576px) {
      .navbar-expand-sm > .container,
        .navbar-expand-sm > .container-fluid {
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap; }}
              
    @media (max-width: 767.99px) {
      .navbar-expand-md > .container,
      .navbar-expand-md > .container-fluid {
        padding-right: 0;
        padding-left: 0; } }
        
    @media (min-width: 768px) {
      .navbar-expand-md > .container,
        .navbar-expand-md > .container-fluid {
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap; }}
    
    @media (max-width: 991.99px) {
      .navbar-expand-lg > .container,
      .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0; } }
        
    @media (min-width: 992px) {
      .navbar-expand-lg > .container,
        .navbar-expand-lg > .container-fluid {
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap; }}
    
    @media (max-width: 1199.99px) {
      .navbar-expand-xl > .container,
      .navbar-expand-xl > .container-fluid {
        padding-right: 0;
        padding-left: 0; } }
        
    @media (min-width: 1200px) {
        .navbar-expand-xl > .container,
        .navbar-expand-xl > .container-fluid {
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap; } }
    
     .navbar-expand > .container,
      .navbar-expand > .container-fluid {
        padding-right: 0;
        padding-left: 0; }
        
     .navbar-expand > .container,
      .navbar-expand > .container-fluid {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; }
            
    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px; }
      
    @media (min-width: 768px) {
      .vh-md-100 {
        height: 100vh; } }
        
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
    .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
    .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
    .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
    .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
    .col-xl-auto {
      position: relative;
      width: 100%;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px; }
      
    @media (min-width: 768px) {
      .col-md {
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
        -ms-flex-positive: 1;
            flex-grow: 1;
        max-width: 100%; }
      .col-md-auto {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
        width: auto;
        max-width: none; }
      .col-md-8 {
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
        max-width: 66.66667%; }}
    
    .mx-auto {
      margin-left: auto !important; 
      margin-right: auto !important; }
    
    .my-auto {
      margin-top: auto !important; 
      margin-bottom: auto !important; }
    
    .text-white {
      color: #fff !important; }
     
    .text-center {
      text-align: center !important; }
      
    .img-fluid {
      max-width: 100%;
      height: auto; }
      
    .rounded-circle {
      border-radius: 50% !important; }
      
    .img-profile {
      max-width: 175px; }
      
    .lead {
      font-size: 1.2rem;
      font-weight: 400; }
      
    .mb-5,
    .my-5 {
      margin-bottom: 1.5rem !important; }
    
    .mb-6,
    .my-6 {
      margin-bottom: 1.8rem !important; }
      
    .font-weight-bold {
      font-weight: 700 !important; }
      
    
    /* Typist */
    @keyframes blink {
      0% {
        opacity: 1.0; }
      50% {
        opacity: 0.0; }
      100% {
        opacity: 1.0; } }
    
    @-webkit-keyframes blink {
      0% {
        opacity: 1.0; }
      50% {
        opacity: 0.0; }
      100% {
        opacity: 1.0; } }
    
    .typist .selectedText {
      display: none; }
    
    .typist:after {
      position: relative;
      top: 7px;
      display: inline-block;
      height: 30px;
      margin-left: 5px;
      content: " ";
      -webkit-animation: blink .5s step-end infinite alternate;
      animation: blink .5s step-end infinite alternate;
      border-right: 2px solid; }

    主题使用

    在主题的index.php文件中,查找到<?php $this->need('public/header.php'); ?>这串代码,在下方引入下面代码(当然具体位置可以根据需要自动调整)

    php 代码:
    <?php        
        include ("public/[file name].html");
    ?>

    [file name] 是前面创建的html文件名称
    最后,这样就完成了全屏头图显示。

    声明:本文由 公爵(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    发一条! 发一条!
    博客logo 公爵书房 | 技术分享 以指键之轻,承载知识之重 51统计 百度统计
    MOEICP 萌ICP备20226257号 ICP 赣ICP备2022001242号-1 ICP 闽公网安备35020502000606号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已运行 1 年 256 天 6 小时 7 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    公爵书房 | 技术分享. © 2022 ~ 2023.
    网站logo

    公爵书房 | 技术分享 以指键之轻,承载知识之重
     
     
     
     
    壁纸