前言

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

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

天气插件

效果图:
20201101110422

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

20201102190239

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

20201101110606

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 天气插件
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>

20201102201041

在导航添加如下代码:

1
span#weather-v2-plugin-simple

添加位置如图所示:
20201103125146

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

ps:在title前加logo图标同理
20201101114430

模拟时钟

活动日历

雷达图

新闻资讯

宠物养成

分类磁贴

那年今日

每日一言

说说

计时器

  • 建timing.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

20201118234725

  • 添加到公告栏中

20201118234312

至此ok。

视频DIV

效果图:

20201119163431

  • step 1:
    在\themes\butterfly\layout文件夹下新建pug文件(文件名自定义),将下面代码复制到pug
    1
    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")
  • step 2:
    把film.pug加到主页index.pug中显示

20201119165744
对应代码:

1
2
.recent-post-item(style='width:100%;min-height:400px')
include film.pug

注意:空格位置严格对其截图所示,pug文件强烈要求tab空格语法。
修改了pug文件,需要执行hexo g;hexo s;命令才会生效。