【Handsome主题】顶栏添加天气插件(心知天气API)

本站采用了Typecho和Hangsome主题然后我在上面边修改边学习,本篇文章为大家介绍一下如何在顶部栏添加天启插件,天气数据来源心知天气

效果预览

0. 获取天气API

  1. 首先打开心知天气官网注册一个账号,然后再进行下一步去官网定制插件,插件生成
  2. 按照下图方式,也可以按照自己的喜好更改。
    生成
  3. 在本页面下面可以看到有个代码框,里面的代码就是我们需要使用的API,请完整复制出来。然后在代码内做一定的修改

    <div id="tp-weather-widget"></div>
    <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
    <script>tpwidget("init", {
    ****************
    });
    tpwidget("show");</script>

    在代码里面的第一行修改为如下样式,另外由于主题样式原因,所以需要给div内添加一个class类,否则会出现样式混乱:

    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
  4. 在这段API准备完成后,我们可以将插件加入博客后台了,需要修改的文件地址为

    博客安装目录/usr/themes/handsome/component/headnav.php

    在文件内可以找到<!-- / buttons -->,我们可以在后面添加自己的内容。编辑完成后,保存文件,刷新页面即可。(可以先备份一下原始文件)

code

Last modification:January 6th, 2019 at 09:28 pm

One comment

  1. XiaoFans

    已出插件,库:https://github.com/6get-xiaofan/SenWeather

Leave a Comment


Notice: Constant __TYPECHO_DEBUG__ already defined in /var/www/html/index.php on line 28