VPS 常用命令

登录远程主机

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 初始安全设置

大概步骤:

  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连接在一起

Linux scp 跨机远程拷贝

scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的。当你服务器硬盘变为只读 read only system时,用scp可以帮你把文件移出来。

类似的工具有rsync;scp消耗资源少,不会提高多少系统负荷,在这一点上,rsync就远远不及它了。rsync比scp会快一点,但当小文件多的情况下,rsync会导致硬盘I/O非常高,而scp基本不影响系统正常使用。

1.命令格式:

scp [参数] [原路径] [目标路径]

2.命令参数:

  • -1 强制scp命令使用协议ssh1
  • -2 强制scp命令使用协议ssh2
  • -4 强制scp命令只使用IPv4寻址
  • -6 强制scp命令只使用IPv6寻址
  • -B 使用批处理模式(传输过程中不询问传输口令或短语)
  • -C 允许压缩。(将-C标志传递给ssh,从而打开压缩功能)
  • -p 留原文件的修改时间,访问时间和访问权限。
  • -q 不显示传输进度条。
  • -r 递归复制整个目录。
  • -v 详细方式显示输出。scp和ssh(1)会显示出整个过程的调试信息。这些信息用于调试连接,验证和配置问题。
  • -c cipher 以cipher将数据传输进行加密,这个选项将直接传递给ssh。
  • -F ssh_config 指定一个替代的ssh配置文件,此参数直接传递给ssh。
  • -i identity_file 从指定文件中读取传输时使用的密钥文件,此参数直接传递给ssh。
  • -l limit 限定用户所能使用的带宽,以Kbit/s为单位。
  • -o ssh_option 如果习惯于使用ssh_config(5)中的参数传递方式,
  • -P port 注意是大写的P, port是指定数据传输用到的端口号
  • -S program 指定加密传输时所使用的程序。此程序必须能够理解ssh(1)的选项。

 

3.使用说明

从本地服务器复制到远程服务器

复制文件:

$scp local_file remote_username@remote_ip:remote_folder
$scp local_file remote_username@remote_ip:remote_file
$scp local_file remote_ip:remote_folder
$scp local_file remote_ip:remote_file

指定了用户名,命令执行后需要输入用户密码;如果不指定用户名,命令执行后需要输入用户名和密码;

复制目录:

$scp -r local_folder remote_username@remote_ip:remote_folder
$scp -r local_folder remote_ip:remote_folder

第1个指定了用户名,命令执行后需要输入用户密码; 第2个没有指定用户名,命令执行后需要输入用户名和密码;

注解:

从远程复制到本地的scp命令与上面的命令一样,只要将从本地复制到远程的命令后面2个参数互换顺序就行了。

4.使用示例

实例1:从远处复制文件到本地目录

$scp root@10.6.159.147:/opt/soft/demo.tar /opt/soft/

说明: 从10.6.159.147机器上的/opt/soft/的目录中下载demo.tar 文件到本地/opt/soft/目录中

实例2:从远处复制到本地

$scp -r root@10.6.159.147:/opt/soft/test /opt/soft/

说明: 从10.6.159.147机器上的/opt/soft/中下载test目录到本地的/opt/soft/目录来。

实例3:上传本地文件到远程机器指定目录

$scp /opt/soft/demo.tar root@10.6.159.147:/opt/soft/scptest

说明: 复制本地opt/soft/目录下的文件demo.tar 到远程机器10.6.159.147的opt/soft/scptest目录

实例4:上传本地目录到远程机器指定目录

$scp -r /opt/soft/test root@10.6.159.147:/opt/soft/scptest

说明: 上传本地目录 /opt/soft/test到远程机器10.6.159.147上/opt/soft/scptest的目录中

移动端三级联动城市选择控件

一、简介

纯原生js的移动端城市选择插件,不依赖任何库

二、用法

在html页面中引入input标签,写法如下:

<input id="demo1" type="text" readonly="" placeholder="城市选择特效"  value="广东省,深圳市,南山区"/>

将样式文件引入到页面中:

<link rel="stylesheet" href="css/LArea.css">

同时引入js文件到页面中:

<script src="js/LArea.js"></script>

引入城市数据:

<script src="js/LAreaData1.js"></script>

初始化插件:

var area = new LArea();
area.init({
    'trigger': '#demo1',//触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo':'#value1',//选择完毕后id属性输出到该位置
    'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type':1,//数据源类型
    'data':LAreaData//数据源
});

效果图:

html-address-select

插件来源:

Github

DEMO:
移动端三级联动城市选择控件

最好使用移动端访问,扫描下方二维码

1479466560

FTP上传提示451 No mapping for the Unicode characte报错

问题场景:

在使用FTP上传文件时,文件(夹)名若包含中文可能会出现如下错误:

451 No mapping for the Unicode character exists in the target multi-byte code page.

解决方案:

出现此错误原因是由于FTP客户端的编码与服务器所使用的编码不一致导致的。建议使用FileZilla客户端软件,把 站点属性-字符集 修改为 强制UTF-8 。

ftp451

WordPress 页面模板选项无法显示

1.检查页面模板格式是否错误

在主题根目录下找到页面模板,检查头部是否有下列代码,其中 ‘About Us’ 是页面模板名称。

<?php/*Template Name: About Us */?>

2. 主机 PHP 环境禁用了 scandir 函数

此操作需要用到服务器权限,适合有VPS或服务器权限的人操作,如果用的是虚拟主机,就找空间管理商,请他帮你操作一下。

2.1 找到 PHP 的配置文件 php.ini

linux 环境下一般在 /usr/local/php/etc/php.ini

sudo vi /usr/local/php/etc/php.ini

2.2 找到 “disable_functions=” 

删除后面的 ‘scandir’ 保存

2.3 重启 PHP 服务

/etc/init.d/php-fpm restart

 

TinyPNG:高质量图片压缩工具

tinypng-logo-550x210

在做网站资源中,图片是最耗资源的,要想得到高质量的压缩图片,TinyPNG 是一款不可不推荐的利器。

TinyPNG 使用一种智能有损压缩技术(通过降低图片中的颜色数量,来减少存储图片所需要的数据)来降低 PNG 图片的大小。这样的压缩对图片的效果影响是很小的,但是可以大大降低图片的大小,并且还能保持 PNG 的 alpha 透明度。现在 TinyPNG 还支持 jpg 格式的图片压缩。 Continue reading