Sunsea's Blog

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

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


[scode type="green"]打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可[/scode]

/*首页文章列表悬停上浮*/
.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、文章内打赏图标跳动


[scode type="green"]打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可[/scode]

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

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

    to {
        transform: scale(1.1);
    }
}

3、复制弹框

[scode type="blue"]效果请直接复制查看[/scode]

3.1复制并粘贴html代码

[scode type="green"]开发者设置 --- 自定义输出body尾部的HTML代码 --- 粘帖代码[/scode]

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

3.2复制并粘贴js代码

[scode type="green"]开发者设置 --- 自定义JavaScrpit --- 粘帖代码[/scode]

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

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

[scode type="blue"]样式请直接参看文章底部[/scode]

4.1复制并粘贴CSS代码

[scode type="green"]打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可[/scode]

/*文章底部版权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文件

[scode type="blue"]在typecho安装目录下/usr/themes/handsome路径中找到post.php文件。
在其中搜索定位<!--文章页脚的广告位-->
在其头顶最近的</div>的前面粘贴以下代码
[/scode]

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

5、参考文章

[scode type="share"]https://lioeo.cn/14.html
https://www.phenxso.com/archives/117.html
https://dxoca.cn/SiteLog/196.html
[/scode]

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »