写在前面

俺有预感, 主题快要更新了

JavaScript

首先是自定义JavaScript,放在那里我就不用说了吧,这个社区也有

左侧图标颜色and彩色标签云

<!--左侧图标颜色and彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});

如果你的主题开启了pjax,需在后台pjax添加回调函数

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

控制播放器音乐大小

<!--音乐音量--><!--volume=0.5,数值越小音量越小-->
setTimeout(function (){    document.querySelector(".skPlayer-source").volume=0.5;}, 3000);

动态标题栏

<!--图片链接可替换-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了!!!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
         document.title = '咦,又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

复制弹窗

<!--引用复制弹窗js-->
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
<!--复制弹窗-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!');};

JavaScript大概就是这么多了

自定义body

我发现我body内没加什么东西呀甚至head内只有一个统计

canvas动态特效

js不会在手机端加载,咳咳这就是在body

<!--canvas蜘蛛网-->
<script>
if (screen && screen.width >768 ) {
document.write('<script   src="https://cdn.jsdelivr.net/gh/Catalpablog/handsome/js/canvas-nest.min.js" type="text/javascript"><\/script>');
}
</script>

万能的控制台

<!--输出控制台-->
<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c Catalpa Blog  控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台,可写html代码
</script>

自定义CSS

/*左侧-顶部-底部*/
.bg-white{
    background-color: white;
}
/*白色整体背景*/
div#alllayout {
    background-color: white;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*底部*/
.bg-light {
    background-color: white;
}
/*底部线条*/
.b-t {
    border-top: 0px solid #00000000!important;
}
/*博客信息-搜索框-幻灯片*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*幻灯片外阴影加深*/
div#index-carousel {
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: white;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: white;
}

/*文章圆角-阴影*/
.panel {
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
    border-radius: 6px!important;
}
/*文章标题功能信息*/
.bg-white-pure {
    background: white;
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*不显示文章标题下线*/
.b-b {
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}
/*上移文章整体*/
.wrapper-md {
    padding: 15px;
}
/*表情按钮*/
.OwO .OwO-logo {
    background: #f3f3f3;
    color: #58666e;
}
.OwO .OwO-logo:hover {
    color: #009dff;
}
/*代码块*/
#post-content pre {
    border-radius: 6px;
}
div.code-toolbar {
    border-radius: 6px;
}
/*伸缩框*/
.collapse-panel .panel-heading {
    background: #f3f3f3;
}
/*回复可见*/
.hideContent {
    background: repeating-linear-gradient(145deg,#f2f2f2,#f2f2f2 15px,#fff 0,#fff 30px);
}
/*置顶左移使标题居中*/
.m-t-xs {
    margin-right: -42px;
}
/*相册背景*/
.hbox .col {
    background-color: white;
}
/*独立背景*/
.wrapper-md {
    padding: 15px;
    background-color: white;
}
/*底部图标颜色*/
svg.feather.feather-rss {
    color: #495dc3;
}
svg.feather.feather-settings {
    color: #da2727;
}
/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up {
    color: #52de97
}
.sidebar-icon svg.feather.feather-message-square {
    color: #495dc3
}
.sidebar-icon svg.feather.feather-gift {
    color: #f67280
}
/*底部页脚*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #abbac3;
    margin-bottom: 5px
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
    background-color: #007ec6
}
/*底部下移*/
.wrapper.b-t.bg-light {
    padding: 0px;
}
/*bilibili视频挂载*/
.iframe_video {
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px) {
    .iframe_video {
        height: 15em
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .iframe_video {
        height: 20em
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .iframe_video {
        height: 30em
    }
}

@media only screen and (min-width:1200px) {
    .iframe_video {
        height: 40em
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
/*头像旋转*/
img.img-full.img-circle.normal-shadow {
    transition: 0.5s;
}

span.thumb-lg.w-auto-folded.avatar.m-t-sm {
    animation: light 4s ease-in-out infinite;
}

.thumb-lg {
    width: 68px
}

.img-full:hover {
    transform: scale(1.1) rotate(360deg)
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px red
    }

    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 green
    }
}

.img-square {
    border-radius: 50%;
    transition: all .3s;
}

.img-square:hover {
    transform: rotate(360deg)
}

.blog-post .panel-small:not(article),.blog-post .panel:not(article) {
    transition: all .3s
}

.thumb-sm:hover {
    transform: scale(1.15) rotate(360deg)
}
/*B站表情自定义大小*/
.emotion-BZ {
    width: 40PX;
}
.comment-content-true img.emotion-BZ {
    max-width: 100%!important;
}
/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s
}

.item-thumb:hover {
    transform: scale(1.05)
}
/*标题悬停颜色*/    
.index-post-title a:hover {
    color: #2ebaae
}
/*打赏背景图*/
.support-author{
    background-repeat:round;
    background-image:url(https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/men.webp);
}
/*美化链接*/
.comment-content-true a:not(.light-link):not(.post_inser_a):focus,.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover {
    color:     #FF0000!important; 
}
.comment-content-true a:not(.light-link):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a) {
    color:  #1E90FF!important; 
}
/*左侧层次*/
.app-aside-fix #aside {
    z-index: 0;
}
/*底部层次*/
.app-footer {
    z-index: 0;
}
/*标题美化*/
#post-content h2 {position: relative;margin: 15px 0 15px!important;font-size: 1.8em;}
#post-content h3 {position: relative;margin: 15px 0 15px!important;font-size: 1.5em;}
#post-content h4 {position: relative;margin: 15px 0 15px!important;font-size: 1.3em}
#post-content h5 {position: relative;margin: 15px 0 15px!important;font-size: 1.2em}
#post-content h6 {position: relative;margin: 15px 0 15px!important;font-size: 1.1em}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#1E90FF 30%,#1E90FF 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(30,144,255,0.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 3.5em;}
#post-content h3::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#FF4500 30%,#FF4500  70%);width:1em;left:0;box-shadow:0 3px 3px rgba(255,69,0,0.4);height:3px;bottom:-8px;}
#post-content h3::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h3:hover::after {width: 3.5em;}
/*标签样式*/
.tab-pane a.light-link img {
    box-shadow: 0 8px 10px rgba(0,0,0,0.35);
}
img.emotion-aru,img.emotion-twemoji {
    box-shadow: 0 8px 10px rgba(0,0,0,0)!important;
}
li.nav-item.active {
    background-color: rgba(41,98,255,0.2);
    transition: color 1s ease,background-color 1s ease;
}
.post_tab .nav a,.post_tab .nav a:hover {
    outline: none;
    transition: color 1s ease,background-color 1s ease;
}
/*修复豆瓣图片圆角*/
.douban-list {
    border-radius: 6px;
}
/*修复logo导致位移*/
.app-header .navbar-header {
    height: 51.333332px;
}
/*修复整体上移影响右侧设置错位*/
.wrapper.b-t.b-light.bg-light.lter.r-b {
    padding: 15px;
}
/*友情界面拉伸*/
.wrapper.ng-binding {
    padding: 0px;
}.bg-white.wrapper.border-radius-6 {
    padding: 0px;
}
/*盒子四周阴影*/
.app.container {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*非盒子美化宽度*/
.no-container #post-panel, .no-container .blog-posts {
    max-width: 1200px;
}
/*文章日期居中*/
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
}

其他修改

这个的话就是一般都是改源代码的了

给文章内加一个正文到此结束

在主题文件post

 <?php echo Content::postContent($this,$this->user->hasLogin());?>

代码下面加上

<div class="entry-content l-h-2x">
 <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
 <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">正文到此结束</span>
</div> 

给文章内加一个版权声明

在主题文件post内,刚刚加的正文到此结束下加上

<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>
&nbsp;&nbsp;&nbsp;
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
/div>

文章内添加一个高级删除线

教程是社区内的,不过作者删库了,首先在主题文件header内底部head上面添加以下代码

<!--高级删除线-->
<style type="text/css"> 
span.CA a.external,span.CA a.external:visited,span.CA a.extiw,span.CA a.extiw:visited {
    color: #252525
}
.CA,.CA a,a .CA,.CA a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none
}
body:not(.CA_toggle_on) .CA:hover,body:not(.CA_toggle_on) .CA:active,body:not(.CA_toggle_on) .CA.off {
    transition: color .13s linear;
    color: #fff
}
body:not(.CA_toggle_on) .CA:hover a,body:not(.CA_toggle_on) a:hover .CA,body:not(.CA_toggle_on) .CA.off a,body:not(.CA_toggle_on) a:hover .CA.off {
    transition: color .13s linear;
    color: #add8e6
}
body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off,body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off {
    transition: color .13s linear;
    color: #ba0000
}
</style>

使用方法就是在文章内写以下,建议带!!!

!!!
<span class="CA" title="你知道的太多了">你想说啥</span>
!!!
效果如我是效果

响应耗时和访客总数

首先将以下代码加到/usr/themes/handsome/libs/Content.php中,放在class Content{}之前

    /*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /*响应时间*/
    function timer_start() {
        global $timestart;
        $mtime = explode( ' ', microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( ' ', microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }

然后在/usr/themes/handsome/component/sidebar.php文件内,找到博客信息下面添加以下代码

<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

添加百度检测收录

累了累了,直接上作者地址吧

添加表情包

PS: 表情这里我删掉了一个自带的,你不想删你就复制要添加的

  1. 复制owo.json/usr/themes/handsome/usr/
  2. 上传并解压文件夹到/usr/themes/handsome/usr/img/emotion/
  3. 清除一下游览器缓存,然后刷新即可

关于插件

插件介绍地址
CaNightHandsome主题的夜间模式插件Catalpa
GitStatic图片上传到github并加速挨揍云
LoveKKCommentTypecho 评论通知、找回密码插件挨揍云
ShortLinks把外部链接转换为内链接挨揍云
CodePrettifyMac风格代码高亮Xcnte' s Blog
HoerMouse炫彩鼠标Hoe
tagshelper后台编辑文章时增加标签选择列表泽泽社长

好多地址都挂了,就先这样吧,有问题滴滴我

写在最后

biubiu~~一切效果以我博客为准,另本文,仅备忘,先这些,别的暂时没想起来

如你真的喜欢本站样式,并想要同款,那么可继续往下看

/usr/themes/handsome/component/header.php50行左右<!-- 本地css静态资源 --> 下插入以下代码

<!--7月1日-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Catalpablog/handsome/css/handsome.css"/>
<!--7.8日添加微调一点点东西-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Catalpablog/handsome/css/handsome1.1.css"/>

引用一个就行了,仔细点

正文到此结束
本文作者:     文章标题:本站基于handsome主题的修改(备忘)
本文地址:https://www.bsgun.cn/825
版权说明:若无注明,本文皆Catalpa Blog原创,转载请保留文章出处。
Last modification:July 8th, 2020 at 04:49 pm
喵wu~~喵呜~~