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

因为第一次做美化,考虑到很多小伙伴还不会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我还在学习中,争取给大家带来更多好玩的小功能

晚安,我的朋友们