Monthly Archives: February 2017

VPS 初始安全设置

大概步骤:

  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/目录下产生两个文件id_rsa和id_rsa.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

常用的 Sass mixins

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设置字体尺寸并使用像素进行回退

remem 类似,都是一种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 制作文字马赛克效果

需求

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

解决方法

方法一:使用 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.


Wordpress 无法切换可视化和文本编辑器

1. 背景介绍

升级 WordPress 到最新版本后,发现点击“添加媒体”、“可视化/文本编辑模式切换”等功能按钮均失效没反应

2. 原因

查找资料发现wordpress为了提高效率以及加载速度,把要用到的js文件合并在一起,升级到新版本后可能因为某些原因导致合并出现错误,因此产生了按钮异常等情况。

官方解释

Disable Javascript Concatenation

To result in a faster administration area, all Javascript files are concatenated into one URL. If Javascript is failing to work in your administration area, you can try disabling this feature:

define('CONCATENATE_SCRIPTS', false);

大概意思是:

wordpress 为了提高效率要求你所有的js要集中到一起,只需更改路径集中存放,问题迎刃而解,具体操作很简单,在wordpress根目录下找到 wp-config.php 这个配置文件,打开文件后在页面的最后添加下面代码:

define('CONCATENATE_SCRIPTS', false);

3. 解决办法

在网站根目录的wp-config.php文件中,添加以下这句代码即可:

define('CONCATENATE_SCRIPTS', false);

这段代码的作用是禁止js连接在一起