[Handsome]心知天气——免费天气小插件

心知天气提供基于Web的免费天气插件，可以为你的网站添加一项简洁美观的天气预报功能，并自动适配PC和手机上的浏览。

功能介绍

全新“气泡”浮动样式

“气泡”网页插件可浮动在屏幕的任一角落，鼠标悬停时自动展开显示详细的天气信息。

自动适配手机

“气泡”网页插件可以自动适应手机屏幕，在手机上以全屏方式显示详细的天气信息。

实时天气预警

暴雨、雾霾、台风等灾害天气影响我们每个人的安全和健康，“气泡”网页插件整合了实时天气预警信息，让你提前知晓灾害天气，防患未然。

不同天气，不同颜色

无论是雾霾的深灰、雨天的阴沉，还是沙尘暴的昏黄，用不同的背景颜色代表不同的实时天气，增强你对天气的感受。

食用指南

获取代码

心知天气 服务概览：

服务内容	城市数量	天气实况	天气预报	生活指数	访问频率限制
免费版	国内369个地级市	2项	3天	基础（6项）	400次/小时
付费版	全球2.4万城市	12项	15天	逐小时预报、空气质量、灾害预警、日出日落、月相……	无限制

既然心知天气插件简洁、高效，免费版已足够我们使用（土豪随意），为何不添加到博客上呢！
Come on baby，让我们动手试试！！！

1. 首先，你得去心知天气官网注册，才能获得相关代码权限；
2. 点击创建天气插件
3. 注意：样式选择：固定极简 ，自定义颜色选择和你主题相搭的，其他随意！
4. 复制你得到的代码粘贴到页面代码的合适位置。第一行的div为插件的容器元素，你也可以通过自定义的CSS来控制其样式和位置，但请不要手动修改其id，否则插件将无法正常使用。

<!-- 举例，这是我得到的代码： -->

<div id="tp-weather-widget"></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",

......(省略)

    "hash": "f0004fe4482579b568e6ad57cf27a780"
});
tpwidget("show");</script>

应用代码

博主的主题是：Handsome ，大多都是一样的步骤，照猫画虎。
如果你也是 Handsome 主题，那就在 <div id="tp-weather-widget"></div> 添加 class元素（css你可以自己改，我是为了方便，才复制粘贴搜索框的class元素） ，得到

<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">

方案①：将此修改后的代码粘贴进 Handsome 主题 /component/headnav.php 第42行，即:

41 <!-- / buttons -->  <!-- 这一行就不要复制，例子，OK --> 

42 <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">
<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",

......(省略)

    "hash": "f0004fe4482579b568e6ad57cf27a780"
});
tpwidget("show");</script>

方案②：或者只把<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">代码粘贴进 Handsome 主题 /component/headnav.php 第42行，类似下面的代码粘贴进 Handsome 主题设置->开发者设置->自定义输出body尾部的HTML代码

<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",

......(省略)

    "hash": "f0004fe4482579b568e6ad57cf27a780"
});
tpwidget("show");</script>

OK! 祝你愉快！