因为使用了 Cuteen 主题所以有一些文件可能与默认主题文件不一致请自行判断

起步

首先我们打开和风天气官方：https://www.qweather.com 按以下图片进行点击。


然后填写您要创建的插件名字，和一些相关参数就可以了。
以下是我创建好的代码，可以直接复制粘贴使用。

<li class="d-inline-flex align-items-center">
    <div id="he-plugin-simple"></div>
</li>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "d1ab457e20814bb3b70408e89fcaef4f"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

修改主题标题栏文件。

一般主题的标题栏文件应为 header.php 我这里主题的头部文件为 base/navbar.php 请自行根据主题分辨。

将代码加入合适位置

我这里是将代码插入到了 <ul class="navbar-nav"></ul>之间，具体需要根据你们实际的主题来进行判断。

问题 -》 解决办法 均针对 Cuteen 主题

主题白天模式，天气插件文字不可见。

将主题文件夹下 Cuteen/static/js/app.js 中第116行navBar方法替换为下面的代码

navBar: function () {
    if (Config.topImage === 'yes') {
        let b = document.documentElement.scrollTop || document.body.scrollTop,
        d = document.getElementById('navPC'),
        e = document.getElementById('navMobile');
        a = document.getElementById('he-plugin-simple');
        if (b > 120) {
            d.classList.add('bg-blur');
            d.classList.remove('bg-transparent', 'has-img');
            e.classList.add('bg-blur');
            e.classList.remove('bg-transparent', 'has-img');
            a.classList.add('font-black');
        } else {
            d.classList.add('bg-transparent', 'has-img');
            d.classList.remove('bg-blur');
            e.classList.add('bg-transparent', 'has-img');
            e.classList.remove('bg-blur');
            a.classList.remove('font-black');
        }
    }
},

然后自定义一个样式 bg-black 将其字体颜色设置为黑色。

      .font-black {
        background-color: rgba(31, 27, 36, 0.2) !important;
      }