更新记录
2022-04-15:内测版v0.03
2022-04-14:内测版v0.02
2022-04-13:内测版v0.01
参考方向 | 教程原贴 |
---|---|
Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
本站的iconfont引入教程 | iconfont inject |
本站之前针对顶栏菜单做的部分魔改微调 | 糖果屋微调合集 |
复用洪哥的鼠标滚轮控制横向滚动代码 | Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式 |
天气插件的申请平台 | 和风天气创建简约版天气插件 |
顶栏算是目前首页唯二还能看出来是Butterfly的版块了,另一个是侧栏按钮。因为之前的SAO-controller没有达到预期。
原本这篇文章我是打算放到SAO-UI-PLAN里的,但是从写完以后的效果来看,没有特别明显的刀剑神域的风格,想想还是算了吧。
这回的设计灵感来源于手机端的状态栏,我想着把菜单栏选项隐藏,通过下拉拖动之类的操作来处理交互逻辑,在效果上应该会很惊艳。但是考虑到之前写controldot时的经验,拖动的逻辑处理很容易在电脑端出bug,所以在设计之初就放弃了。改用悬停或者点击逻辑(最后发现悬停逻辑交互过于频繁,误触概率也很高,所以采用了点击交互逻辑)
这次的顶栏因为涉及到了#nav的修改,而main.js中,关于原生顶栏的自适应部分是有相关代码的,所以弃用#nav会导致main.js中的部分代码报错。为了保证正常运行,需要手动删除这部分的代码。我不是没想过就像以往一样只修改css样式,但是那样的工作量还不如直接重写。而且凭啥只准jerry对布局id和class动刀子?
所以这次的魔改将是目前最劝退的教程。我开始对main.js动刀了,以后要想升级到butterfly最新版对新手就更难了。
另外,因为以前在微调合集里就已经改动过顶栏标题和菜单栏图标,所以这次我也保持着勤俭节约的优良传统,硬是把它们弄进来了。
在使用本教程之前,请务必确保您已经完成了前置教程,并且充分理解教程中提到的概念,这将有助于您在接下来的魔改过程中,能够自主更改那些本站特化的内容。对于那些追更糖果屋魔改比较积极的同学来说,这篇看起来应该就不会太吃力。
前置教程 | 需要掌握的内容 |
---|---|
糖果屋微调合集/posts/23fdf850/ | 通过这篇文章,要求读者起码掌握文章副标题显示方案和iconfont的symbol的引入方案,且已经配置了自己的图标库。在微调合集中,请选择动态图标的配置方案。本帖不会再提供静态方案的代码写法。糖果屋微调合集中,对配置文件中menu配置项进行了重写。所以若您没有完成相关改动,将遇到报错。 |
添加白天夜间模式转换动画/posts/d9550c81/ | 此篇为夜间模式切换动画和夜间模式按钮的依赖教程。可以不做,但是相对的,顶栏的夜间模式按钮就没有月亮太阳的变换了,当然,没有这种效果的代码我也是不会提供的。 |
custom beautify/posts/ebf20e02/ | 此篇非必要教程,但是对于您调整代码内涉及到的部分本站特化内容会有一定帮助,建议了解了解。 |
基于Butterfly的pjax适配方案/posts/3b78b69a/ | 此篇非必要教程,但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助,建议了解了解。 |
Hexo异步加载/posts/615d5ede/ | 此篇非必要教程,但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助,建议了解了解。 |
请务必确保您已经充分理解了上文提到的前置教程中的内容。
重写,为避免被原生菜单栏的样式影响,class和id都换为了全新的。倒数几行的搜索图标和手机端展开图标是用的我自己的图标库,记得换成你的图标。
新建,原生的顶栏内容耦合在head.styl文件里,styl一层套一层的剥离起来太麻烦,担心误删样式,所以干脆新建一个了。
移除main.js中关于原生顶栏的内容。注意本帖是基于butterfly_v4.1.0进行的改动,低版本的内容不做考虑,请自行判断与原生顶栏有关的内容进行删除。
新建
//鼠标控制横向滚动
if (document.getElementsByClassName("menu-item")[0]){
var xscroll = document.getElementsByClassName("menu-item")[0];
xscroll.addEventListener("mousewheel", function (e) {
//计算鼠标滚轮滚动的距离
var v = -e.wheelDelta / 2;
xscroll.scrollLeft += v;
//阻止浏览器默认方法
e.preventDefault();
}, false);
}
// 获取当前时间
var box = document.getElementById('message-date-box')
//不足十位补零
var addZero = val => val < 10 ? '0' + val : val
//把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
var trans = val => {
var obj = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六'
}
return obj[val]
}
setTime ()
//获取时间的方法
function setTime() {
var time = new Date();
// var year = time.getFullYear(); // 获取年
// var month = time.getMonth() + 1; // 获取月(是从0到11,所以我们要给他加1)
// var date = time.getDate(); // 获取日
var hour = time.getHours(); // 获取小时
var min = time.getMinutes(); // 获取分钟
var sec = time.getSeconds(); // 获取秒
var day = time.getDay(); // 获取星期几(0是星期日)
var value = addZero(hour) +
':' + addZero(min) + ":" + addZero(sec) + ' 星期'+ trans(day)
// 把所有的时间拼接到一起
box.innerText = value
// console.log(value)
// 把拼接好的时间插入到页面
}
// 让定时器每间隔一秒就执行一次setTime这个方法(这是实现时钟的核心)
setInterval(setTime, 1000)
function Navvisible(){
var navbar = document.getElementById('menu-container')
if (navbar) {
// 首先判断是否存在active类
if (navbar.className.indexOf('active-menu-bar') > -1){
// 存在则移除
navbar.classList.remove('active-menu-bar');
}
else{
// 不存在则先添加
navbar.classList.add('active-menu-bar');
}
}
}
本帖还用到了一个天气插件,使用的是和风天气提供的免费插件。请按照网页引导自主完成账号注册,并创建插件。插件完全免费,并且没有流量限制。
插件名称随意,内容选择温度,城市名称,天气实况。(剩下两个可以选,但是窄屏效果不理想。和风天气自带悬停显示详细面板,不用过于追求全部内容),温度文字颜色选择#000000,城市名文字颜色选择#000000,图标尺寸默认即可,空气质量文字颜色默认即可,背景颜色选择透明。剩余内容全部默认。
WIDGETkey
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "012",
"background": "5",
"tmpColor": "000000",
"tmpSize": "16",
"cityColor": "000000",
"citySize": "16",
"aqiColor": "FFFFFF",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "false",
"vertical": "top",
"horizontal": "left",
"key": "3dc0b38fcf984869865c340d2fd33c68"
}
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
在的inject配置项中引入以下内容,记得将替换为你自己申请的。
在中新增配置项以控制手机端是否需要启用侧栏展开的菜单,事实上本帖设计的方案自适应良好,可以满足手机端的使用。所以我更建议关闭他。请不了解的内容的读者不要盲目删除相关的内容,中依然有部分代码涉及版块的监测,盲目删除会导致新的bug。(当然我自己会剥离所以没关系,我就要删)
再次确认你已经完成了本帖上文提到的前置教程,若因前置教程未完成或未理解导致的问题,本店概不负责。建议将问题归纳后在评论区提问,方便店长完善教程中的注意事项。