MENU

Typecho博客网站调用心知天气

• March 31, 2020 • Read: 756 • 源码分享,技术分享

记一次网站博客调用心知天气插件过程,新版心知插件效果整体简洁一目了然,可自定义css样式。设置简单小白都能看懂,扩展性高推荐使用。预览效果请看网站导航栏天气情况(电脑端)!

获取代码


  1. 心知官网注册账号,登录控制台申请免费版API
    api.png
  2. 点击菜单栏新版插件,配置插件效果(可实时预览)。配置好后,点击生成代码。
    www.seniverse.jpg

网站食用


  1. 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>
    
  2. 将此段代码放置你需要显示天气插件的地方

    <div id="tp-weather-widget"></div>
    

Mirages食用


  1. 将自己生成的js代码放置主题设置最后一项
    js.png
  2. 将以下代码放置主题目录Mirages/component/navbar.php文件第65行左右,请看截图

    <li class="nav-item"><div id="tp-weather-widget" ></div></li>

    daima.png

自定义美化


自行查看官方文档比我说的清楚真的很简单只能这么说。

pf.png

项目地址:

官方文档:自定义样式

Leave a Comment

已有 1 条评论
  1. 标记下