前言

感謝這位小冰大大的插件和教學文檔

➊ hexo-electric-clock 教程：hexo-electric-clock 电子时钟插件 | 小冰博客
➋ butterfly-clock 教程：基于 Butterfly 主题的模拟电子钟侧边栏小部件 3.0 版 | 小冰博客

如果你的 Butterfly 主題是 v3.x.x版本，那按著教程➊應該就能很快完成。

但由於我的 Butterfly 主題是v2.1.0版，試了 npm install 也無法用……一開始是跟著教程➋申請OpenWeather API 來弄，是成功的，但把 API key 放出來好像不太安全，最後還是決定融合教程➊+➋，再自己修改了些，記錄一下：

效果

可以到我的首頁看效果，放了在側邊欄那裡。

步驟

1. 修改 index.pug

在這個文件裡 \themes\Butterfly\layout\includes\widget\index.pug，在你想要的位置新增這兩行：

Code

if theme.aside.card_clock
  include ./card_clock.pug

由於我想把這個天氣時鐘放在月曆掛件上方，現在我的 index.pug 是這樣：

Code

if theme.aside.card_author
  include ./card_author.pug

if theme.aside.card_announcement
  include ./card_announcement.pug

if theme.aside.card_clock
  include ./card_clock.pug

if theme.aside.card_calendar
  include ./card_calendar.pug

if theme.aside.card_recent_post
  include ./card_recent_post.pug
  
if theme.aside.card_categories   
  include ./card_categories.pug

if theme.aside.card_tags
  include ./card_tags.pug

if theme.aside.card_archives
  include ./card_archives.pug

if theme.aside.card_webinfo
  include ./card_webinfo.pug

2. 創建 card_clock.pug

在 \themes\Butterfly\layout\includes\widget 這個 folder 裡，創建一個叫 card_clock.pug 的檔，內容如下：

Code

.sticky_layout

對，card_clock.pug裡只有這一句就可以。

3. 創建 clock 的相關文件

在 \themes\butterfly\source\裡，創建一個叫 clock 的 folder。
在 clock 入面，再創建 css、 fonts、 images 和 js 四個 folder，如下圖：

3.1 clock.css

clock.css 內容如下：
（我不想背景有漸變陰影，於是隱藏了 card-background 那段）

css

@font-face {
    font-family: 'UnidreamLED'; /*a name to be used later*/
    src: url('/clock/fonts/UnidreamLED.ttf'); /*URL to font*/
}
#hexo_electric_clock{
padding:20px
}
.card-clock{
    padding: 0!important;
}
/*.card-background {
    height: 153px;
    margin: 15px;
    border-radius: 8px;
    background-color: #ececec;
    box-shadow: inset 3px 3px 18px 0 rgb(50 50 50 / 40%); 
    z-index: 2;
} */
.clock-row{
    font-family: UnidreamLED;
    font-weight: 400;
    color: #000;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.card-clock-clockdate, .card-clock-ip{
    text-align: left;
    flex-basis: calc(40% - 5px);
}
.card-clock-weather,.card-clock-location{
    float: right;
    text-align: center;
    flex-basis: calc(30% - 5px);
}
.card-clock-humidity,.card-clock-dackorlight{
    text-align: right;
    flex-basis: calc(30% - 5px);
}
.card-clock-time{
    flex: 1;
    font-family: UnidreamLED;
    font-size: 38px;
    text-align: center;
    line-height: 1.5;
}

3.2 UnidreamLED.ttf

font file 請到這個掛件的作者那裡下載：Zfour/Butterfly-clock/clock/fonts/

3.3 loading.gif

這個 loading gif 檔，請到這個掛件的作者那裡下載：Zfour/Butterfly-clock/clock/images/weather/

3.4 clock.js

clock.js 內容如下：
（我隱藏了 card-clock-ip、card-clock-location 和 card-clock-dackorlight。如果你想把它們顯示出來，請 unhide）

Javascript

function electric_clock_injector_config(){var c=document.getElementsByClassName("sticky_layout")[0];console.log("已挂载electric_clock"),c.insertAdjacentHTML("afterbegin",'<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>')}document.getElementsByClassName("sticky_layout")[0]&&(location.pathname,1)&&electric_clock_injector_config()

console.log(returnCitySN["cip"])
fetch('https://wttr.in/'+returnCitySN["cip"]+'?format="%l+\\+%c+\\+%t+\\+%h"').then(res=>res.text()).then(
    data => {
        var res_text = data.replace(/"/g,'').replace(/\+/g,'').replace(/,/g,'\\').replace(/ /g,'').replace(/°C/g,'');
        res_list = res_text.split('\\');
        var clock_box = document.getElementById('hexo_electric_clock');
        clock_box_html = `  
  <div class="clock-row">
<span id="card-clock-clockdate" class="card-clock-clockdate"></span>
<span class="card-clock-weather">${res_list[2]} ${res_list[3]} *C</span>
<span class="card-clock-humidity">💧 ${res_list[4]}</span>
</div>
  <div class="clock-row"><span id="card-clock-time" class="card-clock-time"></span></div>
  
  <div class="clock-row">
 <!-- <span class="card-clock-ip">${returnCitySN["cip"]}</span> 
<span class="card-clock-location">${res_list[0]}</span>
  <span id="card-clock-dackorlight" class="card-clock-dackorlight"></span> -->
</div>
`;
        var week = ['SUN', 'MON', 'TUE', 'WED','THU' ,'FRI', 'SAT'];
        var card_clock_loading_dom = document.getElementById('card-clock-loading');
        card_clock_loading_dom.innerHTML='';
        clock_box.innerHTML= clock_box_html;
        function updateTime() {
            var cd = new Date();
            var card_clock_time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
            var card_clock_date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' '+ week[cd.getDay()];
            var card_clock_dackorlight = cd.getHours();
            var card_clock_dackorlight_str;
            if(card_clock_dackorlight >12) {
                card_clock_dackorlight -= 12;
                card_clock_dackorlight_str = " PM";
            }else{
                card_clock_dackorlight_str = " AM";
            }
            if(document.getElementById('card-clock-time')){
            var card_clock_time_dom = document.getElementById('card-clock-time');
            var card_clock_date_dom = document.getElementById('card-clock-clockdate');
            var card_clock_dackorlight_dom = document.getElementById('card-clock-dackorlight');
            card_clock_time_dom.innerHTML= card_clock_time;
            card_clock_date_dom.innerHTML= card_clock_date;
            card_clock_dackorlight_dom.innerHTML= card_clock_dackorlight_str
                }
        }

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

        console.log(res_list)

    }
)

4. 修改 Butterfly 的 _config.yml

在這個文件裡 \themes\Butterfly\_config.yml，作出以下添加。

4.1 在CDN_USE 添加相關 css 和 js

找到 CDN_USE:，添加這三個:

/clock/css/clock.css
https://pv.sohu.com/cityjson?ie=utf-8
/clock/js/clock.js

給參考，我現時那部份的代碼是這樣：

yml

CDN_USE:
  css:
    - /css/index.css
    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    # - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css #fontawesomeV5_css
    - /clock/css/clock.css

  js:
    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
    - https://pv.sohu.com/cityjson?ie=utf-8
    - /js/utils.js
    - /js/main.js
    - /js/calendar.js
    - /js/languages.js
    - /clock/js/clock.js

4.2 在 aside 添加 card_clock

找到 CDN_USE:，添加 card_clock: true

給參考，我現時那部份的代碼是這樣：

yml

# 側邊欄顯示設置
aside:
  position: left # left or right
  card_author: true
  card_announcement: false
  card_recent_post: false
  card_clock: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: true
  card_calendar: true

完成