此学习记录适用于Typecho程序的Handsome主题。

前两天,添加了小站开站的第一个友情链接——@优世界
就随便逛了逛,发现了一个比较好玩的恋爱小工具,可以放在博客的侧边栏
记录自己的男/女朋友的恋爱时长,感觉还是不错的,所以记录一下!
温馨提示:以下代码的时间设定需要提前一个月,不然会时间不准

小赵同学提供了两种方法,第一种就是直接填写html,Handsome主题可以填在「设置外观——开发者设置——全局右侧边栏广告位」,html如下:(handsome填写时删除第一行和最后一的<body></body>

<body>
    <div style="text-align: center;margin-top: 10px;">
        <link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet">
        <img src="https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;">
        <svg viewBox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
            class="my-face">
            <path
                d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
                fill="#515151"></path>
        </svg>

        <img src="https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"><br>

        <span id="htmer_time"> <span class="zmki_love_ah"></span></span>
    </div>
    <script type="text/javascript" language="javascript">function setTime() {
            var create_time = Math.round(new Date(Date.UTC(2019, 12, 28, 6, 45, 0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = ' <span class="zmki_love_ah">已经在一起</span><br>' +
    currentTime[0] +
    "年 " +
    currentTime[1] +
    " 天 " +
    currentTime[2] +
    " 时 ";
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) {
                return 0;
            }
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) {
                time[4] = second;
            }
            return time;
        }
        setInterval(setTime, 1000);
    </script>
</body>

因为html与handsome主体的css不兼容,所以需要把第三行带有css的代码删除

    <link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet">

因为填在了全局右侧边栏广告位,所以标题会显示广告,修改标题可在handsome主题目录「component——sidebar.php」找到广告字样修改即可,大概在112行可找到。
如图第二种方法就是网页嵌套的方法,利用iframe进行嵌套
在本地新建一个html的文件,将第一种方法里面的代码扔进去就好(这里不需要修改上面的html)
把iframe填入「设置外观——开发者设置——全局右侧边栏广告位
之后只需要把相应的东西修改成自己的就好

 <iframe src="填入新建html的地址" width="204" height="120" frameborder="0" scrolling="No" align="center"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

但是使用handsome主题不推荐使用这种方法,因为手机端没能居中显示~修改了iframe的属性我也没有调试成功~
最后附我自己修改后的代码

<body>
    <div style="text-align: center;margin-top: 10px;">
        <img src="https://q2.qlogo.cn/g?b=qq&nk=1486823198&s=640"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;">
        <div style="display: inline-block">
                    <img src="/other/jiojio.gif" style="width: 40px;height: 40px;">
                </div>
        <img src="https://q2.qlogo.cn/g?b=qq&nk=2809627578&s=640"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"><br>

        <span id="htmer_time"> <span class="zmki_love_ah"></span></span>
    </div>
    <script type="text/javascript" language="javascript">function setTime() {
            var create_time = Math.round(new Date(Date.UTC(2021,06,29,0,0,0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = ' <span class="zmki_love_ah">一起走过</span><br>' +
    currentTime[0] +
    "年 " +
    currentTime[1] +
    " 天 " +
    currentTime[2] +
    " 时 ";
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) {
                return 0;
            }
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) {
                time[4] = second;
            }
            return time;
        }
        setInterval(setTime, 1000);
    </script>
</body>

效果如下:
效果图

本文章部分借鉴自@优世界

最后修改:2022 年 04 月 22 日
如果觉得我的文章对你有用,请随意赞赏