样式优化

Author: kaeyleo

_layouts/post.html

@@ -4,7 +4,7 @@
 
 {% include header.html %}
 
-<header class="g-banner post-header {{ site.postPatterns | prepend: 'post-pattern-' }}" data-theme="{{ site.theme-color }}">
+<header class="g-banner post-header {{ site.postPatterns | prepend: 'post-pattern-' }} {{ site.theme-color | prepend: 'bgcolor-' }} {% unless page.cover %}post-no-cover{% endunless %}" data-theme="{{ site.theme-color }}">
     <div class="post-wrapper">
         <div class="post-tags">
             {% if page.tags.size > 0 %} 
@@ -102,7 +102,7 @@ <h2 class="post-subtitle">{{ page.subtitle }}</h2>
     socialShare('.social-share', {
         sites: [{% for i in site.social-share-items %}'{{ i }}',{% endfor %}],
         wechatQrcodeTitle: "分享到微信朋友圈",
-        wechatQrcodeHelper: '<p>扫码后点击右上角</p><p>将网页分享至朋友圈</p>'
+        wechatQrcodeHelper: '<p>扫码后点击右上角</p><p>将本文分享至朋友圈</p>'
     });
 </script>
 <script>

_posts/2010-05-01-淡.md

@@ -0,0 +1,15 @@
+---
+layout: post
+title:  "淡"
+date:   2010-05-01
+categories: 随笔
+tags: 生活
+
+---
+
+昨晚12点多才睡，拨动收音机无意中听见张学友的“吻别”，感觉在这种寂静的夜中是那么好听，回忆起太多人，太多的事。
+
+  时间总是过得如此之快，当与它擦肩而过后，就找不回了，只是简单的将它们似相片一页页翻阅，布满尘，岁月的斑驳。。。但很温馨。
+  
+  五月的第一天，天气不错，呆在家中很是闷不住，打算与父母出去买点东西，喜欢平平淡淡的生活。
+  

_posts/2010-09-11-此处。更新.md

@@ -0,0 +1,17 @@
+---
+layout: post
+title:  "此处。更新"
+date:   2010-09-11
+categories: 随笔
+tags: 生活
+
+---
+
+开通博客后，这个被我称之为窝的角落，已经呆了三年了，每一年都刻苦铭心的感受，在莫名中成长；自封“男子汉”，却时常能感受到脆弱的呐喊，可能这是成长中的一个扣环罢。如今三年的光影流逝而去，盛夏的婆娑，隐隐形容着我们。。。许多事物都已改变，而这则被我喻之为“更新”。
+
+  今天，再一次回到我的部落格，重新浏览了从前写的文字，每一篇的每个字都流露出许多感动，虽然这里一直清净，却能够使我倍感温暖。
+  
+  许多从前的文章早已被我删除在记忆的深处，从这里消失，却获得了一份礼物，名叫重温。更新是种改变，而我恰巧喜欢改变。多少年，身边的人，身边的物，不知多少被改变，那没被改变的，保留着的是生命的本真，无论真善还是真恶，都是种纯粹，所以自然就能够得到保留。
+  
+  相信，从这以后的多久会是另一种姿态，亦或是另一种改变与坚持，而此处的开头会一直写着：
+  此处已经更新。

_posts/2011-01-01-2011三两句.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title:  "2011三两句"
+date:   2011-01-01
+categories: 随笔
+tags: 生活
+
+---
+
+无人光临的部落格,依旧被我一人宠爱着. 今天翻阅日历时,才注意到时间似水般载我孤帆而去,而我却在一路颠簸中猛然想起无数过去式.
+
+又忆起从前的无奈,又将它们归根结底地算到时间头上,所以有一段时间”时间不够”成了我的口头禅、如今看来只是自我敷衍,自欺欺人地推托罢了…毫无意义. 
+
+今年的时光也将散去,悄无声息地,进入一个起名叫回忆的花园,虽是残花凋落,而唯独香是如故、被我拾起收藏在脑海,飘泊… 
+
+而今年最美的花却是以过去式命名的自己、感谢他让我爱上了音乐、多了一份梦想的执著和追求;也要感谢他让我拥有今年的逝去、因为我时常感到被时间束缚而苦苦挣扎,也以时间限制自由而无奈而悲哀…
+
+但是凡事都是相对而成的,正是因为有了限制才体现出了自由的存在、所以感谢今年的逝去…… 
+
+无论如何也要记住: 如今的日落定会是明日明媚阳光的征兆和希望;有了希望便也找得方向和梦想. 新的一年,新的期盼,而对梦想的执著和努力却一直不变、依然是 hard working !! ^_^!

_posts/2011-02-02-恩惠。.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title:  "恩惠。"
+date:   2011-02-02
+categories: 随笔
+tags: 生活
+
+---
+
+感谢父母的支持，出资购买录音和midi制作设备以及各种理论教材。对于我的家庭来说，这些支出不是小数目。我能做的就是物尽其用。
+
+然而物质毕竟是外在的，很多人作不好曲写不好歌就埋怨设备不好，其实怨天尤人是不必要的。如果连几十块钱的简单电脑麦都用不好，给你一个一百万的棚就会摆弄了？换句话说，你不用几十块钱的麦去尝试去探索弄出点东西来证明自己，谁来看好你？谁又愿意为你的棚买单？
+
+所以自己改变了些之前没有必要的想法。最近本预购的一款比较好的动圈麦也被放弃。而选择继续安心使用几十块钱的电脑麦。原因是我认为自身的实力还并未能够拥有配用这么好的麦的资格。至少这几十块钱的电脑麦比刚接触音乐所用的五块钱的麦效果好多了。去年前我就一直欢乐地使用着五块钱的麦，这就是为什么那些旧歌听起来很次的原因。
+
+这个假期结束后将是我要面对的一个重要阶段——中考，所以关于做音乐的一些想法只能暂时搁置一旁，待到暑期时再好好捣鼓一番。
+
+一年过去，原本以为自己已是质地柔软，能屈能伸。可是我们大都还是属于后者。能伸，大多数人都会认为伸比屈困难，因为伸需要费太多气力，然而事实却恰似相反。伸，老老实实地顺利便是，而屈则需主动退让，有这勇气来说服自己。。。想想能有几个？
+  
+ 。。。。。。
+ 
+关于能屈能伸，能软能硬，能长能短。。。诸如此类的话题也论此为止。
+
+不想再多想，话题是永无止境的，争论看来是永远解决不了的。大家也不必在这上面费太多时间和精力，能有时间就做做自己喜欢的事，别给社会添乱子也挺好。
+
+写到结尾才发现自己的思维早已是混乱不堪。。。一句话：
+ 
+关掉你的嘴，才是唯一的恩惠。

_posts/2015-12-26-原生js读写css样式.md

@@ -0,0 +1,127 @@
+---
+layout: post
+title:  "使用原生javascript读写CSS样式"
+date:   2015-12-26
+categories: 技术
+tags: javascript 前端开发
+---
+
+一说起操作css样式很多人都会想到jQuery的css方法：```$(selector).css(name)```，但是有思考过如何使用原生js来实现类似的功能么？
+
+大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了，但是这个方法只能获取和修改html文档中的内联样式，无法操作非内联样式（内部样式和外部样式表）。我通过搜索和整理，总结了使用原生js对css样式的读写实现。
+
+### 获取样式
+#### 1. dom style
+这个方法只能获取内联样式：
+
+{% highlight javascript %}
+
+var text = document.getElementById('text');
+var textColor = text.style.color;
+
+// 得到textColor的值为 '#000'
+
+{% endhighlight %}
+
+#### 2. currentStyle
+这个方法只适用于IE浏览器，在形式上与element.style相近，区别在于正如currentStyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的CSS属性值，包括了内部style标签里的样式和外部引入的css文件。
+
+用法：元素.currentStyle.属性
+
+比如我们要获取id为box的width：
+
+{% highlight javascript %}
+ 
+var boxWidth = document.getElementById('box').currentStyle.width;
+
+// 得到boxWidth的值为 '200px'
+
+{% endhighlight %}
+
+#### 3. getComputedStyle 
+getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，并且是只读的。
+
+在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari
+
+用法：getComputedStyle(元素, 伪类).属性，第二个参数如果不是伪类就设置为null吧。
+
+{% highlight javascript %}
+
+var el = document.getElementById("box");
+var style = window.getComputedStyle(el , ":after");
+
+{% endhighlight %}
+
+#### 来～封装一个通用的获取样式的函数
+为了适用于各大主流浏览器，我们来写一个函数：
+
+{% highlight javascript %}
+
+// 这个函数需要传递两个参数：元素对象和样式属性名称
+
+function getStyle(el, styleName) {
+
+    if( el.currentStyle ) {
+    
+        // for IE
+        return el.currentStyle[styleName];
+        
+    } else {
+    
+        // for peace
+        return getComputedStyle(el, false)[styleName];
+    }
+    
+}
+
+{% endhighlight %}
+
+接着调用这个函数来获取box的宽度：
+
+
+{% highlight javascript %}
+
+
+var box = document.getElementById("box");
+
+var boxWidth = getStyle(box, 'width');
+
+
+{% endhighlight %}
+
+这个函数并没有考虑到对伪类的相关操作，可以根据需要自行扩展～
+
+
+#### getComputedStyle与style的区别？
+既然都是获取样式属性的值，它们有啥区别呢：
+
+1. **只读与可写**
+
+	getComputedStyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。
+	
+2. **获取的对象范围**
+	> getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
+	
+*引用自——张鑫旭博客文章* 
+
+### 设置样式
+#### 1. dom style
+这个不用说了吧，比如把元素的背景颜色改为红色：
+
+{% highlight javascript %}
+
+var el = document.getElementById('box');
+el.style.backgroundColor = 'red';
+
+{% endhighlight %}
+
+#### 2. cssText属性
+cssText 的本质就是设置 HTML 元素的 style 属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表，去掉了包围属性和值的元素选择器的花括号。
+
+它的用法和innerHTML类似：
+```document.getElementById("d1").style.cssText = "color:red; font-size:13px;";```
+
+详细请参考： 
+[CSSRule.cssText - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText)
+
+

_posts/2016-01-05-git学习笔记.md

@@ -0,0 +1,63 @@
+---
+layout: post
+title:  "Git学习笔记"
+date:   2016-01-05
+categories: 技术
+tags: 工具 git
+
+---
+
+整理了实用的git命令
+
+### 下载安装
+去[Git - Downloads](https://git-scm.com/downloads)下载并安装，然后在终端输入命令 git 查看是否安装成功。
+
+
+### 常用命令
+
+#### 1. 创建本地项目版本库
+cd进入需要git的文件，通过``` git init ```命令把这个目录变成Git可以管理的仓库
+
+```
+$ git init
+```
+可以看到目录文件中多了一个.git文件夹，说明版本库创建成功了
+
+#### 2. 将文件添加并提交到版本库中
+> 当建好了仓库，就需要往里装货物了。
+
+新建一个index.html文件，然后将它添加到git版本库中
+
+```
+$ git add index.html
+```
+和上面一样没有任何提示，接着使用commit将刚才添加的文件提交到仓库
+
+```
+% git commit -m '提交index.html'
+```
+请在引号里填写提交注释
+
+如果修改了index.html里的内容，使用```git status```命令可以知道文件已被修改，且未被提交。想看具体修改了哪些内容可使用```git diff index.html```命令。
+
+#### 3. 把项目提交到远程仓库(Github)
+
+在此默认你已经在Github创建了版本仓库，地址是：https://github.com/kaeyleo/demo.git
+
+我们使用remote add命令在本地添加一个远程仓库
+
+```
+git remote add origin https://github.com/kaeyleo/demo.git
+```
+接下来把本地文件上传到远程仓库，就大功告成了。
+
+```
+git push -u origin master
+```
+
+以后需要提交到远程仓库就可以直接使用 ```git push``` 了。
+
+参考：
+
+- [常用 Git 命令清单](http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html)
+- [廖雪峰的Git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)