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

typecho 网站添加统计信息卡片

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

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

教程
首先,把下面的代码放到你想展示的位置

    <div id="tjcard" style="box-shadow: 0 0 10px var(--main-shadow);">
    <div class="siteCount">
      <div class="wrapper">
        <div class="p-wh">
        <ul>
          <li>
            <p></p>
            <span><?= Ctx::getTagNum() ?></span>
            <p>标签总数</p>
          </li>
          <li>
            <p></p>
            <span><?= Ctx::getPostNum() ?></span>
            <p>文章总数</p>
          </li>
          <li>
            <p></p>
            <span><?php echo theAllViews();?></span>
            <p>访客总数</p>
          </li>
          <li>
            <p></p>
            <span></span>
            <span><?php echo getNumPosts(1); ?></span>
            <p>今日发布</p>
          </li>
          <li>
              <p></p>
            <span><a id="days">0</a></span>
            <p>稳定运行</p>
          </li>
        </ul>
        </div>
        <div class="join">
          <p style="text-align:center">欢迎访问尘烟博客,喜欢本站的话关注一下哦~<br><br>By:尘烟</p>
        </div>
      </div>
    </div>
  </div>
  <script>
var s1 = '2021-11-26';//设置为你的建站时间
s1 = new Date(s1.replace(/-/g, "/"));
s2 = new Date();
var days = s2.getTime() - s1.getTime();
var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
document.getElementById('days').innerHTML = number_of_days;
</script>

其次,把下面的函数放到functions.php文件里面,这是用于获取访客的函数

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

最后,把下面的CSS放到网站的<head></head>标签内就可以啦~

 <style type="text/css">
li{list-style: none;}#tjcard .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://api.mrcy0.com/img) center center / cover no-repeat /*fixed8*/;border-radius:8px;border-radius: var(--main-radius);}#tjcard .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}#tjcard .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#tjcard .siteCount ul{display: flex;}#tjcard .siteCount ul li{width: 20%; color: #fff; text-align: center;}#tjcard .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#tjcard .siteCount ul li span{font-size: 20px; font-family: Arial;}}#tjcard .p-wh{font-weight:700;}.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;}
  @media screen and (max-width: 768px){#tjcard .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#tjcard .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}}
 </style>

注意①:与cuteen主题可直接使用,其他主题自行测试或修改

注意②:其他网站也可以用,但需要自行摸索

原创文章,作者:笔记录,如若转载,请注明出处:https://www.bijilu.com/archives/603/
-- 展开阅读全文 --
分享放假在家看的电视剧
« 上一篇 02-12
typecho 网站添加超漂亮的侧栏统计卡片
下一篇 » 02-13

发表评论

V注册会员 L评论等级
R19 条回复
  1. 哈哈 :
    2022-02-14     Android /    Chrome

    WordPress也不错比typecho好,子比也不错,7b2也不错 还是别换了

    1. lala :
      2022-02-14     Android /    Chrome

      @哈哈

      我试过了,测试邮件那些是没问题的,而且注册的人也能正常收到邮件,只是他评论之后,我给他回复,他收不到邮件,不知道啥原因,我重装了一个wordpress再重装主题都不行

    2. lala :
      2022-02-14     Android /    Chrome

      @哈哈

      我试过了,测试邮件那些是没问题的,而且注册的人也能正常收到邮件,只是他评论之后,我给他回复,他收不到邮件,不知道啥原因,我重装了一个wordpress再重装主题都不行

      1. 2022-02-14     Android /    Chrome

        @lala

        那别人评论你的文章可以收到邮箱吧!那别人收不到你的回复估计就是不支持

        1. lala :
          2022-02-14     Android /    Chrome

          @笔记录

          嗯嗯,好吧,谢谢

        2. lala :
          2022-02-14     Android /    Chrome

          @笔记录

          别人评论我能收到邮件提醒,但是我回复别人他们就收不到了

          1. 2022-02-14     Android /    Chrome

            @lala

            那就是主题没这个功能或者WordPress没有,你可以去百度看看有没有解决办法

    3. lala :
      2022-02-14     Android /    Chrome

      @哈哈

      zibll感觉好多bug,我邮箱功能有问题,注册那些正常的,但是比如说你给我回复我回收到邮件,我的zibll就不行,我的设置已经打开了的,还是不行

      1. 2022-02-14     Android /    Chrome

        @lala

        肯定你自己设置的问题,我以前也是子比没问题,你试试你的邮件发信是不是正常的

  2. 啦啦 :
    2022-02-14     Android /    Chrome

    我还以为你用的zibll的主题,你觉得哪个主题好,我还没用过这个主题

    1. 2022-02-14     Android /    Chrome

      @啦啦

      WordPress也不错比typecho好,子比也不错,7b2也不错 还是别换了

  3. 啦啦 :
    2022-02-14     iPhone /    Safari

    你这怎么做的自动获取我的QQ头像有教程吗,还有你这个评论的阿鲁表情包,太喜欢了

    1. 2022-02-14     Android /    Chrome

      @啦啦

      typecho joe主题也有这个功能

      1. 啦啦 :
        2022-02-14     iPhone /    Safari

        @笔记录

        你说typecho joe主题自带的阿鲁表情包?我用的zibll主题没有

  4. 啦啦 :
    2022-02-14     iPhone /    Safari

    我来看看头像

    1. 2022-02-14     Android /    Chrome

      @啦啦

      这个就是利用QQ邮箱获取头像,百度好像有教程

      1. 啦啦 :
        2022-02-14     Android /    Chrome

        @笔记录

        嗯嗯,我做过一个这个,但是在这个主题上就不行了,没找到原因,https://www.cnnc404.com/642.html
        哎,你站里面有教程吗,

        1. 2022-02-14     Android /    Chrome

          @啦啦

          https://www.dpaoz.com/
          看看这个

          1. 啦啦 :
            2022-02-14     Android /    Chrome

            @笔记录

            好的我看看

没有更多评论了

作者信息

动态快讯

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

热门文章

最多点赞

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

标签TAG

热评文章