记一次网站博客调用心知天气插件过程,新版心知插件效果整体简洁一目了然,可自定义css样式。设置简单小白都能看懂,扩展性高推荐使用。预览效果请看网站导航栏天气情况(电脑端)!
获取代码
- 去心知官网注册账号,登录控制台申请免费版API
- 点击菜单栏新版插件,配置插件效果(可实时预览)。配置好后,点击生成代码。
网站食用
将
js
代码块放置网站底部(这段代码请复制自己生成的内容)<script> (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10))); window.SeniverseWeatherWidget('show', { flavor: "slim", location: "WX4FBXXFKE4F", geolocation: true, language: "auto", unit: "c", theme: "auto", token: "7edd0461-846b-4fb5-b2da-aefe2", hover: "enabled", container: "tp-weather-widget" }) </script>
将此段代码放置你需要显示天气插件的地方
<div id="tp-weather-widget"></div>
Mirages食用
- 将自己生成的
js
代码放置主题设置最后一项
将以下代码放置主题目录
Mirages/component/navbar.php
文件第65行左右,请看截图<li class="nav-item"><div id="tp-weather-widget" ></div></li>
自定义美化
自行查看官方文档比我说的清楚真的很简单只能这么说。
项目地址:
官方文档:自定义样式
标记下