之前在 Flarum 的论坛里看到有朋友问到 Geo Weather 这款插件的API 申请和配置问题，首先看造型的确是个挺别致的小部件，自己也去尝试了下，的确发现配置存在问题，后来经论坛的一位香港网友提示说，应该去申请 onecall 3.0 的接口，其提供1000次免费的用量调用，我们设置上限不超过1000，就可以在小范围内免费使用了。只是这个需要绑定支付，提供的免费用量也有限。首先，这个小部件的原理非常简单：就是一张 GIF 动图，上面显示接口提供的信息（天气、地理位置等）。于是想到直接用国内的天气接口 + 自定义 HTML 小部件（Custom Html Widget）这款扩展来完成，我们开整：安装 Custom Html Widget Install composer require justoverclock/custom-html-widget:"*" if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } Update composer update justoverclock/custom-html-widget:"*" php flarum cache:clear if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 需要注意的是，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> if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 这个小部件很简单，中间的 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; } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 我们还是使用 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; } } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); }

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

在 Flarum 论坛首页使用天气API + Custom Html Widget 打造一个简单的天气小部件

Zssss

Zssss 抄作业成功_bingo👀

Miracle

Zssss 不错呀，看着功能越来越丰富了 ♕♕♕

jianshan

楼主，有没有那个天气的背景图啊？求一个，谢谢

Miracle

jianshan

Miracle 感谢，这就去试试

jianshan

Miracle
很好看

Miracle

jianshan 上面提到的 css 样式里将 .htmlwidget .weather 的宽度 width: 190px; 缩小一点看看，根据你右边栏的宽度调整。

jianshan

Miracle 嗯，我找到了，调整好了

Miracle

jianshan 好的，的确好看🤩👍

jianshan

Miracle 不过我想隐藏手机端，添加那段代码提示错误
ParseError: missing closing } in anonymous-file-5.less on line 257, column 23 255| 256| @media only screen and (max-width:498px) { 257| .htmlwidget .weather { 258| display: none; 259| } 260| ｝

Miracle

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

jianshan

Miracle

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

知道啥原因了，有个括号是错误的

Miracle

jianshan 哈哈哈，我仔细看了下，是我之前提供的代码块里最后一个括号写成全角符号了，抱歉造成困扰~