这个主题是是由默认的Landscape以及之前typecho用的主题改造而来,参照这个网站的主题制作的

暂且起名叫做Innocence吧,翻译过来是纯真的意思

我为什么制作这样一个主题

主要是因为翻了一下Hexo的官网,没找到自己特别喜欢又好用的,于是就决定自己做一个了

另一个原因是由于众所周知的原因,我们学校这学期不开学了,于是我这段时间都很无聊
然后五一放假也没什么事做,就稍微折腾了一下Hexo

制作过程的细节

主题的底层是Bootstrap3,一开始直接从Typecho的Material/YTheme主题复制来的,然后按照默认主题,修改为Hexo主题的的ejs格式

之后再去修改各种细节,加入其他的一些功能,其中参考了网络上的很多资料

踩坑记录

  • 导航栏要兼顾PC和移动端效果,然而关掉bootstrap自带的下拉菜单控制以后,自己绑定鼠标移动事件和点击事件在触摸屏上会引发奇怪的bug
    最终我选择为PC和移动端分别使用两个不同的导航栏

  • 侧边栏固定效果,我想要的效果是“向下滚动到侧边栏底部,就固定在底部;向上到顶就固定在顶部”
    放张图说明这个问题:
    VAVaP.png

    最开始使用了各种js插件,HC-Sticky、StickyKit都有一定的BUG
    后来尝试使用CSS的position: sticky,但是不知道是不是我设置的问题,这样只能让侧边栏永远固定在顶部(上图6的效果),而没有底部固定(上图3)的效果

    最终,还是用回了HC-Sticky(这也是某站的解决方案),使用CHEWX修改版HC-Sticky,还要在off时重置侧边栏宽度width: auto以在窗口缩放到移动设备界面时彻底关闭HC-Sticky
    BUG在于加载过程中如果sidebar的高度增加了,会导致排版混乱(覆盖footer)
    于是我把侧边栏唯一一个有图片的地方做成了固定高度

    当然,如果可以纯CSS解决这个问题,当然是最好的~

  • footer置底:为了在不提前知道height的情况下实现当窗口内容高度低于屏幕时,footer仍然停留在窗口底部,使用了flex布局
    然而在IE里有各种奇怪的bug,折腾了两天才搞定。具体是设置内含缩放后图片的flex containermin-height: 1px
    以及给html上一个只有在IE下生效的flex属性,来解决不识别bodymin-height: 100vh的问题(这是footer置底的实现原理)

    1
    2
    3
    4
    html {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    }

最后

如果发现了其他的bug,或者有什么建议,欢迎在评论区留言或者去Github提Issue~