Hexo主题next中添加天气插件（心知天气）

最近想在博客主题中添加一个天气插件，在网上搜索一番以后选择了【心知天气】。实现在博客中预报天气的效果。

首先要去心知天气的官网，获取插件代码，具体方式可以参见【官方文档】。

我选择在博客的顶部导航处添加天气信息，找到​​header.swig​​​，具体位置为：​​themes\next\layout\_partials\header.swig​​​。在文件的适当位置添加代码，我选择在​​logo​​的右侧添加，具体位置为：

插件代码如下：

<div class="weather">
  <!-- 《添加“心知天气”-->
    <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: "zh-Hans",
      unit: "c",
      theme: "auto",
      token: "efb760e3-5326-4f08-839b-122738249a17",
      hover: "enabled",
      container: "tp-weather-widget"
    })
  </script>
  <!-- 添加“心知天气”》-->
  </div>

如果你希望在主题配置文件中，配置是否添加天气插件，代码就要改为：

<div class="weather">
  <!-- 《添加“心知天气”-->
  {% if theme.xinzhi_weather %}
    <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: "zh-Hans",
      unit: "c",
      theme: "auto",
      token: "efb760e3-5326-4f08-839b-122738249a17",
      hover: "enabled",
      container: "tp-weather-widget"
    })
  </script>
  {% endif %}
  <!-- 添加“心知天气”》-->
  </div>

新增了一个if条件语句。同时也要在【主题配置文件中】，添加如下代码：

# 心知天气(如果不用为false):https://www.seniverse.com
xinzhi_weather: true

天气插件的具体位置和样式，可以在​​header.styl​​​文件中进行修改，具体位置为：​​themes\next\source\css\_common\components\header\header.styl​​。

比如：

.weather{
    float: left;
    margin: 8px 15px;
}

具体效果参见我的博客：​​https://serena-tz.gitee.io/​​。