文章目录

导读
为什么是sakebowUI
- 小插曲
现在开发得怎么样了
这七天最难忘的事
觉得亮点在哪
怎么用皮肤
- 皮肤模板
- 定制CSS
- 侧边栏代码
- 页首HTML代码
- 页脚HTML代码
- 一小点补充
最后

导读

我终于做了自己一直想做的事，那就是能够在开源的项目上能有自己原创的什么东西。但是很可惜，时间有限，我没能把这个做完。从大年三十开始到正月初六这七天，也就是一周的时间，我已经尽全力了。接下来还有别的任务，所以能够正式使用的皮肤只能暂时拖后，现在就暂时公布一个试用版本，如果有什么建议请多多评论！我会全部都看一遍的！

为什么是sakebowUI

先放出预览地址：我的博客园主页

那当然是因为sakebow是我的GitHub名称啦！（叉会腰）

虽然这么厚脸皮的叫了，由于还是借鉴了很多前人的经验，在这里还是要老老实实的表示感谢。感谢博客园用户韩子卢搭建的的脚手架、BNDong的SilenceUI里面各种钩子的设计理念（虽然没看懂），以及各种各样身怀绝技的大佬们的贴心教程。

总之，谢谢各位大佬开源的各种工具。

小插曲

由于是我自己根据这位还没找到名字的大佬的教程弄得一个类似jQuery的框架，所以不熟悉webpack的我直接蒙圈了，韩子卢的手脚架虽然好用，但是我这个框架到最后整合的时候塞不进去了（哭）。

于是就丢掉了。现在就觉得自己像是丢掉了手机一样，是个被时代抛弃的家伙……

现在开发得怎么样了

从大年三十那天开始的，到今天（2021年2月17日，正月初六），一共正好一周时间。在这七天时间内，我当然！！还没做完……

就算你这么盯着我，没做完就是没做完啊……

这七天时间已经是尽全力做了。我真的一滴都不剩了

因为现在有别的任务了，所以这个皮肤可能要搁置一下下。不过呢，对于128012801280px以上的电脑浏览器来说应该是做完了。剩下的就看将来有没有一丢丢时间把小窗口端和移动端适配给做了。如果各位有什么想法和建议的话请多多评论！我会一一记录下来的！

这七天最难忘的事

那就是一开始的三天。吸取了数学建模时候对于开卷考试的经验，我第一时间就去找别人是怎么实现的。但是这些时候一直都很盲目，想要做却又不太清楚怎么做。想着三天时间把自己想要的效果基本上在本地调的差不多了，直接线上测试吧。大家都知道，前端的崩溃往往都是悄无声息的。上线的那一瞬间就只出现了白蒙蒙的一片，我的内心立马就开始翻云覆雨了。

我躺在床上，手捂着脸，左边听到了“放弃吧”，右边听到了“这个加上去应该能行”。就是这么纠结。一边心态崩得想哭，一边又在思考该怎么破解这个僵局。

觉得亮点在哪

杂七杂八的说了这么大一堆，现在也该进入正题了。

首当其冲的就是一开始的loading界面。就像刚刚说的，花了三天做了个寂寞，很懊恼。最后突然开窍了，给做出来了。感谢CCTV。虽然说并没有什么高大上的特效，但是我觉得我这个转场还算过得去，算是没有愧对我大学毕业的水平（捂脸）
接着就是我自己做的小架子：sakebow.js。目前已经发布到了我的gitee里面，大家也可以点击这里获取sakebow.js的压缩版（也就是sakebow.min.js）。会用jQuery就铁定会用我这玩意。由于现在还有很多东西没有完善，所以就暂时不做过多的介绍了。还请大家期待我的下次更新。下次更新应该就会全平台兼容了！（先把flag立好）
然后就是整个界面几乎是重构了。这些琐碎的东西花了些时间调整。里面加上了大量的绝对定位，因为原皮肤基本上是规规矩矩一行一行来的，相当的单调。但不得不吐槽，这特么什么鬼判定点啊，a标签歪到天上去了，cursor属性也歪天上去了。建议把前端拉出来当着所有人的面改需求
再就是右边加了个目录。是通过解析页面的标签并把文字粘上去的。想了很多种办法，最后还是确定了用正则表达式来解析。一方面正则表达式匹配字符串是相当有效率的，同时还能够快速将字符和数字区分开来，这样不仅实现了h1到h6的识别和提取，还能把这几个标签按照顺序和级别填上去
我基本上没有什么配色的天赋，和寺田てら太太完全是相反的呢（强颜欢笑）。所以，我这次想一点点尝试，使用VOCALOID的各种颜色配了一下，包括日本的和中国的。熟悉一点的同学们应该比较清楚，包括了miku、haku、luka，还有洛天依、乐正绫等等。不知道配得怎么样，但是我自己很开心

好开心啊啊啊啊啊啊啊啊啊，吭啊啊啊啊啊啊啊

怎么用皮肤

但我最好还是建议不要急着用，因为还有很多东西都没完善。感兴趣的可以去我在gitee的临时存档点看看，里面暂时只有一些压缩过的js和css。等下个版本更新之后（那个时候最起码应该是可以全平台兼容的时候）我会放出源码公开给大家。抱歉了各位！（抱拳）

然后就是一小点点使用方法：

皮肤模板

首先把皮肤模板调成Custom。这款模板只有最低限度的CSS，可以说是相当的中规中矩，就像银行办手续的表格一样，严谨而又古板。但是正因为是这样所以才有很大的进步空间。

定制CSS

然后在页面定制CSS代码中输入：

@import(https://sakebow.gitee.io/cnblogs/blogskins/sakebow.min.css);

当然你也可以点击这里进去查看完整的文件，然后整个复制粘贴进去。这个过程也并不是很耗精力就是了。

侧边栏代码

侧边有特效但是没代码。空着。

页首HTML代码

这个部分放的就是我最得意的loading部分。因为是需要在页面的所有元素全部加载完成之前出现，所以所有的一切都是用最原始的javascript代码写才能凑效。所以，把这些复制一下粘贴上去：

<script>let windowHeight=document.documentElement.clientHeight,windowWidth=document.documentElement.clientWidth;document.write('<style>@keyframes polish{from{left:-10px;}to{left:100%}}@keyframes kawaii{0%{transform:rotate(0deg);}35%{transform:rotate(-30deg);}70%{transform:rotate(0deg);}85%{transform:rotate(15deg)}100%{transform:rotate(0deg);}}</style><div id="background" style="margin: 0;padding: 0;position: absolute;height:100px;width:100px;top:0;left:0"><div id="load" style="position:absolute;;top:0;left:0;width:'+windowWidth+"px;height:"+windowHeight+'px;display:flex;display:-webkit-flex;justify-content:space-evenly;align-items:center;align-content:center;z-index:1;background-color:#39C5BB"><figure style="width:20em;"><img src="https://sakebow.gitee.io/images/miku/christmas2.min.png" style="animation:kawaii 2.5s linear infinite"/><figcaption style="color:#fff;text-align:center;font-size:200%;font-weight:bold;position:relative;letter-spacing:5px">LOADING...<div style="position:absolute;width:30px;height:100%;background-color:#39C5BB;top:0;left:-30px;animation:polish 2.5s infinite"></div><figcapption></figure></div></div>');</script>

页脚HTML代码

刚刚你也看到了，loading放在了页首这个部分。按照博客园的顺序，是先加载侧边栏部分的代码，再就是页首，最后是页脚。众所周知，html的代码是顺序执行，如果把loading结束的代码放在前面，那将一点作用都没有。所以结束的代码只能放在这里：

<script charset='utf-8' type='text/javascript' src='https://sakebow.gitee.io/cnblogs/blogskin/sakebow.min.js'></script>
<script>jQuery(function(){if ("interactive"==document.readyState) {$('#load').children('figure').children('img').attr('src', 'https://sakebow.gitee.io/images/miku/christmas.min.png').css('animation', 'none')$('#load').children('figure').children('figcaption').children('div').css('animation', 'none'),$('#load').children('figure').children('figcaption').text('COMPLETE!')$('#load').css('animation', 'fadeOutUp 1s 0.5s forwards')}sakebow().finish()
})</script>

咳咳，关于这段代码我说两句：

经过反复测试，只有当页面状态是interactive的时候才是加载完成的时机，很多教程所说的complete并不存在，至少在我的测试中并没有任何一次输出complete，只有interactive和loading。
我的sakebowjs小框架就只需要用script标签引入，然后加上let ljx = sakebow()就能使用。在finish()函数中封装了所有的函数，执行一个就是执行全部。是不是和jQuery非常相似？
如果你想自定义，当然可以。sakebowjs里面提供了merge函数。只不过因为还没做完，所以你现在能够自定义的部分还非常有限。目前仅能够使用这些字段：

属性表示	属性对应的标签	备注	可选的值
userImage	用户头像	可以不同于你系统中上传的头像	只能是在线图片，比如https://sakebow.gitee.io/images/miku/miku.min.png
consoleImage	在终端显示的图片	终端的图片一般不怎么能够被人发现，但是作为整个皮肤的彩蛋还是蛮不错的	同样只能是在线图片，不过请不要上传什么奇怪的图片
progressBar	进度条位置	采用了进度条取代了传统的滚动条	0-进度条和滚轮都没有 1-进度条在上方 2-进度条在右侧（默认）

这么一看是不是觉得少得可怜？抱歉啦，没有时间做完了。只能就这样给大家报告一下。

怎么应用修改？

原本我们用的是：

sakebow().finish()

把它改成：

let ljx = sakebow()
ljx.merge({'userImage': 'https://sakebow.gitee.io/images/avatars/-1be384f4fc7aad2a.jpg'
})
ljx.finish()

保存，点击自己的主页，就能够查看了！

当然，如果你觉得这些还不够，还想自己来点新的东西，那就继续加：

ljx.merge({'name': 'sakebow'
})

单纯的设置变量并不能起到什么作用，你还需要加上能够实现你目标的函数：

ljx.merge({'callMyName': function () {console.log(ljx.name)}
})

然后你也能实现你的小小梦想了！

一小点补充

刚刚我们把侧边栏空了出来。实际上你们把页首部分放在侧边栏部分，把页脚部分放在页首部分是一样的效果。只要能够保证你粘贴的两段代码的顺序不变就能正常运行。

最后

到目前为止基本上就是这些了，我还会找机会继续更新的。

首发是在博客园上，所以到现在已经有很多的修改建议了（目前主要是颜色太晃眼睛）。各位有什么新的修改建议也可以提出来，我在后续修改中会好好考虑的。

最后的最后，虽然有点晚了，也还是祝大家新年快乐！

这是我做的皮肤！就叫他sakebowUI了！相关推荐

跟我学做c#皮肤美化（二）
跟我学做c#皮肤美化(二) --Button控件的制作概述与导航这一篇的QLFUI按钮.zip 先来看看我们最终要做的效果图(分别对应普通.悬停.按下时的状态): 下面就开始正式做.首先让我们新建 ...
android 换肤探索（一）手把手做一个皮肤包
一.原理普通的开发时,如果要给一个View设置背景颜色,通常会这样 view.setBackgroundColor(context.getResources().getColor(R.color.b ...
做人体皮肤拿到这款笔刷，真的绝了好吧
在人体雕刻时你可能正在考虑添加什么细节?如何添加细节?
C# WINFORM 自定义窗体皮肤[转]
跟我学做c#皮肤美化(一) --概述与导航每每看着QQ,360等等那些软件漂亮的外衣时,你是不是总是在想我的软件什么时候才能穿上这么漂亮的外衣呢?不过现在当你看到这篇文章的时候不必再发出这样的疑问了 ...
Winform 自定义窗体皮肤组件
分享一个很久之前写的一个Winform换肤组件. 主要利用CBT钩子,NativeWindow来实现.可实现动态换皮肤插件修改窗体显示外观. 我们先定义一个自定义组件 using Skin; usin ...
srve0255e尚未定义要怎么办_皮肤干燥怎么办？四大方法帮你冬季补？
爱美之心人皆有之,尤其是女性朋友对美的追求更是无以言表,美在服装亮丽,美在皮肤青春.可是有很多的女性朋友却为自己的皮肤感到头疼,甚至有的在美容院浪费着大把的时间和金钱.对于皮肤最大的问题就是干燥,尤其 ...
React全家桶构建一款Web音乐App实战（九）：皮肤切换
这一节是这款React Web音乐App实战的最后一节:皮肤切换功能.皮肤切换是Web音乐App中一个与核心无关的功能,加入这个功能可以为应用增添不少趣味性实现思路实现皮肤切换功能的大致原理就是将 ...
deepin和UOS sunpinyin 皮肤添加
现在;deepin和uos的用户越来越多了,输入法也渐渐多了起来,但是本人还是喜欢自带的输入法,然后想到默认的输入法如何更换输入法皮肤呢,所以搜资料,然后找到了具体方法顺便收藏了几个朋友做的皮肤,下面 ...
[转]Flex 中的皮肤
Flex中的皮肤(一) 这里是第一篇,将讲述一下Flex中如何应用UI的皮肤,其实应用UI皮肤不难,你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看? 或者是想自已做个比较有特色的? ...

这是我做的皮肤！就叫他sakebowUI了！