给你的博客加一个情侣恋爱倒计时小工具,另外安利一个好用的typecho插件

之前给大家说的那个博客后台美化,还有一点点问题,本来是承诺这个文章给他分享出来

因为第一次做美化,考虑到很多小伙伴还不会css,所以我自己测试好再放出来,哈哈哈,暂时鸽了

想必各位小伙伴,都是看我的文章标题进的,当然我不是标题党,本文章就是纯正经的整活

Paste Image插件

作为一个生活类的写作博主,喜欢在文章掺杂一些自己的日常,意味着就需要上传图片

使用typecho的时候,上传图片要分为两步,十分的不方便,第一步上传附件,第二步插入图片

这样的步骤极大的拖慢了文章的写作效率,我前几天在github仓库发现一个插件可以完美解决这个痛点

这个插件可以为 Typecho 自带编辑器增加粘贴图片上传功能,Typecho 最新开发版已经直接支持粘贴上传功能

本插件仅供旧版本(我指的是现在使用的是官方最新正式版的小伙伴)

如果你是typecho的开发版本,请跳过这个地方,因为最新开发版已经完美支持这个功能了

想必很多小伙伴在typecho写博文的时候,喜欢插入图片,安装好了这个插件,写文章的时候

图片放在电脑桌面上,对图片选中之后,Ctrl+C 复制,然后去 typecho 编辑器去 ctrl+v,图片就直接上传好了

插件地址:https://github.com/zgq354/PasteImage

为自己的博客添加一个恋爱小工具

想必有很多博主,都是有着浪漫主义色彩,想必找过可以统计跟男朋友女朋友的相恋的时间

最近在学JavaScript,JavaScript一些课程也教我们做一些倒计时的小功能,我想这岂不是可以做个情侣恋爱计时

然后放在博客的侧栏,做成一个侧栏小卡片,说干就干,昨天下午就开始在网上找思路,效果基本上就是这样的

23637-1p62hym2vgo.png

你如果想看样式,可以去我的测试站点

北边博客:https://beibian.net

这里我会提供两种方法,小赵推荐大家使用第二种,因为利于修改

找到博客的侧栏的php文件,在合适的位置加入以下代码

<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>

然后就可以了,效果就是我上面展示的第一个效果图,这个方法不建议

主要是因为这个小工具的自带的css样式会,跟主题的css冲突,结果会像我这样的,哈哈哈

53861-hatym7b1n84.png

这样直接离了大普,头部直接不听话

第二种方法就是利用iframe标签嵌套网页,这样新建一个网页再使用嵌套的方法将网站内容嵌套过来

不会影响自己的网站主题本身自带的主题样式,还利于修改,不至于自己不懂主题,一下把自己的主题删503了

第一步,把我的演示站,利用浏览器的审查元素功能,把整个代码存文本地的index.html

因为就是纯单页,JavaScript和css都放在这个页面。没有额外的文件,可以放心折腾

演示页面:https://zql.im/love.html

然后修改相应的东西改为你自己的就好了,然后找到主题的合适位置放入iframe标签

 <iframe src="这里放置你的网页" 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>

这里可能需要一点css基础,如果你不会,可以在文章的评论区留言,我有空可以帮你看看

你为什么不在你的博客放这个小工具呢

这个嘛,前提是我得有个女朋友先,折腾来折腾去,才恍然大悟自己还是个单身汪,没想到小丑居然是我自己

过段时间会给大家分享倒计时的小卡片,JavaScript我还在学习中,争取给大家带来更多好玩的小功能

晚安,我的朋友们

avatar小赵同学
770
40
1
发表留言

    3个月前

    今天刚发现恋爱小工具还有一个bug,计时时间不对,需要把时间提前一个月,然后时间才对(我说怎么时间怎么看怎么不对)

    7个月前

    今天淦定制主题的时候刚好用的这玩意,才发现, 你引用的那个css文件居然只用得到几行css代码,其它都是多余的

      小赵同学博主
      7个月前

      什么主题,有预览地址吗,看看,不会是情侣主题吧

        7个月前

        不是啦,在给陈阿叔定制的主题

          小赵同学博主
          7个月前

          挺好的,靠实力恰饭

      小赵同学博主
      7个月前

      我还不是为了简单 ,直接引用过来,我基本上用不到这个东西

    8个月前

    哥哥,那个头像在哪儿改

      小赵同学博主
      8个月前

      你说的是我的这个头像地址吗https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g
      这个就是

      小赵同学博主
      8个月前

      抱歉,有点忙,现在才回

        8个月前

        这个头像地址是啥,我搜一下就好了,9000多行,实在是看不下去了

          小赵同学博主
          8个月前

          https://img.52ql.cn/img/194,这种开头的就是图片的地址,你自己替换成自己的就好了

            8个月前

            不是这个,我是问那个跟你这个博客头像一样的头像地址是啥..

      小赵同学博主
      8个月前

      你现在找到没 我一会儿帮你看看

    8个月前

    我的天,你是魔鬼吗?9000多行....这个头像在第几行,我眼睛都快看瞎了,我用的第二种方法

      小赵同学博主
      8个月前

      第二种方法可以,方便一点点

    8个月前

    我还在等你修改好看的后台登陆页面

      小赵同学博主
      8个月前

      感谢老哥的欣赏与支持,尽快的,最近学业也比较忙,大概元旦左右吧

    8个月前

    这个Javascript计算的公式好像有些问题,时间不准确

      小赵同学博主
      8个月前

      是滴,需要把时间提前一个月,才对
      我也是借鉴网上的计算公式,等再过一阵子,再自己重新写一下

    8个月前

    正好借鉴一下,哈哈哈,这两天猛的一下怎么多了,我那几天一直网上搜,哈哈,这两天全出来了

      小赵同学博主
      8个月前

      我也是在跟潘先生聊的时候提到这个,借鉴了一下网上的思路,自己用div+css临摹了一个
      我看老哥使用的WordPress主题,WordPress支持小工具,直接侧栏加入html结构就好了
      还有就是老哥的ssl证书好像过期了,我这边怎么都打不开老哥网站,建议有空把ssl证书重新部署一下,谷歌浏览器一直弹出不安全,有时候还不让访问

    8个月前

    Typecho 没有插件添加图片这么麻烦?
    升本之前不谈对象 呀呼
    那个冒充“若志奕鑫”的那个笑死我了啊哈哈哈哈

      小赵同学博主
      8个月前

      typecho轻量,但是轻量的同时也有很多功能没有,这个很正常
      我才开始也觉得麻烦,先觉得好多了,因为团队也在不断地优化
      期待他们越做越好
      那个若志奕鑫我怀疑他自导自演的,哈哈哈,他就是那么逗

        8个月前

        那插件装的越多就感觉内存也越来越大

    8个月前

    可以的 哈哈!

      小赵同学博主
      8个月前

      效果实现出来了,但是找谁用呢

    8个月前

    挖槽,下面这人谁啊,还能这么玩挖槽,直接冒充我

      小赵同学博主
      8个月前

      其实我越看越像你自己的恶作剧,哈哈哈哈

        8个月前

        挖槽,无爱了 怎么就是不信我呢
        我真没那个邮箱。。。

          8个月前

          笑死了哈哈哈哈哈
          小赵快看他留言的IP

    8个月前

    没对象

      小赵同学博主
      8个月前

      好好工作,好好生活,爱情好运都会有的

    8个月前

    有没有女朋友不重要,重要的是折腾 (这个绿色配色好清新,能不能发我邮箱一份

      8个月前

      a201314521@163.com

        小赵同学博主
        8个月前

        别说了小肥猪

    8个月前

    我不会

      8个月前

      看到网站底部已经安排上了

        8个月前

        这个恋爱倒计时我已经安排上了

          小赵同学博主
          8个月前

          可以的,整的很不错

        小赵同学博主
        8个月前

        确实,阿潘整的真快
        我也想整一个,但是好像没有女朋友

教程
给你的博客加一个情侣恋爱倒计时小工具,另外安利一个好用的typecho插件
之前给大家说的那个博客后台美化,还有一点点问题,本来是承诺这个文章给他分享出来因为第一次做美化,考虑到很多小伙伴还不会css,所以我自己测试...
扫描右侧二维码继续阅读
November 21, 2021
优世界
blogger
小赵同学
统计
文章:87 篇
评论:1641 条
加载耗时:32 ms
访问总量:150,635次
运行时长:2年192天
by yoniu.
优世界