心知天气——免费天气小插件

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

功能介绍

全新“气泡”浮动样式

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

自动适配手机

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

实时天气预警

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

不同天气,不同颜色

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

食用指南

获取代码

心知天气 服务概览:

服务内容城市数量天气实况天气预报生活指数访问频率限制
免费版国内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! 祝你愉快!

最后修改:2018 年 12 月 15 日 09 : 26 PM

发表评论

1 条评论

  1. 喜樂军

    加油...挺你