为Typecho博客添加天气显示,我所使用的是Handsome主题,不多说了,直接开干!

获取代码

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

心知天气

代码生成:

<div id="tp-weather-widget"></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-f1466165f017",
      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.kamezzz.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;
}

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

如果你是完美强迫症主义者,你会注意到主题颜色变化的时候,天气字体会被遮掩,所以我们需要添加一段CSS。

.EKHJj是控制字体外观,配置主题颜色代码变化字体就有一下代码:

.bg-black .EKHJj, .bg-dark .EKHJj, .bg-danger .EKHJj, .bg-primary .EKHJj, .bg-info .EKHJj, .bg-success .EKHJj {
    color: white
}
最后修改:2020 年 08 月 20 日
如果觉得我的文章对你有用,请随意赞赏!