为Typecho博客添加天气显示

在心知天气官网注册账号，然后按照个人喜好去选择。

代码生成

<!--添加心知天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
      <script>
        (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
        window.SeniverseWeatherWidget('show', {
          flavor: "slim",
          location: "WX4FBXXFKE4F",
          geolocation: true,
          language: "auto",
          unit: "c",
          theme: "auto",
          token: "8902ea6d-6c1f-4088-9326-f14555555f017",
          hover: "enabled",
          container: "tp-weather-widget"
        })
      </script>
      <!--添加心知天气结束-->

复制代码themes>handsome>component>headav.php，然后搜索/form，如下图光标位置：

添加一段代码使天气插件并列，把class复制到心知天气。
上面的代码已经添加过了

<div class="navbar-form navbar-form-sm navbar-left shift"></div>

自定义背景

修改背景的元素是.sw-card-slim-background：

.sw-card-slim-background {
    background: url(https://www.xxxxx.com/usr/uploads/%E6%9C%AA%E6%9D%A5%E7%9A%84%E6%9C%AA%E6%9D%A5.jpg);
    background-position: center;
    text-shadow: 1px 0.5px 0px black;
    background-color: black;
}

按个人喜好去修改和增添。

.EKHJj是控制字体外观，配置主题颜色代码变化字体就有以下代码：

.bg-black .EKHJj, .bg-dark .EKHJj, .bg-danger .EKHJj, .bg-primary .EKHJj, .bg-info .EKHJj, .bg-success .EKHJj {
    color: white
}