Joe 主题美化记录 - 公爵书房

5月

头像呼吸灯

在主题后台全局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 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢