心知天气提供基于Web
的免费天气插件,可以为你的网站添加一项简洁美观的天气预报功能,并自动适配PC
和手机
上的浏览。
配置插件
1、PC端显示效果:
2、手机端显示效果:
安装代码
方法一:复制下面代码粘贴到页面的/themes/handsome/component/footer.php
中的</body>
之前。
<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": "bubble",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"position": "top-right",
"margin": "10px 10px",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"uid": "U9AE56E49E",
"hash": "579b04a19cd078b22a7694878be268ff"
});
tpwidget("show");</script>
方法二:当地选择的是浮动样式时,直接将安装代码复制到主题文件夹中的index.php
中。
方法三:当选择的为固定样式时,您可以自定义显示位置,本文以本站显示位置为例,插入到首页顶部导航栏中。将安装代码复制到主题文件夹的/component/headnav.php
中,并在安装代码的div
标签中添加class="navbar-form navbar-form-sm navbar-left shift"
,如下图所示。
固定样式代码如下:
<!-- 知心天气-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></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",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "circle",
"uid": "U9AE56E49E",
"hash": "747d4422e9a7c39cda81a7b5c29df200"
});
tpwidget("show");</script>
<!-- 知心结束-->
以上代码为程序自动生成,包含校验信息,请勿手动修改,否则会导致插件无法使用。
这个不错,只不过就是不想注册账号的啊。
可以直接用文章内安装代码方法一里的代码哈|´・ω・)ノ
谢谢分享,好萌的