Typecho基于handsome主题的一些修改设置

sunsea

November 2, 2019

4090 views

No comments

1882 words

网站搭建

1、首页文章列表悬停上浮

首页文章列表悬停上浮.gif

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

2、文章内打赏图标跳动

文章内打赏图标跳动.gif

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

3、复制弹框

效果请直接复制查看

3.1复制并粘贴html代码

开发者设置 --- 自定义输出body尾部的HTML代码 --- 粘帖代码

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

3.2复制并粘贴js代码

开发者设置 --- 自定义JavaScrpit --- 粘帖代码

document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

4、文章底部添加版权说明

样式请直接参看文章底部

4.1复制并粘贴CSS代码

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章底部版权https://dxoca.cn/SiteLog/196.html*/
.cpright {
    padding: 10px;
    background: rgba(220, 220, 220, 0.1);
    margin: 8px 0;
    font-size: 13px;
    border-left: 3px #f07aab96 solid;
    position: relative;
    z-index: 1;
    font-family: "Microsoft Yahei","Droid Serif",Georgia,"Times New Roman",STHeiti,serif;
    text-align: left;
}
.cpright a:hover {
    color: #ff7979e8!important;
}
.cpright a {
    color: #999!important;
    margin: 4px;
    border-bottom: 0px solid #999!important;
}

4.2修改handsome主题的post.php文件

在typecho安装目录下/usr/themes/handsome路径中找到post.php文件。
在其中搜索定位
在其头顶最近的</div>的前面粘贴以下代码

<div class="cpright">
<span>本文作者：<span class="sr-only"><?php _me("作者") ?>：</span> <a class="meta-value" href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>&nbsp;&nbsp;&nbsp;
文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br><span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><span>版权说明：若无注明，本文皆为“<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>”原创，转载请保留文章出处。</span>
</div>