头像呼吸灯
在主题后台全局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>
网站底部样式
在头部文件加上两个链接

<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>
最终效果

<#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> ? 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>已运行 <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> 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
include ("public/[file name].html");
?>
[file name]
是前面创建的html文件名称
最后,这样就完成了全屏头图显示。