HandSome主题顶部栏显示天气

实现方法

1.进入心知天气官网注册账号

2.注册成功后点击传送门,往下滑

博主选择的样式如上图所示,选择完成后安装代码将会在下面生成

将生成的代码粘贴到页面,步骤如下

一、进入typecho-handsome安装目录
路径:usr-themes-handsome

二、找到headnav.php文件
路径:handsome-component-headnav.php

三、修改headnav.php文件
在搜索(<!-- search form -->)前面,插入代码

路径:/usr/themes/handsome/component/headnav.php

006Xmmmgly1fzs2ehwsarj31e90kbgo6.jpg

此处需要注意的是需要将<div id="tp-weather-widget">
改成<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">,否则会发现样式显示异常!

PS:不想注册的可以直接复制下方代码!!

<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", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "disabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "uid": "U8B64640A5",
    "hash": "78181c9eb2968970c50d0c346cb24b0b"
});
tpwidget("show");</script>
Last modification:March 3rd, 2019 at 05:08 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment