排行榜 统计
  • 建站日期:2021-12-1
  • 文章总数:40 篇
  • 评论总数:252 条
  • 分类总数:21 个
  • 最后更新:2月13日
原创typecho

typecho 网站添加超漂亮的侧栏统计卡片

本文阅读 1 分钟
首页 typecho 正文
未收录,推送中

前言
这是一款超漂亮的侧栏统计卡片,和我之前发的

typecho 网站添加统计信息卡片

前言 这是一款漂亮的信息统计卡片,大家都见过吧,这是WP博客子比主题常见的一款统计卡片,个人觉得很漂亮,就拔了下来,用在了Ty博客,喜欢的拿走吧 ![0....

,也是来自于WP博客,自己做了样式修改,话不多说,冲!
69649-l7q8x5uj1rs.png
教程
先把下面的代码放到你网站的任意位置,即想放到的位置

PS:统计调用代码需要你自己修改

    <center>
            <div class="widgest-bg widgest-bg1"><div class="widgest-main"><div class="widgest-meat"><li class="tg">今日更新:<?php echo getNumPosts(1); ?>篇</li></div></div></div>
            <div class="widgest-bg widgest-bg2"><div class="widgest-main"><div class="widgest-meat"><li class="tg">文章总数:<?= Ctx::getPostNum() ?>篇</li></div></div></div>
            <div class="widgest-bg widgest-bg3"><div class="widgest-main"><div class="widgest-meat"><li class="tg">评论总数:<?= Ctx::getCommentsNum() ?>条</li></div></div></div>
            <div class="widgest-bg widgest-bg4"><div class="widgest-main"><div class="widgest-meat"><li class="tg">标签总数:<?= Ctx::getTagNum() ?>个</li></div></div></div>
            <div class="widgest-bg widgest-bg5"><div class="widgest-main"><div class="widgest-meat"><li class="tg">访客总数:<?php echo theAllViews();?>人</li></div></div></div>
            <div class="widgest-bg widgest-bg6"><div class="widgest-main"><div class="widgest-meat"><li class="tg">加载耗时:<?php echo timer_stop();?>秒</li></div></div></div>
            <div class="widgest-bg widgest-bg7"><div class="widgest-main"><div class="widgest-meat"><li class="tg">感谢陪伴:<?php getBuildTime(); ?></li></div></div></div>
</center>

然后把下面的CSS放到你网站的<style></style>里面即可

 .widgest-bg{margin-top: 4px; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; border-radius: 8px;}.widgest-main{align-items: center; place-content: flex-start space-around; display: flex;}.widgest-meat{display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; color: rgb(255, 255, 255); font-weight: 700 !important; line-height: 1.5 !important;}.widgest-bg:not(article){transition: all 0.3s;}.widgest-bg:not(article):hover{transform: translateX(-10px);}.tg{list-style: none; margin-top:4px;}
/*图片路径设置*/
.widgest-bg1{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/01.png);}
.widgest-bg2{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/02.png);}
.widgest-bg3{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/03.png);}
.widgest-bg4{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/04.png);}
.widgest-bg5{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/05.png);}
.widgest-bg6{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/06.png);}
.widgest-bg7{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.mrcy0.com/tu/07.png);}
原创文章,作者:笔记录,如若转载,请注明出处:http://bijilu.com/archives/605/
-- 展开阅读全文 --
typecho 网站添加统计信息卡片
« 上一篇 02-13
typecho图片上传腾讯云储存插件cosUploadV5
下一篇 » 02-13

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

最多点赞

1赞, 阅读:17
1赞, 阅读:40
0赞, 阅读:163
0赞, 阅读:96

标签TAG

热评文章