泽果锅

typecho顶部导航栏添加天气插件——handsome主题为例
一、使用心知天气1.注册登录心知天气。注册登录地址2.打开网页天气插件创建自己的网页天气插件3.设置喜欢的插件样式...
扫描右侧二维码阅读全文
09
2018/12

typecho顶部导航栏添加天气插件——handsome主题为例

一、使用心知天气

1.注册登录心知天气。
注册登录地址
心知天气.png
2.打开网页天气插件
心知天气插件.png
创建自己的网页天气插件
心知天气插件创建.png
3.设置喜欢的插件样式生成代码
心知天气插件配置.png

二、把配置好的插件样式代码添加到typecho主题

1.找到网站根目录

/usr/themes/handsome/component/headnav.php

2.打开修改headnav.php文件,把样式代码添加到搜索框代码后面,如图:
样式添加位置.png
3.把复制好的天气样式代码粘贴到此处,并把

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

修改为:

<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>

修正天气样式在顶部导航栏的位置。
效果:
天气插件效果.png

如果觉得复杂不想注册,可以直接拷贝一下样式代码:

  • 固定极简
  • 天气位置自动定位
  • 背景随天气变化
  • 语言自动识别
  • 单位 摄氏
<!-- 天气 -->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></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": "WS10730EM8EV",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#FFFFFF",
    "uid": "UEA0122038",
    "hash": "a14f4c69cd49d4a680be7271f4877407"
});
tpwidget("show");</script>
<!-- 天气结束 -->
本文作者:

本文链接:typecho顶部导航栏添加天气插件——handsome主题为例

版权声明:如无特别声明,本文即为原创文章,仅代表个人观点,版权归 “拾光机”所有,未经允许不得转载!
最后修改:2018 年 12 月 09 日 02 : 18 PM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. foxmi

发表评论