建站日志(1)——添加天气模块
本文最后更新于538 天前,其中的信息可能已经过时,如有错误请发送邮件到lysun26@163.com

前言

今天想在导航栏上整一个天气预报的功能,于是我就上网去找资料,最终发现了一个十分简单的方法。

由于我对前端一窍不通,因此,其中有一部分采取的方法都是比较笨的方法。

效果如本站左上角所示。

天气API

我使用的是心知天气,和风天气也可以,使用方法几乎一样。不想设置的也可以直接使用我的,代码在下面。

心知天气免费版不能够查看空气质量等参数,和风天气可以。但是我用心知天气的原因是:用和风天气的时候,我不会修改与它相关的鼠标样式,等找到修改的方法后,我准备换到和风天气试一试。

进入心知天气网站后,注册登录账号后,点击“立即免费试用”,然后添加产品,选择免费版即可(但是免费版不能够查看空气质量等参数,想要这个的话可以使用和风天气)。

然后进入心知天气插件页面。登陆后,点击“立即免费试用”,进入到如下图所示的界面。

在上面选择产品,然后在下面可以配置显示效果。把鼠标放在上图中的蓝色区域可以预览显示效果。但是这里心知天气会有一个问题,如果下面选择显示“生活指数”,会发现上面显示的“数”字为繁体字,很奇怪,不知道是什么问题,因此我就没有让显示这些参数。最后选择“获取代码”即可,下面是我的设置。

<div id="tp-weather-widget"></div>
<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: "d7b7ef02-aec3-4b21-98cc-76e6f28718cd",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>

移动端显示

我的主题使用这个天气模块,会出现移动端不适配的问题。由于我不懂前端,因此我就直接从显示的角度入手,将这个详情页的窗口固定住。方法如下:

在自定义-额外css中,添加下面的代码:

.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
     position:fixed!important;
     width:331.8px!important;
}

fixed的意思就是将窗口固定,width是详情页的宽度,可以根据你的实际情况调整。当然,如果不是用WordPress,也可以和上面的脚本写在一起,将其用HTML的语法写出来,也就是:

<style>
.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
     position:fixed!important;
     width:331.8px!important;
}
</style>

如果各位大佬有更好的方法,欢迎在评论区里提出来,感激不尽。

移动端隐藏此模块

一开始,移动端出现显示不全的问题,我就先让移动端不显示天气。现在已经解决移动端问题,方法如上。记录一下让移动端隐藏的一个简便方法,代码如下:

<style>
    .weather_pc{
        display: block;
    }
    @media (max-width: 768px){.weather_pc{display: none;}}
</style>
<div class="weather_pc">
<div id="tp-weather-widget"></div>
<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: "d7b7ef02-aec3-4b21-98cc-76e6f28718cd",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>
</div>

插入到网页中

插入到侧边栏

如果要插入到侧边栏中,操作十分简单。在WordPress中,选择外观->小工具,然后选择要插入的位置,比如”左侧栏小工具“。然后选择”自定义HTML“,将上面的代码插入即可。

插入到导航栏(也可以是任意位置)

如果想要将其插入到导航栏中,可以在主题文件编辑器中找到相应位置的代码,将其插入即可。用此方法理论上可以插入到你想插入的任意位置。如果你不确定在哪,可以使用试错的方法,多尝试几下(我就是这样的,因为代码看不懂)。以我的网页为例(Argon主题),如果主题和我一样,可以按照我的操作进行设置。

去header.php文件里,经过查找之后,可以看到如下图所示的位置:

根据注释,可以看到这是顶栏标题所在的位置(我的顶栏标题设置的是隐藏)。那么可以将这段代码插入到这里试一下,然后就出现了左上角的效果。插入位置如下图所示:

也可以在你的网站上,按F12查看网页源代码,然后定位到导航栏,看它的class,然后去代码里找。

如果你觉得天气和你的菜单离得比较近,可以插入几个空格,如上图所示。空格为“&nbsp;”,我使用了四个空格。

美化

字体格式调整

将其插入后,可以发现它的字体、字体大小等可能不符合网站,显得有点不合群。因此,我对其进行了字体样式、字体大小和背景的调整。设置的方法我采用的是用“额外CSS功能”。

选择自定义->额外CSS。

修改其样式需要找到其对应的class。按下F12,定位到相应位置(定位的方法是点击下图蓝色线上面的指针,然后点击你想要查看的位置),如下图所示。

可以发现这个对应的class类为".dsrBSL"(这个我没对其进行修改)。然后设置其font-size即可,当然,也可以修改其颜色。同样的方法也可以设置天气详细页面的各个属性,我的设置如下:

.EKHJj{
    color: #ffffff!important;
}

.bcxaVF{
    font-size: 1.1rem!important;
}

.fsIvwB{
    font-family: theme_font!important;
}

.dsrBSL{
    font-family: theme_font!important;
}

.dBbtWF{
    font-family: theme_font!important;
}

.jCzPjW{
    font-family: theme_font!important;
}

上述代码中,theme_font为我的主题字体,你可以设置成你想要的字体。

背景图片调整

设置方法如下:

.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
  background-image: url(https://www.corrain.top/wp-content/uploads/2022/12/background-06.png);
  background-repeat: no-repeat;
  background-size: cover;
}

可以将url里面的地址换成你的图片地址。

最终效果

最终效果如下:

和风天气的方法是一样的,直接搜索和风天气插件,然后按照步骤操作即可。

有问题可以留言哦~ 觉得有帮助也可以投喂一下博主,感谢~
文章链接:https://www.corrain.top/add-weather/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章地址及作者

评论

  1. 4 天前
    2024-5-30 17:11:54

    模仿你,给网站加上了天气,很棒的分享!୧(๑•̀⌄•́๑)૭

  2. 1 年前
    2022-12-19 17:11:53

    哇,牛的,博客真的是越来越beautiful了✿ヽ(°▽°)ノ✿

    • 博主
      Echo
      1 年前
      2022-12-20 18:49:50

      谢谢夸奖

  3. 呆鱼
    1 年前
    2022-12-12 13:47:08

    UP,你的天气模块没有适配移动端呢.

    • 博主
      呆鱼
      1 年前
      2022-12-12 14:25:28

      我去整一整,没学过前端的痛?

    • 博主
      呆鱼
      1 年前
      2022-12-12 15:24:02

      ok了,我用了一个比较笨的方法?,可以参考一下

  4. 博主
    已编辑
    1 年前
    2022-12-11 21:18:09

    学不下去了,试着给网站加上了天气,最终效果看来还可以(ฅ´ω`ฅ)

    • 雪宝
      Corrain
      1 年前
      2022-12-12 10:18:30

      真棒!!

      • 博主
        雪宝
        1 年前
        2022-12-12 10:40:14

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
( ゜- ゜)つロ
_(:з」∠)_
(⌒▽⌒)
( ̄▽ ̄)
(=・ω・=)
(*°▽°*)八(*°▽°*)♪
✿ヽ(°▽°)ノ✿
(¦3【▓▓】
눈_눈
(ಡωಡ)
_(≧∇≦」∠)_
━━━∑(゚□゚*川━
(`・ω・´)
( ̄3 ̄)
✧(≖ ◡ ≖✿)
(・∀・)
(〜 ̄△ ̄)〜
→_→
(°∀°)ノ
╮( ̄▽ ̄)╭
( ´_ゝ`)
←_←
(;¬_¬)
(゚Д゚≡゚д゚)!?
( ´・・)ノ(._.`)
Σ(゚д゚;)
Σ(  ̄□ ̄||)<
(´;ω;`)
(/TДT)/
(^・ω・^)
(。・ω・。)
(● ̄(エ) ̄●)
ε=ε=(ノ≧∇≦)ノ
(´・_・`)
(-_-#)
( ̄へ ̄)
( ̄ε(# ̄) Σ
(╯°口°)╯(┴—┴
ヽ(`Д´)ノ
("▔□▔)/
(º﹃º )
(๑>؂<๑)
。゚(゚´Д`)゚。
(∂ω∂)
(┯_┯)
(・ω< )★
( ๑ˊ•̥▵•)੭₎₎
¥ㄟ(´・ᴗ・`)ノ¥
Σ_(꒪ཀ꒪」∠)_
٩(๛ ˘ ³˘)۶❤
(๑‾᷅^‾᷅๑)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
小黄脸
热词系列一
tv_小电视
上一篇
下一篇