心知天气网页天气插件接入

April 25, 2018

9251 views

2200 words

## 前言
今天在访问别人的博客的时候发现这么一款小插件，**美观**，而且不是特别影响速度，**代码量也不大**，而且js还是**cdn加速过的**，经过各方面评估，决定接入这款天气插件，方便我，也方便大家啦。看博客的时候看天气，**你值得拥有！**
## 正文
### 第一步
打开心知天气官网：

https://www.seniverse.com/
注册，并验证邮箱！
### 第二步
点击产品&rarr;网页天气插件

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx1.png)

点击立即创建

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx2.png)
### 第三步
自定义你的插件样式，功能

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx3.png)

这是我的配置，大家就跟着这个好啦！

### 第四步

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx4.png)

复制代码

### 第五步
如果你是老薛面板请打开你的网站根目录

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx5.png)

如果你是typecho程序，请打开你的主题文件，这里以handmone（https://www.ihewro.com/archives/489/ ） 为例

### 第六步
找到你主题的header.php文件
    /usr/themes/handsome/component

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx6.png)

添加如下代码
```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": "bubble",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "position": "top-right",
    "margin": "10px 10px",
    "language": "zh-chs",
    "unit": "c",
    "theme": "chameleon",
    "uid": "U4DB4F29ED",
    "hash": "f4d68107096506130aa8a25159c48547"
});
tpwidget("show");</script>
```
请修改为你的代码哦！，或者直接用我的也可以吧！没试过

![](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx7.png)

如图所示！！！
这样就大功告成啦！

## 结束
demo(演示)

![演示1](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx8.png "演示1")

![演示2](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx9.png "演示2")

![演示3](https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/zx/zx10.png "演示3")

是不是很美观！快快添加吧！
友情链接：
[handsome主题](https://www.ihewro.com/archives/489/ "handsome主题")
[心知天气](https://www.seniverse.com/ "心知天气")

Last modification：April 25, 2018