Burnman I Am What I Am

VPS 常用命令

06 Mar 2017

登录远程主机

sudo ssh spaling@107.170.231.223 -p 21

选项

-p  指定远程主机的端口. 可以在配置文件中对每个主机单独设定这个参数.

压缩

sudo zip -qr thus.zip /home/wwwroot/thus

将/home/wwwroot/thus目录压缩成thus.zip

选项

-q  安静模式，在压缩的时候不显示指令的执行过程
-r  将指定的目录下的所有子目录以及文件一起处理

解压

sudo unzip thus.zip
sudo unzip -d /home/wwwroot/ thus.zip

将thus.zip解压到当前目录

选项

-d<目录>：指定文件解压缩后所要存储的目录；

移动

sudo mv thus.zip /home/wwwroot/

将当前目录下的thus.zip压缩文件移动到/home/wwwroot/目录下

重命名

sudo mv /home/wwwroot/thus /home/wwwroot/thusin

将thus重命名为thusin

删除

sudo rm -rf /home/wwwroot/thus

递归删除/home/wwwroot/thus目录及其下的文件

选项

-f：强制删除文件或目录；
-r或-R：递归处理，将指定目录下的所有文件与子目录一并处理；
--preserve-root：不对根目录进行递归操作；
-v：显示指令的详细执行过程。

权限

1.更改文件所有者

sudo chown -R www:www /home/wwwroot/thus

更改整个文件夹的拥有者和用户组为www

2.更改文件的权限

sudo chmod 777 /home/wwwroot/thus

更改读取、写入、执行权限

显示每个文件和目录的磁盘使用空间

du -h --max-depth=1 thus

选项

-a或-all 显示目录中个别文件的大小。
-b或-bytes 显示目录或文件大小时，以byte为单位。
-c或--total 除了显示个别目录或文件的大小外，同时也显示所有目录或文件的总和。
-k或--kilobytes 以KB(1024bytes)为单位输出。
-m或--megabytes 以MB为单位输出。
-s或--summarize 仅显示总计，只列出最后加总的值。
-h或--human-readable 以K，M，G为单位，提高信息的可读性。
-S或--separate-dirs 显示个别目录的大小时，并不含其子目录的大小。
-X<文件>或--exclude-from=<文件> 在<文件>指定目录或文件。
--exclude=<目录或文件> 略过指定的目录或文件。
-H或--si 与-h参数相同，但是K，M，G是以1000为换算单位。
--max-depth=n 只输出命令行参数的小于等于第 n 层的目录的总计。 --max-depth=0的作用同于-s选项。(fileutils-4.0的新选项)

VPS 初始安全设置

27 Feb 2017

大概步骤：

  1. 添加一个新用户
  2. 使用 SSH Key 密钥登陆
  3. 修改 SSH 端口，禁止 SSH 密码验证和 Root 登陆

添加一个新用户

首先使用 SSH 登陆 vps

$ ssh root@ipaddress    # `ipaddress`为你的主机IP地址

添加新用户

$ adduser thus

添加用户到系统管理员组

$ usermod -a -G sudo thus

退出 root 用户登陆

$ logout

使用新用户登陆 VPS

$ ssh thus@ipaddress
thus@ipaddress's password:  #这里输入新用户密码

使用 SSH Key 密钥

使用 SSH Key 密钥登陆 VPS 可以避免每次登录都需要输入密码，最主要的是可以提高服务器的安全性。

在本机（我使用的是 MacBookPro）上生成 SSH keys

$ ssh-keygen

默认情况下会在本机 ~/.ssh/目录下产生两个文件idrsa和idrsa.pub(公钥)，公钥需要上传到 VPS 上

从本机上传公钥到服务器的thus用户目录下

$ scp ~/.ssh/id_rsa.pub thus@ipaddress:

登录到 VPS ，然后在/home/thus目录下创建.ssh文件夹，并将上传的文件移动到该目录下并重命名为authorized_keys

$ mkdir .ssh

$ mv id_rsa.pub .ssh/authorized_keys

给authorized_keys文件设置权限

$ chmod 700 ~/.ssh

$ chmod 600 .ssh/authorized_keys

OK，这样我们就可以使用RSA密钥登录了。

修改 SSH 端口，禁止 SSH 密码验证和 Root 登陆

打开配置文件：

$ sudo vim /etc/ssh/sshd_config

修改配置：

Port 1688   //端口

PermitRootLogin no    //禁止 Root 登陆

PasswordAuthentication no    //禁止 SSH 密码验证

重启 SSH 服务：

$ sudo service ssh restart

最后重新登录 VPS

$ ssh -p 1688 thus@ipaddress    // `-p 1688`指定端口号

Window 系统使用 SSH Key 登录 VPS

Window 系统下使用 Putty SSH密钥登录VPS，参考教程：

http://www.vpser.net/security/linux-ssh-authorized-keys-login.html

Mac 出现 missing xcrun 错误

24 Feb 2017

升级到 macOS Sierra 10.12.3 后，在更新 oh my zsh 时出现下面错误提示

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

解决办法

重装下xcode command line

在命令行中执行以下代码

xcode-select --install

然后会弹出窗口让你安装，安装完就ok了

参考：stackoverflow

常用的 Sass mixins

23 Feb 2017

Mixin 是 Sass 中用来方便地复用代码的方法，你可以简单点理解成函数，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值，返回的是一组 CSS 属性或代码。

Clearfix

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.container {
    @include clearfix;
}

圆角边框

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

跨浏览器的透明度设置

这个mixin可以可以制作出兼容 Internet Explorer 5 的跨浏览器透明度效果。

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

.faded-text {
    @include opacity(0.8);
}

文本溢出省略显示

@mixin text-ellipsis () {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

多行文本溢出省略显示

支持 WebKit浏览器或移动端的页面

@mixin text-ellipsis () {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

  1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  3. text-overflow: ellipsis; 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

使用rem设置字体尺寸并使用像素进行回退

rem 和 em 类似，都是一种CSS测量单位，但是它不是相对于父元素的尺寸，而是相对于HTML文档的根元素设置元素的尺寸大小。

由于rem在设置元素尺寸的时候是相对于HTML根元素的尺寸，而不是他的父元素的设置，因此在使用上不会发生混乱的情况。但是由于在IE8及以下版本的IE浏览器中不支持rem属性，因此我们必须在这些浏览器中使用像素为单位来创建回退代码。

@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

p {
    @include font-size(14px)
}

输出结果

p {
    font-size: 14px; //如果浏览器不支持rem将使用这个规则进行覆盖
 font-size: 0.8rem;
}

Retina 背景图片

@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
     background: url($image + '.' + $extension) $repeat $position;

     @media
     screen and (-webkit-min-device-pixel-ratio: 2),
     screen and (   min--moz-device-pixel-ratio: 2),
     screen and (   -moz-min-device-pixel-ratio: 2),
     screen and (     -o-min-device-pixel-ratio: 2/1),
     screen and (        min-device-pixel-ratio: 2),
     screen and (             min-resolution: 192dpi),
     screen and (             min-resolution: 2dppx) {
        background: url($image + '@2x' + '.' + $extension) $repeat $position;
        background-size: $width $height;
     }
}

.bg-image {
    @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
    height: 200px;
    width: 200px;
}

输出结果

.bg-image {
    background: url(images/waterlily.jpg) center no-repeat;
    height: 200px;
    width: 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
    .bg-image {
        background: url(images/waterlily@2x.jpg) center no-repeat;
        background-size: 200px 200px;
    }
}

如何使用 Mixin

在 Sass 中，@include 代表这调用定义好的 @mixin。在调用的时候如果mixin没有参数，可以省略mixin之后的括号，如下：

@mixin size () {
    width: 100px;
    height: 100px;
}

.foo {
    @include size();
}

.bar {
    @include size;
}

/******** 输出 ********/

.foo {
    width: 100px;
    height: 100px;
}

.bar {
    width: 100px;
    height: 100px;
}

使用 CSS 和 jQuery 制作文字马赛克效果

17 Feb 2017

需求

一段文本中，给指定的文字打上马赛克，然后付费阅读

解决方法

方法一：使用 CSS 模糊文字

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

上面的代码使class为mosaic的中的文字变得透明，只保留文字的text-shadow，从而模拟出一种文字模糊的效果。你可以通过text-shadow属性的第三个参数来调整文字模糊的效果。

效果：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

增加 IE 支持

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
    zoom: 1;
}

这种办法是以模糊文字来达到马赛克效果，但是有时客户会要求用其它图片或者符号来替换被打了马赛克的文字，这种办法就无法满足了。

方法二：使用图片马赛克遮罩文字

效果一

因为直接接给标签samp加上图片遮罩层，在原本文字换行的情况下，会直接显示在下一行，破坏原本的结构。

效果二

在效果一基础上，为了不破坏原本的结构。需要将一段文字拆分成单个文字，然后使用标签span包裹，最后使用 span::before 给每个文字增加一个图片遮罩层。

效果：

See the Pen 文字马赛克 by spaling (@spaling) on CodePen.

最终代码

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. <samp>Duis aute irure dolor in reprehenderit in voluptate</samp> velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SASS

samp {
    &>span {
        position: relative;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        &::before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            z-index: 2;
            left: 0;
            top: 0;
            background: #fff url(../images/mask.jpg) repeat;
            -webkit-background-size: contain;
            background-size: contain;
        }
    }
}

Jquery

$('samp').each(function() {
    var letters = $(this).text().split(''),
        $container = $(this).empty();

    $.each(letters, function(_, letter) {
        $('<span>', {
            text: letter
        }).appendTo($container);
    });
});