【轻松集赞】写了个涉嫌混淆微信官方服务的小程序

2018年06月14日 2.4k 字大概 10 分钟

发生背景：

随着现在国内的社交软件用户群体的不断扩大，商家打广告的方式（套路）也越来越多了，每次走在大街上都可以看到商家打出来广告牌，”朋友圈点赞超过30享受六折优惠”。

WePY 上手

2018年06月03日 540 字大概 2 分钟

来自微信官方的小程序组件开发框架

介绍

WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。

类Vue开发风格
支持自定义组件开发
支持引入NPM包
支持Promise
支持ES2015+特性，如Async Functions
支持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
支持多种插件处理，文件压缩，图片压缩，内容替换等
支持 Sourcemap，ESLint等
小程序细节优化，如请求列队，事件优化等

安装使用

安装（更新）wepy命令行工具

npm install wepy-cli -g

生成开发实例

npm init standard projectName
```  
生成src的目录 开发在此目录进行开发
### 安装依赖  
```js
npm install
```  
将所有项目和开发时（package.json）所需要的依赖进行安装
### 开启实时编译
```js
wepy build --watch
```  
生成dist目录、并实时监听src目录下的修改且编译到dist目录中     
### WePY项目目录结构

├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录（属于完整页面）
| | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
| | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
| └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json 项目的package配置

```

开发者工具导入项目

使用微信开发者工具新建项目，本地开发选择生成的dist目录，会自动导入项目目录配置

WePY官方文档

LazyLoad(懒加载)

2018年05月04日 231 字大概 1 分钟

懒加载

懒加载（延迟加载）是一种网页性能优化的方式，一般优先加载可视区域内的内容，其他部分进入可视区域再进行加载，能够提高用户体验。
节省http请求数量、节省用户流量

Css3属性

2018年05月04日 1.8k 字大概 7 分钟

text-shadow属性

介绍:

text-shadow属性可以给页面上的文字增添阴影效果，text-shadow在Css2.1的时候是被删除了的一个属性，但是呢在 3.0 的Css中又恢复了使用

使用方法

text-shadow : length length length color

注：前两个参数在使用的时候必须给定

第一个length表示阴影离开文字横方向的距离
第二个length表示阴影离开文字纵方向的距离
第二个length表示阴影模糊半径即模糊范围
color 表示阴影颜色可以放在三个length之前也可以放在之后如果不给值则使用元素默认color

$ 指定多个阴影：每个阴影用逗号隔开
text-shadow : 15px 15px 5px #000,30px,30px,5px #f60;
background-size属性
介绍:
在Css3中可以使用background-size来指定背景图像的尺寸

使用方法
background-size: auto || length || percentage || cover || contain
auto: 默认值保持背景图片的原始宽高比
length: 设置背景图片的宽度和高度，如果只设置一个值，则第二个值会被设置为auto 按宽高比进行放大缩小
percentage: 以父元素的百分比来设置宽度和高度，如果只设置一个值同上
cover: 此值是将图片放大，以适合铺满整个容器，这个主要用在当图片小于容器又无法使用background-repeat来实现，就采用cover将背景图片放大到适合容器的大小，但是会使图片失真
contain: 与cover相反，将背景图片缩小以适合铺满整个容器，这个主要用在当背景图片大于元素容器时，而又需要将背景全部显示出来，就可以用contain将图片缩小到适合容器的大小，这种方法同样会使图片失真

在一个元素中显示多个背景图片

介绍:

在Css3一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，这样对背景中所用素材调整变得更加容易。

使用方法

background-image:url(1.png),url(2,png),url(3.png);

图层的排序方法: 浏览器中显示时叠放的顺序是从上往下指定的，第一个图片放在最上面，最后指定的放在下面

Css3的变形功能

transform属性

介绍:
在Css3中可以利用transform属性来实现文字或图像的旋转、缩放、倾斜、和移动。但是需要做兼容性处理，如下

-webkit-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-ms-transform: rotateX(60deg); /*IE9*/
-o-transform: rotateX(60deg);

rotate(旋转)：
- rotate(60deg);顺时针旋转 deg是Css3中的角度单位
  -webkit-transform: rotateX(60deg);
- rotateX(angle) rotateY(angle) rotateZ(angle)
  绕对应的轴进行3D旋转
- rotate3D(X,Y,Z,deg) 定义 3D 旋转
scale(缩放)：
transform:scale(值) 值所指的是缩(小)放(大)倍率如果值为负数并没有效果纯属无聊
- scale(x,y) 使元素在x轴 y轴方向同时缩放
- scaleX(.5) 你应该懂得
- scaleY(.5) 同上
skew(倾斜)
transform:skew(deg) 倾斜角度
- skew(x,y) 元素在水平和垂直方向上同时倾斜只有一个参数时，只在水平方向上倾斜
- skewX(x) 元素仅在水平方向倾斜
- skewY(y) 元素在垂直方向倾斜
translate(值) 指定移动的距离负值即反方向移动
- translate(x,y);在x轴和y轴同时移动，只有一个参数时，仅在水平方向移动;
- translateX(x);x轴方向移动
- translateY(y);y轴方向移动
transform-origin 改变元素基点
属性使用：transform-origin:bottom;
各个基点参考如图：
对一个元素使用多种变形的方法：
transform：方法一，方法二，方法三..;
/*同样也需要做兼容性处理*/ transform: translate(50px),rotate(60deg),scale(2);
Css3的动画功能
demo
transition 支持从一个属性平滑过渡到另外一个属性

语法:

transition: property duration timing-function delay;

transition 主要包含四个属性值:
执行变换的属性: transition-property,属性规定应用过渡效果的CSS属性的名称。(当指定的CSS属性改变时，过渡效果将开始)值有三个类型:

A、none 没有属性会获得过渡效果。
B、all所有属性都将获得过渡效果。
C、property定义应用过渡效果的CSS 属性名称列表，列表以逗号分隔。

变换延续的时间: transition-duration规定完成过渡效果需妻花费的时间(以秒或毫秒计》，默认值0没有效果

在延续时间段，变换的速率变化transition-timing-function
值:

A. ease:  (逐渐变慢) 默认值，ease函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0).  
B. linear:  (匀速)，linear 函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0).  
C. ease-in: (加速)，ease-in 函数等同于贝塞尔曲线(0.42,0,1.0,1.0).  
D. ease-out:  (减速)，ease-out 函数等同于贝塞尔曲线(0,0,0.58,1.0).  
E. ease-in-out :  (加速然后减速)，ease-in-out 函数等同于贝塞尔曲线(0.42,0,0.58,1.0)  
F. cubic-bezier(n,n,n,n)在cubic-bezier 函数中定义自己的值。可能的值是0 至1之间的数值。

animation 支持通过关键帧的指定来在页面上产生更复杂的动画效果

用 transition和Animations的区别 :

transition和Animations的区别在于，transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行垂滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果，而Animations功能是是通过关键幀以及每个关键帧中的属性值来实现更为复杂的动画效果。

Animations的使用方法:
参考我的飞机Demo更好哦

@-webkit-keyframes 关键帧合集名称{  
    创建关键帧的代码  
}  
0%~100%{  
    本关键帧中的样式   
}   
// 关键帧创建好了之后，还要在元素的样式中使用该关键帧。方法如下: 
元素{
  - webkit-animation-name :关键帧合集名称 ;
  - webkit-animation-duration:5s ;
  - webkit-animation-timing-function :linear;-webkit-animation-iteration-count:infnite  
}
```css
  -webkit-animation-name 指定合集名称，  
  -webkit-animation-duration 整个动画执行完成需要的时间，  
  -webkit-animation-timing-function 实现动画的方法
  
  -webkit-animation-iteration-count 属性的属性值设定为某个整数值，那么这个动画播放的次数就等于这个整数值(infinite是无限循环播放)。

实现动画的方式:
A、linear: 匀速进行.
B、ease-in: 开始速度很慢，然后沿曲线进行加快，
C、ease-out: 开始速度很快，然后沿着曲线进行减速.
D、ease: 开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速，
E、ease-in-out: 开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速.

也可以以合集的形式进行样式书写：

animation: name duration timing-function delay iteration-count direction;

完整的URL请求页面过程

2018年05月03日 2.2k 字大概 9 分钟

当我们在网页浏览器（Web browser）的地址栏中输入URL时，Web页面是如何呈现的？就让我们来聊聊从用户输入到页面加载完成的过程中都发生了什么事情。

Css3之Flex布局

2018年05月02日 898 字大概 4 分钟

Flex(flexible box) 弹性布局

传统的布局解决方案，基于盒模型，通过 css中的display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

概念
- 任何容器都可以设为flex布局
- 采用flex布局的元素即为flex container，其子元素为容器成员(flex item)
- 设为flex布局以后，子元素的float/clear/vertical-align属性将会失效
主轴和交叉轴
- 容器默认存在水平主轴main axis和垂直的交叉轴cross axis
- flex-item排列的方向是主轴
flex-container容器属性
- flex-direction决定主轴的方向(同时也是flex-item的排列方向)
  
  flex-direction: row | row-reverse | column | column-reverse;
  - row（默认值）：主轴是水平方向，flex-item水平从左往右排列
  - column : 主轴呈垂直方向,从上边沿向下排列
  - reverse参数: 将起始与终点进行互换
- flex-wrap 属性定义如果在一条轴线上排不下，换行的规则
  
  flex-wrap：nowrap | wrap | wrap-reverse
  - nowrap（默认值）：不换行
  - wrap : 自然换行直接将多余的元素从下一行开始排列
  - wrap-reverse: 将第一行排列到下方
- flex-flow 是flex-direction和flex-wrap的简写，默认值为row nowrap
- justify-content:定义flex-item在主轴main-axis上的对齐方式
  
  justify-content: flex-start | flex-end | center | space-between | space-around
  - flex-start（默认值）：左对齐；
  - flex-end右对齐；
  - center居中；
  - space-between：两端对其，flex-item间的间隔距离相等
  - space-around：每个flex-item两侧的间隔相等，相当于设置左右margin值相等
- align-items : 定义flex-item在交叉轴的对齐方式
  
  align-items: flex-start | flex-end | center | baseline | strecth。五个取值与交叉轴方向有关
  - flex-start|flex-end|center和flex-direction一样，只不过是在交叉轴起点、终点、中点对齐；
  - baseline：flex-item的第一行文字的基线对齐
  - stretch（默认值）：如果flex-item没有设置高度或者值为auto，将占满整个容器高度
- align-content：如果容器内出现多跟轴线（即出现wrap），定义主轴在交叉轴上的对齐方式，只有一根轴线时不起作用
  
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
  - stretch（默认值）：轴线沾满整个交叉轴
  - space-between：与交叉轴两端对齐，轴线间的间隔平均分布
  - space-around：每根轴线两侧的间隔相等
  - flex-start：与交叉轴起点对其
flex-item项目的属性
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大.
  
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
- flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  
  flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
- flex-basis
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  
  align-self: auto | flex-start | flex-end | center | baseline | stretch;

Javascript函数

2018年05月01日 1.9k 字大概 8 分钟

函数

函数用于指定对象的行为，在其中包含一组语句。用于代码复用、信息隐藏、和组合调用。

函数对象

JavaScript 中的函数就是对象。函数对象连接到Function.prototype（该原型对象本身连接到Object.prototype）。每个函数对象在创建时会附加两个隐藏属性：函数的上下文和实现函数行为的代码。

函数对象在创建时也随配有一个prototype属性。它的值是一个拥有constructor属性且值即为该函数对象。

    function add(a,b){
        return a+b;
    }
```  
因为函数是对象，所以可以像任何其他的值一样被使用。函数可以保存在变量、对象和数组中。函数可以被当做参数传递给其他函数，函数也可以再返回函数。函数也可以拥有方法。

函数的与众不同之处在于可以被调用。  
### 函数字面量  
函数对象通过函数字面量来创建。
函数字面量包含4部分，分别是：保留字 function、函数名、参数、花括号中的语句。
```js
    var add = function(a, b) {
        return a + b
    }  
```  
### 调用  
调用一个函数会暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，还有两个附加参数：`this`和`arguments`。参数this在面向对象编程中非常重要，它的值取决于调用的模式。

实参和形参个数不匹配时，不会有运行时错误。实参过多时，超出的实参被忽略。形参过多时，缺失的值被替换为undefined。  
- 方法调用模式  
    当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，`this被绑定到该对象`,通过this可以对该对象的属性和方法进行调用和操作。  
    ```js
    var myObject = {
        text: hello,
        say:function(msg){
            console.log(this.text + msg);
        }
    }
    myObject.say(world);

函数调用模式
当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用的。
此时this被绑定到全局对象。即时是内部函数也会将this绑定到全局对象。this的指向问题作用域不一样 this的指向就不一样,可以在函数内创建一个属性并赋值为this来解决这个问题,一般通过var that = this;

var add = function(a, b) {
    return a + b
}

myObject.double = function() {
    var that = this
    var helper = function() {
        that.value = add(that.value, that.value)
    }
    helper()
}

myObject.double()
console.log(myObject.value) //8

    attachEvent: function () {
    // attachEvent函数的作用域
    // js 里面this总会指向什么
    // 对象的方法被执行时 this指向对象
    // console.log(this);
    var that = this;
    this.staticElement.addEventListener('click', function () {
        // 这个函数被执行时，并不是对象的方法，而是匿名函数，作为事件处理函数来执行，this会指向事件发生元素
        // this的指向跟函数的调用方式有关
        // this的指向问题 作用域不一样 this的指向就不一样
        // 作用域 事件的回调函数
        // console.log(this);
        // alert(that.value);
        that.convertToEdit();
    }, false);
    this.filedElement.addEventListener('keydown', function (evt) {
        // 在事件发生的一刹那 会产生一个临时事件对象
        console.log(evt);
        if (evt.keyCode == 13) {
            that.staticElement.innerHTML = this.value;
            console.log(that.staticElement.innerHTML);
            that.convertToText();
        }
    }, false)
}

构造器调用模式
JavaScript是一门基于原型继承的语言。对象可以直接从其他对象继承属性。该语言是无类型的。
如果在一个函数前面带上new来调用，那么背地里将会创建一个连接到该函数的prototype成员的新对象，同时this会被绑定到那个新对象上。

//创建构造器函数
var Quo = function(string) {
    this.status = string
}

//给Que的所有实例提供一个公共方法
Quo.prototype.getStatus = function() {
    return this.status
}

//实例化
var myQuo = new Quo('confused')

console.log(myQuo.getStatus()) //confused

Apply 调用模式
apply方法让我们构建一个参数数组传递给调用函数。他也允许我们选择this的值。apply方法接受两个参数，第一个是要绑定给this的值，第二个是参数数组。

        var arr = [3, 4]
        var sum = add.apply(null, arr)
        console.log(sum) //7

        var statusObject = {
            status: 'hello'
        }

        var status = Quo.prototype.getStatus.apply(statusObject)
        console.log(status) //hello
```  

### 参数  

当函数被调用时，会得到一个`arguments`数组。通过此参数可以访问所有它被调用时传递给它的`参数列表`，包括那些没有被分配给函数声明时定义的形参的多余参数。这使得编写一个无须指定参数个数的函数成为可能。
```js    
 var sum = function() {
     var i, sum = 0
     for (i = 0; i < arguments.length; i++) {
         sum += arguments[i]
     }
     return sum
 }
 console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9)//45

因语言的设计错误，arguments并不是一个真正的数组。是一个“类似数组”的对象。有length属性，但没有任何数组的方法。

函数执行时遇到关闭函数体的}时结束。然后把控制权交还给调用该函数的程序。

return可以使函数提前返回，当return语句执行时函数立即返回不在执行余下的语句。

函数总是会返回一个值，若没有指定，则返回undefined。

若函数调用时在前面加上了new前缀，且返回值不是一个对象的时候，则返回this（该新对象）。

闭包

作用域的好处是内部函数可以访问定义他们的外部函数的参数和变量（除了this和arguments）。

var quo = function(status) {
    return {
        get_status: function() {
            return status;
        }
    }
}

var myQuo = quo('amazed')
console.log(myQuo.get_status()) //amazed

狭义的说，返回的那个对象即闭包，它里面的方法可以访问它被创建时所处的上下文环境。status访问的就说对象中的status属性本身,通过闭包可以让一个局部变量驻留在内存中

避免在循环中创建函数，容易引起混淆。可以现在循环之外创建一个辅助函数，让辅助函数在返回一个绑定了当前i值的函数，这样就不会导致混淆了。

回调

将一个函数作为参数，一旦接收到响应，再调用这个函数。

 fs.readFile('demo/02.js','utf8',(error,data)=>{
 if(error) throw error;
 //在异步中的错误不能被捕获 通过throw error进行错误的捕获
 console.log(data) >>a.txt;
});

模块

可以用函数和闭包构造模块。模块是一个提供接口却隐藏与实现的函数或者对象

模块模式的一般形式是：一个定义了私有变量和函数的函数；利用闭包创建可以访问私有变量和函数的特权函数；最后返回这个特权函数，或者把他们保存到一个可访问到的地方。

var numberCal = (function() {
    var half = function(n) {
        return n / 2
    }
    var double = function(n) {
        return n * 2
    }
    var tribble = function(n) {
        return n * 3
    }
    return {
        half: half,
        double: double,
        tribble: tribble
    }
}())

console.log(numberCal.half(5)) //2.5
console.log(numberCal.half(6)) //3
console.log(numberCal.double(7)) //14
console.log(numberCal.tribble(7)) //21

级联

如果让方法返回this而不是默认的undefined，就可以启用级联，即连续调用。

记忆

函数可以将先前操作的结果记录在某个对象或者数组里，从而避免无谓的重复运算。这种优化被称为记忆（memoization）。

next主题个性化配置

2018年04月26日 1.3k 字大概 5 分钟

看到一些大神的next博客站点很酷那到底是怎么实现的呢经过一番的倒腾，终于将一些使用且比较酷的功能添加到自己的博客中

主要添加的功能有：

在右上角或者左上角实现fork me on github
添加RSS·
添加动态背景·
在每篇文章末尾统一添加“本文结束”标记
修改作者头像并旋转
主页文章添加阴影效果
在网站底部加上访问量
添加菜单分类页面·
首页实现文章内容截断（展示阅读全文）
网站底部字数统计
添加 README.md 文件·
隐藏网页底部powered By Hexo / 强力驱动
添加来必力评论 Livere·
DaoVoice 在线联系
添加站内搜索
0 实现fork me on github

1.修改头像并配置头像样式

编辑 ·主题配置文件·，修改字段 `avatar，值设置成头像的链接地址。其中，头像的链接地址可以是：
将头像图片放置在 source/images/ 目录下
```
  配置为：avatar: /images/avatar.png
  或者使用图片的在线地址  
```
2.设置博客背景动画
NexT 自带两种背景动画效果：
编辑主题配置文件，搜索 canvas_nest 或 three_waves，根据您的需求设置值为 true 或者 false 即可：如下、

#canvas_nest
canvas_nest: true //开启动画

#three_waves
three_waves: false //关闭动画

3.添加RSS

在blog目录下安装hexo-generate-feed 然后打开z主题配置文件,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

#Set rss to false to disable feed link.
#Leave rss as empty to use site’s feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

4.在网站底部加上访问量

有点不想写了

5.网站底部字数统计

修改如下部分

#Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true

在适当的位置添加以下页面代码

6.添加README.md

每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。
在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为skip_render:README.md
保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

7.添加菜单分类/标签页面
在hexo站点目录下使用hexo new page 新建一个页面命名为tags 如下：

hexo new page tags
此时会在hexo > source文件夹中会生成一个tags文件夹。
编辑tags文件夹下面的.md文件

在菜单中添加链接。编辑主题配置文件，添加 tags 到 menu 中，如下:

menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags

注：||之前的值是目标链接，之后的是页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

8.添加livere来必力评论模块

注意：最新版 hexo-theme-next 已经包含 LiveRe 插件，下载最新版本，配置 livere_uid 即可使用

获取livere_uid步骤

进入 LiveRe，注册账号。

LiveRe 有两个版本：

City 版：是一款适合所有人使用的免费版本；
Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。City版就够了。
安装，获取 uid：

填写完成后，进入到管理页面 -> 代码管理 -> 一般网站代码中，data-uid 即为所需 uid

添加 LiveRe 插件

首先在 _config.yml 文件中添加如下配置：

#Support for LiveRe comments system.
#You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中 livere_uid 即上一步获取到的 uid。其他的设置在最新版中都不需要配置啦所以说程序员还是要用新的潮的东西

9.设置网站图标

具体方法实现

找一张（32*32）的ico图标，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改`主题配置文件`,下面就是图标配置代码修改即可：

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

10.站内博客搜索

添加百度/谷歌/本地自定义站点内容搜索.

1.安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb –save

2.编辑 站点配置文件，新增以下内容到任意位置：

search:
path: search.xml
field: post
format: html
limit: 10000

3.编辑主题配置文件，启用本地搜索功能：
> #Local search
local_search:
enable: true

11.首页文章内容截断

编辑主题配置文件如下设置则会开启自动截断功能

#Automatically Excerpt. Not recommend.
# Please use

在 Hexo 中安装 Next主题

2018年04月25日 615 字大概 2 分钟

倒腾了一天半终于自己实现了一个还不错的博客，在这篇文章中，假定你已经成功安装了 Hexo，并使用 Hexo 提供的命令创建了一个站点。如果没有搭建好自己的hexo+git pages博客界面可以看我另外一篇经验分享

**说明**：在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo本身的配置；另一份位于主题next目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

下载主题

下载方式：

1.在theme文件夹中将主题包克隆到本地，并将文件名hexo-theme-next改成next

     git clone https://github.com/iissnan/hexo-theme-next themes/next
 2.前往Next[发布页面][1]将`sourcecode`下载到本地，解压所下载的压缩包至站点的 themes 目录下， 并将 解压后的文件夹名称（`hexo-theme-next-0.4.0`）更改为 `next`。

启用Next

 当 克隆/下载 完成后，打开 站点配置文件， 找到 `theme` 字段，并将其值更改为`next`。

验证主题是否应用

1. NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 最好使用 `hexo clean` 来清除 Hexo 的缓存。
2. 执行`hexo generate` 生成博客
3. 执行`hexo server`启用本地服务器 在本地可以直接查看修改以后的效果
     >`INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to`  
     使用浏览器进行访问http://0.0.0.0:4000/

修改主题样式scheme
Scheme 的切换通过更改主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

#Schemes
#scheme: Mist
scheme: Muse
#scheme: Pisces
#scheme: Gemini

其他基本配置
打开站点配置文件 可以像我一样进行基本设置 每个冒号后面必须与内容用空格分割

#Site
title: HeiLiu //站点title
subtitle: 有一句Hello World想要对你说
description: 程序员大学本科
keywords:
author: 刘江龙
language: zh-Hans //设置语言
timezone: Asia/Shanghai //时间

#Deployment

Docs: https://hexo.io/docs/deployment.html

deploy:
type: git
repo: https://github.com/HeiLiu/HeiLiu.github.io.git
branch: master

JS对数组去重的几种方法

2018年04月22日 866 字大概 4 分钟

面试经常问的一道题
JS对数组去重的几种方法 (前面六种方法是普通数组，最后一种是对象数组)

【轻松集赞】写了个涉嫌混淆微信官方服务的小程序

发生背景：

WePY 上手

来自微信官方的小程序组件开发框架

介绍

安装使用

安装（更新）wepy命令行工具

生成开发实例

开发者工具导入项目

LazyLoad(懒加载)

懒加载

Css3属性

text-shadow属性

使用方法

background-size属性

介绍:

使用方法

在一个元素中显示多个背景图片

介绍:

使用方法

Css3的变形功能

transform属性

Css3的动画功能

transition 支持从一个属性平滑过渡到另外一个属性

animation 支持通过关键帧的指定来在页面上产生更复杂的动画效果

完整的URL请求页面过程

Css3之Flex布局

Flex(flexible box) 弹性布局

Javascript函数

函数

函数对象

返回

闭包

回调

模块

级联

记忆

next主题个性化配置

主要添加的功能有：

0 实现fork me on github

1.修改头像并配置头像样式

2.设置博客背景动画

3.添加RSS

4.在网站底部加上访问量

5.网站底部字数统计

6.添加README.md

7.添加菜单分类/标签页面

8.添加livere来必力评论模块

获取livere_uid步骤

9.设置网站图标

10.站内博客搜索

11.首页文章内容截断

在 Hexo 中安装 Next主题

Docs: https://hexo.io/docs/deployment.html

JS对数组去重的几种方法

`transition` 支持从一个属性平滑过渡到另外一个属性