前言
既然叫魔改,除了添加对应的css/js文件外,还需要在主题代码中加一点东西,或者新增主题文件,来适配心得模块和手机适配等。
魔改你可能需要的工具:HTML to JADE/PUG ,这是一个html转pug的在线工具。
估计没有时间,有时间会慢慢更新…………搜罗的魔改列举如下:
天气插件
效果图:
首先去这里:中国天气官网
注册登入,配置自己的插件,选择自定义插件 —> 网页简约插件–>创建:
随便起一个名字,这里的样式自己选择,然后到底部点击生产代码:
注意::这里生成的代码不需要全部复制,自己创建一个weather.js文件,把下列代码粘贴进去即可(注意里面的key值换成自己的):
1 | // 天气插件 |
在到主题的配置文件中,找到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文件
1 | let oSpan = document.getElementsByTagName("timing")[0]; |
- 将js文件引入到inject
- 添加到公告栏中
至此ok。
视频DIV
效果图:
- step 1:
在\themes\butterfly\layout文件夹下新建pug文件(文件名自定义),将下面代码复制到pug1
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中显示
对应代码:
1 | .recent-post-item(style='width:100%;min-height:400px') |
注意:空格位置严格对其截图所示,pug文件强烈要求tab空格语法。
修改了pug文件,需要执行hexo g;hexo s;命令才会生效。