教程：基于Butterfly主题的模拟电子钟侧边栏小部件2.0版

序言：效果展示

2.0 模拟时钟小部件主要包含：

日期（年、月、日、星期）
天气（天气图标、温度）
湿度(百分比）
空气质量（US AQI）
时间（当地时间、AM/PM）
地理位置（IP 地址地理位置）
每日访问上限：约 500 次
每月访问上限：10000 次

预览地址：https://zfe.space

PS.最近本人 localhost 调用过猛可能会上限不显示。

相比1.0 版本，加快了访问速度并优化了加载效果。

但使用 API 后导致每日访问量上限后不会显示。

因此，有利有弊。

步骤 1：编写小部件代码

在”\themes\butterfly\layout\includes\widget”文件下复制某个 PUG，重命名为”card_clock.pug”

打开该文件，删除原有代码，将以下代码粘贴进去。注意 PUG 的空格敏感。

步骤 2：将小部件植入侧边栏

打开”\themes\butterfly\layout\includes\widget”路径下的”index.pug”

将 card_clock 代码添加至 card_author 代码块后。添加后的代码如下：
打开”\themes\butterfly"路径下的”_config.yml”

搜索到”aside:”设置处

添加 clock 开关代码：

步骤 3：编写 CSS 代码

在 hexo 根目录”source”文件夹下新建”css”文件夹，在”\source\css”路径下新建”clock.css”

在”clock.css”中添加以下内容：
#clock .date {

font-family: ‘UnidreamLED’;

font-size: 14px;

font-weight:normal;

color: #000000;

margin-block-start: 0em;

margin-block-end: 0em;

line-height: 1;

}

#clock .time {

font-family: 'UnidreamLED';
font-size: 38px;
font-weight:normal;
color: #000000;
margin-block-start: 0em;
margin-block-end: -0.2em;
line-height: 1.5;

}

.card-background {

height:153px;

margin:15px;

border-radius: 8px;

background-color: rgb(236, 236, 236);

box-shadow: inset 3px 3px 18px 0px rgba(50,50,50, 0.4);

z-index: 2;

}

@font-face {

font-family: ‘UnidreamLED’; /a name to be used later/

src: url(‘/fonts/UnidreamLED.ttf’); /URL to font/

}

.date {width:50%;}

.time{width:90%;}

.daylight{width:12%;float:right;font-family: ‘UnidreamLED’; color:black; }

#weatherimg {

-webkit-filter: brightness(0%)!important;

filter: brightness(0%)!important;

width: 14px!important;

height: 14px!important;

}

#humidityimg {

-webkit-filter: brightness(0%)!important;

filter: brightness(0%)!important;

width: 14px!important;

height: 14px!important;

}

.weather {width:10%;font-family: ‘UnidreamLED’;padding-left:10px; padding-right:1px;color: #000000;}

.temperature {width:20%;font-family: ‘UnidreamLED’; color: #000000;padding-left: 5px;padding-right:5px; }

.humidity {width:20%;font-family: ‘UnidreamLED’;color: #000000;padding-left: 10px;padding-right:0px; }

.usaqi {height:30px;width:10%;font-family: ‘UnidreamLED’;color: #000000;}

.city {width:10%;font-family: ‘UnidreamLED’;padding-left:20px; padding-right:1px;color: #000000;}


 ## 步骤4：添加自定义字体文件 ##

<p>在"source"文件夹下新建"fonts"文件夹，将"UnidreamLED"放入文件夹中。</p>
<a href="/fonts/UnidreamLED.ttf">UnidreamLED字体下载</a>
<hr></hr>

 ## 步骤5：编写JS代码 ##

<p>在根目录"source"文件夹下新建"js"文件夹，将"vue.min.js"放入文件夹中。</p>
<a href="/js/vue.min.js">vue.min.js下载</a>
<p>在js文件夹中，复制"vue.min.js"，重命名为"clock.js"</p>
<p>打开该文件，删除原有代码，将以下代码粘贴进去。</p>
```JavaScript
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: '',
        daylight: '',
    }
});

var week = ['SUN', 'MON', 'TUE', 'WED','THU' ,'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
    var hamorpm = cd.getHours();
 var str;
   if(hamorpm >12) {
        hamorpm -= 12;
        str = " PM";
    }else{
        str = " AM";
    }
    clock.daylight = str
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

在 js 文件夹中，复制”vue.min.js”，重命名为”airvisualapi.js”

打开该文件，删除原有代码，将以下代码粘贴进去。
var clockurl = “https://api.airvisual.com/v2/nearest_city?key=123312fc-84e9-49c4-8？？？-66f0？？？912？？"

$(function(){

$.ajax({

//请求方式

type:”GET”,

//文件位置

url:clockurl,

//返回数据格式为 json,也可以是其他格式如

dataType: “json”,

beforeSend:function(XMLHttpRequest){

//alert(‘远程调用开始…’);

        },
        //请求成功后要执行的函数，拼接html
        success: function(data){
            str1=data.data.current.weather.ic;
            imagelink= 'images/weather/' +  str1 + '.png'
            str2=data.data.current.weather.tp;
            str3=data.data.current.weather.hu;
            str4=data.data.current.pollution.aqius;
            var str='<span class="weather">';
            str+='<img id="weatherimg" >'  +  '</span>' + '<span class="temperature">' + str2 + '*C'+ '</span>';
            str+='<span class="humidity">' +  '<img id="humidityimg" >'  + ' '  + str3 + '%' + '</span>';
            var str5='<span class="usaqi">';
            str5+= str4  +' ' + 'US'+' ' +'AQI' + '</span>';
            str5+= '<span class="city">' + data.data.city + '</span>';
            $(str).insertAfter($(".date").eq(0));
            $(str5).insertBefore($(".daylight").eq(0));
            document.getElementById("weatherimg").src = imagelink
            document.getElementById("humidityimg").src = 'images/weather/hu.png'
            console.log(data)

            document.getElementById("clock").style.opacity= 1
        }
    });
});


<p>key=123312fc-84e9-49c4-8？？？-66f0？？？912？？部分为需要在airvisual官网申请的key。</p>
<hr></hr>

 ## 步骤6：接入CSS与JS ##

<p>打开"\themes\butterfly\"路径下的"_config.yml"</p>
<p>搜索到"inject:"设置处</p>
<p>添加以下代码：</p>
```yml
inject:
  head:
  - <link rel="stylesheet" href="/css/clock.css"/>

  bottom:
  - <script src="/js/vue.min.js"></script>
  - <script src="/js/clock.js"></script>
  - <script src="/js/airvisualapi.js"></script>