之前在 Flarum 的论坛里看到有朋友问到 Geo Weather 这款插件的API 申请和配置问题，首先看造型的确是个挺别致的小部件，自己也去尝试了下，的确发现配置存在问题，后来经 论坛的一位香港网友提示说，应该去申请 onecall 3.0 的接口，其提供1000次免费的用量调用，我们设置上限不超过1000，就可以在小范围内免费使用了。只是这个需要绑定支付，提供的免费用量也有限。
首先，这个小部件的原理非常简单：就是一张 GIF 动图，上面显示接口提供的信息（天气、地理位置等）。
于是想到直接用国内的天气接口 + 自定义 HTML 小部件（Custom Html Widget）这款扩展来完成，我们开整：
安装 Custom Html Widget
Install
composer require justoverclock/custom-html-widget:"*"
Update
composer update justoverclock/custom-html-widget:"*"
php flarum cache:clear
需要注意的是，Custom Html Widget 依赖于 Forum Widgets，这个扩展也需要装下，可以让我们自由的拖动自定义小部件的位置。后台插件里没有的话，就安装下：composer require afrux/forum-widgets-core:"*"
在后台启用后，编写部件的前端代码：
<div class="weather">
<iframe name="weather_inc" src="https://i.tianqi.com/index.php?c=code&id=31&color=%234d698e&icon=1" style="" width="170" height="95" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div class="mask"></div>
</div>
这个小部件很简单，中间的 iframe 就是我们从 天气 API 里获取的插件代码。其中id=31可以从1改到100多，呈现不同的样式。（样式需要自己再微调）
自定义样式
我们通过后台 - 外观 - 自定义样式，添加我们对这个小部件的样式美化代码：
/* 自定义 htmlwidget : Weather 天气 */
.htmlwidget .weather {
position: relative;
background-image: url(../assets/extensions/justoverclock-geo-weather/4seasons.gif);
background-position: right 86% bottom 53%;
background-size: 300px 180px;
color: #fff;
width: 190px;
height: 31px;
border-radius: 5px;
padding: 60px;
margin-bottom: 20px;
overflow: hidden;
}
.htmlwidget .weather iframe {
border: none !important;
background: none;
border-radius: 5px;
box-shadow: none;
position: relative;
left: -54px;
top: -46px;
width: 76px !important;
}
.htmlwidget .weather .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
