1. 变量

   1	@color: blue;

2. mixin
   将相同的代码分离出来通过函数参数的方式改变对应的值

   1 2 3 4

   .common(@font_size, @color){ font-size: @font_size; color: @color; }

3. extend
   将相同的代码分离出来，通过extend去扩展，可以使得编译后的css文件少一点

   1 2 3 4 5 6 7 8 9 10 11 12

   .common{ font-size: 16px; color: blue; } .div1{ &:extend(.common); font-weight: 400; } .div2{ &:extend(.common); font-weight: 500; }

4. 循环(loop)
   循环的输出class类名，适用于在做响应式布局使用, 该方式是采用循环递归调用自身

   1 2 3 4 5 6 7

   .gen-col(@n) when (@n > 0){ .gen-col(@n - 1); .col-@{n} { width: 1000px / 12*@n; } } .gen-col(12);

5. @import
   less中的import与css不一样之处是css中的import会需要加载多份，less中的import会编译后将所有需要import代码放到一个文件中，降低http请求数

   1	@import "./footer";

6. less预处理框架的解决方案
   est

• 上面的错误是由于我们在定义组件的时候使用的是 selfComponent 名字，但是引入的时候需要用横线代替驼峰命名
• 解决办法：
• 将html中的标签 selfComponent 改写为 self-component
• 后续如果遇到类似的错误可以参考上面的方法修改

• 由于组件与html的标签名字有冲突导致
  待续

• 在父组件传递给子组件自定义props的时候，由于组件的属性名写为 headerMsg 导致报错，
• 需写为header-msg 然后在子组件的props中获取的key是：headerMsg

  Markdown是一种书写格式，它理念是，能让文档更容易读、写和随意改,
markdown兼容一些html的语法，所以你可以在markdown中直接书写一些html语法，但是
对于html的一些块元素(div, table, ul)来说，需要在这些块元素与普通的markdown之间插入空行，并且在
html代码中书写markdown的语法是无效的。对于HTML中的行内元素，(a, span, i)等，可以在markdown中直接使用，
根据个人习惯，例如你喜欢用html中的a标签表示链接，那么可以直接使用，而不需要使用markdown的链接语法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

* 这是markdown语法

<ol>
    <li>foo</li>
    <li>bar</li>
</ol>    
<table>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</table>

* 这是markdown语法
<a href="https://baidu.com/">百度一下</a>

markdown字符转换

• 对于markdown文档中，你不需要像html那样考虑 *<* 和 & 这样的符号，这些符号markdown都会自动帮你转换，在markdown中，你写入实体也会帮你转
  换为正常的符号，例如：
  &copy; 会自动转换为 ©

markdown区块元素

换行

• markdown的换行可以使用html, <br />元素换行，也可以使用markdown的语法，在需要换行的地方敲两个空格。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  * this is markdown grammer<br /> or * this is markdown grammer ``` ### 标题 - markdown中的标题，类似于html中的 h1~h6, 但是markdown中可以使用，\=，和 \-， 以及 \#表示， \# 表示的时候有几个\# 就表示几级标题 ```markdown # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6

区块引用blockquotes

• markdown中建立区块引用使用 > 这个符号，只需要在段落的前面加一个就可以了：

  1	> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

• 对于整个段落，只需要加一个就可以了：

  1 2	> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

• 区块引用可以嵌套：

  1 2 3 4

  > this is level of quoting > > > this is nested blockquote >

• 区块内还可以包括标题，列表，代码块等语法

  1 2 3 4 5 6 7 8 9 10

  > ## 这是一个二级标题 > > 1. 列表1 > 2. 列表2 > > 下面是代码片段： > > let a = '12' > > [hi](https://www.baidu.com)

markdown中的列表

• markdown支持无序列表和有序列表
• 无序列表使用，* 或者 - 或者 +
• 有序列表使用，1. , 2. …

  1 2	* banana * apple

1
2

1. red
2. blue

• 在列表中空行，会被添加p元素到每一项中：

  1 2 3

  * h1 * h2

转换为html为：

1
2
3
4

<ul>
<li><p>h1</p></li>
<li><p>h2</p></li>
</ul>

• 列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符

  1 2 3 4 5 6 7

  * This is a list item with two paragraphs. This is the second paragraph in the list item. You're only required to indent the first line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. * Another item in the same list.

• 在列表中还可以书写区块引用

  1 2 3

  * A list item with a blockquote: > this is a blockquote > this is a blockquote

• 如果需要放入代码块，那么需要两个制表符：

  1 2 3

  * 一个列表： function(){}

• 使用 \ 进行转义：

  1	198\. greet

代码块

• markdown中的代码块，可以使用缩进的方式表示，也可以使用 <!–14–>

分割线

• 分割线可以使用三个 * 或者 三个 -, 建立：

  1 2 3 4 5 6 7 8 9 10 11 12 13

  *** 或者 --- ``` ## 区块元素 ### 链接 > 1. 外部链接 > 2. 内部连接 * 外部链接： ```markdown [百度一下](https://www.baidu.com/ "百度一下")

url地址后面的第二个参数是title，需要与前面url一个空格

• 内部链接(锚链接)

  1 2 3

  <a href="#jump">页面内部跳转</a> 在跳转的地方添加 id <a id="jump">页面跳转的位置</a>

• 如果你是要链接到同样主机的资源，你可以使用相对路径：

  1	See my [About](/about/) page for details.

强调

• markdown强调使用，* 或者 _，* 一个，会被转换为 em标签包裹，** 会被转换为 strong标签包裹

  1 2	*em* **strong**

• 局部代码标记

  1	use this `console.log()` function

图片

• markdown的图片表示如下：

  1 2	 

反斜杠

• 反斜杠可以用来转义，一些你需要在文本中展示的字符，不想要被编译出来

  1

  \*

总结

• 以上就是我认为在markdown中常用的语法，其他的语法请参看我下面给出的相关链接，比如：markdown的表格，公式的编辑等等

1. markdown语法简体中文版
2. markdown中文官网
3. 颜家大少的markdown网站

快速入门

环境的安装与配置

首先必须有git, nodejs，等开发环境，具体的安装自行百度一下吧。(小编偷懒了)

全局安装hexo

1

npm install -g hexo-cli

初始化hexo

1

hexo init hexo-blog

部署文件

1
2

cd ./hexo-blog
hexo generate/g

g：表示generate可以简写，作用是生成静态页面

本地启动服务

1

hexo server

启动后会输出本地的地址和端口，默认是：localhost:4000，浏览器访问可以看到

部署到服务器

1

hexo deploy/d

比如可以部署到GitHub上，用作gitpage, 但是需要配置hexo-blog中的_config.yml文件，不会配置的可以参考我给的链接，部署

清除本地缓存

1

hexo clean

有时候本地缓存导致编译报错，可以在执行hexo generate命令之前执行，该命令

hexo主题

• hexo默认有一个主题，但是可以自己定制喜欢的主题，官网有很多主题可供选择，我本次选择的是hexo-theme-skapp，这个主题安装可能会遇到很大困难，特别是在window电脑上，github的issue上有很多的问题，假如你没有解决，可以在上面提issue。(小编也没有解决，幸好自己有两台服务器，所以直接在服务器上安装，Linux环境还好，没有遇到啥问题，然后在编译出来push到GitHub仓库中，当然你也可以这么操作)。
  

  详细的配置，请参考skapp的GitHub文档

总结

这篇文章写不全，详细的配置请移步到hexo官网，官网有中文文档，并且好像有视频，但是需要你科学上网才能看。下面推荐一些大牛的详细的文章：

1. Hexo 搭建个人博客教程 - 1 - 下载安装hexo - 2018
2. Hexo 搭建个人博客教程 - 2 - 创建github帐号 - 2018
3. Hexo 搭建个人博客教程 - 3 - 将本地hexo托管到github - 2018
4. Hexo 搭建个人博客教程 - 4 - 使用并配置 next 主题 - 2018
5. Hexo 搭建个人博客教程 - 5 - 站点主要配置_config.yml - 2018
6. Hexo 搭建个人博客教程 - 6 - 设置菜单，发布博客 - 2018
7. Hexo 搭建个人博客教程 - 7 - gitment添加评论功能 - 2018
8. Hexo 搭建个人博客教程 - 8 - blog备份工具hexo-git-backup - 2018