写在前面

最近一直在尝试新的主题,本站可能会更改外观,在此简单记录一下这段时间对Joe的美化,防止失忆,emm...也希望能帮助到刚接触Joe这个主题的站长们。

主题介绍

Joe — 一款个人类型Typecho主题,作者为 HaoOuBa ,本站使用得是二开修改版,作者为 执念博客 ,有关修改版与原版的介绍与差异请自行查阅。
本文未提到的设置在主题设置里都有

界面演示

PC端

手机端主页

手机端侧栏


美化记录


传送门:Typecho添加恋爱计时小组件



传送门:好久不见之网站底部样式



传送门: Typecho 添加博主在线时间


自定义底部栏左侧内容
https://ioku.net/2022/04/20/62601865dec31.png

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


本文来自投稿,不代表本站立场,如若转载,请注明出处:
最后修改:2023 年 08 月 27 日
如果觉得我的文章对你有用,请随意赞赏