Fork me on GitHub

发表于 | 分类于

今天来给大家推荐一下值得看的书籍

首先呢，在现在的这个社会里面高强度的工作和浮躁的社会现象，
还有互联网娱乐风向的影响有些人已经将书籍抛弃了。
大家都说”南抖音北快手”谁还看书呀，但是腹有诗书气自华这个可不是凭空就可以做到的。

1
2
3
4
5
6
7
8
9
首先说一下看书的用处，书中的故事是非常有含义的。
书中的故事有可能在你看的时候没有太大的感触和理解。但是你会发现在你的生活之中，
会有书籍中的故事和你所经历的一样，他可以为你解答你对一些问题的疑惑。

书籍呢，有些人说书籍改变你的命运，我们不说这么虚无的，我们就实在的来说。
看书是快速了解这个世界，了解不同有价值思想，从书中学到自己所不解的知识
而让自己快速的成长。充实自身和了解自己。

最后当你把读书变成爱好后你一定会感激现在的自己。

下面介绍一些书籍

莫言的书籍

蛙

1
2
3
4
5
《蛙》为中国当代作家莫言重要作品，出版于2009年，《蛙》 以新中国近60年波澜起伏的农村生育史为背景，
讲述了从事妇产科工作50多年的乡村女医生姑姑的人生经历，也反映出中国计划生育的艰难历程。

小说通过讲述从事妇产科工作50多年的乡村女医生姑姑的人生经历，反映新中国近60年波澜起伏的农村生育史，
描述国家为了控制人口剧烈增长、实施计划生育国策所走过的艰巨而复杂的历史过程。

丰乳肥臀

1
2
《丰乳肥臀》是莫言最著名的代表作之一 。小说热情讴歌了生命最原初的创造者——母亲的伟大、朴素与无私，生命的沿袭的无与伦比的重要意义。
并且在这一幅生命的流程图中，弥漫着历史与战争的硝烟，真实，不带任何偏见，再现了一段时期内的历史。

洪应明（明代）【重点推荐大作】

菜根谭

1
2
3
4
5
6
这本书首先容纳了儒家、佛家、道家，这三大思想。

其文字简炼明隽，兼采雅俗。似语录，而有语录所没有的趣味；似随笔，而有随笔所不易及的整饬；
似训诫，而有训诫所缺乏的亲切醒豁；且有雨余山色，夜静钟声，点染其间，其所言清霏有味，风月无边。

读过此书的人都深有体会。不同时期年龄的你再次阅读会有不同的理解和感受。

这次就先给大家介绍这三本，未完待续！！！

发表于 | 分类于

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
标题都以#开头，标题会自动换行


语法: 
# 这是标题1
## 这是标题2
### 这是标题3
#### 这是标题4
这是普通文字

这是标题1


这是标题2


这是标题3


这是标题4

这是普通文字  


换行

每行文字后面加2个或更多空格

文字行1（后面加2个空格）
文字行2（后面加2个空格）
文字行3（后面无空格，仅用换行）
文字行4（后面无空格，仅用换行）
文字行5（后面无空格，仅用换行）

代码高亮

1
2
3
4
5
6
7
8
9
10


行内代码高亮可以用两个``将内容包裹起来。例如`function(){return 0}` 表现为function(){return 0}。可以保持高亮。
如果是多行内容，则使用```将代码包起来。

Example:

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
1
2
3
4
def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s
1
2
3
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
1
2
3
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.
becomes:

var s = "JavaScript syntax highlighting";
alert(s);
def function():
#indenting works just fine in the fenced code block
s = "Python syntax highlighting"
print s
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

```bash
链接

语法: [链接名称](链接地址)


列表


无序列表

Markdown 语法：

* 项目一 
* 项目二
  * 项目二的子项目一 
  * 项目二的子项目二
效果如下：


项目一
项目二


项目二的子项目一 
项目二的子项目二





有序列表

Markdown 语法：

1. 项目一 
2. 项目二 
3. 项目三
  1. 项目三的子项目一 
  2. 项目三的子项目二
效果如下：


项目一 
项目二 
项目三


项目三的子项目一
项目三的子项目二





任务列表（Task lists）

Markdown 语法：

- [ ] 任务一 未做任务
- [x] 任务二 已做任务
效果如下：



 任务一 未做任务

 任务二 已做任务



表格

Example:

| header 1 | header 2 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |
效果：




header 1
header 2




cell 1
cell 2


cell 3
cell 4





引用

> 这是引用
> 直接换行  
> 行后面跟两个空格  
> 行后面跟两个空格
效果


这是引用
直接换行
行后面跟两个空格
行后面跟两个空格



删除

Examples:

{+ additions +}
[+ additions +]
{- deletions -}
[- deletions -]
~~test~~
 additions 
 additions 
 deletions 
 deletions 
test

发表于 | 分类于

开启本地配置

1
2
3
在我们的本地的hexo的_config.yml文件中，找到post_asset_folder
这个参数。
修改为post_asset_folder = true.

怎么生成图片

1
2
3
4
5
6
7
8
9
我们开启hexo的这个配置后，在我们下次进行new一个博客的时候
会直接产生一个和博客文件名一样的文件夹。
在这个文件夹中，我们可以直接把我们需要用到的图片放进去。
图片放入之后，我们在我们的md文件里面使用markdown的语法引入图片。
例：![logo](博客相同的文件夹名字/logo.jpg)
如果没有出现图片请用下面的路径：
![logo](/2018/05/29/博客相同的文件夹名字/logo.jpg)
我们在前面加上当天的日期。
之后进行上传博客到你自己的git上面。

展示

logo

发表于 | 分类于

本节课程：

v-bind:class

v-bind:class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
下面我们对html进行了class的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
    .active
    {
        color: red;
    }
    .big
    {
        font-weight: bolder;
        font-size: 64px;
    }

</style>
<body>
    <div id="myApp">
        <div v-bind:class="myClass">文本</div>
        <button @click="btnClick">点击改变</button>
    </div>
</body>
</html>
<script >
    var myApp = new Vue
    ({
        el: "#myApp",
        data:
        {
            myClass:
            {
                active:true,
                big:true
            }
        },
        methods:
        {
            btnClick: function()
            {
                this.myClass.active = !this.myClass.active;
                this.myClass.big =  !this.myClass.big;
            }
        }

    })
</script>

发表于 | 分类于

1、什么是vue：

vue是一个小巧、容易上手的mvvm框架，和angular类似
 vue结构为：一片html代码配合json，再new一个vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html:
   <div id='box'>
       {{text}}
    </div>
script:
   var c = new Vue({
       el:'#box',    //选择器 id、class、tagName
        data：{
           text:'hello vue'
        }
    })

前端框架：
1. mvc【react】model + view + control

2. mvvm【angular、vue】model + view + viewmodel

MVVM的优点：
低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；

可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；

独立开发：开发人员可以专注与业务逻辑和数据的开发 
ViewModemvvm设计人员可以专注于UI(View)的设计；

可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。

2、vue的特点：

1
2
3
不兼容低版本IE、轻（拆分成了很多模块，让用户自己选择需要的功能  vue-router、vuex、vue-resource、vue-server-renderer）、github活跃、作者是中国人所以文档对于中国程序猿更友好、渲染快
!)
 可以看到angular每秒只能进行100次左右的操作，React大概在1000-2000之间，Vue在10K以上，这是因为Vue每次赋值，都直接触发了数据项的对比然后直接更新绑定DOM元素的内部文本，而不是关联模板（angular）、也没有对比虚拟DOM节点差异（react）

3、常用指令：【扩展html标签功能、属性】

a) v-model (双向数据绑定) 一般表单元素（input）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
b) v-for (循环)
   [1.*版本]：
            v-for='item in items'
            {{item}}

              v-for='(k,v) in items'
              {{k}} {{v}}
      另外还有：{{$index}} {{$key}}可用

    [2.*版本]：
             v-for='(v,k) in items'
               {{v}} {{k}}

          注意：v、k的顺序改变
            去除了{{$index}} {{$key}}

c) v-show (显示/隐藏)
          v-show='布尔值'
d) v-if (是否渲染)
          v-if='布尔'

4、常用事件：(v-on:* / @*)

a)鼠标类事件【click/mouseout/mouseover/dbclick/mousedown/contextmenu/..】

1. 用法：v-on:click/@click='函数'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   2. 对象：$event

原生js：
      document.getElementById('password').click=function(e){
            event = e||window.event
        }
vue.js:
      @click='mymethod($event)'

        methods:{
           mymethod:function(e){
               ...
            }
        }
3. 阻止冒泡：
         a) e.cancelBubble = true;
            b) @click.stop  ☆推荐

4. 阻止默认行为：
         a) e.preventDefault();
            b) @contextmenu.prevent ☆推荐

b)键盘类事件【keydown/keyup】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1. 用法：v-on:keydown/@keydown='函数'

2. 对象：同鼠标类事件

3. 获取键入码：
   mymothod:function(e){
            e.keyCode
     }
     
4.常用键：
         【exemple】判断按下的键是回车：
              a)
                 @keydown='mymethod($event)'

                 mymethod:function(e){
                    if(e.keyCode == 13) console.log('你按下了回车')
                 }

              b)
                 keydown.13='enterfunc'

                 enterfunc:function(){
                    console.log('你按下了回车')
                 }

              c)
                 keydown.enter='enterfunc'
          【补充】:
                @keyup/down.left
                  @keyup/down.right
                  @keyup/down.up
                  @keyup/down.down
                  ....

5、常用属性：(v-bind:* / :*)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
a)class和style:
    1. :class=''      v-bind:class=''
       :style=''      v-bind:style=''
    2.
       :class='[active, bluebg]'
      
       :class='{active:isActive, bluebg:isBlue}'
        data:{
            isActive: true,
            isBlue: false
        }
    3.
       :class='json'
        data:{
            json:{active:isActive, bluebg:false},
            isActive:true
        }
     4.
     :class='[isActive ? active : "", bluebg]'
       :class='[{ active: isActive }, bluebg]'
     5.
     :style="{'margin-left':mleft, fontSize: ftSize + 'rem'}"
       data:{
        mleft:'20px',
           ftSize:'16'
       }
b)其他属性:【width、height、src、disable、自定义属性、...】
       v-bind:src='url_data'            :src='url_data'

        <img src='{{url_data}}'>        //数据能读出来，但是会报错
        <img :src='url_data'>         //数据能读出来，且不会报错

6、模板：

1
2
3
4
5
{{text}}               //数据更新则模板发生变化

   {{*text}}              //数据只绑定一次（初始值）

   {{{text}}}            //HTML转义输出

7、过滤器：

1
2
3
4
5
6
7
8
9
10
11
12
13
a) 过滤器用法：
    {{text| filterA}}
     {{text| filterA | filterB}}
 b) 示例：
    {{text| capitalize}}

     filters: {
       capitalize: function (value) {
         if (!value) return ''
         value = value.toString()
         return value.charAt(0).toUpperCase() + value.slice(1)
       }
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
   1.\*版本中vue是自带系统默认的很多过滤器的，虽然不知道为什么，但是作者在2.*版本中全部取消了，让用户自己写filter，下面给出曾经自带的系统默认的过滤器，如果自己写，应该怎么写：

   1. uppercase
      text.toUpperCase()
   2. lowercase
      text.toLowerCase()
   3. pluralize
      filters: {
           pluralize: function (value, sotval) {
               if(sotval){
                 if (value === 0) {
                   return 'no' + sotval;
                 } else if (value === 1) {
                   return '1' + sotval
                 } else {
                   return value + sotval + 's'
                 }
              }else{
                   return value
              }
           }
        }
   4. currency
      filters: {
          currency: function (price, money) {
            if(money){
               money + price.toFixed(2)
            }else{
               '$' + price.toFixed(2)
            }
          }
        }
```        
#### 8、交互（vue-resouce）
   【引入vue-resouce后，会扩充vue实例对象，vue对象下挂一个$http对象】
```bash
   a)get:
       //获取一个普通的文本数据
        this.$http.get('a.txt').then(function(res){
           console.log('success');
            this.data = res.data;
        },function(res){
           console.log('faild');
            console.log(res.status);
        });

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

发表于 | 分类于

准备工作

1
2
3
安装node.js(必须安装)
node.js下载 
注意：检查是否成功安装 npm 检测方法 npm -v

申请Github账号

####GIT网址

1
2
3
点击进入到官网，注册申请账号
创建博客仓库
注意：仓库名应该为：github用户名.github.io。

下载git，并生成ssh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
下载地址https://git-scm.com/，下载完成后
鼠标的右键会出现Git Bash Here点击出现一个命令窗口，
我们创建的git仓库采用ssh加密的方式。
我们首先在本地生成ssh，
    打开Git Bash Here命令行设置user.name。user.email
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub注册邮箱"

在命令行里面输入
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

接下来按回车正常的一步一步向下走，最终出现
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa):   <==密钥文件默认存放位置，按Enter即可
Created directory '/root/.ssh'.
Enter passphrase (empty for no passphrase):     <== 输入密钥锁码，或直接按 Enter 留空
Enter same passphrase again:     <== 再输入一遍密钥锁码
Your identification has been saved in /root/.ssh/id_rsa.    <== 生成的私钥
Your public key has been saved in /root/.ssh/id_rsa.pub.    <== 生成的公钥
The key fingerprint is:
SHA256:K1qy928tkk1FUuzQtlZK+poeS67vIgPvHw9lQ+KNuZ4 root@localhost.localdomain
The key's randomart image is:
+---[RSA 2048]----+
|           +.    |
|          o * .  |
|        . .O +   |
|       . *. *    |
|        S =+     |
|    .    =...    |
|    .oo =+o+     |
|     ==o+B*o.    |
|    oo.=EXO.     |
+----[SHA256]-----+
到这一步的时候，ssh秘钥已经生成好了。一般路径会在~.ssh/ 这个下面
id_rsa.pub这个是公钥需要copy里面的内容,把它放到git网址上
（https://github.com/settings/keys）打开网址后New SSH key
粘贴你刚刚copy的内容，这样就好了就是这么简单。

接下来我们进行hexo的安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
安装hexo
npm install hexo-cli g
npm install hexo -g
初始化博客文件夹
hexo init blog
切换到该路径
cd blog
安装hexo的扩展插件
npm install
安装其它插件
npm install hexo-server --save
npm install hexo-admin --save
npm install hexo-generator-archive --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save
npm install hexo-generator-tag --save
npm install hexo-deployer-git --save
npm install hexo-generator-sitemap --save

安装完之后进入你的blog的_config.yml文件修改：
type写成git
repo为你自己项目的git地址
branch写成master
deploy:
   type: git 
   repo: git@github.com:xiaoxiangxiao/xiaoxiangxiao.github.io.git
   branch: master

####最后进行部署你的博客

1
2
3
4
5
6
7
8
清缓存
hexo clean
生成静态页
hexo g
部署上去
hexo d

运行完之后访问你的地址就行了！