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

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

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

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

无论是雾霾的深灰、雨天的阴沉,还是沙尘暴的昏黄,用不同的背景颜色代表不同的实时天气,增强你对天气的感受。
食用指南
获取代码
心知天气 服务概览:
服务内容 | 城市数量 | 天气实况 | 天气预报 | 生活指数 | 访问频率限制 |
---|---|---|---|---|---|
免费版 | 国内369个地级市 | 2项 | 3天 | 基础(6项) | 400次/小时 |
付费版 | 全球2.4万城市 | 12项 | 15天 | 逐小时预报、空气质量、灾害预警、日出日落、月相…… | 无限制 |
既然心知天气插件简洁、高效,免费版已足够我们使用(土豪随意),为何不添加到博客上呢!
Come on baby,让我们动手试试!!!
- 首先,你得去心知天气官网注册,才能获得相关代码权限;
- 点击创建天气插件
- 注意:样式选择:固定极简 ,自定义颜色选择和你主题相搭的,其他随意!
- 复制你得到的代码粘贴到页面代码的合适位置。第一行的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! 祝你愉快!
呀!这个typecho的handsome主题插件已经有了的呀!
https://gitee.com/get-fan/SenWeather
@战斗鸡 嗯嗯,看起来是个很不错的插件
前来围观
加油...挺你