侧边栏壁纸
    love love love

  • 累计撰写 20 篇文章
  • 累计收到 4 条评论

教程』给你的Typecho博客侧边栏加一个恋爱计时

秋枫
2021-06-09 / 0 评论 / 67 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月09日,已超过105天没有更新,若内容或图片失效,请留言反馈。

实现方法

如果是使用的 Joe for typecho ,那就很简单了,直接在后台的主题设置里

登录你的网站后台,进入 外观设置-网站外观-设置外观(必须使用Joe主题)-侧栏设置
找到 自定义侧边栏模块-PC
示例

<div class="joe_aside__item hot" style="text-align: center; color:#888; font-size: 15px; padding:10px;">
    <div style="width: 220px; margin: 0 auto;">
        <!-- 左边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 中间的图片 -->
        <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/love.gif" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 右边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
    </div>
    <p id="lovepyqSitetime"></p>
    <script language=javascript>
        function lovepyqSitetime() {
            window.setTimeout("lovepyqSitetime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth() + 1
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            // 时间设置
            var t1 = Date.UTC(2019, 10, 19, 22, 22, 00)   //年,月,日,时,分,秒
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
            var diff = t2 - t1
            var diffYears = Math.floor(diff / years)
            var diffDays = Math.floor((diff / days) - diffYears * 365)
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                diffMinutes * minutes) / seconds)
            document.getElementById("lovepyqSitetime").innerHTML = "我们相恋了:</br>" + diffYears + "年" + diffDays + "天" +
                diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦"
        }
        lovepyqSitetime()
    </script>
</div>

PC端

手机端的侧栏要复杂一点,但你都进入我的博客了,那我肯定要手把手把你教会了

如果你懂一些 HTML ,那就很容易能找到PE端的侧栏文件

PE端的样式配置在 Joe/public/header.php

那我们直接在 header.php 添加代码就行了,找到PE端侧栏配置位置
示例

我是加在了作者信息下,可以更为直接显示,也更明显,
示例

WAP端

当然这里添加的代码跟上面的是有一点区别的,我试了几次,发现同样的代码会出现PE端显示,而PC端文字不显示

测试了很多次,终于被我发现,原来是 JS 的 id 重复了,导致PHP后端的id占用了前端的id

而因为PE端的代码是直接加在源代码里的,所以导致PC端文字不显示了

因此我又对代码进行了优化,没错,从发现bug-测试bug-修改bug又磨了我一小时

                                <!-- 恋爱计时 -->
        <ul class="joe_header__slideout-count">
        <div  style="font-size:15px; text-align: center; color:#888;">
        <div style="width: 220px; margin: 0 auto;">
        <!-- 左边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 中间的图片 -->
        <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/love.gif" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 右边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=209223620&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
        </div>
        <p id="loveSitetime"></p>
        <script language=javascript>
        function loveSitetime() {
            window.setTimeout("loveSitetime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth() + 1
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            // 时间设置
            var t1 = Date.UTC(2019, 10, 19, 22, 22, 00)  //年,月,日,时,分,秒
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
            var diff = t2 - t1
            var diffYears = Math.floor(diff / years)
            var diffDays = Math.floor((diff / days) - diffYears * 365)
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                diffMinutes * minutes) / seconds)
            document.getElementById("loveSitetime").innerHTML = "我们相恋了:</br>" + diffYears + "年" + diffDays + "天" +
                diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦</br>"
        }
        loveSitetime()
        </script>
        </div>
        </ul>

希望Joe主题作者后期能够添加自定义PE侧栏的功能,或者不要更新太频繁

结语

教程到此结束,祝各位早日找到心仪的另一半,幸福美满!

感谢 Nots 分享的代码。

本文共 655 个字数,平均阅读时长 ≈ 2分钟
2

评论 (0)

取消