写在前面
最近一直在尝试新的主题,本站可能会更改外观,在此简单记录一下这段时间对Joe的美化,防止失忆,emm...也希望能帮助到刚接触Joe这个主题的站长们。
主题介绍
Joe — 一款个人类型Typecho主题,作者为 HaoOuBa ,本站使用得是二开修改版,作者为 执念博客 ,有关修改版与原版的介绍与差异请自行查阅。
本文未提到的设置在主题设置里都有
界面演示
美化记录
传送门:Typecho添加恋爱计时小组件
传送门:好久不见之网站底部样式
传送门: Typecho 添加博主在线时间
自定义底部栏左侧内容
2022 © Reach -
鲁ICP备19024348号-1
自定义底部栏右侧内容
RSS
MAP
列表动画
自定义CSS
/*页脚标签样式*/
.github-badge {
display: inline-block;
border-radius: 2px;
text-shadow: none;
font-size: 10px;
color: #fff;
line-height: 13px;
background-color: #ABBAC3;
margin-bottom: 3px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 2px 2px 2px 3px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.github-badge .badge-value {
display: inline-block;
padding: 2px 3px 2px 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.github-badge .bg-brightgreen {
background-color: #4c1 !important;
}
.github-badge .bg-green {
background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
background-color: #dfb317 !important;
}
.github-badge .bg-zise {
background-color:#F08080 !important;
}
.github-badge .bg-orange {
background-color: #fe7d37 !important;
}
.github-badge .bg-red {
background-color: #e05d44 !important;
}
.github-badge .bg-blue {
background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
/*这里是主题颜色和透明度*/
body { --theme: #746afc; --background: rgba(255,255,255,0.5) }
忘了这些CSS都是干啥的了,想跟我一样就都加上
自定义JS
这里是禁用F12的代码
/*禁用F12*/
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("大佬,别扒了!不妨加个友链?");
event.keyCode=0;
event.returnValue=false;
}
}
自定义head标签
(这里面啥都有,有统计的有分析的还有百度、头条收录验证的啥的,后悔没标记出来,看不懂了)
自定义body标签的内容
这里面有自定义右键菜单美化和我用户中心需要的js引入
传送门: 本站同款自定义右键菜单美化
自定义懒加载图
MC酱APi背景图
https://api.ixiaowai.cn/mcapi/mcapi.php
一言API
https://api.vvhan.com/api/ian
本文来自投稿,不代表本站立场,如若转载,请注明出处:
此处评论已关闭