配置天气插件代码
配置天气用的是和风天气
首先需要在它提供好的网页上按照自己的需求配置插件,配置地址:https://widget.qweather.com/
选择自己喜欢的天气插件
我选了简约的,点击创建,按照自己的需求自定义自己的样式,最后将生成代码复制下来。
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "02",
"background": "4",
"backgroundColor": "E2E7F5",
"tmpColor": "000000",
"tmpSize": "16",
"cityColor": "000000",
"citySize": "16",
"aqiColor": "FFFFFF",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "10",
"language": "auto",
"borderRadius": "5",
"fixed": "true",
"vertical": "top",
"horizontal": "left",
"left": "20",
"top": "27",
"key": "4925002e4708416c938bac2fe7bd95da"
}
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
插入代码
我需要将天气插件放入到我的导航网站页面的左上角
所以找到导航页面的代码文件(nav.ejs),在需要显示的位置插入复制下来的第一行代码<div id="he-plugin-simple"></div>
为了防止影响页面整体的加载速度,将剩下的两个脚本<script></script>
代码放入到nav.ejs代码最后
然后自行调试相应的参数值,适应网站即可。
最后上传到服务器,完成。