2017年7月

个人用伪类在布居中比较频繁,因为觉得能用CSS完成的动画,尽量不用JS,总觉得JS或多或少会影响页面加载速度和流畅度,个人觉得比较经典,其中也有很多平常开发中遇到的一些小问题,也终于有了解释,所以写篇文章总结下。

伪类?

先来回顾伪类的使用方法,类/标签名:伪类类型便可以构造一个伪类:

selector:pseudo-class {
    property: value;
    ...
}

.class:pseudo-class {
    property: value;
    ...
}

常用的伪类:hoveractivevisitedlinkfirst-childlast-childnth-child(n)等等。

小问题

问题1

现在一个页面,需要实现a标签不同伪类下颜色不同,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pseudo - Secret Blog</title>
    <style type="text/css">
        a:hover {
            color: red;
        }

        a:visited {
            color: blue;
        }

        a:link {
            color: green;
        }

        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="#">Click it!</a>
</body>
</html>

效果演示:Pseudo - Secret Blog

有错么?代码看起来没错呀,我hover去哪儿呢?之前也遇到过类似的问题,代码没错啊,怎么没效果呢?

W3C中提到(CSS 伪类):

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。

上面提到hover必须放到linkvisited之后,而active又要放到hover之后,所有正确的书写顺序是:link -> visited -> hover -> active

问题2

first-childlast-child非常好用,使用方式各式各样,一般用于修改第一个或者最后一个的样式,下列代码大家来分析下,看看有什么错误:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Child - Secret Blog</title>
    <style type="text/css">
        ul li:first-child{
            color: red;
        }
        ul li:nth-child(2){
            color: blue;
        }
        ul li:nth-child(3){
            color: yellow;
        }
        ul li:last-child{
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <p>List</p>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Last</li>
        <p>List End</p>
    </ul>
</body>
</html>

效果演示:child - Secret Blog

和预想的效果有差异?第一个不是红色字体而是是蓝色呢?第二个不是蓝色又是黄色的,还有最后一个的绿色也没了。

W3C解释(原文地址):

利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素,但事实上并非如此,如果要选择段落的第一个子元素,应当写为 p > *:first-child。

只有当元素是另一个元素的第一个子元素时才能匹配,通俗的讲,就是上面代码里,div li:frist-child并不是指向下面ul中的第一个li,因为li并不在ul中的一个元素。last-child同理。

nth-child的指向,仔细看一下就会发现,如果将p标签作为第一个的话,那么颜色就没错。而浏览器也正是这样解析的。

总结

CSS 中伪类是一个很奇怪的东西,很多错误发生在细节上却毫无察觉。

今天在Windows下安装了次Node.js环境,其中也涉及到了git的安装和初始化,或许是之前学习的时候太皮,很多命令、参数都忘得干干净净。这次不妨做个笔记,以后可能(一定)会用到。

环境

  • 操作系统:Windows 10 Version 10.0.15063
  • 安装工具:Bash On Ubantu On Windows(以下简称:WinBash)

注:因为WinBash还存在很多尚不明确的因素,安装环境受系统版本及网络影响。Ubantu、CentOS等Linux衍生系统安装方法类似。本次安装仅作参考。

注:若使用WinBash请先开启Windows开发者模式,开启方法请自行搜索。

开始

安装Git

使用apt-get经行安装,命令:

$ sudo apt-get install git

然后输入y,完成安装。

检查安装

可以执行git命令查看是否安装成功,命令:

$ git
usage: git [--version] [--help] [-C <path>] [-c name=value]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]
$ git --version
git version 2.7.4

配置Git

git安装完成,需要初始化用户信息,这通常是全局的,命令如下:

# 配置用户名
$ git config --global user.name "your_name"
# 配置邮箱地址
$ git config --global user.email "your_email"

生成&验证SSH公匙

公匙用于Github或服务器的免密登录的一个口令,一个公匙可多方登录,由于SSH的重要性,请勿泄露公匙。

公匙存在在~/.ssh目录下的id_rsa.pub,如果不存在先生成,存在则直接查看:

# 生成公匙
$ ssh-keygen -t rsa -C "[email protected]"
# 接下来直接敲三个回车
# 查看公匙
$ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCwdB8G/vCpmZu3yI7N62GqykMcBhWZ5BI34rnBXM9CNtXASGD3Pg7erkn0kuOSzSm9RkoRtnmbA/D9TNqMxNtXUxHHjEw27yFPffit1b5Zjj651Kp.......... [email protected]

关于ssh-keygen命令参数解释:

  • -t:申明密匙类型,参数:"rsa1"(SSH-1)、"rsa"(SSH-2)、"dsa"(SSH-2)
  • -C:添加注释

验证SSH公匙

将SSH公匙添加到GithubCoding中的SSH公匙管理中,下一步操作即是验证公匙是否可用,命令:

# Github与Coding验证地址不同,以下以Github为例
$ git -T [email protected]

创建远程仓库

代码管理离不开远程仓库,远程仓库能随时同步代码、多人协助、版本回滚等。

远程仓库国内推荐使用CodingGithub,当然,类似的平台还有码云。在Github上,直接点击New repository建立仓库。

比如,我现在创建一个仓库名为test的仓库:

新建仓库

配置解释:

  • Repository name: 仓库名,不可于当前用户的其他仓库名重名
  • Public / Private: 项目是否公开,这里说明一下的是Github的私有项目是收费的
  • Add README: 是否初始化时建立README.md说明文件
  • Add .gitignore: 是否创建忽略.gitignore配置文件
  • Add license: 是否添加协议

Git基础

建立仓库

创建完成远程仓库,转向本地,初始化本地Git仓库:

# 创建目录
$ mkdir your_project/
# 切换到目录
$ cd your_project/
# 初始化仓库,创建.git目录,将此目录作为git工作空间
$ git init
Initialized empty Git repository in /Users/secret/Desktop/test/.git/

初始化完成本地仓库,需要将本地仓库和远程仓库进行关联:

首先需要获取远程仓库的地址,可以打开刚刚新建的test的仓库:

获取远程仓库链接

在输入框中的内容就是该仓库的远程地址,最右边可以一键复制。

现在将本地仓库与远程仓库进行关联:

$ git remote add origin [email protected]:isecret/test.git

存入缓存区并提交

可以先尝试创建一个文件,然将它添加到缓存中:

# 创建test.txt文件
$ touch test.txt
# 编辑该文件,你同样可以选择其他编辑器
$ vim test.txt
# 保存完成后,将其添加到缓存中
$ git add test.txt
# 提交本次修改
$ git commit -m 'Create and edited test.txt'
[master (root-commit) 40a635b] Create and edited test.txt
 1 file changed, 1 insertion(+)
 create mode 100644 test.txt

参数说明:

  • git add 文件名是将此文件加入缓存区,也可以使用git add .将此目录加入缓存区
  • git commit-m参数是给此次提交的动作给一个描述,比如修改了什么地方,修复了什么Bug等
  • git add .git commit -m '描述'可以合并写为git commit -am '描述'

查看提交记录

文件修改后提交至缓存区后,便会生成一个提交记录的HEAD信息及其描述,在后续使用可以回滚到当前版本。好比于修改代码,越改越乱的情况,就可以直接回到上一个版本重新来写。

# 查看提交版本,commit后边的内容便是版本号,最后一行是注释信息
$ git log
commit c172fa948ab343276c84ec3bbf11d0c0cd027b3c
Author: isecret <[email protected]>
Date:   Sun Jul 23 12:57:36 2017 +0800

    Create and edited test.txt

查看修改记录及状态

这个顾名思义,查看当前版本的改动。在Github上能高亮显示出,不过在命令行也能查看到。

首先,我先在text.txt中再增加一段Hello World,然后查看改动:

# 增加一段Hello World!
$ vim test.txt
Hello Git!Hello World!
$ git diff
diff --git a/test.txt b/test.txt
index 106287c..d149c10 100644
--- a/test.txt
+++ b/test.txt
@@ -1 +1 @@
-Hello Git!
+Hello Git! Hello World!
# 插入:2,内容 Thanks for us!
$ vim test.txt
# 查看当前状态
$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   test.txt

no changes added to commit (use "git add" and/or "git commit -a")

参数说明:

  • 直接使用git diff用于查看当前未git add的内容修改
  • 已经git add但还没提交,使用git diff --cached查看内容修改
  • git diff HEAD是上面两条的合并
  • git diff HEAD1 HEAD2 src可以比较两个版本的src文件夹的差异
  • git status会列出还没添加到缓存区的文件/目录

分支

分支在Git中是一个很重要的概念,意味着你能脱离主线开发,在不影响主线的情况下还能继续工作。

而分支又简单分为基础操作、冲突合并、分支管理、bug分支、远程分支。

查看分支

# 查看当前所有分支
$ git branch -a
* master

折腾完hexo,开始处理一些小细节,之前调试主题的时候就发现NexT并没有对代码进行压缩处理,详情见:如何优化NexT主题?

为何要压缩代码?

首先,没有比较就没有伤害:

压缩前后对比图

这是主页压缩前后的对比图,主要将多余空格和换行给去掉,CSS和JS同理。

压缩的优势?列出以下四点,欢迎补充:

  • 减小了文件的体积
  • 减小了网络传输量和带宽占用
  • 减小了服务器的处理的压力
  • 提高了页面的渲染显示的速度

gulp能做什么?

gulp是一款基于Node.js的一款利用数据流自动化构建工具,利用其插件可以对文件进行IO操作,其中包括压缩代码等功能。

gulp的安装

注:安装此插件务必确认安装Node环境及包管理工具(npm或cnpm)

任何一款js插件,首先是参考文档说明。详见:官方文档

首先,需要安装gulp及其配套的插件。

$ cd blogdir/
$ cnpm install gulp --save
$ cnpm install gulp-htmlclean --save
$ cnpm install gulp-htmlmin --save
$ cnpm install gulp-minify-css --save
$ cnpm install gulp-uglify --save

注:cnpm为淘宝npm镜像,如果发现cnpm提示command not found,请自行安装或使用npm,使用方法与npm相同,不过将镜像存储在国内加快包下载速度。

完成后查看package.json是否包含上列安装的包:

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0",
    "hexo": "^3.2.0",
    "hexo-deployer-git": "^0.3.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }

然后新建gulpfile.js文件到hexo根目录,内容如下:

var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 压缩 public 目录 css文件
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});

// 压缩 public 目录 html文件
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js文件
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});


// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

至此,安装完成。

gulp的使用

gulp的使用很简单,只需要在部署之前将代码压缩即可:

$ hexo clean
$ hexo g
INFO  Start processing
INFO  Files loaded in 723 ms
INFO  Generated: index.html
$ gulp
[13:18:33] Using gulpfile ~/blog/gulpfile.js
[13:18:33] Starting 'minify-html'...
[13:18:33] Starting 'minify-css'...
[13:18:33] Starting 'minify-js'...
$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...