给你的hexo博客添加一个天气插件

前言

  记得起初使用hexo的时候看到过某位用volanits主题的大佬在Navbar添加了一个天气插件，如今想要折腾但是想不起来是哪位大佬了，于是自己摸索了许久，就添加了如你现在所见的天气插件（事实上作用并不大）。
  本文已发在了我的博客：W4J1e’s blog

确定路径

  首先确定添加自定义插件的路径，起初我以为是在Navbar.styl里，但是效果并非我所要的，F12发现Navbar的div其实是在header.ejs里，所以开搞。Volantis主题路径：

yourblog\themes\volantis\layout\_partial\header.ejs

选择插件

  我试用过中国天气网、心知天气，天气网和天气API。其中前两者和后两者的配置方法稍有不同，我分别写一写。

中国天气网

  中国天气网的代码无法显示天气状况（如🌤、⛅），弃用并且反馈给了官方；

心知天气

  心知天气插件其实很好，但是自定义程度不够高，我想要温度后面加个C，以及调和搜索框的间距，但是无法实现，所以弃用；

  但是它的展开页很棒，在移动端可以完美适配：

天气网

  天气网的样式多，但是也丑（官网显示可以联系客服免费定制），我个人不太喜欢，所以弃用；

天气api

  最后确定了天气api的插件，效果还不错，所以暂且用这个。

心知天气配置

  心知天气的配置和中国天气网的配置一样，也是最简单的，代码复制过去就能用。

  ①注册账号，可以选择免费版，中国天气网都是免费版且无限制；

  ②创建插件并且自定义，参考：

  注意：中国天气网的配置中建议选透明背景，且“固定在浏览器”一定要选否！！！

  ③复制生成的代码，粘贴到header.ejs，建议放在div class="m_search"之前，因为这里有空余地方；建议把代码弄整齐一点。

天气api配置

  天气api和天气网的配置一样，生成的代码需要转换一次。

  ①选择样式，查看代码，在代码窗口可以选择样式；

  ②复制代码；天气api的代码是iframe样式的，需要转换成js格式；

  ③转换代码；用站长工具转换，链接如下：

http://tool.chinaz.com/tools/html_js.aspx

  界面示例：

  ④创建js文件，将转换后的内容复制下来写进新建的js文件里；

  ⑤引入到header.ejs；在div class="m_search"前面创建一个div，引入js文件，如图：

  也可以直接用我的配置，以免需要自己调整位置和大小：

<div id="weather"></div>
<script src="https://cdn.jsdelivr.net/gh/w4j1e/blog@master/js/tqa.js"></script>

  保存并一键三连，enjoy it！

后记

  其实这个插件作用不大，只是我尝试客制化主题的一个尝试，如果后续中国天气网或心知天气网能够修改上面我所说的个人认为的不好体验，我一定会换回去的。