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;
}