如何在网站通添加第三方插件--天气

2017-10-31

现在越来越多的网站开始添加天气插件，用来方便用户的查看。以下两个案例为了方便大家学习如何插入天气插件。欢迎打call。。

工具：

wordpress 或其他网站
新知天气的一个插件

在wordpress中添加插件

step1：找到需要安装插件的位置

step2：我使用的是新知天气的一个扩展插件 https://www.seniverse.com/widget/get

step3：配置新知天气的展示效果，以达到自己的期望效果

step4：将生成的代码放置到想要展示html的位置

复制下面代码粘贴到页面代码的合适位置。第一行的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",
    "location": "WX4FBXXFKE4F",
    "geolocation": "disabled",
    "language": "zh-chs",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "uid": "U508924FF9",
    "hash": "278ad0b97e8ff0ba0e30d331e8b45478"
});
tpwidget("show");
</script>

step5:添加在header上，以实现网站浏览时，可以随时观测到当地的天气。
在wordpress的主题->编辑中找到header.php。复制代码

step6：最终效果

在Hexo个人博客添加插件

step1-step4 同上
step5：修改主题 themes/yilia/layout/_partial/left-col.ejs

实现效果：