点击查看更新记录

更新记录

2021-02-07:正式版v4.0

  1. 基于冰老师的方案进行修改。
  2. 实现去jquery
  3. 将css转为styl
  4. 去除冗余结构和冗余样式
  5. 新增夜间模式
点击查看参考教程

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。静态资源包内的index.pug为butterfly_v3.5.1版本。其他版本改法详见教程正文。

写在最前

本帖基于Butterfly_v3.6.2进行编写,对于低版本,在index.pug的写法上可能存在差异,请读者根据自己的版本自行修改。

申请API

  1. 访问OpenWeather,按照网站指示完成注册。
  2. 注册完成后,访问API Keys获取相应的API密钥。留待之后备用。

魔改正文

点击查看魔改正文
  1. 将下载的静态资源包内的assets文件夹放到source目录下,即[Blogroot]\themes\butterfly\source\assets\
  2. 新建[Blogroot]\themes\butterfly\layout\includes\widget\card_clock.pug,
    if theme.aside.card_clock.enable
    .card-widget.card-clock
    #clock
    img(v-if='clockshow == "false"',alt='' src='/assets/weather/loading.gif', height='120px' width='100%')
    table.clock(v-if='clockshow')
    tbody
    tr
    td.clockdate {{date}}
    td.weatherimg
    img#weatherimg(:src='weatherimg' alt='')
    td.temperature {{temperature}}
    td.humidityimg
    img#humidityimg(:src='humidityimg' alt='')
    td.humidity {{humidity}}
    tr.time
    td(colspan='5') {{time}}
    tr
    td.usaqi(colspan='1')
    span {{ip}}
    td.city(colspan='2') {{city}}
    td.daylight(colspan='2') {{daylight}}
    script(defer data-pjax src=url_for(theme.CDN.card_clock))
  3. 新建[Blogroot]\themes\butterfly\source\css\_layout\card_clock.styl,
    if hexo-config('aside.card_clock.enable')
    @font-face
    font-family 'UnidreamLED'
    src url('/assets/fonts/UnidreamLED.ttf')
    font-display swap
    #clock
    height 153px
    padding 20px 10px
    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-family 'UnidreamLED'
    color: #000000
    th
    padding 0
    border 0
    td
    padding 0
    border 0
    .clockdate
    font-size 14px
    font-weight normal
    margin-block-start 0em
    margin-block-end 0em
    line-height 1
    min-width 20px
    .time
    font-size 38px
    font-weight normal
    margin-block-start 0em
    margin-block-end -0.2em
    line-height 1.5
    text-align center

    .daylight
    text-align right
    min-width 20px

    #weatherimg
    -webkit-filter brightness(0%)
    filter brightness(0%)
    width 14px!important
    height 14px!important

    #humidityimg
    -webkit-filter brightness(0%)
    filter brightness(0%)
    width 14px!important
    height 14px!important

    .humidityimg
    min-width 20px
    text-align right
    padding-right 3px


    .weatherimg
    min-width 20px
    padding-right 3px


    .temperature
    min-width 20px
    padding-right 3px

    .humidity
    text-align right
    min-width 20px
    padding-right 3px

    .usaqi
    height 30px
    min-width 20px

    .city
    text-align center
    min-width 20px
    padding-right 3px


    [data-theme="dark"]
    #clock
    background-color: #212121
    td
    color: rgba(255,255,255,0.8)!important
    #weatherimg
    -webkit-filter brightness(1000%)
    filter brightness(1000%)

    #humidityimg
    -webkit-filter brightness(1000%)
    filter brightness(1000%)
  4. 新建[Blogroot]\themes\butterfly\source\js\card_clock.js,记得更改weather的值为你之前获取的API密钥,
    var mykey = {
    weather: '7a??????????338650c82??????7771c' //改为你从OpenWeather获取的API密钥
    };
    var locationurl = 'https://extreme-ip-lookup.com/json/';
    var cityname = '';
    var weatherurl = '';
    var userip = '';
    var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];

    fetch(locationurl)
    .then(data => data.json())
    .then(data => {
    //console.log(data);
    cityname = data.city;
    if (typeof data.city == "undefined") {
    cityname = data.region;
    };
    if (typeof data.region == "undefined") {
    cityname = data.country;
    };
    userip = data.query;
    weatherurl = 'https://api.openweathermap.org/data/2.5/weather/?q=' + cityname + '&units=metric&appid=' + mykey.weather;
    getweatherdata();
    })
    .catch(function(error) {
    console.log(error);
    });

    function getweatherdata() {
    fetch(weatherurl)
    .then(data => data.json())
    .then(data => {
    //console.log(data);
    clock.weatherimg = '/assets/weather/' + data.weather[0].icon + '.png';
    clock.temperature = data.main.temp + "*C";
    clock.humidity = data.main.humidity + "%";
    clock.ip = userip;
    clock.humidityimg = '/assets/weather/hu.png';
    clock.city = data.name;
    var timerID = setInterval(updateTime, 1000);
    updateTime();
    clock.clockshow = true;

    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);
    };
    updateTime();
    })
    .catch(function(error) {
    console.log(error);
    });
    };
    var clock = new Vue({
    el: '#clock',
    data: {
    ip: '',
    time: '',
    weatherimg: '',
    temperature: '',
    humidityimg: '',
    humidity: '',
    usaqi: '',
    city: '',
    date: '',
    daylight: '',
    clockshow: 'false'
    },
    });
  5. 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,添加vue.js依赖项:
      div
    script(src=url_for(theme.CDN.jquery)) //- Butterfly_v3.4.0已经实现jquery,没有这行
    + script(src=url_for(theme.CDN.vue))
    script(src=url_for(theme.CDN.utils))
    script(src=url_for(theme.CDN.main))
  6. 修改[Blogroot]\themes\butterfly\layout\includes\widget\index.pug
        #aside_content.aside_content
    if theme.aside.card_author.enable
    include ./card_author.pug
    .sticky_layout
    + include ./card_clock.pug
    if theme.aside.card_announcement.enable
    include ./card_announcement.pug
    if theme.aside.card_recent_post.enable
    include ./card_recent_post.pug
    if theme.newest_comments.enable
    include ./card_newest_comment.pug
    if theme.ad && theme.ad.aside

    此处写法是在站点页和文章页都添加了card_clock,只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。


        #aside_content.aside_content
    if theme.aside.card_author.enable
    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
    if theme.aside.card_announcement.enable
    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
    .sticky_layout
    if is_post()
    if showToc
    include ./card_post_toc.pug
    + !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
    if theme.aside.card_recent_post.enable
    !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
    if theme.ad && theme.ad.aside
    !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
    else
    + !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
    if theme.aside.card_recent_post.enable
    !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
    if theme.ad && theme.ad.aside
    !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
    if theme.newest_comments.enable
    !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
    if theme.aside.card_categories.enable
    !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
    if theme.aside.card_tags.enable
    !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
    if theme.aside.card_archives.enable
    !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
    if theme.aside.card_webinfo.enable
    !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

    此处写法是在站点页和文章页都添加了card_clock,只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。


        #aside_content.aside_content
    //- post
    if is_post()
    if showToc && theme.toc.style_simple
    .sticky_layout
    include ./card_post_toc.pug
    else
    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
    .sticky_layout
    if showToc
    include ./card_post_toc.pug
    + !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
    else
    //- page
    !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
    .sticky_layout
    + !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
    !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

    此处写法是在站点页和文章页都添加了card_clock,只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。


        #aside_content.aside_content
    //- post
    if is_post()
    if showToc && theme.toc.style_simple
    .sticky_layout
    include ./card_post_toc.pug
    else
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    .sticky_layout
    if showToc
    include ./card_post_toc.pug
    + !=partial('includes/widget/card_clock', {}, {cache: true})
    !=partial('includes/widget/card_recent_post', {}, {cache: true})
    !=partial('includes/widget/card_ad', {}, {cache: true})
    else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
    .sticky_layout
    + !=partial('includes/widget/card_clock', {}, {cache: true})
    !=partial('includes/widget/card_recent_post', {}, {cache: true})
    !=partial('includes/widget/card_ad', {}, {cache: true})
    !=partial('includes/widget/card_newest_comment', {}, {cache: true})
    !=partial('includes/widget/card_categories', {}, {cache: true})
    !=partial('includes/widget/card_tags', {}, {cache: true})
    !=partial('includes/widget/card_archives', {}, {cache: true})
    !=partial('includes/widget/card_webinfo', {}, {cache: true})

  7. 修改[Blogroot]\_config.butterfly.yml,
    • 添加开关
        aside:
      enable: true
      hide: false
      button: true
      mobile: true # display on mobile
      position: right # left or right
      card_author:
      enable: true
      description:
      button:
      enable: true
      icon:
      text:
      link:
      card_announcement:
      enable: false
      content:
      + card_clock: #侧栏电子钟
      + enable: true
      + sort_order: # Don't modify the setting unless you know how it works
    • 添加CDN配置项:
        CDN:
      # main
      main_css: /css/index.css
      jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      + vue: https://cdn.jsdelivr.net/npm/vue@2.6.11 # vue.js依赖
      + card_clock: /js/card_clock.js # 首页电子钟

TO DO

去jquery

适配pjax

新增夜间模式

完全重构pug和css,完美自适应