导航页面添加天气插件


配置天气插件代码

配置天气用的是和风天气

首先需要在它提供好的网页上按照自己的需求配置插件,配置地址: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代码最后

然后自行调试相应的参数值,适应网站即可。

最后上传到服务器,完成。


评论
 上一篇
文件批量重命名的万能方法 文件批量重命名的万能方法
Everything一直都是Windows端搜索神器的代名词,但是Everything的功能还有很多可以挖掘的地方,你可能想想不到它可以批量文件重命名,它可以实现你所有对批量文件重命名的想法。 使用方法如下 1、将所有需要重命名的文件夹全
2021-11-04
下一篇 
Hexo博客封面增加视频背景及纹理 Hexo博客封面增加视频背景及纹理
先看一下背景视频封面效果截图: 增加视频背景在需要加入视频的链接插入代码。例如在我博客的首页封面改为视频背景,则找到主题下的/layout/_partial/index-cover.ejs,然后将下列代码插入文件最前方保存即可生成视频背景
2021-10-05