总结一下,这套皮肤制作遇到的问题

先晒晒我们的小炮娘,刚玩adc那会儿就学小炮,为啥,应为小炮那个跳太远了,每次开团我都是第一个跳走的,以至于我们队很少团灭,都是我在保留火种,后来小炮换斜刘海了,就更喜欢了,可惜com域名被注册了,只能注册cn域名。
tristana.jpg

好尴尬,水印还在。最近几天突然想做一套皮肤,然后就开始干了,把之前的主题头部背景图去掉,导航条加阴影,右边的侧栏移一部分过来左边,首页改为瀑布流,修改差不多就是这样子了。哦,对了,底部加盖伦,防ddos攻击。
说说遇到的问题把

  1. typecho文档太少,或者我太菜,源码读不懂,官方文档也没说的很详细,要做首页下面那个加载按钮,通过ajax加载数据,本来想输出json(强迫症),前台读取json数据,在写到容器里,但是后端搞不定,不知道怎样获取这些数据,所以就直接输出html,然后插入到容器里面去。

    获取文章缩略图问题,本来想通过读取文章内容找到第一章图片,提取图片链接,又觉得这样很变扭,使用官方编辑器是使用markdown编辑器,通过什么函数可以获取处理后的数据,不是直接输出,都不清楚,看源码又看不懂就很蛋疼,最后通过获取预设的自定义变量获取图片,在后台使用iThumb插件,勉强算是解决这个问题(最近发现后台的iThumb插件好像有bug不能选取图片),没有略缩图的就使用默认的,从别人主题里挖来的几张图片,并设置了高度,这样看起来舒服点,但是代码乱的一塌糊涂,和学习php三个月的没什么区别。

    获取文章第一段,这个比较简单,找到文章内容,分割,跳过链接和图片,提取第一段,由于我使用的是默认的markdown,很顺利,目测使用第三方可视化编辑器会出现重大bug,也是有点蛋疼,还需要改改。

  2. 前端的瀑布流插件,开始使用Masonry插件,加载前可以正常使用,而且也很简单,但是通过ajax加载第二页数据的时候,不知道怎么刷新容器,应该是我点击数遍的姿势不对,所以换成了wookmark插件,加载完后刷新容器,根据图片加载完成的事件刷新整个容器,效率很低下,这部分应该重写,不过能用就先用。

  3. 代码很乱,无法掩盖菜鸟的事实,我一直都认为自己是后端,前端不是我应该做的事情,不过自己的博客还是想自己diy,自己学习js完全没人指导,甚至没有系统的学过,只是在需要的时候插入一两段js代码实现一点简单的功能,设置这个主题使用到的js都没有单独拿出来放一个文件上,感觉自己野生的一样,最近接触了一些前端的工具,才慢慢认识到自己的很渣,要做前端还需要学习很多东西。js是一门面向对象的语言,不同的是,js里面的所有东西都是对象,如何优雅的书写js代码,如何优雅的封装组件,这些都不是学会了语法就会的事情,也不是短时间就可以提升的,需要一点点积累。

  4. 各种屏幕分辨率的问题,第一次接触到bootstrap的时候,感觉这东西就是神器,我可以什么都不做它就帮我做好了,随便就可以做出看起来顺眼的界面(不写前端的人这样子想)。现在明白,bootstrap只是实现一些组件,网页还是要自己写。

    这里遇到一些小问题:就是命名问题,我一直强迫自己使用英文单词命名,半吊子的英语水平实在看不下去(上下学年英语都挂科),命名很乱,我自己都觉得乱,但是乱还是得写。

    bootstrap 3栅格系统.png

    借用一下bootstrap 3栅格系统参数的截图。我之前错误的认为栅格系统是基于父容器的,其实不是,bootstrap是基于屏幕尺寸的,我要实现三栏(文章页面),左边导航栏固定宽度,中间文章,右边一栏,左边导航栏基于窗口定位,使用栅格系统不好实现(可能可以实现,我不知道怎么做),所以自己写,根据这些参数,去实现过程中遇到了一些坑。个人认为自适应响应式存在区别,我使用的是在不同尺寸屏幕上加载不同css样式,也就是响应式,我把设备分成三种:电脑,平板,手机。其中平板和手机要考虑横屏和竖屏,手机忽略横屏,电脑屏幕尺寸也有区别。
    360x640.png
    768x1024.png
    800x1280.png
    1280x600.png
    1920x900.png
    我现在电脑用的是1080p显示器,窗口宽度可以达到1900+px,平板是8寸的寨板,横屏宽度是1280px,竖屏宽度800px,手机比较奇葩,我用m8屏幕也是1080,实际使用360x640,凭感觉桌面设备应该还有在1600px左右的一个分辨率,分辨率在1650上时候,文章页面会出现右边导航栏(最新文章那一块),在平板上的横屏时候,文章页隐藏右边导航栏,同时首页瀑布流变为两块,竖屏时候,左边导航栏宽度减小,文章内容区变大。手机上隐藏左侧导航栏和右侧导航栏,同时顶部的标签也会合并,出现一个菜单按钮(使用bootstrap组件),瀑布流变为一块。没有考虑手机横屏效果(没人这样子做)。测试只是做浏览器上简单模拟。同时发现UC与搜狗不支持flex(或者不完整支持)。

  5. 细节没有考虑,从小学就开始接受细节决定成败的观念,到现在还是没注意这些,比如下面的加载按钮,直接去网上拷贝代码,想着我按下去这东西会动就行,右下角的回顶部按钮,我就想圆形、鼠标放上去变手、大概黑色、加一箭头,能用就行,所以做的都很粗糙。这些都是需要改正的,不好的习惯。

总的来说,还是半吊子,没有自己专注的领域,结果什么都做不好,英语不会是硬伤,看文档只能看代码,马上就要开学了,说好的学习nodejs,由于中文文档少,进度一直卡着。