子比主题美化:底部版权信息美化

jaysun

版权信息是每个网站必不可少的展示,很多版权信息比较单一,偶然间看到以一篇子比版权信息的美化,觉着不错今天就分享给大家,美化教程是转自腾讯云开发者社区小N同学的一篇帖子。

效果:

其中URL颜色是根据主题色调整的!

<head>
<style type="text/css">
.post-copyright {
    box-shadow: 2px 2px 5px;
    line-height: 2;
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    transition: box-shadow .3s ease-in-out;
    overflow: hidden;
    border-radius: 12px!important;
    background-color: var(--main-bg-color);
}
.post-copyright:before {
    position: absolute;
    right: -26px;
    top: -120px;
    content: '\f25e';
    font-size: 200px;
    font-family: 'FontAwesome';
    opacity: .2;
}
.post-copyright__title {
    font-size: 22px;
}
.post-copyright_type {
    font-size: 18px;
    color:var(--theme-color)
}
.post-copyright .post-copyright-info {
    padding-left: 6px;
    font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
    display: inline-block;
    width: fit-content;
    padding: 2px 5px;
    font-size: 15px;
}
.muted-3-color {
    color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
    <div class="post-copyright" style="max-width:800px;margin:0 auto;">
        <div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
        <div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
        <div class="post-copyright-m">
            <div class="post-copyright-m-info">
                <div class="post-copyright-a">
                    <strong>文章作者</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.yiluxb.cn/">忆路吧博客</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>隐私政策</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.nesxc.com/privacy-policy-2/">PrivacyPolicy</a></strong>
                    </div>
                </div>
                <div class="post-copyright-u" style="margin:10px 20px">
                    <strong>用户协议</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.nesxc.com/use-generator/">UseGenerator</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>许可协议 </strong>
                    <div class="post-copyright-cc-info">
                        <a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
                        <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>

其中的手机优化是将四个小模块隐藏以达到手机端阅读体验优化的效果

把代码内的url和名称改成你的即可。

安装方法

复制上述代码,前往主题配置页面-文章-文章页面

3.png

找到版权设置页面

4.png

将上面的代码插入保存即可。

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
评论列表 (暂无评论,138人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码