sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

代码缩进调整

Browse Source
This commit is contained in:
结发受长生 2018-05-10 09:47:30 +08:00
parent 7e0b74a322
commit 368ea5915b
127 changed files with 753 additions and 6168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 和 最后的分号

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

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

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

@ -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>
```

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

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

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

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

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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比锁性能更优。

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

@ -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
```

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

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

40
source/_posts/JavaScript/实现bind方法.md
View File

@ -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");
}
```

70
source/_posts/JavaScript/实现call方法.md
View File

@ -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;
};
```

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

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

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

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

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

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

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

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

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

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

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

@ -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`俗称为**壳** , 是指提供使用者使用界面的软件

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

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

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

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

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

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

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

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

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

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

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

@ -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 使得软件可以拆分成若干个标准化容器，然后像搭积木一样组合起来。

122
source/_posts/linux/opencv编译安装.md Normal file
View File

@ -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>
```

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

@ -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");
}
```
这样字体的应用就更加简便了

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

@ -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;
}
```

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

@ -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;`

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

@ -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;
}
```

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

@ -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;
}
```
实际效果如下

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

@ -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)

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

@ -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不支持多个同级分类 , 分类当中若有多项会被处理成子分类

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

@ -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>
```
之后编写相应的样式就可以了

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

@ -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相同

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

@ -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);
}
```

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

@ -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;
}
```

16
source/_posts/前端杂烩/viewport.md
View File

@ -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-`的前缀

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

@ -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时生效

8
themes/hexo-theme-xups/source/css/_partial/highlight.styl
View File

@ -2,11 +2,13 @@
$code-block
background: highlight-background
margin: 20px 0
padding: 15px
padding: 10px
overflow: auto
font-size: $code-font-size
color: highlight-foreground
line-height: $line-height-code-block
border: 2px solid #CCC
border-radius: 5px
$line-numbers
color: #666
@ -16,13 +18,13 @@ pre, code
code
word-break: break-all
background: $gainsboro
text-shadow: 0 1px #fff
color: #c7254e
border-radius: 4px
padding: 0 0.3em
pre
@extend $code-block
code
background: none
text-shadow: none
padding: 0
.highlight
@extend $code-block

2
themes/hexo-theme-xups/source/css/_partial/post.styl
View File

@ -54,7 +54,7 @@
margin-right 15px
.post-content
position relative
color c-666
color c-444
img
max-width 100%
.post-excerpt

2
themes/hexo-theme-xups/source/css/_variables.styl
View File

@ -48,7 +48,7 @@ clearfix()
$code-font-size = 13px
$line-height-code-block = 1.6
$code-font-family = "Source Code Pro", Consolas, Monaco, Menlo, monospace
$gainsboro = #eee
$gainsboro = #f5ecee
$border-color = #ccc
$content-desktop-padding = 15px
$font-family-base = Consolas, Monaco, Menlo, monospace

3
themes/landscape/.gitignore vendored
View File

@ -1,3 +0,0 @@
.DS_Store
node_modules
tmp

46
themes/landscape/Gruntfile.js
View File

@ -1,46 +0,0 @@
module.exports = function(grunt){
grunt.initConfig({
gitclone: {
fontawesome: {
options: {
repository: 'https://github.com/FortAwesome/Font-Awesome.git',
directory: 'tmp/fontawesome'
},
},
fancybox: {
options: {
repository: 'https://github.com/fancyapps/fancyBox.git',
directory: 'tmp/fancybox'
}
}
},
copy: {
fontawesome: {
expand: true,
cwd: 'tmp/fontawesome/fonts/',
src: ['**'],
dest: 'source/css/fonts/'
},
fancybox: {
expand: true,
cwd: 'tmp/fancybox/source/',
src: ['**'],
dest: 'source/fancybox/'
}
},
_clean: {
tmp: ['tmp'],
fontawesome: ['source/css/fonts'],
fancybox: ['source/fancybox']
}
});
require('load-grunt-tasks')(grunt);
grunt.renameTask('clean', '_clean');
grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']);
grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']);
grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']);
grunt.registerTask('clean', ['_clean']);
};

7
themes/landscape/LICENSE
View File

@ -1,7 +0,0 @@
Copyright (c) 2013 Tommy Chen
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

112
themes/landscape/README.md
View File

@ -1,112 +0,0 @@
# Landscape
A brand new default theme for [Hexo].
- [Preview](http://hexo.io/hexo-theme-landscape/)
## Installation
### Install
``` bash
$ git clone https://github.com/hexojs/hexo-theme-landscape.git themes/landscape
```
**Landscape requires Hexo 2.4 and above.** If you would like to enable the RSS, the [hexo-generate-feed] plugin is also required.
### Enable
Modify `theme` setting in `_config.yml` to `landscape`.
### Update
``` bash
cd themes/landscape
git pull
```
## Configuration
``` yml
# Header
menu:
Home: /
Archives: /archives
rss: /atom.xml
# Content
excerpt_link: Read More
fancybox: true
# Sidebar
sidebar: right
widgets:
- category
- tag
- tagcloud
- archives
- recent_posts
# Miscellaneous
google_analytics:
favicon: /favicon.png
twitter:
google_plus:
```
- **menu** - Navigation menu
- **rss** - RSS link
- **excerpt_link** - "Read More" link at the bottom of excerpted articles. `false` to hide the link.
- **fancybox** - Enable [Fancybox]
- **sidebar** - Sidebar style. You can choose `left`, `right`, `bottom` or `false`.
- **widgets** - Widgets displaying in sidebar
- **google_analytics** - Google Analytics ID
- **favicon** - Favicon path
- **twitter** - Twiiter ID
- **google_plus** - Google+ ID
## Features
### Fancybox
Landscape uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos.
```
![img caption](img url)
{% fancybox img_url [img_thumbnail] [img_caption] %}
```
### Sidebar
You can put your sidebar in left side, right side or bottom of your site by editing `sidebar` setting.
Landscape provides 5 built-in widgets:
- category
- tag
- tagcloud
- archives
- recent_posts
All of them are enabled by default. You can edit them in `widget` setting.
## Development
### Requirements
- [Grunt] 0.4+
- Hexo 2.4+
### Grunt tasks
- **default** - Download [Fancybox] and [Font Awesome].
- **fontawesome** - Only download [Font Awesome].
- **fancybox** - Only download [Fancybox].
- **clean** - Clean temporarily files and downloaded files.
[Hexo]: https://hexo.io/
[Fancybox]: http://fancyapps.com/fancybox/
[Font Awesome]: http://fontawesome.io/
[Grunt]: http://gruntjs.com/
[hexo-generate-feed]: https://github.com/hexojs/hexo-generator-feed

37
themes/landscape/_config.yml
View File

@ -1,37 +0,0 @@
# Header
menu:
Home: /
Archives: /archives
rss: /atom.xml
# Content
excerpt_link: Read More
fancybox: true
# Sidebar
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
# display widgets at the bottom of index pages (pagination == 2)
index_widgets:
# - category
# - tagcloud
# - archive
# widget behavior
archive_type: 'monthly'
show_count: false
# Miscellaneous
google_analytics:
gauges_analytics:
favicon: /favicon.png
twitter:
google_plus:
fb_admins:
fb_app_id:

19
themes/landscape/languages/de.yml
View File

@ -1,19 +0,0 @@
categories: Kategorien
search: Suche
tags: Tags
tagcloud: Tag Cloud
tweets: Tweets
prev: zurück
next: weiter
comment: Kommentare
archive_a: Archiv
archive_b: "Archive: %s"
page: Seite %d
recent_posts: letzter Beitrag
newer: Neuer
older: Älter
share: Teilen
powered_by: Powered by
rss_feed: RSS Feed
category: Kategorie
tag: Tag

19
themes/landscape/languages/default.yml
View File

@ -1,19 +0,0 @@
categories: Categories
search: Search
tags: Tags
tagcloud: Tag Cloud
tweets: Tweets
prev: Prev
next: Next
comment: Comments
archive_a: Archives
archive_b: "Archives: %s"
page: Page %d
recent_posts: Recent Posts
newer: Newer
older: Older
share: Share
powered_by: Powered by
rss_feed: RSS Feed
category: Category
tag: Tag

19
themes/landscape/languages/es.yml
View File

@ -1,19 +0,0 @@
categories: Categorías
search: Buscar
tags: Tags
tagcloud: Nube de Tags
tweets: Tweets
prev: Previo
next: Siguiente
comment: Comentarios
archive_a: Archivos
archive_b: "Archivos: %s"
page: Página %d
recent_posts: Posts recientes
newer: Nuevo
older: Viejo
share: Compartir
powered_by: Construido por
rss_feed: RSS
category: Categoría
tag: Tag

19
themes/landscape/languages/fr.yml
View File

@ -1,19 +0,0 @@
categories: Catégories
search: Rechercher
tags: Mot-clés
tagcloud: Nuage de mot-clés
tweets: Tweets
prev: Précédent
next: Suivant
comment: Commentaires
archive_a: Archives
archive_b: "Archives: %s"
page: Page %d
recent_posts: Articles récents
newer: Récent
older: Ancien
share: Partager
powered_by: Propulsé par
rss_feed: Flux RSS
category: Catégorie
tag: Mot-clé

19
themes/landscape/languages/ja.yml
View File

@ -1,19 +0,0 @@
categories: カテゴリ
search: 検索
tags: タグ
tagcloud: タグクラウド
tweets: ツイート
prev: 戻る
next: 次へ
comment: コメント
archive_a: アーカイブ
archive_b: "アーカイブ: %s"
page: ページ %d
recent_posts: 最近の投稿
newer: 次の記事
older: 前の記事
share: 共有
powered_by: Powered by
rss_feed: RSSフィード
category: カテゴリ
tag: タグ

19
themes/landscape/languages/ko.yml
View File

@ -1,19 +0,0 @@
categories: 카테고리
search: 검색
tags: 태그
tagcloud: 태그 클라우드
tweets: 트윗
prev: 이전
next: 다음
comment: 댓글
archive_a: 아카이브
archive_b: "아카이브: %s"
page: 페이지 %d
recent_posts: 최근 포스트
newer: 최신
older: 이전
share: 공유
powered_by: Powered by
rss_feed: RSS Feed
category: 카테고리
tag: 태그

20
themes/landscape/languages/nl.yml
View File

@ -1,20 +0,0 @@
categories: Categorieën
search: Zoeken
tags: Labels
tagcloud: Tag Cloud
tweets: Tweets
prev: Vorige
next: Volgende
comment: Commentaren
archive_a: Archieven
archive_b: "Archieven: %s"
page: Pagina %d
recent_posts: Recente berichten
newer: Nieuwer
older: Ouder
share: Delen
powered_by: Powered by
rss_feed: RSS Feed
category: Categorie
tag: Label

19
themes/landscape/languages/no.yml
View File

@ -1,19 +0,0 @@
categories: Kategorier
search: Søk
tags: Tags
tagcloud: Tag Cloud
tweets: Tweets
prev: Forrige
next: Neste
comment: Kommentarer
archive_a: Arkiv
archive_b: "Arkiv: %s"
page: Side %d
recent_posts: Siste innlegg
newer: Newer
older: Older
share: Share
powered_by: Powered by
rss_feed: RSS Feed
category: Category
tag: Tag

19
themes/landscape/languages/pt.yml
View File

@ -1,19 +0,0 @@
categories: Categorias
search: Buscar
tags: Tags
tagcloud: Nuvem de Tags
tweets: Tweets
prev: Anterior
next: Próximo
comment: Comentários
archive_a: Arquivos
archive_b: "Arquivos: %s"
page: Página %d
recent_posts: Postagens Recentes
newer: Mais Recente
older: Mais Antigo
share: Compartilhar
powered_by: Desenvolvido por
rss_feed: Feed RSS
category: Categoria
tag: Tag

19
themes/landscape/languages/ru.yml
View File

@ -1,19 +0,0 @@
categories: Категории
search: Поиск
tags: Метки
tagcloud: Облако меток
tweets: Твиты
prev: Назад
next: Вперед
comment: Комментарии
archive_a: Архив
archive_b: "Архив: %s"
page: Страница %d
recent_posts: Недавние записи
newer: Следующий
older: Предыдущий
share: Поделиться
powered_by: Создано с помощью
rss_feed: RSS-каналы
category: Категория
tag: Метка

19
themes/landscape/languages/zh-CN.yml
View File

@ -1,19 +0,0 @@
categories: 分类
search: 搜索
tags: 标签
tagcloud: 标签云
tweets: 推文
prev: 上一页
next: 下一页
comment: 留言
archive_a: 归档
archive_b: 归档：%s
page: 第 %d 页
recent_posts: 最新文章
newer: Newer
older: Older
share: Share
powered_by: Powered by
rss_feed: RSS Feed
category: Category
tag: Tag

19
themes/landscape/languages/zh-TW.yml
View File

@ -1,19 +0,0 @@
categories: 分類
search: 搜尋
tags: 標籤
tagcloud: 標籤雲
tweets: 推文
prev: 上一頁
next: 下一頁
comment: 留言
archive_a: 彙整
archive_b: 彙整：%s
page: 第 %d 頁
recent_posts: 最新文章
newer: Newer
older: Older
share: Share
powered_by: Powered by
rss_feed: RSS Feed
category: Category
tag: Tag

25
themes/landscape/layout/_partial/after-footer.ejs
View File

@ -1,25 +0,0 @@
<% if (config.disqus_shortname){ %>
<script>
var disqus_shortname = '<%= config.disqus_shortname %>';
<% if (page.permalink){ %>
var disqus_url = '<%= page.permalink %>';
<% } %>
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<% } %>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<% if (theme.fancybox){ %>
<%- css('fancybox/jquery.fancybox') %>
<%- js('fancybox/jquery.fancybox.pack') %>
<% } %>
<%- js('js/script') %>
<%- partial('gauges-analytics') %>

8
themes/landscape/layout/_partial/archive-post.ejs
View File

@ -1,8 +0,0 @@
<article class="archive-article archive-type-<%= post.layout %>">
<div class="archive-article-inner">
<header class="archive-article-header">
<%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %>
<%- partial('post/title', {class_name: 'archive-article-title'}) %>
</header>
</div>
</article>

34
themes/landscape/layout/_partial/archive.ejs
View File

@ -1,34 +0,0 @@
<% if (pagination == 2){ %>
<% page.posts.each(function(post){ %>
<%- partial('article', {post: post, index: true}) %>
<% }) %>
<% } else { %>
<% var last; %>
<% page.posts.each(function(post, i){ %>
<% var year = post.date.year(); %>
<% if (last != year){ %>
<% if (last != null){ %>
</div></section>
<% } %>
<% last = year; %>
<section class="archives-wrap">
<div class="archive-year-wrap">
<a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
</div>
<div class="archives">
<% } %>
<%- partial('archive-post', {post: post, even: i % 2 == 0}) %>
<% }) %>
<% if (page.posts.length){ %>
</div></section>
<% } %>
<% } %>
<% if (page.total > 1){ %>
<nav id="page-nav">
<% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;"%>
<%- paginator({
prev_text: prev_text,
next_text: next_text
}) %>
</nav>
<% } %>

44
themes/landscape/layout/_partial/article.ejs
View File

@ -1,44 +0,0 @@
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
</div>
<div class="article-inner">
<%- partial('post/gallery') %>
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
</header>
<% } %>
<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
</div>
<footer class="article-footer">
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
<% if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
<% } %>
<%- partial('post/tag') %>
</footer>
</div>
<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>
</article>
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

11
themes/landscape/layout/_partial/footer.ejs
View File

@ -1,11 +0,0 @@
<footer id="footer">
<% if (theme.sidebar === 'bottom'){ %>
<%- partial('_partial/sidebar') %>
<% } %>
<div class="outer">
<div id="footer-info" class="inner">
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>

18
themes/landscape/layout/_partial/gauges-analytics.ejs
View File

@ -1,18 +0,0 @@
<% if (theme.gauges_analytics){ %>
<!-- Gaug.es Analytics -->
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '<%= theme.gauges_analytics %>');
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
t.src = 'https://d36ee2fcip1434.cloudfront.net/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
<!-- End Gaug.es Analytics -->
<% } %>

14
themes/landscape/layout/_partial/google-analytics.ejs
View File

@ -1,14 +0,0 @@
<% if (theme.google_analytics){ %>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.google_analytics %>', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<% } %>

36
themes/landscape/layout/_partial/head.ejs
View File

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%- partial('google-analytics') %>
<%
var title = page.title;
if (is_archive()){
title = __('archive_a');
if (is_month()){
title += ': ' + page.year + '/' + page.month;
} else if (is_year()){
title += ': ' + page.year;
}
} else if (is_category()){
title = __('category') + ': ' + page.category;
} else if (is_tag()){
title = __('tag') + ': ' + page.tag;
}
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
<% if (theme.rss){ %>
<link rel="alternate" href="<%= url_for(theme.rss) %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link rel="icon" href="<%- theme.favicon %>">
<% } %>
<% if (config.highlight.enable){ %>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<% } %>
<%- css('css/style') %>
</head>

32
themes/landscape/layout/_partial/header.ejs
View File

@ -1,32 +0,0 @@
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="<%- url_for() %>" id="logo"><%= config.title %></a>
</h1>
<% if (theme.subtitle){ %>
<h2 id="subtitle-wrap">
<a href="<%- url_for() %>" id="subtitle"><%= theme.subtitle %></a>
</h2>
<% } %>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<% for (var i in theme.menu){ %>
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</nav>
<nav id="sub-nav">
<% if (theme.rss){ %>
<a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>"></a>
<% } %>
<a id="nav-search-btn" class="nav-icon" title="<%= __('search') %>"></a>
</nav>
<div id="search-form-wrap">
<%- search_form({button: '&#xF002;'}) %>
</div>
</div>
</div>
</header>

5
themes/landscape/layout/_partial/mobile-nav.ejs
View File

@ -1,5 +0,0 @@
<nav id="mobile-nav">
<% for (var i in theme.menu){ %>
<a href="<%- url_for(theme.menu[i]) %>" class="mobile-nav-link"><%= i %></a>
<% } %>
</nav>

10
themes/landscape/layout/_partial/post/category.ejs
View File

@ -1,10 +0,0 @@
<% if (post.categories && post.categories.length){ %>
<div class="article-category">
<%- list_categories(post.categories, {
show_count: false,
class: 'article-category',
style: 'none',
separator: '►'
}) %>
</div>
<% } %>

3
themes/landscape/layout/_partial/post/date.ejs
View File

@ -1,3 +0,0 @@
<a href="<%- url_for(post.path) %>" class="<%= class_name %>">
<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
</a>

11
themes/landscape/layout/_partial/post/gallery.ejs
View File

@ -1,11 +0,0 @@
<% if (post.photos && post.photos.length){ %>
<div class="article-gallery">
<div class="article-gallery-photos">
<% post.photos.forEach(function(photo, i){ %>
<a class="article-gallery-img fancybox" href="<%- url_for(photo) %>" rel="gallery_<%= post._id %>">
<img src="<%- url_for(photo) %>" itemprop="image">
</a>
<% }) %>
</div>
</div>
<% } %>

22
themes/landscape/layout/_partial/post/nav.ejs
View File

@ -1,22 +0,0 @@
<% if (post.prev || post.next){ %>
<nav id="article-nav">
<% if (post.prev){ %>
<a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap">
<strong class="article-nav-caption"><%= __('newer') %></strong>
<div class="article-nav-title">
<% if (post.prev.title){ %>
<%= post.prev.title %>
<% } else { %>
(no title)
<% } %>
</div>
</a>
<% } %>
<% if (post.next){ %>
<a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap">
<strong class="article-nav-caption"><%= __('older') %></strong>
<div class="article-nav-title"><%= post.next.title %></div>
</a>
<% } %>
</nav>
<% } %>

6
themes/landscape/layout/_partial/post/tag.ejs
View File

@ -1,6 +0,0 @@
<% if (post.tags && post.tags.length){ %>
<%- list_tags(post.tags, {
show_count: false,
class: 'article-tag'
}) %>
<% } %>

15
themes/landscape/layout/_partial/post/title.ejs
View File

@ -1,15 +0,0 @@
<% if (post.link){ %>
<h1 itemprop="name">
<a class="<%= class_name %>" href="<%- url_for(post.link) %>" target="_blank" itemprop="url"><%= post.title %></a>
</h1>
<% } else if (post.title){ %>
<% if (index){ %>
<h1 itemprop="name">
<a class="<%= class_name %>" href="<%- url_for(post.path) %>"><%= post.title %></a>
</h1>
<% } else { %>
<h1 class="<%= class_name %>" itemprop="name">
<%= post.title %>
</h1>
<% } %>
<% } %>

5
themes/landscape/layout/_partial/sidebar.ejs
View File

@ -1,5 +0,0 @@
<aside id="sidebar"<% if (theme.sidebar === 'bottom'){ %> class="outer"<% } %>>
<% theme.widgets.forEach(function(widget){ %>
<%- partial('_widget/' + widget) %>
<% }) %>
</aside>

8
themes/landscape/layout/_widget/archive.ejs
View File

@ -1,8 +0,0 @@
<% if (site.posts.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('archive_a') %></h3>
<div class="widget">
<%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
</div>
</div>
<% } %>

8
themes/landscape/layout/_widget/category.ejs
View File

@ -1,8 +0,0 @@
<% if (site.categories.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('categories') %></h3>
<div class="widget">
<%- list_categories({show_count: theme.show_count}) %>
</div>
</div>
<% } %>

14
themes/landscape/layout/_widget/recent_posts.ejs
View File

@ -1,14 +0,0 @@
<% if (site.posts.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('recent_posts') %></h3>
<div class="widget">
<ul>
<% site.posts.sort('date', -1).limit(5).each(function(post){ %>
<li>
<a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
</li>
<% }) %>
</ul>
</div>
</div>
<% } %>

8
themes/landscape/layout/_widget/tag.ejs
View File

@ -1,8 +0,0 @@
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('tags') %></h3>
<div class="widget">
<%- list_tags({show_count: theme.show_count}) %>
</div>
</div>
<% } %>

8
themes/landscape/layout/_widget/tagcloud.ejs
View File

@ -1,8 +0,0 @@
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('tagcloud') %></h3>
<div class="widget tagcloud">
<%- tagcloud() %>
</div>
</div>
<% } %>

1
themes/landscape/layout/archive.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>

1
themes/landscape/layout/category.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/archive', {pagination: config.category, index: true}) %>

1
themes/landscape/layout/index.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/archive', {pagination: 2, index: true}) %>

18
themes/landscape/layout/layout.ejs
View File

@ -1,18 +0,0 @@
<%- partial('_partial/head') %>
<body>
<div id="container">
<div id="wrap">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<div class="outer">
<section id="main"><%- body %></section>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
<%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
<% } %>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
</div>
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<%- partial('_partial/after-footer') %>
</div>
</body>
</html>

1
themes/landscape/layout/page.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/article', {post: page, index: false}) %>

1
themes/landscape/layout/post.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/article', {post: page, index: false}) %>

1
themes/landscape/layout/tag.ejs
View File

@ -1 +0,0 @@
<%- partial('_partial/archive', {pagination: config.tag, index: true}) %>

12
themes/landscape/package.json
View File

@ -1,12 +0,0 @@
{
"name": "hexo-theme-landscape",
"version": "0.0.2",
"private": true,
"devDependencies": {
"grunt": "~0.4.2",
"load-grunt-tasks": "~0.2.0",
"grunt-git": "~0.2.2",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-copy": "~0.4.1"
}
}

24
themes/landscape/scripts/fancybox.js
View File

@ -1,24 +0,0 @@
var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/;
/**
* Fancybox tag
*
* Syntax:
* {% fancybox /path/to/image [/path/to/thumbnail] [title] %}
*/
hexo.extend.tag.register('fancybox', function(args){
var original = args.shift(),
thumbnail = '';
if (args.length && rUrl.test(args[0])){
thumbnail = args.shift();
}
var title = args.join(' ');
return '<a class="fancybox" href="' + original + '" title="' + title + '">' +
'<img src="' + (thumbnail || original) + '" alt="' + title + '">'
'</a>' +
(title ? '<span class="caption">' + title + '</span>' : '');
});

63
themes/landscape/source/css/_extend.styl
View File

@ -1,63 +0,0 @@
$block-caption
text-decoration: none
text-transform: uppercase
letter-spacing: 2px
color: color-grey
margin-bottom: 1em
margin-left: 5px
line-height: 1em
text-shadow: 0 1px #fff
font-weight: bold
$block
background: #fff
box-shadow: 1px 2px 3px #ddd
border: 1px solid color-border
border-radius: 3px
$base-style
h1
font-size: 2em
h2
font-size: 1.5em
h3
font-size: 1.3em
h4
font-size: 1.2em
h5
font-size: 1em
h6
font-size: 1em
color: color-grey
hr
border: 1px dashed color-border
strong
font-weight: bold
em, cite
font-style: italic
sup, sub
font-size: 0.75em
line-height: 0
position: relative
vertical-align: baseline
sup
top: -0.5em
sub
bottom: -0.2em
small
font-size: 0.85em
acronym, abbr
border-bottom: 1px dotted
ul, ol, dl
margin: 0 20px
line-height: line-height
ul, ol
ul, ol
margin-top: 0
margin-bottom: 0
ul
list-style: disc
ol
list-style: decimal
dt
font-weight: bold

80
themes/landscape/source/css/_partial/archive.styl
View File

@ -1,80 +0,0 @@
.archives-wrap
margin: block-margin 0
.archives
clearfix()
.archive-year-wrap
margin-bottom: 1em
.archive-year
@extend $block-caption
.archives
column-gap: 10px
@media mq-tablet
column-count: 2
@media mq-normal
column-count: 3
.archive-article
avoid-column-break()
.archive-article-inner
@extend $block
padding: 10px
margin-bottom: 15px
.archive-article-title
text-decoration: none
font-weight: bold
color: color-default
transition: color 0.2s
line-height: line-height
&:hover
color: color-link
.archive-article-footer
margin-top: 1em
.archive-article-date
color: color-grey
text-decoration: none
font-size: 0.85em
line-height: 1em
margin-bottom: 0.5em
display: block
#page-nav
clearfix()
margin: block-margin auto
background: #fff
box-shadow: 1px 2px 3px #ddd
border: 1px solid color-border
border-radius: 3px
text-align: center
color: color-grey
overflow: hidden
a, span
padding: 10px 20px
line-height: 1
height: 2ex
a
color: color-grey
text-decoration: none
&:hover
background: color-grey
color: #fff
.prev
float: left
.next
float: right
.page-number
display: inline-block
@media mq-mobile
display: none
.current
color: color-default
font-weight: bold
.space
color: color-border

357
themes/landscape/source/css/_partial/article.styl
View File

@ -1,357 +0,0 @@
.article
margin: block-margin 0
.article-inner
@extend $block
overflow: hidden
.article-meta
clearfix()
.article-date
@extend $block-caption
float: left
.article-category
float: left
line-height: 1em
color: #ccc
text-shadow: 0 1px #fff
margin-left: 8px
&:before
content: "\2022"
.article-category-link
@extend $block-caption
margin: 0 12px 1em
.article-header
padding: article-padding article-padding 0
.article-title
text-decoration: none
font-size: 2em
font-weight: bold
color: color-default
line-height: line-height-title
transition: color 0.2s
a&:hover
color: color-link
.article-entry
@extend $base-style
clearfix()
color: color-default
padding: 0 article-padding
p, table
line-height: line-height
margin: line-height 0
h1, h2, h3, h4, h5, h6
font-weight: bold
h1, h2, h3, h4, h5, h6
line-height: line-height-title
margin: line-height-title 0
a
color: color-link
text-decoration: none
&:hover
text-decoration: underline
ul, ol, dl
margin-top: line-height
margin-bottom: line-height
img, video
max-width: 100%
height: auto
display: block
margin: auto
iframe
border: none
table
width: 100%
border-collapse: collapse
border-spacing: 0
th
font-weight: bold
border-bottom: 3px solid color-border
padding-bottom: 0.5em
td
border-bottom: 1px solid color-border
padding: 10px 0
blockquote
font-family: font-serif
font-size: 1.4em
margin: line-height 20px
text-align: center
footer
font-size: font-size
margin: line-height 0
font-family: font-sans
cite
&:before
content: "—"
padding: 0 0.5em
.pullquote
text-align: left
width: 45%
margin: 0
&.left
margin-left: 0.5em
margin-right: 1em
&.right
margin-right: 0.5em
margin-left: 1em
.caption
color: color-grey
display: block
font-size: 0.9em
margin-top: 0.5em
position: relative
text-align: center
// http://webdesignerwall.com/tutorials/css-elastic-videos
.video-container
position: relative
padding-top: (9 / 16 * 100)% // 16:9 ratio
height: 0
overflow: hidden
iframe, object, embed
position: absolute
top: 0
left: 0
width: 100%
height: 100%
margin-top: 0
.article-more-link a
display: inline-block
line-height: 1em
padding: 6px 15px
border-radius: 15px
background: color-background
color: color-grey
text-shadow: 0 1px #fff
text-decoration: none
&:hover
background: color-link
color: #fff
text-decoration: none
text-shadow: 0 1px darken(color-link, 20%)
.article-footer
clearfix()
font-size: 0.85em
line-height: line-height
border-top: 1px solid color-border
padding-top: line-height
margin: 0 article-padding article-padding
a
color: color-grey
text-decoration: none
&:hover
color: color-default
.article-tag-list-item
float: left
margin-right: 10px
.article-tag-list-link
&:before
content: "#"
.article-comment-link
float: right
&:before
content: "\f075"
font-family: font-icon
padding-right: 8px
.article-share-link
cursor: pointer
float: right
margin-left: 20px
&:before
content: "\f064"
font-family: font-icon
padding-right: 6px
#article-nav
clearfix()
position: relative
@media mq-normal
margin: block-margin 0
&:before
absolute-center(8px)
content: ""
border-radius: 50%
background: color-border
box-shadow: 0 1px 2px #fff
.article-nav-link-wrap
text-decoration: none
text-shadow: 0 1px #fff
color: color-grey
box-sizing: border-box
margin-top: block-margin
text-align: center
display: block
&:hover
color: color-default
@media mq-normal
width: 50%
margin-top: 0
#article-nav-newer
@media mq-normal
float: left
text-align: right
padding-right: 20px
#article-nav-older
@media mq-normal
float: right
text-align: left
padding-left: 20px
.article-nav-caption
text-transform: uppercase
letter-spacing: 2px
color: color-border
line-height: 1em
font-weight: bold
#article-nav-newer &
margin-right: -2px
.article-nav-title
font-size: 0.85em
line-height: line-height
margin-top: 0.5em
.article-share-box
position: absolute
display: none
background: #fff
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
border-radius: 3px
margin-left: -145px
overflow: hidden
z-index: 1
&.on
display: block
.article-share-input
width: 100%
background: none
box-sizing: border-box
font: 14px font-sans
padding: 0 15px
color: color-default
outline: none
border: 1px solid color-border
border-radius: 3px 3px 0 0
height: 36px
line-height: 36px
.article-share-links
clearfix()
background: color-background
$article-share-link
width: 50px
height: 36px
display: block
float: left
position: relative
color: #999
text-shadow: 0 1px #fff
&:before
font-size: 20px
font-family: font-icon
absolute-center(@font-size)
text-align: center
&:hover
color: #fff
.article-share-twitter
@extend $article-share-link
&:before
content: "\f099"
&:hover
background: color-twitter
text-shadow: 0 1px darken(color-twitter, 20%)
.article-share-facebook
@extend $article-share-link
&:before
content: "\f09a"
&:hover
background: color-facebook
text-shadow: 0 1px darken(color-facebook, 20%)
.article-share-pinterest
@extend $article-share-link
&:before
content: "\f0d2"
&:hover
background: color-pinterest
text-shadow: 0 1px darken(color-pinterest, 20%)
.article-share-google
@extend $article-share-link
&:before
content: "\f0d5"
&:hover
background: color-google
text-shadow: 0 1px darken(color-google, 20%)
.article-gallery
background: #000
position: relative
.article-gallery-photos
position: relative
overflow: hidden
.article-gallery-img
display: none
max-width: 100%
&:first-child
display: block
&.loaded
position: absolute
display: block
img
display: block
max-width: 100%
margin: 0 auto
/*
$article-gallery-ctrl
position: absolute
top: 0
height: 100%
width: 60px
color: #fff
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
opacity: 0.3
transition: opacity 0.2s
cursor: pointer
&:hover
opacity: 0.8
&:before
font-size: 30px
font-family: font-icon
position: absolute
top: 50%
margin-top: @font-size * -0.5
.article-gallery-prev
@extend $article-gallery-ctrl
left: 0
&:before
content: "\f053"
left: 15px
.article-gallery-next
@extend $article-gallery-ctrl
right: 0
&:before
content: "\f054"
right: 15px*/

9
themes/landscape/source/css/_partial/comment.styl
View File

@ -1,9 +0,0 @@
#comments
background: #fff
box-shadow: 1px 2px 3px #ddd
padding: article-padding
border: 1px solid color-border
border-radius: 3px
margin: block-margin 0
a
color: color-link

14
themes/landscape/source/css/_partial/footer.styl
View File

@ -1,14 +0,0 @@
#footer
background: color-footer-background
padding: 50px 0
border-top: 1px solid color-border
color: color-grey
a
color: color-link
text-decoration: none
&:hover
text-decoration: underline
#footer-info
line-height: line-height
font-size: 0.85em

165
themes/landscape/source/css/_partial/header.styl
View File

@ -1,165 +0,0 @@
#header
height: banner-height
position: relative
border-bottom: 1px solid color-border
&:before, &:after
content: ""
position: absolute
left: 0
right: 0
height: 40px
&:before
top: 0
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent)
&:after
bottom: 0
background: linear-gradient(transparent, rgba(0, 0, 0, 0.2))
#header-outer
height: 100%
position: relative
#header-inner
position: relative
overflow: hidden
#banner
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: url(banner-url) center #000
background-size: cover
z-index: -1
#header-title
text-align: center
height: logo-size
position: absolute
top: 50%
left: 0
margin-top: logo-size * -0.5
$logo-text
text-decoration: none
color: #fff
font-weight: 300
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)
#logo
@extend $logo-text
font-size: logo-size
line-height: logo-size
letter-spacing: 2px
#subtitle
@extend $logo-text
font-size: subtitle-size
line-height: subtitle-size
letter-spacing: 1px
#subtitle-wrap
margin-top: subtitle-size
#main-nav
float: left
margin-left: -15px
$nav-link
float: left
color: #fff
opacity: 0.6
text-decoration: none
text-shadow: 0 1px rgba(0, 0, 0, 0.2)
transition: opacity 0.2s
display: block
padding: 20px 15px
&:hover
opacity: 1
.nav-icon
@extend $nav-link
font-family: font-icon
text-align: center
font-size: font-size
width: font-size
height: font-size
padding: 20px 15px
position: relative
cursor: pointer
.main-nav-link
@extend $nav-link
font-weight: 300
letter-spacing: 1px
@media mq-mobile
display: none
#main-nav-toggle
display: none
&:before
content: "\f0c9"
@media mq-mobile
display: block
#sub-nav
float: right
margin-right: -15px
#nav-rss-link
&:before
content: "\f09e"
#nav-search-btn
&:before
content: "\f002"
#search-form-wrap
position: absolute
top: 15px
width: 150px
height: 30px
right: -150px
opacity: 0
transition: 0.2s ease-out
&.on
opacity: 1
right: 0
@media mq-mobile
width: 100%
right: -100%
.search-form
position: absolute
top: 0
left: 0
right: 0
background: #fff
padding: 5px 15px
border-radius: 15px
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
.search-form-input
border: none
background: none
color: color-default
width: 100%
font: 13px font-sans
outline: none
&::-webkit-search-results-decoration
&::-webkit-search-cancel-button
-webkit-appearance: none
.search-form-submit
position: absolute
top: 50%
right: 10px
margin-top: -7px
font: 13px font-icon
border: none
background: none
color: #bbb
cursor: pointer
&:hover, &:focus
color: #777

158
themes/landscape/source/css/_partial/highlight.styl
View File

@ -1,158 +0,0 @@
// https://github.com/chriskempson/tomorrow-theme
highlight-background = #2d2d2d
highlight-current-line = #393939
highlight-selection = #515151
highlight-foreground = #cccccc
highlight-comment = #999999
highlight-red = #f2777a
highlight-orange = #f99157
highlight-yellow = #ffcc66
highlight-green = #99cc99
highlight-aqua = #66cccc
highlight-blue = #6699cc
highlight-purple = #cc99cc
$code-block
background: highlight-background
margin: 0 article-padding * -1
padding: 15px article-padding
border-style: solid
border-color: color-border
border-width: 1px 0
overflow: auto
color: highlight-foreground
line-height: font-size * line-height
$line-numbers
color: #666
font-size: 0.85em
.article-entry
pre, code
font-family: font-mono
code
background: color-background
text-shadow: 0 1px #fff
padding: 0 0.3em
pre
@extend $code-block
code
background: none
text-shadow: none
padding: 0
.highlight
@extend $code-block
pre
border: none
margin: 0
padding: 0
table
margin: 0
width: auto
td
border: none
padding: 0
figcaption
clearfix()
font-size: 0.85em
color: highlight-comment
line-height: 1em
margin-bottom: 1em
a
float: right
.gutter pre
@extend $line-numbers
text-align: right
padding-right: 20px
.line
height: font-size * line-height
.line.marked
background: highlight-selection
.gist
margin: 0 article-padding * -1
border-style: solid
border-color: color-border
border-width: 1px 0
background: highlight-background
padding: 15px article-padding 15px 0
.gist-file
border: none
font-family: font-mono
margin: 0
.gist-data
background: none
border: none
.line-numbers
@extend $line-numbers
background: none
border: none
padding: 0 20px 0 0
.line-data
padding: 0 !important
.highlight
margin: 0
padding: 0
border: none
.gist-meta
background: highlight-background
color: highlight-comment
font: 0.85em font-sans
text-shadow: 0 0
padding: 0
margin-top: 1em
margin-left: article-padding
a
color: color-link
font-weight: normal
&:hover
text-decoration: underline
pre
.comment
.title
color: highlight-comment
.variable
.attribute
.tag
.regexp
.ruby .constant
.xml .tag .title
.xml .pi
.xml .doctype
.html .doctype
.css .id
.css .class
.css .pseudo
color: highlight-red
.number
.preprocessor
.built_in
.literal
.params
.constant
color: highlight-orange
.class
.ruby .class .title
.css .rules .attribute
color: highlight-green
.string
.value
.inheritance
.header
.ruby .symbol
.xml .cdata
color: highlight-green
.css .hexcolor
color: highlight-aqua
.function
.python .decorator
.python .title
.ruby .function .title
.ruby .title .keyword
.perl .sub
.javascript .title
.coffeescript .title
color: highlight-blue
.keyword
.javascript .function
color: highlight-purple

19
themes/landscape/source/css/_partial/mobile.styl
View File

@ -1,19 +0,0 @@
@media mq-mobile
#mobile-nav
position: absolute
top: 0
left: 0
width: mobile-nav-width
height: 100%
background: color-mobile-nav-background
border-right: 1px solid #fff
@media mq-mobile
.mobile-nav-link
display: block
color: color-grey
text-decoration: none
padding: 15px 20px
font-weight: bold
&:hover
color: #fff

27
themes/landscape/source/css/_partial/sidebar-aside.styl
View File

@ -1,27 +0,0 @@
#sidebar
@media mq-normal
column(sidebar-column)
.widget-wrap
margin: block-margin 0
.widget-title
@extend $block-caption
.widget
color: color-sidebar-text
text-shadow: 0 1px #fff
background: color-widget-background
box-shadow: 0 -1px 4px color-widget-border inset
border: 1px solid color-widget-border
padding: 15px
border-radius: 3px
a
color: color-link
text-decoration: none
&:hover
text-decoration: underline
ul, ol, dl
ul, ol, dl
margin-left: 15px
list-style: disc

27
themes/landscape/source/css/_partial/sidebar-bottom.styl
View File

@ -1,27 +0,0 @@
.widget-wrap
margin-bottom: block-margin !important
@media mq-normal
column(main-column)
.widget-title
color: #ccc
text-transform: uppercase
letter-spacing: 2px
margin-bottom: .5em
line-height: 1em
font-weight: bold
.widget
color: color-grey
ul, ol
li
display: inline-block
zoom:1
*display:inline
padding-right: .75em
/* Having problems getting balanced white space between items
li:before
content: " | "
li:first-child:before
content: none
*/

Some files were not shown because too many files have changed in this diff Show More