butterfly教程（四）魔改适配

前言

既然叫魔改，除了添加对应的css/js文件外，还需要在主题代码中加一点东西，或者新增主题文件，来适配心得模块和手机适配等。
魔改你可能需要的工具：HTML to JADE/PUG ，这是一个html转pug的在线工具。

估计没有时间，有时间会慢慢更新…………搜罗的魔改列举如下：

天气插件

效果图：

首先去这里：中国天气官网
注册登入，配置自己的插件，选择自定义插件 —> 网页简约插件–>创建：

随便起一个名字，这里的样式自己选择，然后到底部点击生产代码：

注意：：这里生成的代码不需要全部复制，自己创建一个weather.js文件,把下列代码粘贴进去即可（注意里面的key值换成自己的）：

// 天气插件
WIDGET = {
    CONFIG: {
        "modules": "01234",
        "background": 5,
        "tmpColor": "ffffff",
        "tmpSize": 16,
        "cityColor": "ffffff",
        "citySize": 16,
        "aqiSize": 16,
        "weatherIconSize": 24,
        "alertIconSize": 18,
        "padding": "10px 10px 10px 10px",
        "shadow": "0",
        "language": "zh",
        "borderRadius": 5,
        "fixed": "true",
        "vertical": "middle",
        "horizontal": "center",
        "left": "210",
        "top": 10,
        "key": "替换你自己生成的key"
    }
}

在到主题的配置文件中，找到inject的js引用位置，引用刚创建的js文件和官方提供的js，见下图：

1	- <script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>

在导航添加如下代码：

1	span#weather-v2-plugin-simple

添加位置如图所示：

到这就可以看到效果了，剩下的需要你自己微调。

ps:在title前加logo图标同理

模拟时钟

活动日历

雷达图

新闻资讯

宠物养成

分类磁贴

那年今日

每日一言

说说

计时器

建timing.js文件

let oSpan = document.getElementsByTagName("timing")[0];
let localhostTime = new Date();//获取页面打开的时间
function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
}
setInterval(function () {
    let goTime = new Date();//获取动态时间
    let diffTime = goTime.getTime() - localhostTime.getTime();
    var second = Math.floor(diffTime / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
    second = second % 86400;//余数代表剩下的秒数；
    var hour = Math.floor(second / 3600);//整数部分代表小时；
    second %= 3600; //余数代表 剩下的秒数；
    var minute = Math.floor(second / 60);
    second %= 60;
    // var str = tow(day) + '<span class="time">天</span>'
    //     + tow(hour) + '<span class="time">小时</span>'
    //     + tow(minute) + '<span class="time">分钟</span>'
    //     + tow(second) + '<span class="time">秒</span>';
    var str = tow(hour) + '<span class="time">小时</span>'
        + tow(minute) + '<span class="time">分钟</span>'
        + tow(second) + '<span class="time">秒</span>';
    oSpan.innerHTML = "您已浏览网页" + str;
}, 1000)

将js文件引入到inject

添加到公告栏中

至此ok。

视频DIV

效果图：

step 1:
在\themes\butterfly\layout文件夹下新建pug文件(文件名自定义)，将下面代码复制到pug

iframe(src='https://hair.jingpin88.com/share/cn3nEgL7rQxgZmmG', scrolling='no', border='0', frameborder='no', framespacing='0', allowfullscreen, style="height:96.5%;width:97.5%;border-radius:12px 8px 8px 12px;margin:10px")