Probably a technical blog

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

编译工具

• Koala
• node.js
• 浏览器端编译

LESS语法

申明编码格式

1

@charset "utf-8";

注释

1
2

/*这种形式会被编译保留*/
//这种形式不会被编译保留

变量

1
2
3
4
5
6
7

// 申明变量
@fontColor: red;

// 使用变量
.word {
  color: @fontColor;  
}

变量也有作用域，局部变量可写在混合模式的 { } 中间

混合Mixin

不带参数的混合：和普通class写法类似

不带参数的混合变量也可以加括号，此时编译的时候不会生成该class的样式

1
2
3
4
5
6
7
8
9

.border {
  border: 5px solid green;
}
.box {
  width: 100px;
  height: 100px;
	
  .border;//不需要加括号
}

带参数的混合

1
2
3
4
5
6
7
8
9

.border(@border_width) {
  border: @border_width solid green;
}
.box {
  width: 100px;
  height: 100px;
	
  .border(30px);
}

带参数的混合还可设定默认值

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

.border(@border_width:10px) {
  border: @border_width solid yellow;
}
.box {
  width: 100px;
  height: 100px;
	
  .border(30px);
}
.box2 {
  width: 200px;
  height: 200px;
	
  .border();//默认用10px
}

匹配模式

相当于JS中的 if，满足条件后才能匹配，例如下面代码：

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

.triangle(top, @width: 5px, @color: red ) {
  // 关键词为top时用这个样式（三角朝上）
  border-width: @width;
  border-color: transparent transparent @color transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom, @width: 5px, @color: red ) {
  // 关键词为bottom时用这个样式（三角朝下）
  border-width: @width;
  border-color: @color transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.triangle(left, @width: 5px, @color: red ) {
  // 关键词为left时用这个样式（三角朝左）
  border-width: @width;
  border-color: transparent @color transparent transparent;
  border-style: dashed solid dashed dashed;
}
.triangle(right, @width: 5px, @color: red ) {
  // 关键词为right时用这个样式（三角朝右）
  border-width: @width;
  border-color: transparent transparent transparent @color;
  border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 5px, @color: red ) {
  // 公用样式，参数名为"@_"(固定)
  // 且原先的变量"@width" "@color"必须带上
  width: 0;
  height: 0;
  overflow: hidden;
}

.down-icon {
  .triangle(bottom,10px);
}

运算

任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中

1
2
3
4
5
6

@font-big: 20px;

.word {
  font-size: @font-big + 2;
  //只要一个带单位就行
}

嵌套规则

• 一般嵌套
• 两种特殊嵌套
  • &对伪类使用: hover, focus等
  • &对链接的使用: 例如 &-item

另外，嵌套最好不要超过三层

1
2
3
4
5
6
7

<ul class="list">
  <li><a href="#">条目1</a><span>xxxx-xx-xx<span></li>
  <li><a href="#">条目2</a><span>xxxx-xx-xx<span></li>
  <li><a href="#">条目3</a><span>xxxx-xx-xx<span></li>
  <li><a href="#">条目4</a><span>xxxx-xx-xx<span></li>
  <li><a href="#">条目4</a><span>xxxx-xx-xx<span></li>
</ul>

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

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
	
  li {
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
  }
  
  a {
    float: left;
  	
    // 和sass一样，&代表他的上一层选择器
    &:hover {
      color:red;
    }
  }
  
  span {
    float: left;
  }
}

@arguments变量

@arguments包含了所有传递进来的参数
如果你不想单独处理每一个参数的话就可以像下面这样写：

1
2
3
4
5
6
7
8
9
10

.border_arg(@width: 30px, @color: red, @style: solid) {
  border: @arguments;
}

.box {
  width: 200px;
  height: 100px;
	
  .border_arg(40px);
}

避免编译

有时候我们可能需要

1. 输出一些不正确的CSS语法
2. 使用一些LESS不认识的专有语法

我们可以在字符串前加上一个~'[code]'，例如：

1
2
3

.box {
  width: ~'calc(300px-30px)';
}

!important关键字

• 会为该混合样式中的所有样式带上!important关键字
• 一般在调试的时候使用

导入

1
2

//导入一个reset.less，可以不加扩展名
@import "reset";

1
2

//导入一个reset.css
@import(less) "reset.css";

nodeJs 是一个基于 V8 引擎的服务器端 JavaScript 运行环境。
对于前端开发者来说node最大的作用是帮助我们完成获取依赖，构建项目，编译代码等工作。
NodeJs 自带的包管理器 npm，是全球最大的开源库生态系统。

但是由于本国特殊的网络环境，经常会出现各种各样的问题。
以下是本人使用过程中踩过坑的应对手段：

起步

安装 nodeJs & npm

初次可直接从官网下载安装(内含最新版的 nodeJs 和 npm) https://nodejs.org

管理 nodeJs 版本

1. 安装 n 模块

   1	$ sudo npm install -g n

2. 升级 nodeJs

   1 2 3 4 5 6 7 8

   # Use or install the latest official release: $ n latest # Use or install the stable official release: $ n stable # Use or install the latest LTS official release: $ n lts

3. 切换 nodeJs 版本

   1 2 3 4

   $ n 4.6.0 ο 6.8.0

4. 删除 nodeJs 版本

   1	$ n rm 0.9.4

5. n 模块 github 地址：https://github.com/tj/n

6. 注意：windows 系统不适用以上方法

   • windows 直接在官网下载最新版本，覆盖安装来升级 nodeJs 版本
   • win10自带的 Ubuntu bash 代码行也可以试一下（未测试过）

MAC系统 npm 需要管理员权限问题(未测试)

1

$ sudo chown -R $USER /usr/local

win使用nvm-windows安装&管理node版本

1. 安装nvm-windows
2. 在命令行输入nvm验证安装成功
3. 常用命令

   1 2 3 4 5 6 7 8 9 10 11

   # 查看已安裝的Node版本 $ nvm list # 查看提供哪些Node版本 $ nvm list available # 安裝指定的Node版本 $ nvm install [version] # 指定使用Node版本 $ nvm use [version]

管理 npm 模块管理器

升级 npm 的版本

• 通用

  1	$ npm install npm@latest -g

• windows 平台插件： npm-windows-upgrade

  1 2	$ npm i -g npm-windows-upgrade $ npm-windows-upgrade

升级 npm 依赖包

npm-check是用来检查npm依赖包是否有更新、错误以及是否在使用的，可以方便的使用npm-check进行包的更新

1. 安装npm-check

   1	$ npm install -g npm-check

2. 检查全局的 npm 包是否可升级

   1	$ npm-check -u -g

淘宝NPM镜像cnpm (不推荐，用yarn代替目前好像出错率好多了)

1. 安装cnpm

   1	$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 用cnpm安装模块

   1	$ cnpm install [name]

npm 个人常用命令

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

# 查看 npm 的版本
$ npm -v

# 为npm init设置默认值
$ npm set init-author-name 'cycjimmy'
$ npm set init-author-email 'cycjimmy@gmail.com'
$ npm set init-author-url 'https://github.com/cycjimmy'
$ npm set init-license 'MIT'

# 初始化生成一个package.json文件。
# 使用 -y 可以跳过提问阶段，直接生成package.json文件
$ npm init -y

# 列出当前项目安装的所有模块包
$ npm ls --depth=0

# npm install默认会安装dependencies字段和devDependencies字段中的所有依赖包
$ npm i
# 针对国内可以加上参数
$ npm --registry=https://registry.npm.taobao.org i 

# 安装依赖包
# –save：添加到dependencies，可简化为-S
# –save-dev: 添加到devDependencies，可简化为-D
$ sudo npm i -g [package name]
$ npm i [package name]
$ npm i [package name] -S
$ npm i [package name] -D

# 更新依赖包
# -S表示保存新的依赖包版本号到package.json
$ npm update <package name> -S
# npm update只更新顶层依赖包，而不更新依赖的依赖，如果想递归更新取，使用下面的命令
$ npm --depth 9999 update

# 卸载依赖包
$ npm uninstall [package name]
$ npm uninstall [package name] -global

# 执行任务
$ npm run [task name]

# 针对国内的设置
$ npm config set registry=http://registry.npmjs.org

# 使用XX-Net的可设置下http代理
$ npm config set proxy http://127.0.0.1:8087
$ npm config set https-proxy http://127.0.0.1:8087
$ npm config set strict-ssl false -g

# 还原设置
$ npm config delete registry
$ npm config delete proxy
$ npm config delete https-proxy
$ npm config delete strict-ssl

# 列出所有npm配置项目
$ npm config ls -l

strict-ssl 需手动修改 .npmrc 文件(located in \Users\ in Windows)

1
2

# .npmrc文件中添加
strict-ssl=false

其他比较详细的npm命令查看

用yarn取代npm

Yarn is a package manager for your code.

1. 安装(升级)yarn

   1	$ npm install -g yarn

2. yarn常用命令

   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

   # npm init => $ yarn init # npm install => $ yarn install $ yarn install --force #强制所有包重新下载 # npm install --save [package] => $ yarn add [package] # npm install --save-dev [package] => $ yarn add [package] --dev # npm install --global [package] => $ yarn global add [package] # rm -rf node_modules && npm install => $ yarn upgrade [package] $ yarn upgrade [package] --ignore-engines #忽略引擎 # npm uninstall --save [package] => # npm uninstall --save-dev [package] => $ yarn remove [package] # npm cache clean => $ yarn cache clean # 针对国内的设置 $ yarn config set registry https://registry.npm.taobao.org # 使用XX-Net的可设置下http代理 $ yarn config set proxy http://127.0.0.1:8087 $ yarn config set https-proxy http://127.0.0.1:8087 $ yarn config set strict-ssl false -g # 还原设置 $ yarn config delete registry $ yarn config delete proxy $ yarn config delete https-proxy $ yarn config delete strict-ssl

3. yarn的 strict-ssl 配置目前存在BUG，需手动修改 .yarnrc 文件(located in \Users\ in Windows)【yarn/issues#980】

   1 2 3 4 5 6 7 8 9 10 11

   # 进入vi修改.yarnrc $ vi ~/.yarnrc # .yarnrc内容: # ------------------------------------------------------------------ # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 strict-ssl false # ------------------------------------------------------------------ # 修改完毕输入 :wq 保存退出

国内抓取node-sass失败的解决方案

1
2
3
4
5

# 使用淘宝镜像
$ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

# 或者使用淘宝镜像cnpm
$ cnpm install node-sass

发布node模块到npm社区

• npm官网注册账号，或使用命令行:

  1	$ npm adduser

• 登陆账号

  1 2 3 4 5

  # via npm $ npm login # via yarn $ yarn login

• 验证登陆

  1	$ npm whoami

• 更新包版本号x.y.z, 通用版本号迭代规则:

  • 如果只是修复bug，更新z
  • 如果是新增了功能，但是向下兼容，更新y
  • 如果有大变动，向下不兼容，更新x

• 发布

  1 2 3 4 5

  # via npm npm publish # via yarn yarn publish

搭建一个静态博客是去年的学习计划之一，然而因为种种原因(其实是拖延症加懒癌)，迟迟没有动手。直到最近，空余时间慢慢富裕了起来，才想“要不把去年想做的博客给做了？”，那么说干就干。

简单谷歌了下相关资料，决定采用Hexo博客系统加NexT主题的方案搭建。本以为会花很点时间，没想到当前的静态博客系统功能居然已经如此完善，自己能想到的功能它几乎全有，要做的就是按照自己需求和喜好去改里面的配置文件。大概花了半天时间改配置，一切就OK了！

注：本文使用的Hexo版本为v3.3.7，NexT版本为v5.1.1

搭建当中遇到的一些坑

删除文章后，分类和标签统计不正确

1. 删除目录下的 db.json 文件

2. 清理 public 文件夹并重新生成

   1 2	$ hexo clean $ hexo generate

3. 重启测试服务器（或重新部署）

   1 2 3

   $ hexo server # or $ hexo deploy --generate

静态文件全部没有经过压缩，不能忍

一开始的想法是用 gulp 写几个任务随便搞下，然后就建了个gulp任务文件待定。

后面随便翻hexo插件时候，发现了一个名叫hexo-all-minifier，我这种懒癌患者肯定是马上试用，然后就没有然后了，问题解决，我立马删除了gulp文件。

又发现了个更好用的插件hexo-filter-cleanup，不仅能压缩，还能合并JS(插件集成了useref)。
但是合并JS里面也有一个大坑，原以为我把主题里用到的JS一股脑打成一个包就OK了（如下）

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

<!-- build:js /js/theme-files.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

完成！少了将近7个请求，非常兴奋，立马部署了上去。然而部署了半天之后才发现部分页面出了一点小问题，归档页面的年份标签不见了！经过了半天时间排查，才总算锁定的问题，解决如下：

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

<!-- build:js /js/theme-common.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

# 以下JS文件为判断script_extra添加，在合并打包时造成编译失误，需要单独处理
{% block script_extra %}
  <!-- build:js /js/theme-extra.min.js -->
  {% include '_scripts/pages/post-details.swig' %}
  <!-- endbuild -->
{% endblock %}

NexT默认从本地加载很多JS库

建议务必替换成CDN，不然都会从当前站点获取这些库文件。
在NexT主题的 _config.yml 配置中找到 vendors，网上找到相应的CDN地址填入。

部分未解决的坑

• 二级域名无法配置404页面 线上版本已经可以访问，测试服务器中仍然不行

关于SEO

• hexo 相关插件
  • hexo-abbrlink
  • hexo-autonofollow
  • hexo-baidu-url-submit
  • hexo-generator-baidu-sitemap
  • hexo-generator-sitemap
  • hexo-generator-feed
• 站长平台
  • 百度站长平台
  • 谷歌站长平台
  • 必应站长平台
  • 360站长平台
  • 站长之家工具

其他相关

• 用GitHub Issue 搭建评论系统