之前在 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 如果需要可以试试~ 不算优雅的一个小方法。

Zssss 抄作业成功 bingo👀

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

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

Miracle 感谢，这就去试试

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

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

Miracle 谢谢哈，讲得很详细，试试看，你的1.8.几的？我目前在试1.8.9~!!
你这服务器不错，很丝滑哦，挺快的，看你没备案，用海外还是大陆的。

Protoss 不客气！

当前版本是 1.8.5，海外服务器。只是小范围的学习和测试，没什么流量，所以暂时负载没啥问题。

也是学习中~ 有啥不懂来向你请教哈！谢谢你很热心_😘

Protoss 好的，谈不上请教哈！开源系统本身就是互相学习~ ❤

« 上一页