之前在 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;
}

• 我们还是使用 Geo Weather 扩展的那张精致的 GIF 动图来作为小部件的背景（保存到网站特定的文件夹里，css 里的图片地址根据自己保存的位置调整），然后微调天气API信息显示的位置。
• 在天气API 的位置点击会跳到 https://www.tianqi.com/ 的首页，显示更加具体的天气消息。这个功能因人而异，在小部件的 HTML 代码里加了个遮罩层（mask）：<div class="mask"></div>，让用户点击无跳转。可以根据自己需要增删。
• 手机端页面板块有限，我们也可以在手机端对其加以隐藏：

  @media only screen and (max-width:498px) {
  	.htmlwidget .weather {
  		display: none;
  	}
  }

@Zssss 如果需要可以试试~ 不算优雅的一个小方法。

jianshan 结尾少了一个括号，主要是你的括号估计是手打的，写成了中文里的全角符号了，你直接从上面给的代码块里的右上方复制按钮复制下来就是完整的。