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

绝地灬酷狼 2022-10-30 05:23 134阅读 0赞

### 文章目录 ###

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

# 导读 #

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

# 为什么是sakebowUI #

先放出预览地址：[我的博客园主页][Link 1]

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

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

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

## 小插曲 ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center][]

# 现在开发得怎么样了 #

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

![在这里插入图片描述][20210217233734347.jpg_pic_center]

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

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

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

# 这七天最难忘的事 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center 1][]

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

# 觉得亮点在哪 #

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center 2][]

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

# 怎么用皮肤 #

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

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

## 皮肤模板 ##

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

## 定制CSS ##

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

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

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

## 侧边栏代码 ##

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

## 页首HTML代码 ##

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

## 页脚HTML代码 ##

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

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

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

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

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

怎么应用修改？

原本我们用的是：

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)
      }
    })

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

## 一小点补充 ##

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

# 最后 #

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

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

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

[Link 1]: https://www.cnblogs.com/sakebow/p/14410204.html
[GitHub]: https://github.com/sakebow
[Link 2]: https://www.cnblogs.com/vvjiang
[Link 3]: https://gitee.com/vvjiang/cnblogs-skin
[BNDong]: https://www.cnblogs.com/bndong/
[SilenceUI]: https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/
[Link 4]: http://c.biancheng.net/view/5826.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/1bf02435c604470781d03f77fcaf44ff.png
[20210217233734347.jpg_pic_center]: /images/20221024/f9e5ca1df985471cb71ab36925f667ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/3112a43d024147ee8a336aa0eb158be9.png
[gitee]: https://gitee.com/sakebow/cnblogs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29yZGluYXJ5X2Jyb255_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/5a92af1d0580453daa7e879f1e35b634.png
[Link 5]: https://sakebow.gitee.io/cnblogs/blogskin/sakebow.min.css