代码缩进调整

source/_posts/Java/Lamdba表达式(1).md

@@ -2,7 +2,7 @@
 title: Lamdba表达式(1)
 date: 2018-5-9 20:45:52
 categories: 
-	- Java
+  - Java
 ---
 
 `Lamdba表达式`是Java8的一项重要的新特性
@@ -22,31 +22,31 @@ Collections.sort(names, (o1,o2)->o1.compareTo(o2));
 等价于以下代码
 ```java
 Collections.sort(names, new Comparator<String>() {
-	@Override
-	public int compare(String o1, String o2) {
-		return o1.compareTo(o2);
-	}
+  @Override
+  public int compare(String o1, String o2) {
+    return o1.compareTo(o2);
+  }
 });
 ```
 也许下面的代码能更好地体现Lamdba表达式就是匿名类的另外一种写法
 ```java
 public class Main {
-	public static void main(String[] args) {
-		Demo d = ()->{return "aa";};
-		d.func();
-	}
+  public static void main(String[] args) {
+    Demo d = ()->{return "aa";};
+    d.func();
+  }
 }
 
 interface Demo {
-	public String func();
+  public String func();
 }
 ```
 ---
 #### Lamdba表达式语法
 ```java
 (Type1 param1, Type2 params,...,TypeN paramN) -> {
-	//若干语句...
-	return 表达式;
+  //若干语句...
+  return 表达式;
 }
 ```
 这是一般语法 , 也就是最完整的一种语法
@@ -56,15 +56,15 @@ interface Demo {
 1. 编译器可以根据上下文推断参数的类型 , 大多数情况下参数类型可以省略
 ```java
 (param1, params,...,paramN) -> {
-	//若干语句...
-	return 表达式;
+  //若干语句...
+  return 表达式;
 }
 ```
 2. 当参数只有一个 , 可以省略小括号
 ```java
 param -> {
-	//若干语句...
-	return 表达式;
+  //若干语句...
+  return 表达式;
 }
 ```
 3. 当方法中只包含一条语句 , 可以省略大括号 return 和 最后的分号

source/_posts/Java/Lamdba表达式(2)-Stream.md

@@ -2,7 +2,7 @@
 title: Lamdba表达式(2)-Stream
 date: 2018-5-9 20:46:13
 categories: 
-	- Java
+  - Java
 ---
 
 有了Lamdba表达式 , Java就具有了进行函数式编程的条件

source/_posts/Java/Maven(1)-初见.md

@@ -2,9 +2,9 @@
 title: Maven(1)-初见
 date: 2018-5-9 20:18:14
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 我们在工作中可能会在IDE当中有很多项目
@@ -59,29 +59,29 @@ categories:
 这里尝试引入几个jar包
 ```xml
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-	<modelVersion>4.0.0</modelVersion>
-	<groupId>maven_demo</groupId>
-	<artifactId>hello_maven</artifactId>
-	<version>0.0.1-SNAPSHOT</version>
+  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+  <groupId>maven_demo</groupId>
+  <artifactId>hello_maven</artifactId>
+  <version>0.0.1-SNAPSHOT</version>
 
-	<dependencies>
-		<dependency>
-			<groupId>junit</groupId>
-			<artifactId>junit</artifactId>
-			<version>3.8.2</version>
-		</dependency>
-		<dependency>
-			<groupId>mongo</groupId>
-			<artifactId>mongo-java-driver</artifactId>
-			<version>3.2.2</version>
-		</dependency>
-		<dependency>
-			<groupId>mongo</groupId>
-			<artifactId>morphia</artifactId>
-			<version>1.2.3</version>
-		</dependency>
-	</dependencies>
+  <dependencies>
+    <dependency>
+      <groupId>junit</groupId>
+      <artifactId>junit</artifactId>
+      <version>3.8.2</version>
+    </dependency>
+    <dependency>
+      <groupId>mongo</groupId>
+      <artifactId>mongo-java-driver</artifactId>
+      <version>3.2.2</version>
+    </dependency>
+    <dependency>
+      <groupId>mongo</groupId>
+      <artifactId>morphia</artifactId>
+      <version>1.2.3</version>
+    </dependency>
+  </dependencies>
 </project>
 ```
 

source/_posts/Java/Maven(2)-搭建web项目.md

@@ -2,9 +2,9 @@
 title: Maven(2)-搭建web项目
 date: 2018-5-9 20:25:23
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 在Maven当中创建一个web项目的步骤如下

source/_posts/Java/Maven(3)-从入门到重新入门.md

@@ -2,9 +2,9 @@
 title: Maven(3)-从入门到重新入门
 date: 2018-5-9 20:29:31
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 `Maven`是基于项目对象模型 ( POM ) , 可以通过描述信息来管理项目的构建 报告 和文档的软件项目管理工具

source/_posts/Java/Maven(4)-补充.md

@@ -2,9 +2,9 @@
 title: Maven(4)-补充
 date: 2018-5-9 20:29:31
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 maven默认使用的JDK版本是1.5 , 我们可以在配置文件中`<profiles>`标签里加入如下内容 , 将默认JDK改为1.8
@@ -35,15 +35,15 @@ maven默认使用的JDK版本是1.5 , 我们可以在配置文件中`<profiles>`
 那么我们可以将C排除
 ```xml
 <dependency>
-	<groupId>B-group</groupId>
-	<artifactId>B</artifactId>
-	<version>1.0</version>
-	<exclusions>
-		<exclusion>
-			<groupId>C-group</groupId>
-			<artifactId>C</artifactId>
-		</exclusion>
-	</exclusions>
+  <groupId>B-group</groupId>
+  <artifactId>B</artifactId>
+  <version>1.0</version>
+  <exclusions>
+    <exclusion>
+      <groupId>C-group</groupId>
+      <artifactId>C</artifactId>
+    </exclusion>
+  </exclusions>
 </dependency>
 ```
 这样就可以把对C的依赖排除
@@ -66,7 +66,7 @@ maven在处理这种冲突的时候 , 有以下的原则
 比如
 ```xml
 <properties>
-	<spring-version>4.3.11.RELEASE</spring-version>
+  <spring-version>4.3.11.RELEASE</spring-version>
 </properties>
 ...
 <dependencies>

source/_posts/Java/Maven(5)-jetty-plugin.md

@@ -2,9 +2,9 @@
 title: Maven(5)-jetty-plugin
 date: 2018-5-9 20:32:31
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 与tomcat类似 , jetty也是一个servlet容器 , 为例如jsp和servlet提供运行环境
@@ -21,17 +21,17 @@ categories:
 <build>
 ...
 <plugins>
-	<plugin>
-		<groupId>org.eclipse.jetty</groupId>
-		<artifactId>jetty-maven-plugin</artifactId>
-		<version>9.4.7.RC0</version>
-		<configuration>
-			<jettyXml>jetty.xml</jettyXml>
-			<webAppSourceDirectory>src/main/webapp</webAppSourceDirectory>
-			<scanIntervalSeconds>3</scanIntervalSeconds>
-			<contextPath>/</contextPath>
-		</configuration>
-	</plugin>
+  <plugin>
+    <groupId>org.eclipse.jetty</groupId>
+    <artifactId>jetty-maven-plugin</artifactId>
+    <version>9.4.7.RC0</version>
+    <configuration>
+      <jettyXml>jetty.xml</jettyXml>
+      <webAppSourceDirectory>src/main/webapp</webAppSourceDirectory>
+      <scanIntervalSeconds>3</scanIntervalSeconds>
+      <contextPath>/</contextPath>
+    </configuration>
+  </plugin>
 </plugins>
 ...
 </build>

source/_posts/Java/Maven(6)-可运行jar打包.md

@@ -2,9 +2,9 @@
 title: Maven(6)-可运行jar打包
 date: 2018-5-9 20:42:27
 tags: 
-	- maven
+  - maven
 categories: 
-	- Java
+  - Java
 ---
 
 要让jar包是可运行的
@@ -20,24 +20,24 @@ pom.xml
 <build>
 <plugins>
 <plugin>
-	<groupId>org.apache.maven.plugins</groupId>
-	<artifactId>maven-shade-plugin</artifactId>
-	<version>3.1.1</version>
-	<executions>
-		<execution>
-			<phase>package</phase>
-			<goals>
-					<goal>shade</goal>
-			</goals>
-			<configuration>
-				<transformers>
-					<transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
-						<mainClass>com.main.Main</mainClass>
-					</transformer>
-				</transformers>
-			</configuration>
-		</execution>
-	</executions>
+  <groupId>org.apache.maven.plugins</groupId>
+  <artifactId>maven-shade-plugin</artifactId>
+  <version>3.1.1</version>
+  <executions>
+    <execution>
+      <phase>package</phase>
+      <goals>
+          <goal>shade</goal>
+      </goals>
+      <configuration>
+        <transformers>
+          <transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
+            <mainClass>com.main.Main</mainClass>
+          </transformer>
+        </transformers>
+      </configuration>
+    </execution>
+  </executions>
 </plugin>
 ...
 <plugins>

source/_posts/Java/自增的线程安全问题.md

@@ -2,9 +2,9 @@
 title: 自增的线程安全问题
 date: 2018-5-9 20:48:56
 tags: 
-	- 线程
+  - 线程
 categories: 
-	- Java
+  - Java
 ---
 
 Java中的 `i++` 操作也是有可能存在线程安全问题的
@@ -18,42 +18,42 @@ Java中的 `i++` 操作也是有可能存在线程安全问题的
 private static int num = 0;
 
 private static void cnt() {
-	for(int i=0 ; i<100 ; i++) {
-		num ++;
-	}
+  for(int i=0 ; i<100 ; i++) {
+    num ++;
+  }
 }
 
 public static void main(String[] args) {
-	List<Thread> thList = new ArrayList<Thread>();
-	
-	for(int i=0 ; i<10 ; i++) {
-		Thread thread = new Thread(){
-			@Override
-			public void run() {
-				try {
-					//由于自增操作的运算速度要远快于创建和启动线程
-					//执行一个等待去保证所有的子线程都构造完成以后再执行自增操作
-					Thread.sleep(100);
-				} catch (InterruptedException e) {
-					e.printStackTrace();
-				}
-				cnt();
-			}
-		};
-		thread.start();
-		thList.add(thread);
-	}
-	while(true) {
-		boolean flag = true;
-		//判断是否所有子线程都已结束
-		for(Thread thread : thList) {
-			flag = flag && !thread.isAlive();
-		}
-		if(flag) {
-			break;
-		}
-	}
-	System.out.println(num);
+  List<Thread> thList = new ArrayList<Thread>();
+  
+  for(int i=0 ; i<10 ; i++) {
+    Thread thread = new Thread(){
+      @Override
+      public void run() {
+        try {
+          //由于自增操作的运算速度要远快于创建和启动线程
+          //执行一个等待去保证所有的子线程都构造完成以后再执行自增操作
+          Thread.sleep(100);
+        } catch (InterruptedException e) {
+          e.printStackTrace();
+        }
+        cnt();
+      }
+    };
+    thread.start();
+    thList.add(thread);
+  }
+  while(true) {
+    boolean flag = true;
+    //判断是否所有子线程都已结束
+    for(Thread thread : thList) {
+      flag = flag && !thread.isAlive();
+    }
+    if(flag) {
+      break;
+    }
+  }
+  System.out.println(num);
 }
 ```
 以上程序的执行结果多数情况都不是1000 , 虽然num++确实被执行了1000次
@@ -88,7 +88,7 @@ inited = true;//语句2
 
 //线程B
 while(!inited) {
-	sleep();
+  sleep();
 }
 doSomething(context);
 ```
@@ -137,11 +137,11 @@ private static int num = 0;
 private static Object obj = new Object();
 
 private static void cnt() {
-	for(int i=0 ; i<100 ; i++) {
-		synchronized (obj) {
-			num ++;
-		}
-	}
+  for(int i=0 ; i<100 ; i++) {
+    synchronized (obj) {
+      num ++;
+    }
+  }
 }
 ```
 + 使用ReentrantLock
@@ -150,11 +150,11 @@ private static int num = 0;
 private static ReentrantLock objLock = new ReentrantLock();
 
 private static void cnt() {
-	for(int i=0 ; i<100 ; i++) {
-		objLock.lock();
-		num ++;
-		objLock.unlock();
-	}
+  for(int i=0 ; i<100 ; i++) {
+    objLock.lock();
+    num ++;
+    objLock.unlock();
+  }
 }
 ```
 
@@ -165,11 +165,11 @@ private static void cnt() {
 调用这个类中的可用方法进行自增操作 , 可以保证线程安全
 ```java
 private static AtomicInteger num = new AtomicInteger(0);
-	
+  
 private static void cnt() {
-	for(int i=0 ; i<100 ; i++) {
-		num.getAndIncrement();//以原子方式获取并且自增1
-	}
+  for(int i=0 ; i<100 ; i++) {
+    num.getAndIncrement();//以原子方式获取并且自增1
+  }
 }
 ```
 >传统的锁机制需要陷入内核态，造成上下文切换，但是一般持有锁的时间很短，频繁的陷入内核开销太大，所以随着机器硬件支持CAS后，JAVA推出基于compare and set机制的AtomicInteger，实际上就是一个CPU循环忙等待。因为持有锁时间一般较短，所以大部分情况CAS比锁性能更优。

source/_posts/JavaScript/函数形参与arguments.md

@@ -2,10 +2,10 @@
 title: 函数形参与arguments
 date: 2018-4-14 00:28:25
 tags: 
-	- JavaScript
-	- 函数
+  - JavaScript
+  - 函数
 categories: 
-	- JavaScript
+  - JavaScript
 ---
 
 在之前我们知道 , 在JS当中函数的形参与调用时传入的实参并不需要必须对应
@@ -19,14 +19,14 @@ categories:
 调用时对于没有对应到实参的形参进行赋值
 ```javascript
 function func1(arg0, arg1) {
-	arg1 = 10;
-	console.log(arg1, arguments[1]);
+  arg1 = 10;
+  console.log(arg1, arguments[1]);
 }
 func1(19);// 10 undefined
 
 function func2(arg0, arg1) {
-	arguments[1] = 10;
-	console.log(arg1, arguments[1]);
+  arguments[1] = 10;
+  console.log(arg1, arguments[1]);
 }
 func2(21);// undefined 10
 ```
@@ -36,14 +36,14 @@ func2(21);// undefined 10
 形参与实参有对应的情况
 ```javascript
 function func1(arg0) {
-	arg0 = 10;
-	console.log(arg0, arguments[0]);
+  arg0 = 10;
+  console.log(arg0, arguments[0]);
 }
 func1(19);// 10 10
 
 function func2(arg0) {
-	arguments[0] = 10;
-	console.log(arg0, arguments[0]);
+  arguments[0] = 10;
+  console.log(arg0, arguments[0]);
 }
 func2(21);// 10 10
 ```
@@ -54,26 +54,26 @@ func2(21);// 10 10
 ```javascript
 "use strict";
 function func1(arg0) {
-	arg0 = 10;
-	console.log(arg0, arguments[0]);
+  arg0 = 10;
+  console.log(arg0, arguments[0]);
 }
 func1(19);// 10 19
 
 function func2(arg0) {
-	arguments[0] = 10;
-	console.log(arg0, arguments[0]);
+  arguments[0] = 10;
+  console.log(arg0, arguments[0]);
 }
 func2(21);// 21 10
 
 function func3(arg0) {
-	arguments[0] = 10;
-	console.log(arg0, arguments[0]);
+  arguments[0] = 10;
+  console.log(arg0, arguments[0]);
 }
 func3();// undefined 10
 
 function func4(arg0) {
-	arg0 = 10;
-	console.log(arg0, arguments[0]);
+  arg0 = 10;
+  console.log(arg0, arguments[0]);
 }
 func4();// 10 undefined
 ```

source/_posts/JavaScript/变量的定义提升.md

@@ -2,10 +2,10 @@
 title: 变量的定义提升
 date: 2018-4-14 00:30:18
 tags: 
-	- JavaScript
-	- 函数
+  - JavaScript
+  - 函数
 categories: 
-	- JavaScript
+  - JavaScript
 ---
 
 

source/_posts/JavaScript/实现bind方法.md

@@ -2,10 +2,10 @@
 title: 实现bind方法
 date: 2018-4-14 00:35:19
 tags: 
-	- JavaScript
-	- prototype
+  - JavaScript
+  - prototype
 categories: 
-	- JavaScript
+  - JavaScript
 ---
 
 
@@ -19,11 +19,11 @@ func.bind(thisArg [,arg1[,arg2[, ...]]])
 **应用示例 :** 
 ```javascript
 var obj = {
-	name : "Sookie",
-	show : function() {
-		console.log(this.name);
-		console.log(arguments);
-	}
+  name : "Sookie",
+  show : function() {
+    console.log(this.name);
+    console.log(arguments);
+  }
 }
 var _show = obj.show.bind(obj,"aa","bb");
 _show("cc");
@@ -35,16 +35,16 @@ Sookie
 如果要实现一个bind方法 , 需要用到柯里化
 ```javascript
 Function.prototype.bind = function(context) {
-	var me = this;//调用bind的函数对象
-	var args = Array.prototype.slice.call(arguments, 1);//传入的固定实参
-	return function () {
-		//实际调用时传入的参数
-		var innerArgs = Array.prototype.slice.call(arguments);
-		//合并两个参数数组
-		var finalArgs = args.concat(innerArgs);
-		//调用该函数
-		return me.apply(context, finalArgs);
-	}
+  var me = this;//调用bind的函数对象
+  var args = Array.prototype.slice.call(arguments, 1);//传入的固定实参
+  return function () {
+    //实际调用时传入的参数
+    var innerArgs = Array.prototype.slice.call(arguments);
+    //合并两个参数数组
+    var finalArgs = args.concat(innerArgs);
+    //调用该函数
+    return me.apply(context, finalArgs);
+  }
 }
 ```
 这里解释一下 , arguments并不是数组对象 , 而是**类数组**
@@ -64,7 +64,7 @@ var args = Array.prototype.slice.call(arguments);
 ( 可能是出于兼容性的需要 , 比如旧版本的标准库当中无此函数 )
 ```javascript
 Function.prototype.bind = Function.prototype.bind || function(context) {
-	//...
+  //...
 }
 ```
 这属于一个加分项
@@ -82,6 +82,6 @@ Function.prototype.bind = Function.prototype.bind || function(context) {
 由于需要调用bind方法的一定是一个函数 , 所以有必要在bind的内部做一个校验
 ```javascript
 if(typeof this !== "function") {
-	throw new TypeError("what is trying to be bound is not callable");
+  throw new TypeError("what is trying to be bound is not callable");
 }
 ```

source/_posts/JavaScript/实现call方法.md

@@ -2,10 +2,10 @@
 title: 实现call方法
 date: 2018-4-14 00:56:44
 tags: 
-	- JavaScript
-	- prototype
+  - JavaScript
+  - prototype
 categories: 
-	- JavaScript
+  - JavaScript
 ---
 
 > call方法在使用一个指定的this值和若干个指定参数值的前提下调用某个函数
@@ -13,10 +13,10 @@ categories:
 常规调用方式
 ```javascript
 var obj = {
-	name : "Sookie",
-	func : function(msg) {
-		console.log(this.name + " : " + msg);
-	}
+  name : "Sookie",
+  func : function(msg) {
+    console.log(this.name + " : " + msg);
+  }
 }
 var fn1 = obj.func;
 fn1.call(obj, "Hello");
@@ -27,9 +27,9 @@ fn1.call(obj, "Hello");
 #### 雏形
 ```javascript
 Function.prototype.call2 = function(context) {
-	context.fn = this;
-	context.fn();
-	delete context.fn;
+  context.fn = this;
+  context.fn();
+  delete context.fn;
 }
 ```
 初步实现了不传参情况下的函数调用
@@ -42,13 +42,13 @@ Function.prototype.call2 = function(context) {
 
 ```javascript
 Function.prototype.call2 = function(context) {
-	context.fn = this;
-	var args = [];
-	for(let i=1 ; i<arguments.length ; i++) {
-		args.push("arguments[" + i + "]");
-	}
-	eval("context.fn(" + args + ")");
-	delete context.fn;
+  context.fn = this;
+  var args = [];
+  for(let i=1 ; i<arguments.length ; i++) {
+    args.push("arguments[" + i + "]");
+  }
+  eval("context.fn(" + args + ")");
+  delete context.fn;
 };
 ```
 比如实际调用函数的时候需要传入2个参数 , 包括前面的context , 所以arguments当中就有3个元素
@@ -64,23 +64,23 @@ context.fn(arguments[1], arguments[2])
 可以预先把这个对象保存下来
 ```javascript
 Function.prototype.call2 = function(context) {
-	var _fn = null;
-	var flag = false;
-	if("fn" in context) {
-		_fn = context.fn;
-	}
-	_fn = context.fn;
-	context.fn = this;
-	var args = [];
-	for(let i=1 ; i<arguments.length ; i++) {
-		args.push("arguments[" + i + "]");
-	}
-	var result = eval("context.fn(" + args + ")");
-	if(flag) {
-		context.fn = _fn;
-	} else {
-		delete context.fn;
-	}
-	return result;
+  var _fn = null;
+  var flag = false;
+  if("fn" in context) {
+    _fn = context.fn;
+  }
+  _fn = context.fn;
+  context.fn = this;
+  var args = [];
+  for(let i=1 ; i<arguments.length ; i++) {
+    args.push("arguments[" + i + "]");
+  }
+  var result = eval("context.fn(" + args + ")");
+  if(flag) {
+    context.fn = _fn;
+  } else {
+    delete context.fn;
+  }
+  return result;
 };
 ```

source/_posts/git/Git(1)-初见.md

@@ -2,10 +2,10 @@
 title: Git(1)-初见
 date: 2018-4-18 02:35:13
 tags: 
-	- git
-	- 版本控制
+  - git
+  - 版本控制
 categories: 
-	- Git
+  - Git
 ---
 
 

source/_posts/git/Git(2)-基础操作.md

@@ -2,10 +2,10 @@
 title: Git(2)-基础操作
 date: 2018-4-18 08:22:13
 tags: 
-	- git
-	- 版本控制
+  - git
+  - 版本控制
 categories: 
-	- Git
+  - Git
 ---
 
 

source/_posts/git/Git(3)-分支.md

@@ -2,10 +2,10 @@
 title: Git(3)-分支
 date: 2018-4-18 09:20:13
 tags: 
-	- git
-	- 版本控制
+  - git
+  - 版本控制
 categories: 
-	- Git
+  - Git
 ---
 
 ### 分支操作

source/_posts/git/Git(4)-远程仓库.md

@@ -2,10 +2,10 @@
 title: Git(4)-远程仓库
 date: 2018-4-19 00:20:13
 tags: 
-	- git
-	- 版本控制
+  - git
+  - 版本控制
 categories: 
-	- Git
+  - Git
 ---
 
 在多人的协作开发当中 , 我们需要一个公共的远程库 , 每个人都可以从远程库把项目clone到自己的电脑上进行开发 , 之后把自己编写的代码推送到远程库

source/_posts/linux/1.1、linux常用命令与技巧(1).md

@@ -3,7 +3,7 @@ title: 1.1、linux常用命令与技巧(1)
 date: 2018-5-3 00:52:22
 tags: linux
 categories: 
-	- linux
+  - linux
 ---
 
 ### md5sum与sha1sum

source/_posts/linux/2.0、shell编程(1)-初见.md

@@ -2,10 +2,10 @@
 title: 2.0、shell编程(1)-初见
 date: 2018-5-5 22:38:32
 tags: 
-	- linux
-	- shell
+  - linux
+  - shell
 categories: 
-	- linux
+  - linux
 ---
 
 `shell`俗称为**壳** , 是指提供使用者使用界面的软件

source/_posts/linux/2.1、shell编程(2)-从入门到重新入门.md

@@ -2,10 +2,10 @@
 title: 2.1、shell编程(2)-从入门到重新入门
 date: 2018-5-5 00:52:22
 tags: 
-	- linux
-	- shell
+  - linux
+  - shell
 categories: 
-	- linux
+  - linux
 ---
 
 ### 传参

source/_posts/linux/2.2、shell编程(3)-流程控制与函数.md

@@ -2,10 +2,10 @@
 title: 2.2、shell编程(3)-流程控制与函数
 date: 2018-5-6 00:52:22
 tags: 
-	- linux
-	- shell
+  - linux
+  - shell
 categories: 
-	- linux
+  - linux
 ---
 
 ### 判断

source/_posts/linux/2.3、shell(4)-使用技巧.md

@@ -2,10 +2,10 @@
 title: 2.3、shell(4)-使用技巧
 date: 2018-5-6 00:52:25
 tags: 
-	- linux
-	- shell
+  - linux
+  - shell
 categories: 
-	- linux
+  - linux
 ---
 
 #### 判断上一条命令执行是否成功

source/_posts/linux/3.1、Docker(1)-初见.md

@@ -2,10 +2,10 @@
 title: 3.1、Docker(1)-初见
 date: 2018-5-8 22:38:32
 tags: 
-	- linux
-	- docker
+  - linux
+  - docker
 categories: 
-	- linux
+  - linux
 ---
 
 **程序部署运维的痛点**

source/_posts/linux/3.2、Docker(2)-使用技巧.md

@@ -2,10 +2,10 @@
 title: 3.2、Docker(2)-使用技巧
 date: 2018-5-9 22:38:32
 tags: 
-	- linux
-	- docker
+  - linux
+  - docker
 categories: 
-	- linux
+  - linux
 ---
 
 ### 与宿主机共享网络

source/_posts/linux/3.3、Docker(3)-WordPress部署实践.md

@@ -2,10 +2,10 @@
 title: 3.3、Docker(3)-部署wordpress实践
 date: 2018-5-10 22:38:32
 tags: 
-	- linux
-	- docker
+  - linux
+  - docker
 categories: 
-	- linux
+  - linux
 ---
 站在 Docker 的角度，软件就是容器的组合：业务逻辑容器、数据库容器、储存容器、队列容器......Docker 使得软件可以拆分成若干个标准化容器，然后像搭积木一样组合起来。
 

source/_posts/linux/opencv编译安装.md

@@ -0,0 +1,122 @@
+---
+title: opencv编译安装
+date: 2018-5-10 09:24:53
+tags: 
+  - linux
+  - opencv
+categories: 
+  - linux
+---
+
+### 依赖库安装
+
+#### ubuntu系统
+```bash
+apt-get install build-essential
+apt-get install cmake libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev
+apt-get install python-dev python-numpy libtbb2 libtbb-dev  libjasper-dev libdc1394-22-dev
+```
+(上面大部分的库ubuntu都自带的 , 安装有问题就跳过)
+如果需要用java开发
+则需要安装ant
+apt-get install ant
+<!-- more -->
+
+#### centos系统
+```bash
+yum -y install epel-release
+yum install gcc gcc-c++  
+yum install cmake  
+yum install python-devel numpy  
+yum install gtk2-devel  
+yum install libdc1394-devel  
+yum install libv4l-devel  
+yum install gstreamer-plugins-base-devel 
+```
+如果需要用java开发
+则需要安装ant
+```bash
+yum install ant
+```
+创建install-ffmpeg.sh
+授权chmod +x install-ffmpeg.sh
+并执行./install-ffmpeg.sh
+内容如下
+```bash
+sudo rpm –import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7 
+yum repolist 
+sudo rpm –import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro 
+sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm 
+yum repolist 
+yum update -y 
+yum install -y ffmpeg 
+ffmpeg -version
+```
+yum install ffmpeg-devel
+
+### 编译与安装
+> 注意 : 上面在安装ant的过程 , 会自动安装`openjdk-jre`
+但是此时只有jre , 没有jdk , 要编译出java程序可用的jar包和原生库 , 必须有jdk才行
+通过apt安装openjdk的jdk可以 , 下载oracle的jdk也可以 , 不过后者需要手动加入到环境变量
+
+```bash
+mkdir build
+mkdir install
+cd build
+cmake -D CMAKE_BUILD_TYPE=Release -D CMAKE_INSTALL_PREFIX=/root/opencv-3.4.1/install -DBUILD_TESTS=OFF ..
+make && make install
+```
+> 如果ANT和JNI都有值的话就没问题 , JNI没有值的话可能是因为没装jdk , 或者没有加入环境变量PATH当中
+编译也不会报错 , 只不过编译后不会生成jar包和opencv_java341.so的原生库
+CMAKE_INSTALL_PREFIX表示安装的目标位置
+
+如果执行过程中
+`ippicv_2017u3_lnx_intel64_general_20170822.tgz`
+下载过慢或失败
+可以手动下载这个包放到.cache/ippicv目录下
+文件名需要加上md5 ( 可以使用md5sum命令得到 )
+也就是
+4e0352ce96473837b1d671ce87f17359-ippicv_2017u3_lnx_intel64_general_20170822.tgz
+
+### java调用C/C++模块
+#### linux
+程序运行前需要添加环境变量
+```bash
+export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/native
+```
+(就是编译后的安装目录里面lib(或者是lib64)当中所有.so文件 以及libopencv_java341.so 都放在该目录下)
+之后创建并执行如下shell脚本
+```bash
+native_folder=/usr/local/native
+for so_file in ${native_folder}/*
+do
+  file_name=`basename ${so_file}`
+  if [ ${file_name} = "libopencv_java341.so" ];then
+    continue
+  fi
+  `ln -s ${so_file} ${so_file}.3.4`
+  echo "已创建软连接${so_file}.3.4"
+done
+```
+native_folder就是放置.so文件的目录 , 根据实际情况而定
+
+#### windows
+需要把`opencv_java341.dll`文件放到`%JAVA_HOME%/jre/bin`里面
+
+### maven本地安装jar包
+要在maven项目当中引入这个jar包使用 , 并且保证打包过程正确加入这个jar包
+可以手动安装到本地maven仓库
+```
+mvn install:install-file -Dfile=opencv-341.jar -DgroupId=org.opencv -DartifactId=opencv -Dversion=3.4.1 -Dpackaging=jar
+```
+当然也可以选择不安装到本地仓库
+而是直接放进项目里面 , 比如说放在了项目里的lib目录下
+```xml
+<dependency>  
+  <groupId>org.opencv</groupId>
+  <artifactId>opencv</artifactId>
+  <version>3.4.1</version>
+  <scope>system</scope>
+  <systemPath>${pom.basedir}/lib/opencv-341.jar</systemPath>
+</dependency>
+```

source/_posts/前端杂烩/CSS中的字体.md

@@ -2,10 +2,10 @@
 title: CSS中的字体
 date: 2018-4-7 10:55:37
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 在CSS当中 , 我们通常使用`@font-face`来定义字体
@@ -13,11 +13,11 @@ categories:
 比如
 ```css
 @font-face {
-	font-family : YH;
-	src : local("microsoft yahei");
+  font-family : YH;
+  src : local("microsoft yahei");
 }
 .font {
-	font-family:YH;
+  font-family:YH;
 }
 ```
 这样我们就可以在需要使用这个字体的地方直接使用这个别名
@@ -28,9 +28,9 @@ categories:
 然而在Mac系统当中没有微软雅黑字体 , 我们希望在Mac系统上使用苹方字体 , windows系统上使用微软雅黑字体
 ```css
 @font-face {
-	font-family : BASE;
-	src: local("PingFang SC"),
-		local("Microsoft Yahei");
+  font-family : BASE;
+  src: local("PingFang SC"),
+    local("Microsoft Yahei");
 }
 ```
 这样字体的应用就更加简便了

source/_posts/前端杂烩/CSS布局(1).md

@@ -2,17 +2,17 @@
 title: CSS布局(1)
 date: 2018-5-14 22:38:32
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 #### 常用的居中方法
 1. **水平居中**
 ```xml
 <div class="parent">
-	<div class="child"></div>
+  <div class="child"></div>
 </div>
 ```
 对于子元素的不同情况 , 需要进行不同的处理
@@ -25,8 +25,8 @@ categories:
 >  使用flex布局 , 对父元素设置
 ```css
 .parent {
-	display : flex;
-	justify-content : center;
+  display : flex;
+  justify-content : center;
 }
 ```
 
@@ -38,16 +38,16 @@ categories:
 例如
 ```html
 <div class="parent">
-	<p>123456</p>
-	<p>123456</p>
-	<p>123456</p>
+  <p>123456</p>
+  <p>123456</p>
+  <p>123456</p>
 </div>
 <style>
 .parent {
-	height:200px;
-	width:300px;
-	display:table-cell;
-	vertical-align:middle;
+  height:200px;
+  width:300px;
+  display:table-cell;
+  vertical-align:middle;
 }
 </style>
 ```
@@ -56,8 +56,8 @@ categories:
 > 使用flex布局 , 父元素
 ```css
 .parent {
-	display:flex;
-	align-items:center;
+  display:flex;
+  align-items:center;
 }
 ```
 ---
@@ -66,27 +66,27 @@ categories:
 第一种布局方式DOM结构
 ```html
 <div class="layout">
-	<div class="header">头部</div>
-	<div class="content">内容</div>
-	<div class="footer">尾部</div>
+  <div class="header">头部</div>
+  <div class="content">内容</div>
+  <div class="footer">尾部</div>
 </div>
 ```
 第二种布局方式DOM结构
 ```html
 <div class="header">
-	<div class="layout">头部</div>
+  <div class="layout">头部</div>
 </div>
 <div class="layout content">内容</div>
 <div class="footer">
-	<div class="layout">尾部</div>
+  <div class="layout">尾部</div>
 </div>
 ```
 
 样式
 ```css
 .layout {
-	max-width:960px;
-	margin:0 auto;
+  max-width:960px;
+  margin:0 auto;
 }
 ```
 ---
@@ -98,29 +98,29 @@ categories:
 DOM结构
 ```xml
 <div class="content">
-	<div class="sub">侧边栏1</div>
-	<div class="extra">侧边栏2</div>
-	<div class="main">内容区域</div>
+  <div class="sub">侧边栏1</div>
+  <div class="extra">侧边栏2</div>
+  <div class="main">内容区域</div>
 </div>
 ```
 CSS样式
 ```css
 .sub,.extra,.main {
-	height : 300px;
+  height : 300px;
 }
 .sub {
-	width : 100px;
-	float : left;
-	background-color: pink;
+  width : 100px;
+  float : left;
+  background-color: pink;
 }
 .extra {
-	width : 200px;
-	float : right;
-	background-color: green;
+  width : 200px;
+  float : right;
+  background-color: green;
 }
 .main {
-	margin:0 200px 0 100px;
-	background-color: blue;
+  margin:0 200px 0 100px;
+  background-color: blue;
 }
 ```
 实际效果如下
@@ -134,25 +134,25 @@ CSS样式
 3. 内容区域设置左外边距和右外边距
 ```css
 .sub,.extra,.main {
-	height : 300px;
+  height : 300px;
 }
 .sub,.extra {
-	position: absolute;
-	top : 0;
-	width : 200px;
+  position: absolute;
+  top : 0;
+  width : 200px;
 }
 .sub {
-	left : 0;
-	background-color: pink;
+  left : 0;
+  background-color: pink;
 }
 .extra {
-	right : 0;
-	background-color: green;
+  right : 0;
+  background-color: green;
 }
 
 .main {
-	margin:0 200px;
-	backgroun-color: blue;
+  margin:0 200px;
+  backgroun-color: blue;
 }
 ```
 > 如果中间栏有最小宽度限制 , 或者其中包含有宽度的元素 , 那么当窗口宽度压缩到一定程度 , 中间栏与侧栏将会发生重叠
@@ -162,9 +162,9 @@ CSS样式
 DOM结构
 ```xml
 <div id="content">
-	<div class="main">内容区域</div>
-	<div class="sub">侧边栏1</div>
-	<div class="extra">侧边栏2</div>
+  <div class="main">内容区域</div>
+  <div class="sub">侧边栏1</div>
+  <div class="extra">侧边栏2</div>
 </div>
 ```
 布局步骤:
@@ -178,29 +178,29 @@ DOM结构
 CSS样式
 ```css
 .sub , .extra, .main {
-	float :left;
-	height : 300px;
+  float :left;
+  height : 300px;
 }
 .main {
-	width : 100%;
-	background-color: red;
+  width : 100%;
+  background-color: red;
 }
 .sub {
-	width : 100px;
-	margin-left: -100%;
-	position: relative;
-	left : -100px;
-	background-color: pink;
+  width : 100px;
+  margin-left: -100%;
+  position: relative;
+  left : -100px;
+  background-color: pink;
 }
 .extra {
-	width : 200px;
-	margin-left: -200px;
-	position: relative;
-	right: -200px;
-	background-color: blue;
+  width : 200px;
+  margin-left: -200px;
+  position: relative;
+  right: -200px;
+  background-color: blue;
 }
 #content {
-	padding : 0 200px 0 100px;
+  padding : 0 200px 0 100px;
 }
 ```
 
@@ -212,7 +212,7 @@ CSS样式
 DOM结构
 ```xml
 <div class="main-wrap" >
-	<div class="main">内容区域</div>
+  <div class="main">内容区域</div>
 </div>
 <div class="sub">侧边栏1</div>
 <div class="extra">侧边栏2</div>
@@ -226,25 +226,25 @@ DOM结构
 CSS样式
 ```css
 .main-wrap, .sub, .extra {
-	float : left;
-	height:300px;
+  float : left;
+  height:300px;
 }
 .main-wrap {
-	width : 100%;
+  width : 100%;
 }
 .sub {
-	width : 100px;
-	margin-left: -100%;
-	background-color: red;
+  width : 100px;
+  margin-left: -100%;
+  background-color: red;
 }
 .extra {
-	width : 200px;
-	margin-left: -200px;
-	background-color: green;
+  width : 200px;
+  margin-left: -200px;
+  background-color: green;
 }
 .main {
-	margin:0 200px 0 100px;
-	background-color: pink;
-	height:300px;
+  margin:0 200px 0 100px;
+  background-color: pink;
+  height:300px;
 }
 ```

source/_posts/前端杂烩/CSS布局(2)-Flex.md

@@ -2,10 +2,10 @@
 title: CSS布局(2)-Flex
 date: 2018-5-15 22:38:32
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 Flex是`Flexible Box`的缩写，意为`弹性布局`，用来为盒状模型提供最大的灵活性。
@@ -16,11 +16,11 @@ Flex布局将成为未来布局的首选方案
 ```css
 /*对于块元素*/
 .box {
-	display : flex;
+  display : flex;
 }
 /*对于行内元素*/
 .inline-box {
-	display : inline-flex;
+  display : inline-flex;
 }
 ```
 为了兼容性的需要 , 通常可以加上`display:-webkit-flex;`

source/_posts/前端杂烩/CSS布局(3)-Flex实践.md

@@ -2,10 +2,10 @@
 title: CSS布局(3)-Flex实践
 date: 2018-5-16 22:38:32
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 
@@ -43,16 +43,16 @@ DOM结构
 css样式
 ```css
 .layout {
-	height : 200px;
-	display: flex;
+  height : 200px;
+  display: flex;
 }
 .layout > .layout_aside {
-	background-color: pink;
-	width : 100px;
+  background-color: pink;
+  width : 100px;
 }
 .layout > .layout_main {
-	background-color: #ccc;
-	flex-grow: 1;
+  background-color: #ccc;
+  flex-grow: 1;
 }
 ```
 无论结构是什么样子 , 只要让main区域自动放大 , 侧边栏的宽度固定即可
@@ -64,11 +64,11 @@ css样式
 DOM结构
 ```xml
 <div id="main">
-	<div class="top">我是顶部条</div>
-	<div class="down">
-		<div class="left">我是侧边栏</div>
-		<div class="content">我是主面板</div>
-	</div>
+  <div class="top">我是顶部条</div>
+  <div class="down">
+    <div class="left">我是侧边栏</div>
+    <div class="content">我是主面板</div>
+  </div>
 </div>
 ```
 main是最外层的flex容器 , 其中包含top和down两个项目
@@ -77,28 +77,28 @@ down本身也是一个flex容器 , 其中包含left和content两个项目
 CSS样式
 ```css
 * {
-	margin: 0;
-	padding : 0;
+  margin: 0;
+  padding : 0;
 }
 #main {
-	height : 100%;
-	display: flex;
-	flex-direction: column;
+  height : 100%;
+  display: flex;
+  flex-direction: column;
 }
 #main > .top{
-	height : 50px;
-	background-color: blue;
+  height : 50px;
+  background-color: blue;
 }
 #main > .down {
-	display: flex;
-	flex-grow: 1;
+  display: flex;
+  flex-grow: 1;
 }
 #main > .down > .left{
-	width : 200px;
-	background-color: yellow;
+  width : 200px;
+  background-color: yellow;
 }
 #main > .down > .content {
-	flex-grow: 1;
-	background-color: pink;
+  flex-grow: 1;
+  background-color: pink;
 }
 ```

source/_posts/前端杂烩/CSS布局(4)-Grid.md

@@ -2,10 +2,10 @@
 title: CSS布局(4)-grid
 date: 2018-5-17 22:38:32
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 Grid布局是网站设计的基础
@@ -25,25 +25,25 @@ Grid是二维布局系统 , 通常用于整个页面的规划
 DOM结构
 ```xml
 <div class="wrapper">
-	<div>1</div>
-	<div>2</div>
-	<div>3</div>
-	<div>4</div>
-	<div>5</div>
-	<div>6</div>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
 </div>
 ```
 CSS
 ```css
 .wrapper {
-	display : grid;
+  display : grid;
 }
 /* 这里为了清晰看到效果,给子元素添加了一些样式,不过与grid无关 */
 .wrapper div {
-	background: pink;
-	margin:2px;
-	text-align:center;
-	padding:3px 0;
+  background: pink;
+  margin:2px;
+  text-align:center;
+  padding:3px 0;
 }
 ```
 ![Alt text](/images/前端杂烩/grid/grid1.png)
@@ -54,9 +54,9 @@ CSS
 分别对应`grid-template-columns`和`grid-template-rows`属性
 ```css
 .wrapper {
-	display : grid;
-	grid-template-rows: 60px 40px;
-	grid-template-columns: 120px 60px 80px;
+  display : grid;
+  grid-template-rows: 60px 40px;
+  grid-template-columns: 120px 60px 80px;
 }
 ```
 **grid-template-columns** 属性的值当中有几个数值 , 就代表有几列 , 每个数值对应每一列的宽度
@@ -83,18 +83,18 @@ CSS
 
 ```xml
 <div class="wrapper">
-	<div class="item1">1</div>
-	<div class="item2">2</div>
-	<div class="item3">3</div>
-	<div class="item4">4</div>
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
 </div>
 ```
 现在我们要让item1横跨3列 , 也就是从第一条纵向网格线 , 到第四条纵向网格线
 那么需要对其定义css属性如下
 ```css
 .wrapper > .item1 {
-	grid-column-start: 1;
-	grid-column-end: 4;
+  grid-column-start: 1;
+  grid-column-end: 4;
 }
 ```
 ![Alt text](/images/前端杂烩/grid/grid6.png)
@@ -108,7 +108,7 @@ grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定
 我们还可以用更简洁的写法
 ```css
 .wrapper > .item1 {
-	grid-column: 1 / 4;
+  grid-column: 1 / 4;
 }
 ```
 
@@ -117,21 +117,21 @@ grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定
 我们就可以实现出更加复杂的布局了
 ```css
 .wrapper {
-	display : grid;
-	grid-template-rows: 60px 40px 60px;
-	grid-template-columns: 120px 60px 80px;
+  display : grid;
+  grid-template-rows: 60px 40px 60px;
+  grid-template-columns: 120px 60px 80px;
 }
 .wrapper > .item1 {
-	grid-column-start: 1;
-	grid-column-end: 3;
+  grid-column-start: 1;
+  grid-column-end: 3;
 }
 .wrapper > .item3 {
-	grid-row-start: 2;
-	grid-row-end: 4;
+  grid-row-start: 2;
+  grid-row-end: 4;
 }
 .wrapper > .item4 {
-	grid-column-start: 2;
-	grid-column-end: 4;
+  grid-column-start: 2;
+  grid-column-end: 4;
 }
 ```
 实际效果如下

source/_posts/前端杂烩/HTML5的缓存策略.md

@@ -2,9 +2,9 @@
 title: HTML5的缓存策略
 date: 2018-4-10 13:01:24
 tags: 
-	- HTML5
+  - HTML5
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 HTML5当中新增了两种浏览器端的缓存方式
@@ -40,9 +40,9 @@ localStorage.removeItem("name");
 
 ```javascript
 for(let index=0 ; index<localStorage.length ; index++) {
-	let key = localStorage.key(index);
-	let value = localStorage.getItem(key);
-	console.log(key + " = " + value);
+  let key = localStorage.key(index);
+  let value = localStorage.getItem(key);
+  console.log(key + " = " + value);
 }
 ```
 
@@ -53,7 +53,7 @@ for(let index=0 ; index<localStorage.length ; index++) {
 
 ```javascript
 window.addEventListener("storage",function(e){
-	console.log(e);
+  console.log(e);
 });
 ```
 ![storage_event](/images/前端杂烩/storage_event.png)

source/_posts/前端杂烩/Hexo搭建个人博客.md

@@ -2,9 +2,9 @@
 title: Hexo搭建个人博客
 date: 2018-5-9 09:43:01
 tags: 
-	- Hexo
+  - Hexo
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 > Hexo 是一个快速、简洁且高效的博客框架，需要nodejs环境运行
@@ -95,11 +95,11 @@ hexo new post 测试文章
 title: 测试文章
 date: 2018-5-9 09:43:01
 tags: 
-	- 标签1
-	- 标签2
+  - 标签1
+  - 标签2
 categories: 
-	- 分类1
-	- 子分类
+  - 分类1
+  - 子分类
 ---
 ```
 hexo不支持多个同级分类 , 分类当中若有多项会被处理成子分类

source/_posts/前端杂烩/Hexo站点实现站内搜索.md

@@ -2,9 +2,9 @@
 title: Hexo站点实现站内搜索
 date: 2018-5-9 14:44:53
 tags: 
-	- Hexo
+  - Hexo
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 在hexo博客中 , 可以添加站内文章搜索的支持
@@ -25,24 +25,24 @@ search:
 大致是如下结构
 ```xml
 <search>
-	<entry>
-		<title>CSS布局(4)-grid</title>
-		<link href="/文章URL地址/"/>
-		<url>/文章URL地址/</url>
-		<content type="html">
-		<![CDATA[
-		<p>这里是文章内容</p>
-		]]>
-		</content>
-		<categories>
-			<category>分类1</category>
-		</categories>
-		<tags>
-			<tag>标签1</tag>
-			<tag>标签2</tag>
-		</tags>
-	</entry>
-	...
+  <entry>
+    <title>CSS布局(4)-grid</title>
+    <link href="/文章URL地址/"/>
+    <url>/文章URL地址/</url>
+    <content type="html">
+    <![CDATA[
+    <p>这里是文章内容</p>
+    ]]>
+    </content>
+    <categories>
+      <category>分类1</category>
+    </categories>
+    <tags>
+      <tag>标签1</tag>
+      <tag>标签2</tag>
+    </tags>
+  </entry>
+  ...
 </search>
 ```
 其中的一个entry是一篇文章的信息
@@ -55,101 +55,101 @@ search:
 var articleDatas = null;
 var resultDiv = null;
 new Vue({
-	el: "#search-box",
-	data: {
-		queryText: null, //搜索的关键字文本
-		searchResult: [] //搜索结果
-	},
-	mounted: function() {
-		axios({ //调用ajax获取文章索引信息
-			url: "/search.xml"
-		}).then(function(response){
-			var xmlDoms = null
-			if(window.DOMParser) {
-				var parser = new DOMParser()
-				xmlDoms = parser.parseFromString(response.data, "application/xml")
-			} else { // IE浏览器
-				var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
-				xmlDoc.async = false;
-				xmlDoms = xmlDoc.loadXML(response.data);
-			}
-			//找出所有文章的标题 正文 URL
-			articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
-				return {
-					title: item.getElementsByTagName("title")[0].innerHTML,
-					content: item.getElementsByTagName("content")[0].innerHTML,
-					url: item.getElementsByTagName("url")[0].innerHTML,
-				}
-			})
-			resultDiv = document.getElementById("search-result-box")
-		});
-	},
-	watch: {
-		queryText: function(newVal, oldVal) {
-			this.searchResult.length = 0;
-			// 控制搜索结果框的显示与隐藏
-			if(newVal && newVal.trim() && articleDatas) {
-				resultDiv.style.display = "block"
-			} else {
-				resultDiv.style.display = "none"
-				return
-			}
-			//多关键字分别匹配
-			var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
-			var _this = this;
-			articleDatas.forEach(function(article){
-				var isMatch = true;
-				var title = article.title.trim().toLowerCase();
-				var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
-				var index_title = -1;
-				var index_content = -1;
-				var first_occur = -1; //关键字在正文当中第一次出现的位置
-				if(title && content) {
-					keywords.forEach(function(keyword, i) {
-						index_title = title.indexOf(keyword);
-						index_content = content.indexOf(keyword);
-						if( index_title < 0 && index_content < 0 ){
-							isMatch = false;
-						} else {
-							if (index_content < 0) {
-								index_content = 0;
-							}
-							if (i == 0) {
-								first_occur = index_content;
-							}
-						}
-					});
-				}
-				if (isMatch) {
-					var resultItem = {};
-					resultItem.url = article.url;
-					resultItem.title = article.title;
-					if (first_occur >= 0) {
-						// 截取关键字前后的一段文字
-						var start = first_occur - 6;
-						var end = first_occur + 15;
-						if(start < 0){
-							start = 0;
-						}
-						if(start == 0){
-							end = 10;
-						}
-						if(end > content.length){
-							end = content.length;
-						}
-						var matchContent = content.substring(start, end); 
-						// 高亮关键字
-						keywords.forEach(function(keyword){
-							var keywordReg = new RegExp(keyword, "gi");
-							matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
-						})
-						resultItem.matchContent = matchContent
-					}
-					_this.searchResult.push(resultItem)
-				}
-			})
-		}
-	}
+  el: "#search-box",
+  data: {
+    queryText: null, //搜索的关键字文本
+    searchResult: [] //搜索结果
+  },
+  mounted: function() {
+    axios({ //调用ajax获取文章索引信息
+      url: "/search.xml"
+    }).then(function(response){
+      var xmlDoms = null
+      if(window.DOMParser) {
+        var parser = new DOMParser()
+        xmlDoms = parser.parseFromString(response.data, "application/xml")
+      } else { // IE浏览器
+        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+        xmlDoc.async = false;
+        xmlDoms = xmlDoc.loadXML(response.data);
+      }
+      //找出所有文章的标题 正文 URL
+      articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
+        return {
+          title: item.getElementsByTagName("title")[0].innerHTML,
+          content: item.getElementsByTagName("content")[0].innerHTML,
+          url: item.getElementsByTagName("url")[0].innerHTML,
+        }
+      })
+      resultDiv = document.getElementById("search-result-box")
+    });
+  },
+  watch: {
+    queryText: function(newVal, oldVal) {
+      this.searchResult.length = 0;
+      // 控制搜索结果框的显示与隐藏
+      if(newVal && newVal.trim() && articleDatas) {
+        resultDiv.style.display = "block"
+      } else {
+        resultDiv.style.display = "none"
+        return
+      }
+      //多关键字分别匹配
+      var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
+      var _this = this;
+      articleDatas.forEach(function(article){
+        var isMatch = true;
+        var title = article.title.trim().toLowerCase();
+        var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
+        var index_title = -1;
+        var index_content = -1;
+        var first_occur = -1; //关键字在正文当中第一次出现的位置
+        if(title && content) {
+          keywords.forEach(function(keyword, i) {
+            index_title = title.indexOf(keyword);
+            index_content = content.indexOf(keyword);
+            if( index_title < 0 && index_content < 0 ){
+              isMatch = false;
+            } else {
+              if (index_content < 0) {
+                index_content = 0;
+              }
+              if (i == 0) {
+                first_occur = index_content;
+              }
+            }
+          });
+        }
+        if (isMatch) {
+          var resultItem = {};
+          resultItem.url = article.url;
+          resultItem.title = article.title;
+          if (first_occur >= 0) {
+            // 截取关键字前后的一段文字
+            var start = first_occur - 6;
+            var end = first_occur + 15;
+            if(start < 0){
+              start = 0;
+            }
+            if(start == 0){
+              end = 10;
+            }
+            if(end > content.length){
+              end = content.length;
+            }
+            var matchContent = content.substring(start, end); 
+            // 高亮关键字
+            keywords.forEach(function(keyword){
+              var keywordReg = new RegExp(keyword, "gi");
+              matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
+            })
+            resultItem.matchContent = matchContent
+          }
+          _this.searchResult.push(resultItem)
+        }
+      })
+    }
+  }
 })
 })()
 ```
@@ -157,19 +157,19 @@ new Vue({
 然后在页面的适当位置中编写搜索input与搜索结果框的html
 ```html
 <div id="search-box">
-	<div class="icon"><span class="icon-search"></span></div>
-	<div class="input-box"><input type="text" id="search-input" v-model="queryText" placeholder="站内搜索"/></div>
-	<!-- 搜索结果区 -->
-	<div id="search-result-box" >
-		<ul class="search-result-list" v-if="searchResult.length">
-			<li v-for="(article,index) in searchResult" :key="index">
-				<a :href='article.url' class='search-result-title' target='_blank'>{{article.title}}</a>
-				<p class="search-result" v-html="article.matchContent"></p>
-			</li>
-		</ul>
-		<!-- 无匹配时显示 -->
-		<p class="search-result" v-else>没有搜索到任何结果</p>
-	</div>
+  <div class="icon"><span class="icon-search"></span></div>
+  <div class="input-box"><input type="text" id="search-input" v-model="queryText" placeholder="站内搜索"/></div>
+  <!-- 搜索结果区 -->
+  <div id="search-result-box" >
+    <ul class="search-result-list" v-if="searchResult.length">
+      <li v-for="(article,index) in searchResult" :key="index">
+        <a :href='article.url' class='search-result-title' target='_blank'>{{article.title}}</a>
+        <p class="search-result" v-html="article.matchContent"></p>
+      </li>
+    </ul>
+    <!-- 无匹配时显示 -->
+    <p class="search-result" v-else>没有搜索到任何结果</p>
+  </div>
 </div>
 ```
 之后编写相应的样式就可以了

source/_posts/前端杂烩/SASS-初见.md

@@ -2,10 +2,10 @@
 title: SASS-初见
 date: 2018-5-11 22:38:32
 tags: 
-	- 前端
-	- sass
+  - 前端
+  - sass
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 
@@ -41,7 +41,7 @@ body {
 }
 ```
 最终编译出来的css都是
-```
+```css
 body {
   font: 100% Helvetica, sans-serif;
   color: #333;
@@ -88,29 +88,29 @@ $ npm install node-sass sass-loader --save-dev
 var webpack = require("webpack");
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 module.exports = {
-	entry: {
-		entry : './src/entry.js'
-	},
-	output: {
-		path: __dirname+"/dist",
-		filename: 'js/[name].bundle.js'
-	},
-	module: {
-		loaders: [
-		{ test: /\.css$/, loaders: ["style-loader","css-loader"]},
-		{ test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
-	]
-	},
-	plugins : [
-	//压缩打包之后的js
-		new webpack.optimize.UglifyJsPlugin({
-		    compress: {
-		        warnings: false
-		    }
-		}),
-	//写入的文件
-		new ExtractTextPlugin("css/[name][contenthash].css")
-	]
+  entry: {
+    entry : './src/entry.js'
+  },
+  output: {
+    path: __dirname+"/dist",
+    filename: 'js/[name].bundle.js'
+  },
+  module: {
+    loaders: [
+    { test: /\.css$/, loaders: ["style-loader","css-loader"]},
+    { test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
+  ]
+  },
+  plugins : [
+  //压缩打包之后的js
+    new webpack.optimize.UglifyJsPlugin({
+        compress: {
+            warnings: false
+        }
+    }),
+  //写入的文件
+    new ExtractTextPlugin("css/[name][contenthash].css")
+  ]
 };
 ```
 > 上面为sass-loader加的参数`outputStyle`作用与ruby当中的--style相同

source/_posts/前端杂烩/SASS-语法(1).md

@@ -2,10 +2,10 @@
 title: SASS-语法(1)
 date: 2018-5-12 22:38:32
 tags: 
-	- 前端
-	- sass
+  - 前端
+  - sass
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 ### 变量
@@ -19,17 +19,17 @@ $变量名 : 变量值;
 例如
 ```scss
 .box {
-	$color:red;
-	a{
-		color:$color;
-	}
+  $color:red;
+  a{
+    color:$color;
+  }
 }
 ```
 如果该变量的值需要嵌入到字符串当中 , 需要加`#{ }`
 ```scss
 $side : left;
 .box {
-	border-#{$side}-radius:5px;
+  border-#{$side}-radius:5px;
 }
 ```
 #### 默认变量
@@ -56,15 +56,15 @@ $a_padding : 6px;
 #### 选择器嵌套
 ```scss
 div {
-	h1 {
-		color :red;
-	}
+  h1 {
+    color :red;
+  }
 }
 ```
 编译后的结果为
 ```
 div h1 {
-	color : red;
+  color : red;
 }
 ```
 前面如果加上 `>`可以作为父子选择器
@@ -73,8 +73,8 @@ div h1 {
 比如
 ```scss
 a {
-	&:hover{color:red;}
-	&:visited{color:gray;}
+  &:hover{color:red;}
+  &:visited{color:gray;}
 }
 ```
 #### 属性嵌套
@@ -82,10 +82,10 @@ a {
 比如border
 ```scss
 p {
-	border : {
-		color:red;
-		width:2px;
-	}
+  border : {
+    color:red;
+    width:2px;
+  }
 }
 ```
 **注意** : border的后面必须要加上冒号
@@ -102,22 +102,22 @@ Mixin有点像C语言的宏定义 , 是可以重用的代码块
 ```scss
 //使用@mixin命令,定义一个代码块
 @mixin left {
-	float : left;
-	margin-left : 10px;
+  float : left;
+  margin-left : 10px;
 }
 //使用@include调用这个mixin
 .box {
-	@include left;
+  @include left;
 }
 ```
 mixin的强大之处 , 在于可以去指定参数和缺省值
 ```scss
 @mixin left($value:10px) {
-	float : left;
-	margin-left : $value;
+  float : left;
+  margin-left : $value;
 }
 .box {
-	@include left(20px);
+  @include left(20px);
 }
 ```
 如果引入的时候不传参数 , 则使用缺省值
@@ -130,10 +130,10 @@ mixin的强大之处 , 在于可以去指定参数和缺省值
 }
 
 #navbar li {
-	@include rounded(top,left);
+  @include rounded(top,left);
 }
 #footer {
-	@include rounded(top,left,5px);
+  @include rounded(top,left,5px);
 }
 ```
 
@@ -189,20 +189,20 @@ $base_color : chocolate;
 SASS允许一个选择器 , 继承另一个选择器
 ```scss
 .class1 {
-	border : 1px solid #ddd;
+  border : 1px solid #ddd;
 }
 .class2 {
-	@extend .class1;
-	font-size : 120%;
+  @extend .class1;
+  font-size : 120%;
 }
 ```
 在编译过后 , 会生成
 ```css
 .class1, .class2 {
-	border : 1px solid #ddd;
+  border : 1px solid #ddd;
 }
 .class2 {
-	font-size:120%;
+  font-size:120%;
 }
 ```
 相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
@@ -249,10 +249,10 @@ each循环 , 类似于迭代器
 使用`@function`可以自定义一个函数
 ```scss
 @function double($n) {
-	@return $n * 2;
+  @return $n * 2;
 }
 #sidebar {
-	width : double(5px);
+  width : double(5px);
 }
 ```
 

source/_posts/前端杂烩/SASS-语法(2).md

@@ -2,10 +2,10 @@
 title: SASS-语法(2)
 date: 2018-5-13 22:38:32
 tags: 
-	- 前端
-	- sass
+  - 前端
+  - sass
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 ### 占位符 %
@@ -13,17 +13,17 @@ categories:
 
 ```scss
 %base {
-	margin : 5px;
+  margin : 5px;
 }
 .btn {
-	@extend %base;
+  @extend %base;
 }
 ```
 <!-- more -->
 编译后会得到
 ```css
 .btn {
-	margin : 5px;
+  margin : 5px;
 }
 ```
 
@@ -65,8 +65,8 @@ $direction : (left, right);
 编译后的结果为
 ```css
 .panel { 
-	margin-right: 10px; 
-	padding-left: 10px; 
+  margin-right: 10px; 
+  padding-left: 10px; 
 }
 ```
 #### `join(值列表1, 值列表2)`
@@ -92,8 +92,8 @@ $num1 : (10px, 30px);
 ```
 ```css
 .box {
-	margin : 10px 30px 15px;
-	padding : 10px 30px;
+  margin : 10px 30px 15px;
+  padding : 10px 30px;
 }
 ```
 

source/_posts/前端杂烩/viewport.md

@@ -2,9 +2,9 @@
 title: viewport
 date: 2018-4-9 11:01:56
 tags: 
-	- 前端
+  - 前端
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 在移动设备上的页面开发 , 首先需要搞清楚的就是`viewport` , 这是适配和响应各种不同分辨率的移动设备的前提条件
@@ -97,16 +97,16 @@ div的width为2vw , 那么这个div的实际显示宽度就是20px
 这时候我们就可以用calc函数配合vw来解决这个问题
 ```css
 .left,.right {
-	height : 600px;
-	border : 3px solid black;
+  height : 600px;
+  border : 3px solid black;
 }
 .left {
-	background : blue;
-	width : calc(25vw - 6px);
+  background : blue;
+  width : calc(25vw - 6px);
 }
 .right {
-	background : pink;
-	width : calc(75vw - 6px);
+  background : pink;
+  width : calc(75vw - 6px);
 }
 ```
 > 出于兼容性的考虑 , 最好给calc加上`-webkit-`和`-moz-`的前缀

source/_posts/前端杂烩/响应式布局.md

@@ -2,19 +2,19 @@
 title: 响应式布局
 date: 2018-4-6 10:55:37
 tags: 
-	- 前端
-	- css
+  - 前端
+  - css
 categories: 
-	- 前端杂烩
+  - 前端杂烩
 ---
 
 #### 媒体查询
 媒体查询可以使用`@media`在css样式当中进行断点 , 让指定的css样式按照要求进行生效
 ```css
 @media (max-width:768px) {
-	.box {
-		color : red;
-	}
+  .box {
+    color : red;
+  }
 }
 ```
 上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效