Handsome主题添加心知天气

生活
2249 33

添加

在主题文件中找到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,元素看不见,不占位

效果图

最后更新 2022-09-21
评论 ( 33 )
OωO
隐私评论
  1. 木月 MacOS · Safari
    哎呦喂,瞧给你聪明的!
    此条为私密评论,仅评论双方可见
    2年前四川省成都市 回复
    1. vian Windows 10 · Google Chrome
      @木月
      哎呦喂,瞧给你聪明的!
      此条为私密评论,仅评论双方可见
      2年前广东省广州市 回复
      1. 木月 MacOS · Safari
        @vian

        哈哈哈尴尬 我就说以前搭过一个handsome

        2年前四川省成都市 回复
        1. vian Windows 10 · Google Chrome
          @木月

          哈哈 问题不大 两个主题都挺好的

          2年前广东省广州市 回复
  2. 桃子 Windows 10 · Google Chrome

    咦,怎么又用起了Handsome

    2年前湖北省武汉市 回复
    1. vian Windows 10 · Google Chrome
      @桃子

      四月就开始用了 全站加密

      2年前广东省广州市 回复
      1. 桃子 Windows 10 · Google Chrome
        @vian

        想看

        2年前湖北省武汉市 回复
        1. vian Windows 10 · Google Chrome
          @桃子

          这个是秘密 不能看

          2年前广东省广州市 回复
  3. Vinking Windows 10 · Google Chrome

    我隐藏元素就无脑display:none,visibility:hidden这个没怎么用过

    2年前广东省佛山市 回复
    1. vian Windows 10 · Google Chrome
      @Vinking

      主要是之前显示访问设备时用到了visibility:hidden 顺着就用了 不过没用对

      2年前广东省广州市 回复
  4. dujun MacOS · Google Chrome

    这挺突兀的就

    2年前浙江省杭州市 回复
    1. vian Windows 10 · Google Chrome
      @dujun

      添加了就记录一下 怕忘记 之后主题升级可能还用得到

      2年前广东省广州市 回复
  5. Teacher Du Linux · Google Chrome

    怎么也不贴个效果图呢!

    2年前北京市丰台区 回复
    1. vian Windows 10 · Google Chrome
      @Teacher Du

      加了效果图 把联系方式码上了

      2年前广东省深圳市 回复
    2. vian Windows 10 · Google Chrome
      @Teacher Du

      还没搞 正在打马赛克

      2年前广东省深圳市 回复
  6. 火喵 Windows 10 · Google Chrome

    我更喜欢和风天气

    2年前辽宁省大连市 回复
    1. vian Windows 10 · Google Chrome
      @火喵

      别人适配好的 我拿过来而已 主要是他没用和风天气

      2年前广东省深圳市 回复
  7. Justin MacOS · Google Chrome

    我最近也在折腾,又换了个主题,还改了一下评论区🤣

    2年前广东省东莞市 回复
    1. vian Windows 10 · Google Chrome
      @Justin

      你可真勤奋啊

      2年前广东省深圳市 回复
  8. 何叶 Windows 10 · FireFox

    如果能配上图就更好了

    2年前福建省厦门市 回复
    1. vian Windows 10 · Google Chrome
      @何叶

      还没弄 正在修bug 一会加上图

      2年前广东省深圳市 回复
      1. 何叶 Windows 10 · FireFox
        @vian

        说起来,handsome也好久没更新了

        2年前福建省厦门市 回复
        1. vian Windows 10 · Google Chrome
          @何叶

          四五个月吧 没太在意

          2年前广东省深圳市 回复
          1. 何叶 Windows 10 · FireFox
            @vian

            确实,之前的更新周期好像没有这么长过,感觉作者很忙的样子

            2年前福建省厦门市 回复
            1. vian Windows 10 · Google Chrome
              @何叶

              不知道 没怎么了解

              2年前广东省深圳市 回复
              1. 何叶 Windows 10 · FireFox
                @vian

                刚去作者博客看了一下,F12跳出来的是v9.0
                看来是快了

                2年前福建省厦门市 回复
                1. vian Windows 10 · Google Chrome
                  @何叶

                  很早之前他就是9.0 好像一直比现行版本高很多

                  2年前广东省深圳市 回复
                  1. 何叶 Windows 10 · FireFox
                    @vian

                    那应该就是在准备大更新了

                    2年前福建省厦门市 回复
                    1. vian Windows 10 · Google Chrome
                      @何叶

                      看情况吧 不知道 不着急

                      2年前广东省深圳市 回复
  9. 风记星辰 Windows 10 · Google Chrome

    我最近也在折腾,把导航栏和音乐类型的文章改了改

    2年前辽宁省沈阳市 回复
    1. vian Windows 10 · Google Chrome
      @风记星辰

      这是两周前加的 刚发现这个bug 修一下
      本站也有一个bug 一会修

      2年前广东省深圳市 回复
  10. 网友小宋 Windows 10 · Google Chrome

    你这也不是handsome啊!怎么work站改主题了吗

    2年前河南省郑州市 回复
    1. vian Windows 10 · Google Chrome
      @网友小宋

      有一个站点是handsome

      2年前广东省深圳市 回复