在Handsome主题中添加和风天气插件

kenvie

发布于 2022-01-20 14:43:53

4130

发布于 2022-01-20 14:43:53

文章被收录于专栏：kenviekenvie

1.复制以下代码或者自己创建代码和风天气插件创建页面

调整 left和 top数值以修改位置

<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  CONFIG: {
    "modules": "01234",
    "background": 5,
    "tmpColor": "4A4A4A",
    "tmpSize": 16,
    "cityColor": "4A4A4A",
    "citySize": 16,
    "aqiSize": 16,
    "weatherIconSize": 24,
    "alertIconSize": 18,
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "borderRadius": 5,
    "fixed": "true",
    "vertical": "middle",
    "horizontal": "center",
    "left": "290",        //左边的距离
    "top": "5",          //高度
    "key": "ab70696888c44ccf90cb3dc181b7ccef"
  }
}
</script>
<script src="https://widget.heweather.net/simple/static/js/he-simple-common.js?v=1.1"></script>

2.复制生成后，打开Handsome主题目录下打开 component文件夹，编辑里面的 headnav.php文件，在大约在122行后（handsome版本6、7通用）加入复制的代码

                          <!--搜索提示-->
                <ul id="search_tips_drop" class="small-scroll-bar dropdown-menu hide" style="display: block;top: 
                30px; leftphp  id="icon-search"><i data-feather="search"></i></span>
                      <span class="feathericons animate-spin  hide" id="spin-search"><i
                                  data-feather="loader"></i></span>
                      <!--                      <i class="fontello fontello-search" id="icon-search"></i>-->
                      <!--                      <i class="animate-spin  fontello fontello-spinner hide" id="spin-search"></i>-->
                  </button>
              </span>
            </div>
        </div>

   复制到这里
  
    </form>
    <a href="" style="display: none" id="searchUrl"></a>
    <!-- / search form -->
    <?php
    $hideReadModeItem = false;
    $hideTalkItem = false;
    $headerItemsOutput = "";
    if (!empty(Typecho_Widget::widget('Widget_Options')->headerItems)){
        $json = '['.Utils::remove_last_comma(Typecho_Widget::widget('Widget_Options')->headerItems).']';

效果见本博客顶部天气

版权属于：kenvie

本文链接：https://kenvie.com/6

商业转载请联系作者获得授权，非商业转载请注明出处。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020 年 08 月，如有侵权请联系 cloudcommunity@tencent.com 删除

php