Handsome主题添加心知天气

添加

在主题文件中找到usr/themes/handsome/component/headnav.php文件，在104行处添加以下代码

<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function (T, h, i, n, k, P, a, g, e) { g = function () { P = h.createElement(i); a = h.getElementsByTagName(i)[0]; P.src = k; P.charset = "utf-8"; P.async = 1; a.parentNode.insertBefore(P, a) }; T["ThinkPageWeatherWidgetObject"] = n; T[n] || (T[n] = function () { (T[n].q = T[n].q || []).push(arguments) }); T[n].l = +new Date(); if (T.attachEvent) { T.attachEvent("onload", g) } else { T.addEventListener("load", g, false) } }(window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
        "flavor": "slim",
        "location": "WX4FBXXFKE4F",
        "geolocation": "enabled",
        "language": "auto",
        "unit": "c",
        "theme": "chameleon",
        "container": "tp-weather-widget",
        "bubble": "enabled",
        "alarmType": "badge",
        "color": "#C6C6C6"
    });
    tpwidget("show");</script>

踩坑

这样添加会出现一个bug，心知天气添加会占用位置，在原本设计好的头部添加额外内容导致在特定屏幕宽度出现样式混乱，所以要添加以下css做限制。添加位置就在上面代码后一行。

    <style>
        @media screen and (min-width: 990px) and (max-width: 1200px) {
            #tp-weather-widget{
                display: none;
            }
        }
    </style>

总结

之前忘记了visibility:hidden;与display: none;的区别，首先想着隐藏就好，便选用了visibility:hidden,这个的确可以隐藏元素，但是元素仍然占位并没解决问题；display: none则是隐藏元素且不占位。同时让元素消失的还有opacity: 0; 透明度设为0，元素看不见，占位和width: 0; 宽度设为0，元素看不见，不占位。

效果图