wefinger

【教程】添加心知天气并嵌入头部导航栏
几周前,博主从某友链博客中得知了心知天气这个网页插件。现在分享给大家。一、注册帐号首先去心知天气官网注册一个帐号,...
扫描右侧二维码阅读全文
14
2018/05

【教程】添加心知天气并嵌入头部导航栏

几周前,博主从某友链博客中得知了心知天气这个网页插件。现在分享给大家。

一、注册帐号

首先去心知天气官网注册一个帐号,注册步骤很简单,就不赘述了

二、生成代码

点击首页==》产品==》网页天气插件,在点击页面中的立即创建,则可以进入自动生成代码页面,可以根据自己的需要创建各种样式的插件样式。
该插件共用两种样式,浮动的以及固定。

  • 浮动样式

    浮动样式

设置参数如图所示,这是博主曾经使用过的浮动样式,此种样式将悬浮在页面某处(可自定义),需要注意的是在移动端显示时可能会遮挡内容,所以博主弃用了。

  • 固定样式

    固定样式

这是样式为固定样式,参数如图所示。可以由你的网页代码自由控制显示位置。例如本博客就显示在顶部导航栏,不产生遮挡。

选择好样式后,在下方将会自动生成插件安装代码。

安装代码

三、插入博客

将天气插件添加如博客很简单。

  • 当地选择的是浮动样式时,直接将安装代码复制到主题文件夹中的index.php中。

    index.php

  • 当选择的为固定样式时,您可以自定义显示位置,本文以本站显示位置为例,插入到首页顶部导航栏中。将安装代码复制到主题文件夹的/component/headnav.php中,并在安装代码的div标签中添加class="navbar-form navbar-form-sm navbar-left shift",如下图所示。

headnav.php

保存改动,浏览器ctrl+F5强制刷新即可看见效果。

Last modification:May 14th, 2018 at 01:09 pm
If you think my article is useful to you, please feel free to appreciate

3 comments

  1. 喵了个咪

    搞定了,厉害

  2. 8℃

    绑定一波,可交换友链哈~

    1. wefinger
      @8℃

      阔以。。留言板留一下你的站点信息。。我明天添加,我已经在床上了?

Leave a Comment