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

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

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

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

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

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

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

  3. 各种屏幕分辨率的问题，第一次接触到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(或者不完整支持)。

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

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