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

序言：效果展示

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

日期（年、月、日、星期）
天气（天气图标、温度）
湿度(百分比）
空气质量（US AQI）
时间（当地时间、AM/PM）

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

步骤 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”中添加以下内容：

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

}

.fa-calendar{padding-right:5px

}

.card-background {

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/

}

.rounded-icon

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

filter: brightness(0%)!important;}

.itemAirvisualWidget {

float: left;

display: inline-flex;

/_ height: 45px; _/

margin-left: auto;

margin-right: auto;

/_ padding: 10px 5px; _/

line-height: 1;

vertical-align: top;

}

.legendAirvisualWidget-wMDTkfQskKdxAnaMm{display:none}

.wrapperAirvisualWidget-wMDTkfQskKdxAnaMm, .wrapperAirvisualWidget-wMDTkfQskKdxAnaMm:hover, .wrapperAirvisualWidget-wMDTkfQskKdxAnaMm:focus {

background-color: #ffffff00 !important;

box-shadow: 0px 0px 0px 0px #000000 !important;

}

.legendAirvisualWidget-cGKu6MDNNcf5rC7A7{display:none}

.wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7, .wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7:hover, .wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7:focus {

background-color: #ffffff00 !important;

box-shadow: 0px 0px 0px 0px #000000 !important;

}

.dividerAirvisualWidget{display: inline-flex!important;

width: 8%!important;

height: auto!important;

border-left: 1px solid #ffffff00!important;}

.itemAirvisualWidget .rounded-icon {

width: 14px!important;

height: 14px!important;

}

.monoline {

font-size: 100%!important;

margin-top: 0px!important;

height:12px!important;

}

.AirvisualWidgetItemText {

width: 40px!important;

font-family: ‘UnidreamLED’!important;

}

.itemAirvisualWidget {

padding: 0px 0px!important;

}

.bodyAirvisualWidget {

display: inline-flex;

height: 12px !important;

}

.itemAirvisualWidget {

1	height: 12px!important;

}

.card-weather{width:50%;float:left;margin-block-start: -0.4em;}

.date {width:50%;float:left}

.time{width:90%;}

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

.card-aqi{clear: both;

width: 20%;

float: left;

margin-top: 0px;

margin-left: 0px;}

.AirvisualWidgetItemText strong {

font-size: 100%!important;

}


 ## 步骤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);
}

步骤 6：接入 CSS 与 JS

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码：

bottom:

<p>PS：因https://www.airvisual.com访问较慢，该网站数据中的温度中的“°”的字体缺失，所以延时执行了一个jquary脚本替换文本。</p>
<p>同时运用了jquary脚本进行了div移动，原因是直接写不能正常加载，比较迷。</p>
<hr></hr>

 ## 步骤7：申请AirVisual api key ##

<p>为了保障自己的API不失效，这里介绍下如何申请AirVisual api key。</p>
<p>①打开网站，注册帐号。</p>
<a target="_blank" href="https://www.iqair.com/auth/login">https://www.iqair.com/auth/login</a>
<p>②登录后访问，"https://www.iqair.com/dashboard/widgets"</p>
<a target="_blank" href="https://www.iqair.com/dashboard/widgets">https://www.iqair.com/dashboard/widgets</a>
<p>③点击“New widget”按钮。选择“city data”→“Closest supported city”。然后依次设置以下参数。得到对应的key。（aqi的参数可以更换为CN标准。）</p>

![example](/images/api-setting.png)
![example](/images/air-w.png)
<p>④修改代码模版中的key对应的字段参数。</p>

.card-aqi(name=’airvisual_widget’, key=’cGKu6MDNNcf5rC7A7’) // AQI 的 API KEY

.card-weather(name=’airvisual_widget’, key=’wMDTkfQskKdxAnaMm’) // 天气图标、温度、湿度(百分比）的 API KEY

```css
.legendAirvisualWidget-wMDTkfQskKdxAnaMm{display:none}
.wrapperAirvisualWidget-wMDTkfQskKdxAnaMm, .wrapperAirvisualWidget-wMDTkfQskKdxAnaMm:hover, .wrapperAirvisualWidget-wMDTkfQskKdxAnaMm:focus {
      background-color: #ffffff00 !important;
    box-shadow: 0px 0px 0px 0px #000000 !important;

}
.legendAirvisualWidget-cGKu6MDNNcf5rC7A7{display:none}
.wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7, .wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7:hover, .wrapperAirvisualWidget-cGKu6MDNNcf5rC7A7:focus {
      background-color: #ffffff00 !important;
    box-shadow: 0px 0px 0px 0px #000000 !important;

}