成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

随便看看:

分段图 CDNkeepalivedLinuxmysqlnginxrsyncUEditorWordPressWordPress插件七牛体育部信息志愿服务队免流全体例会向党组织靠拢团学会学习部宣传部影视相关心理部成都航院报社招生信息教学资源文艺部毕业就业流量活动生活杂谈社会实践部站长经历系部介绍系部动态纪检部组织部经验分享老师腾讯云资源下载轻松时刻高考录取分数线

标签:七牛

新版Linux/vps本地十五天循环备份和七牛远程备份脚本

WordPress技巧新版Linux/vps本地十五天循环备份和七牛远程备份脚本

标签:, , , | 2 条评论 | 2017-08-20

最新在新建一个博客,新的博客是建在云服务器的,完全自主,不得不说感觉非常好,比起虚拟主机可操作性强太多了。因为可操作性强,所以想把该做的都做好,比如备份。受张戈博客影响,看到了张戈的同步7天的那篇文章,想照着操作的时候发现,七牛的qrsync工具竟已废弃:qrsync已废弃看这简介,推荐使用qshell命令行工具,先森就干脆研究下使用新的工具来同步。有段时间没和七牛云储存打交道了,变化还是挺大的。为七牛的推陈出新点个赞。一、数据库、网站本地备份脚本在服务器上编辑shell脚本,脚本代码如下:#!/bin/bash# Name:liuxxbak.sh# This is a ShellScript For Auto Backup and Delete old Backup# Date:2017-8-19source /etc/profilebackupdir=/web/data/liuxx_bak   # 本地备份路径time=` date +%Y%m%d `date=` date +"%Y-%m-%d %H:%M:%S" `day=15  #本地备份保留天数# 数据库信息user=rootpassword=******host=127.0.0.1port=3306databases=wordpress# 本地网站根目录backhome=/web/data/html/if [ ! -d $backupdir ]; then  mkdir $backupdirfi        mysqldump -h $host -P $post -u $user -p$password ${data} | gzip > $backupdir/${data}_$time.sql.gzif [ "$?" == 0 ];then        echo "[${date}] 数据库 ${data} 备份成功!!" >> ${backupdir}/mysqllog.logelse#备份失败则进行以下操作        echo "[${date}] 数据库 ${data} 备份失败!!" >> ${backupdir}/mysqllog.logfi# 备份网站tar -zcvf $backupdir/liuxx_${time}.tar.gz $backhome > /dev/null 2>&1# 删除同步find $backupdir -name "*.gz" -type f -mtime +${day} -exec rm {} \; > /dev/null 2>&1先森将以上代码保存为‘liuxxbak.sh’,名称可以随意自定义。保存后需要增加可执行权限:chmod +x liuxxbak.sh使用说明:将以上内容变量按需修改:backupdir=本地备份绝对路径day=本地备份保留天数user=数据库用户名(建议使用root用户,出错可能性小)password=数据库密码host=数据库IP或域名port=数据库端口databases=数据库名称backhome=本地网站根目录脚本执行方式:./liuxxbak.sh或者/web/data/liuxxbak.sh    # 绝对路径执行如此可以检查一下是否能够成功备份。二、远程备份到七牛云储存1.命令。首先下载qshell命令行工具,下载页面:根据服务器类型选择下载linux 64位的服务器可以直接在服务器上这样下载并增加可执行权限:wget -O qshell http://devtools.qiniu.com/2.1.3/qshell-linux-x64 && chmod +x qshell可以将qshell命令放入自定义目录。或直接放至/usr/bin/路径下,这样就可以任何地方直接输入命令了。2.鉴权。有了命令之后,我们需要七牛的鉴权,否则没法使用接下来的命令。需要鉴权的命令都需要依赖七牛账号下的 AccessKey 和 SecretKey。所以这类命令运行之前,需要使用 account 命令来设置下 AccessKey ,SecretKey 。鉴权的方式很简单,首先进入七牛的个人中心->密钥管理中,找到AccessKey 和 SecretKey。然后在服务器中运行一下命令:/web/data/qshell account ak sk执行之后,用户的所有信息写入到磁盘$HOME_DIR/.qshell下面。如:root用户执行后,信息会保存在/root/.qshell/account.json文件中。如果你修改了密钥,只需要重新执行以上命令即可,配置信息将被覆盖。3.同步。终于到了这一步。qshell命令的命令有很多,同步需要用到的命令是qupload。qupload是用来将本地目录中的文件同步到七牛空间中的命令。命令格式:qshell qupload [<ThreadCount>] <LocalUploadConfig>ThreadCount:并发上传的协程数量,默认为1,即文件一个个上传,对于大量小文件来说,可以通过提高该参数值来提升同步速度。LocalUploadConfig:数据同步的配置文件,该配置文件里面包含了一些诸如本地同步目录,目标空间名称等信息。ThreadCount是可以忽略的参数,默认一个文件一个文件的上传,因为是要备份数据库和本地网站文件,文件较少且大,顾保持默认就好。LocalUploadConfig为配置文件,配置文件中可带的参数共有21个,先森选用了其中的7个。详细的配置介绍请看这里。先森选用的参数如下,将以下内容保存到文件‘localupload.cnf’:{   "src_dir"            :   "/web/data/liuxx_bak",   "bucket"             :   "liuxx-backup",   "ignore_dir"         :   true,   "overwrite"          :   true,   "check_exists"       :   true,   "check_hash"         :   true,   "rescan_local"       :   true}解释,*为必须项:"src_dir":"/web/data/liuxx_bak",  # 本地备份路径*"bucket":"liuxx-backup",    #同步数据的目标空间名称,可以为公开空间或私有空间*"ignore_dir":true,    #远程同步到七牛时,忽略本地路径"overwrite":true,    #覆盖同名文件"check_exists":true,    #上传前检查是否有同名文件"check_hash":true,    #在check_exists设置为true的情况下生效,是否检查本地文件hash和空间文件hash一致"rescan_local":true,    #检测本地新增文件并同步最后,远程同步到七牛云储存的命令为:/web/data/qshell qupload /web/data/localupload.cnf可以执行一下上面的命令,检查是否能够成功同步。先森同步到七牛云的效果:同步效果三、定时备份同步准备工作已经完毕了,现在所需的就是每天的自动备份及远程备份了。执行crontab -e添加以下内容:00 02 * * * /web/data/liuxxbak.sh30 02 * * * /web/data/qshell qupload /web/data/localupload.cnf >/dev/null 2>&1凌晨两点执行本地备份,凌晨两点半执行远程备份。当然,你也可以将qshell命令加到liuxxbak.sh脚本的最后,那么只用添加第一条计划任务就可以了。四、七牛十五天循环备份七牛云储存免费的存储空间大小是10G,如果你的七牛云存储空间有点紧急的话,可以继续本操作。这时候,点击‘生命周期’,添加规则,我们可以设定删除15天前的文件。先森设定的规则如下:删除15天前的文件当然,如果七牛云存储的剩余空间很足的话,可以保留更多天,这样可供回退的版本就更多了。总结无论是用虚拟主机,还是使用云服务器,有一套备份的机制是很重要的。如果像先森一样,主站使用的是虚拟主机,也有另外的云服务器的话,这套备份方案改改,也可以把自己虚拟主机的数据库一起备份起来嘛。

七牛图片处理样式的正确使用方式

经验杂笔七牛图片处理样式的正确使用方式

标签:, | 11 条评论 | 2016-09-15

七牛图片处理样式,也就是我们通过创建一个样式,样式内定义了要对图片进行怎样的操作,然后我们只需要在图片后面加上样式分隔符和样式名称,即可对图片进行处理的一种方式。说起来,这种方式就像我们添加在functions.php中定义的加在钩子上的函数,要用的时候,直接调用函数,函数内的处理也就随之而动了。使用方法七牛图片处理样式,之前先森一直称其为七牛裁剪代码。因为先森将处理样式用在的一般是缩略图上,所以称之为裁剪;而代码主要就是先森闹了笑话了。先森之前对七牛图片处理样式的使用一直是将样式内容直接加在图片后面,中间加上了个问号,这样就导致图片的链接看起来非常的长(如下图)。加上七牛裁剪代码链接特别显得长上面的这种使用方式,简而言之就是,七牛为我们准备好了一个调用函数,而先森却非要每次都把函数内容重新写一遍。还好,先森在@第9页看到了正确的使用方法。正确的使用方法应该如下图,直接用斜杠+样式名称。正确的使用方式注意事项1.七牛图片处理样式的个数不是固定的,每个存储空间可以定义100个图片处理样式。这一点对我们小站影响比较小,先森目前才使用7个样式。2.就像PHP语言要加上<?php ?>来区分php代码一样,图片链接那么长,图片名称和图片处理样式的名称都是用户自定义的,万一两个名称重复了怎么办呢?所以,七牛也需要一个协议好的“定义”来区分一串字符是否为图片处理样式。而七牛的这个“定义”,就是样式分隔符。样式分隔符这个样式分隔符乍眼一看,好像没有什么作用,选择哪一个好像都没有什么。但是,先森使用之后,认为这个分割符还是很有作用的。样式分隔符能够使用的符号如下:- _ ! / ~ ` @ $ ^ & * ( ) + = { } [ ] | : ; " ' < > , .七牛默认使用的是斜杠,但先森觉得,这个斜杠就是最不应该作为样式分隔符的。先森使用斜杠为分隔符之后,网站上的图片名称就完全一样了。道理很简单,在一个链接中,最后一个斜杠后面的内容,默认为下载后的文件名。如下图,dengxiang是先森设置的样式名,清一色啊。文章中的图片全是图片样式名称所以先森也会找时间,把七牛的图片样式分隔符,以及主题中的样式分隔代码给更换了。大家可以看看七牛官方的演示图片,以中横线为样式分隔符的效果:以中横线为分隔符的效果所以希望还没有开始使用七牛图片处理样式的朋友,第一步先更改样式分隔符。代码部分如果使用七牛图片处理样式,就相当于修改了图片的后缀名,所以七牛云储存也就匹配不到文章中的图片了。在使用斜杠为分隔符的情况下,先森尝试了修改七牛云储存中的本地设置-扩展名设置(因为分隔样式是斜杠,所以用了反斜杠转移,不然会出错),但是并没有起作用。大家可以试试换了分隔符后的情况。扩展名修改所以,只能摒弃七牛云储存了。然后我们需要做的是将图片拉取到七牛存储空间,然后网站上访问的也是来着七牛的图片。因为从一开始先森使用的就是七牛云储存,而七牛云储存设置的第一步就是填写API,这让先森陷入了一个误区——没有API图片就不会保存到七牛存储空间。后来先森想明白了,只需要直接把图片上的域名改为七牛的域名,然后七牛会判断图片是否存在于存储空间。如果存在,直接输出;如果不存在,回源拉取图片到七牛存储空间。那么明白了就简单了,我们只需要将网站上图片链接中的域名直接换成七牛域名即可,在主题的functions.php中添加://WordPress七牛CDN代码版function QiNiuCDN(){    function Rewrite_URI($html){        /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型,使用分隔符 | 隔开即可 */        $pattern ='/http:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';        /* 七牛CDN空间地址,请自行替换成实际空间地址 */        $replacement = 'http://img.capjsj.cn/$2$3.$4';    $html = preg_replace($pattern, $replacement,$html);    return $html;    }    if(!is_admin()){        ob_start("Rewrite_URI");    }}add_action('init', 'QiNiuCDN');这样我们就用代码实现了将静态资源拉取到七牛存储空间。接下来需要做的,是给文章中的图片加上七牛蹄片处理样式,同样是在functions.php中添加:/** * 七牛缩略图和水印 D9Y.NET整理**/function QiNiuThumbnailWatermark($content) {   global $post;   $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";   /* 下面这行代码中的dengxiang是七牛样式中的样式名称,而斜杠为七牛中设置的样式分割符 */   $replacement = '<img$1src=$2$3.$4/dengxiang$5$6>';   $content = preg_replace($pattern, $replacement, $content);   return $content;}add_filter('the_content', 'QiNiuThumbnailWatermark');?>当然,上面这串代码只是一下就将网站文章图片添加上了七牛图片处理样式,其他如相关文章、最新文章、文章列表中的缩略图还没有添加对应的样式。对于这些,先森是直接在调用图片时手动添加样式,直接加在functions.php中的函数,先森还没去研究。先森的例子如下:<img src="<?php echo post_thumbnail_src(); ?>/sidebar" alt="<?php the_title(); ?>" />总结总之,使用七牛图片处理样式,能使你的图片链接看上去更清爽。但如果使用斜杠为样式分隔符,又会使你的图片名称看起来非常操蛋。另外,七牛图片处理,不仅仅是裁剪图片大小,更为重要的是,可以设置图片水印。

WordPress缩略图上的七牛裁剪代码去重

WordPress技巧WordPress缩略图上的七牛裁剪代码去重

标签:, , , | 1条评论 | 2016-03-17

近期先森对WordPress和七牛研究的比较勤,折腾了很多,其中很多都是和七牛有关的。七牛的裁剪功能确实好用,但是先森为缩略图(文章下面相关文章的图片)和文章中的图片都加上七牛裁剪代码后,就发生了冲突。关于为缩略图和文章图片添加七牛裁剪代码,大家可以先看看这些文章:1.七牛代码如何使用:WordPress调整Tag标签页文章列表缩略图优化小记2.已发布的文章添加代码:将WordPress历史文章中所有图片加上七牛裁剪水印代码其实,发生冲突是必然的事情。首先,缩略图调用的图片,是从文章中调用图片链接。图片链接获取的优先顺序是:自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片。也就是只有文章中没有图片时,才会调用你设置的随机图片。而文章中的图片,先森已经全部加上了七牛裁剪代码。调用这些图片链接的时候,链接里面实际上已经有一段七牛裁剪代码了。这将导致,缩略图调用的时候在后面增加的裁剪代码会重复加在后面,而七牛的规则是只生效前面的一段,也就是缩略图的裁剪失效了,你调用缩略的时候还是更大的图片,没有达到裁剪缩小图片体积的目的。加上了两段七牛裁剪代码前期准备这种情况,整理了一下思路,总结了下解决方案。增加判断,如果图片链接中含有裁剪代码,则替换成新的裁剪代码;如果不包含,则直接在链接后面添加裁剪代码。要用两种函数,查找和替换。先森在w3school里找到了这两种适合的函数,要了解的可以看看:查找函数:PHP strpos() 函数替换函数:PHP str_replace() 函数除了准备这两个函数,如果是使用WordPress大学中的缩略图调用代码的同学,还要修改下代码。缩略图调用:WORDPRESS添加相关文章功能(标题/缩略图样式)WordPress大学提供的代码,是加在functions.php中的,调用的时候可以直接输出图片链接://添加特色缩略图支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 From wpdaxue.comfunction post_thumbnail_src(){    global $post; if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址 $values = get_post_custom_values("thumb"); $post_thumbnail_src = $values [0]; } elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); $post_thumbnail_src = $thumbnail_src [0];    } else { $post_thumbnail_src = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches); $post_thumbnail_src = $matches [1] [0];   //获取该图片 src if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片 $random = mt_rand(1, 10); echo get_bloginfo('template_url'); echo '/images/pic/'.$random.'.jpg'; //如果日志中没有图片,则显示默认图片 //echo '/images/default_thumb.jpg'; } }; echo $post_thumbnail_src;}因为要对图片链接增加查找,所以上面代码中,最后几行的输出可不能要,这样是判断不了的。需要将上面的最后五行的"echo"换成"return",即: return get_bloginfo('template_url').'/images/pic/'.$random.'.jpg'; //如果日志中没有图片,则显示默认图片 //echo '/images/default_thumb.jpg'; } }; return $post_thumbnail_src;}解决方法准备齐全之后,就可以解决问题了。之前,先森是这样调用相关文章的图片的: <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />那么,现在为了解决重复代码的问题,需要将上面的代码换成下面的内容:<?php     $imgsrc = post_thumbnail_src();    $qiniu_dengxiang='imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMi5wbmc=/dissolve/80/gravity/SouthEast/dx/5/dy/4';    $qiniu_xiangguan='imageView2/1/w/130/h/100/q/100'; if(strpos($imgsrc,$qiniu_dengxiang)){?>            <img src="<?php echo str_replace($qiniu_dengxiang,$qiniu_xiangguan,$imgsrc);?>" alt="<?php the_title(); ?>" class="thumbnail" />           <?php }        else{?>            <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />        <?php }?>修改保存之后,检查一番,发现问题确实得到了解决:只增加了一次七牛裁剪代码同理,侧边栏的最新文章缩略图也可以这么修改,先森也就不累述了。

将WordPress历史文章中所有图片加上七牛裁剪水印代码

WordPress技巧将WordPress历史文章中所有图片加上七牛裁剪水印代码

标签:, , , | 0条评论 | 2016-03-16

关于七牛云储存的好,各位站长都有所了解。以前先森不怎么重视的七牛缩略图裁剪、为图片增加水印等功能,先森也开始重视起来了。经过七牛裁剪之后的效果显而易见,图片体积小了,网页打开速度也就快了。当然,成航先森的网站访问量较小,还不存在服务器压力过大等问题。总之,七牛能为我们减少很多问题。前段时间,先森鼓捣出了怎么让百度UEditor在编辑图片的时候,就为图片添加上七牛裁剪的代码。但是这样影响到的图片,也之后实现该效果之后的文章中的图片,之前已经发布的图片就没法影响到了。但是这还就成了先森心中的一根刺。关于七牛云储存代码的文章,大家可以看看:1.七牛代码如何使用:WordPress调整Tag标签页文章列表缩略图优化小记2.如何更方便的使用:WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码其实关于如何处理这种情况,先森心里早已有了想法。首先,不可能自己一篇篇的打开文章,修改图片的链接,这太繁琐了,不现实。使用插件的话,也太麻烦。所以肯定还是要动动非常敏感的数据库啦。本来,现实想的是,先使用正则表达式,查找图片链接,然后为图片后面,增加七牛的裁剪代码。也就是在每张图片的后面,增加以下代码:?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10但是百度了一下,MySql数据库使用正则,好像很麻烦的样子(实际上是有点懒,看着头晕)。所以还是研究链接本身,最终想出了懒办法。还是直接使用我们百试不爽的替换大法:update 表 set 内容字段=replace(内容字段,'需要被替换字符串','替换字符串')研究链接之后,发现,只要把能只有图片链接才有的部分,替换成这部分加上七牛裁剪即可。所以最后显示用的替换语句是:update wp_posts set post_content=replace(post_content,'.jpg" title','.jpg" title') update wp_posts set post_content=replace(post_content,'.png" title','.png" title')因为先森文章中图片基本只有jpg和png两种格式,图片<img>便签中,都是链接后面加title,所以就用上面的那种替换。运行之后,发现没有问题:替换图片链接运行之后,抽样检查了一下以往的文章,发现确实生效了,没有出现问题,OK!

WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码

WordPress技巧WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码

标签:, , , , | 3 条评论 | 2016-03-11

先森在之前的文章页谈到过,先森想要将七牛云储存、Auto Highslide插件和百度UEditor编辑器三方面协调,在能够使Auto Highslide插件的灯箱效果不失效的情况下,让从百度UEditor编辑器插入的图片,在不被灯箱放大的时候,变成被七牛裁剪过的图片。即张戈博客提到过的:“那么读者打开文章页面时,浏览器只会加载这个300px的img中图,而用户如果想看清楚图片时,就会点击图片放大,这时候才会加载最清晰的完整图片!要知道,并不是每个读者都会想去看图片的!所以,暗箱放大功能可以变相的加快页面加载速度!因为你在文章中插入的是小体积的中等图,只有点击放大才会加载大图。”因为先森用的不是WordPress自带的编辑器已经早早的用上了百度UEditor编辑器,所以不能像张戈说的那样,在编辑的时候插图选择插中等大小的图,所以先森就得从百度UEditor编辑器这里下手了。关于WordPress百度UEditor编辑器的更多文章,大家可以看这些:百度UEditor编辑器插件1.4.3.1 For WordPress解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题解决使用百度UEditor编辑器后移动端图片被拉伸问题此次先森想要达到的目的,是图片从百度UEditor编辑器上传后,自动带上已经准备好的七牛裁剪代码:?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10这段代码会将图片裁剪为宽度500px,高度自适应,并带上先森设置的水印。先森本来想像“解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题”一文中的方法一样,修改/wp-content/plugins/ueditor/ueditor/php文件夹中的config.json文件。但先森无奈的发现,这里只能修改链接前缀,不能添加后缀,所以还需另寻他法了。先森又想起“解决使用百度UEditor编辑器后移动端图片被拉伸问题”一文中解决问题的方法,是注释了/wp-content/plugins/ueditor/ueditor/dialogs/image中image.js文件里的一段代码,这段代码是输出通过百度UEditor编辑器设置的图片的高宽,这导致了移动端图片被拉伸。这段代码附件的代码是以下内容:getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }这里的代码,是控制输出通过UEditor编辑器修改过的图片属性。先森看到了上面的“src: data['url'],”部分,再看到下面的被注释部分,照葫芦画瓢的修改了一下上面的代码:getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    _src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }就这样,删除浏览器缓存后再到后台尝试插入图片,结果没看到有添加成功,就以为是失败了。但后面想明白了,上面的代码控制的是输出通过UEditor编辑器修改后的数据。点击图片-修改,随便做个修改,再看代码,OK。图片链接后面添加上了七牛的裁剪代码。后来又操作了几下,发现高兴的太早。当你每次修改图片信息时,UEditor编辑器都会给你加一次七牛裁剪代码。这才明白,这里有个循环。通过设置变量“i=0”,结尾让“i++”,判断“if(i==0)”后发现,UEditor编辑器不仅仅是这一段代码循环,而是每次打开图片修改框,都会重新调用一次image.js。七牛裁剪代码产生了重复知道了问题所在就简单了,用JavaScript的indexOf()函数,判断指定的字符串值中是否存在于字符串中。关于这个函数的用法,可以参考:W3School:JavaScript indexOf() 方法明白了indexOf()函数的用法之后,先森对上面的代码做了如下调整:        getInsertList: function () {            var data = this.getData(); var abcd=data['url']; if (abcd.indexOf("/10/dy/10")<0){ data['url']=data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10";}            if(data['url']) { return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }然后经过测试,发现可行。上传图片后,打开图片的修改,做任意修改操作后会增加七牛裁剪代码,且不会重复。并且先森特意去服务器上查看了下图片上传的文件夹,发现这样操作代码并不会造成图片的二次上传。先森用测试文章插入图片,对图片的大小进行了对比:网页图片大小对比上图中,上面部分是在电脑上看到的图片原图信息,下面部分是网页中图片的信息。对比发现,原图大小是63.8KB,而经过七牛裁剪之后,图片大小减少到了35.1KB,几乎减少了一半,效果是非常明显的。但这样还是没有达到先森预期的效果,那就是点击图片会加载出原图大小。而这样操作之后,打开的图片还是被七牛裁剪过的。这算是一个小小的遗憾了,先森会再想办法解决。经过半天的研究,先森通过修改知更鸟鸟叔的代码,终于实现先森想要达到的效果:不点击图片的时候,显示被七牛裁剪成固定500px宽度的图片,点击后,显示七牛不裁剪但带了水印的图片。<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) {var imgsrc = this.src  //需要设置新的变量,不设置的话,会使不点击的图片链接也跟着改变if (imgsrc.indexOf("?") != -1){imgsrc=imgsrc.replace(/[^\?]*$/, "imageView2/1/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/5/dy/5");//替换问号后面的内容为新的内容} $(this).wrap("<a href='"+imgsrc+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>用上面的代码替换鸟叔的代码即可达到目标。这里用的是replace()函数。这个函数的语法是:stringObject.replace(regexp/substr,replacement)要使用先森上面的代码达到七牛裁剪的效果,自己在七牛中设置好数据处理的样式后,替换先森的replacement段数据即可。

WordPress插件Auto Highslide代码化折腾小记

WordPress技巧WordPress插件Auto Highslide代码化折腾小记

标签:, , , | 0条评论 | 2016-03-09

Auto Highslide插件是先森用的灯箱插件,也就是文章中的图片可以点击放大,并且文章中的所有图片可以像幻灯片一样左右切换查看。安装Auto Highslide插件后,鼠标放在文章的图片中,鼠标图案会变成放大镜,提示可以放大。发大这个在实际应用中很有用。这个插件的设定是,点击图片放大,放大会放大到适应屏幕的大小,如果查看最大化(实际大小),需要点击按钮或者快捷键“F”键:Auto Highslide插件查看实际大小认识这个插件,先森也是在免费资源部落看到的。搜了一下,在WordPress插件库里搜索,好像搜不到Auto Highslide插件,所以要看详细介绍或下载的,可以去免费资源部落看看:免费资源部落:WordPress博客网站文章图片美化技巧:放大、幻灯片播放本文记录的是先森将Auto Highslide插件变成主题自带,也就是代码化的折腾过程。各个WordPress的先辈们都在说,WordPress的插件过多,会影响网站的响应速度,所以插件是装的越少越好。当然,这也不是绝对,要看自己的优化。先森最近想实现的是让灯箱能够配合上七牛的图片处理。目标有两个:1.图片加上水印;2.没放大之前,图片是被七牛裁剪成宽度500px的,点击图片后显示原图。但是先森思考了很久,也没有想出能够同时实现两个目标的方法。因为先森的WordPress后台文章编辑是用的百度UEditor编辑器,所以不能像WordPress自带的编辑器插入图片时选择切好的大中小三种图片大小。这就需要七牛、百度UEditor编辑器、Auto Highslide插件三方的协调,所以先森有点脑子不够用。虽然没有想出怎么解决,但是却顺便把Auto Highslide插件代码化给解决了。将服务器中的Auto Highslide插件文件夹下载下来,打开“auto-highslide.php”文件。找到文章中的以下代码:'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide已用有3段以上代码,分别在第23、24、27行,将以上代码全部替换成以下代码:'.get_bloginfo('template_directory').'插件的代码也就修改完了,非常简单。接下来现将修改好的“auto-highslide.php”文件,与插件文件夹中的“highslide”文件夹上传到你的主题文件夹中。当然,仅仅如此还没有生效,还需要在你的主题functions.php中添加下面的代码://灯箱插件代码化include("auto-highslide.php");这就完工了。设置之前先森将插件停用了,看了一下图片放大失效了。设置完后再检查,OK,放大效果又回来了。下面就可以放心的把插件删除啦:删除Auto Highslide插件重要补丁要使Auto Highslide插件生效,还需要在日志中插入图片时,选择链接到媒体文件,如果不设置的话,图片暗箱效果就无法生效。但每次都点击设置的话,会比较麻烦。如果发布了很多文章之后,才开始启用灯箱,如果还要将发布过的文章重新设置图片,那就更麻烦了。所以感谢知更鸟博客鸟哥,教了大家一种补救方法,大家可以去原文看看:知更鸟博客:为WordPress文章图片自动添加链接到原图方法其实也很简单,将下面的JS代码到主题header.php模版文件中:<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) { $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>该脚本会检查文章中的图片是否包含了链接,如果没有,会自动为图片添加链接到原图。修改其中的 #newsContent 为你主题正文的CSS类。如果你的主题未加载jquery.js库文件,代码将无效,可以将这句代码加到上面<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

WordPress调整Tag标签页文章列表缩略图优化小记

WordPress技巧WordPress调整Tag标签页文章列表缩略图优化小记

标签:, , , | 0条评论 | 2016-03-07

最近开始工作了,但是工作目前比较闲,所以又开始研究WordPress了。目前本站的所有文章列表中,只有标签页设置了缩略图,但是本站的缩略图一直是先森心中的一个心病,因为觉得没有做好。比如,有些图片比较宽,就会导致缩略图的下半部分是空的,就像下面这样:缩略图过宽导致下半部分为空所以,先森就想对这种情况做一个优化。当前想到的优化方法有两种,一种是先森的友链kouss博客中的“用CSS3使图片在容器内垂直水平居中”提到的CSS优化方法。第二种是著名博客我爱水煮鱼提到的七牛云储存插件中带的日志说略图功能。CSS优化方法尝试首先进行了比较简单的尝试,通过修改CSS来改良。这个简单,不用修改文件,直接审查元素就可以测试了。这种方法是:div容器的css样式width: 80px;height: 80px;overflow: hidden;img标签的css样式width: auto;height: auto;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);下面做一个对比:CSS修改之前的效果CSS修改之后的效果通过对比可以看到,虽然修改CSS之后,缩略图不会留空了,但是却显得很随意,没有显示出想要的部分,所以也有些不尽人意。当然,先森是直接按照上面的代码改的,如果修改下CSS代码,肯定可以让效果更好,但是今天不想调试CSS代码,以后有空再研究。七牛缩略图方法尝试这种方法来自我爱水煮鱼博客中的“七牛镜像存储 WordPress 插件:一键实现 WordPress 博客静态文件 CDN 加速”一文,其中提到了七牛云储存插件中wpjam_post_thumbnail 函数帮你通过使用七牛的缩略图 API 直接生成缩略图的方法:<?php  if(wpjam_has_post_thumbnail()){?><div class="entry-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php wpjam_post_thumbnail(array(150,150),$crop=1);?></a></div><?php } ?>其中有两个参数:$size:设置缩略图的大小,它是一个数组,比如上面例子中就是设置缩略图大小为:宽是 150px,高也是 150px。$crop:设置是否裁剪缩略图,1为裁剪,如果为0,则只是按照最大边进行缩放,不进行裁剪。上面的代码放的位置是你放he_post_thumbnail()函数的位置。这个函数会调用你为文章设置的缩略图,当你没有设置缩略图的时候,会调用文章的第一张图片。这个功能在发布文章的时候比较新颖(2013年),但到了现在就有点不够用了。先森对这种方式进行了一波尝试,来看看效果:使用七牛云储存插件的函数之后图片出现了拉伸当文章内没有插入图片时通过上面两图,可以看到,使用七牛云储存插件的函数之后,图片出现了拉伸的问题。以及,当图片内没有图片时,就会显示空白。因此也让先森不满意,但当先森要放弃时,又想起七牛本身提供的图片处理——裁剪。虽然并不能达到想要的目标,但是裁剪之后却可以加快网页的加载速度。七牛裁剪功能的应用进入七牛网站,选择空间后点进数据处理,点击“新建图片样式”:七牛-新建图片样式点击后,进行设置。本站的缩略图是240*160的,所以只需要设置下宽高就行了:七牛-设置处理缩放方式设置好之后点击完成,会出现下面的结果:裁剪设置成功后的结果关于设置成功后要如何使用,很简单,在图片链接后面加上一个问号,再加上上图中红框中的内容即可。如:http://img.capjsj.cn/ueditor/php/upload/image/20150831/1441015508862148.jpg?imageView2/1/w/240/h/160/q/75再来检查一下有没有得到优化:使用七牛裁剪之前使用七牛裁剪之后可以看到的是,原本的缩略图只是将图片缩小了而图片的尺寸没有更改,共61.2KB。使用七牛裁剪之后,图片的尺寸变成了240*160,大小也缩减至12.1KB。值得一提的是,本站缩略图使用的是博客WordPress大学中“WORDPRESS添加相关文章功能(标题/缩略图样式)”一文输出缩略图地址的代码://添加特色缩略图支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 From wpdaxue.comfunction post_thumbnail_src(){    global $post; if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址 $values = get_post_custom_values("thumb"); $post_thumbnail_src = $values [0]; } elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); $post_thumbnail_src = $thumbnail_src [0];    } else { $post_thumbnail_src = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $post_thumbnail_src = $matches [1] [0];   //获取该图片 src if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片 $random = mt_rand(1, 10); echo get_bloginfo('template_url'); echo '/images/pic/'.$random.'.jpg'; //如果日志中没有图片,则显示默认图片 //echo '/images/default_thumb.jpg'; } }; echo $post_thumbnail_src;}以上代码放置于主题中functions.php中。调用的时候是直接使用函数post_thumbnail_src(),所以本站在缩略图中添加七牛裁剪的方式就是之间在函数后面加裁剪代码即可:<img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/240/h/160/q/75" alt="<?php the_title(); ?>" />本文就算是对今天的鼓捣做一个记录,若能帮到大家那也是极好的。

解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题

WordPress技巧解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题

标签:, , , , | 1条评论 | 2016-01-19

百度UEditor编辑器虽然非常好用,但是却也存在着一些与其它插件冲突的情况。下面要为大家分享的是通过百度UEditor编辑器上传的图片,无法被七牛CDN自动缓存的解决方法。之前为大家推荐了百度UEditor插件,不了解的可以看看:百度UEditor编辑器插件1.4.3.1 For WordPress原因分析通过百度UEditor编辑器上传的图片,通过审查元素我们可以看到,图片链接只有路径(点击放大):而产生只有路径的原因是百度UEditor编辑器上传图片时自动添加的地址就只有路径:而要达到使七牛识别,图片链接就必须带上网站地址,如下图所示(点击放大):解决方法我们需要达到的目标是链接完整,而UEditor编辑器上传的图片,从上传时的链接就不完整,所以我们需要解决的就是让UE编辑器总动在链接上添加网站链接,使链接完整。在服务器上打开/wp-content/plugins/ueditor/ueditor/php文件夹,找到config.json文件,编辑这个文件,打开如下(点击放大):我们可以看到,小编为本站编辑好的第11行红框位置,只要在双引号中添加自己网站地址即可。2016年3月10日更新先森为了发出此文之前的文章内图片也能重新被七牛缓存,动了点脑子,想要解决这个问题。首先,之前的文章图片的问题就是只有链接只有路径,没有域名,所以先森首先想到的就是为图片添加域名。在2016年3月9日先森发布的文章中提到过,知更鸟为我们提供了一个为WordPress文章图片自动添加链接到原图的代码:WordPress插件Auto Highslide代码化折腾小记知更鸟的代码是为WordPress文章中图片添加链接,所以先森就想就此代码进行改编,使其能够为图片增加域名。先森的JavaScript纯属自学,而且只学了一点,虽然最后成功了,但其中的艰辛却无人可知。不多说,这接上最终代码:<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ var str=$(this).text()  //或许应该是var str=this.src if(str.indexOf("capjsj.cn")==-1){ $(this).attr("src",this.src); } });});</script>然而代码虽然是弄出来了,但是先森发现,这只是从表面上更改了链接,然而源代码确是没有改变,所以就无法缓存这些图片了。不过,虽然绕了个大弯子,但先森还是终于想到了正确的做法——替换。先森的数据库没有学好,所以一直小心翼翼的不敢去触碰数据库,但这次终于还是要碰了。数据库的替换语句大概是这样的:update 表 set 内容字段=replace(内容字段,'需要被替换字符串','替换字符串')先森的替换代码是这样的:update wp_posts set post_content=replace(post_content,'src="/ueditor','src="http://www.capjsj.cn/ueditor')即:用'src="http://www.capjsj.cn/ueditor'替换掉'src="/ueditor'。这样非常简单的就解决了问题,论学好知识的重要性。。。有任何疑问,欢迎在下方评论区提出,也欢迎在页面顶部右方关注我的微博(@成航先森)。

WordPress使用七牛CDN导致ajax评论报错{“error”:”get from image source failed: E405″}

建站分享, WordPress技巧WordPress使用七牛CDN导致ajax评论报错{“error”:”get from image source failed: E405″}

标签:, , , | 5 条评论 | 2015-09-02

起因:最近流量不够用了,所以就开始使用七牛CDN用以减少流量消耗。七牛的免费CDN配额还是很给力的,以前不想用完全是因为用的七牛官方WordPress插件完全没有作用,没有效果,所以弃用。后来发现用水煮鱼的七牛插件才是正解,所以才开始启用。本以为没有问题了,结果发现用七牛CDN之后,文章页的返回顶部出现BUG了。本来嫌麻烦,也就不想修复了。但是这却一直成为了心中的梗,强迫症涌上心头,决定好好研究一下怎么回事。结果,返回顶部还没有解决,却意外的发现评论模块又出了问题,也就是题目中说的报错:{"error":"get from image source failed: E405"}。如下:原因:经过百度后了解到,确实是CDN的问题。CDN把你的comments-ajax.js文件给缓存走了,结果导致路径错误,这时候我们有两种选择来修复这个问题。1、修改js文件让它能够支持你的CDN路径2、将这个文件单独排除在CDN的镜像列表之外解决方案:1、修改comments-ajax.js文件这种方法的好处是你依旧可以体验完整的CDN镜像服务,你需要打开你主题目录下的comments-ajax.js文件然后修改它,找到如下的代码段(一般应该是在开头的)var i = 0, got = -1, len = document.getElementsByTagName('script').length;while ( i <= len && got == -1){ var js_url = document.getElementsByTagName('script')[i].src, got = js_url.indexOf('comments-ajax.js'); i++ ; }然后就在代码后边加入这样一句话js_url = js_url.replace('7xjad9.com1.z0.glb.clouddn.com','www.capjsj.cn');这样,修改完成后应该是下边的样子var i = 0, got = -1, len = document.getElementsByTagName('script').length;while ( i <= len && got == -1){ var js_url = document.getElementsByTagName('script')[i].src, got = js_url.indexOf('comments-ajax.js'); i++ ;}js_url = js_url.replace('7xjad9.com1.z0.glb.clouddn.com','www.capjsj.cn');然后将文件更新上传到你的服务器,再到七牛空间管理去刷新该文件。2、添加CDN镜像例外使用WP Super Cache来开启CDN镜像,直接将comments-ajax.js这个js文件排除在镜像列表之外,虽然加载的时候多了一个js文件,但省去了对付七牛那个缓慢的刷新过程,其实还是很不错的,立竿见影啊~WP Super Cache在WordPress后台插件安装中可直接搜索安装。方法:找到WP Super Cache的CDN页面,然后在下边找到“如果是之前有则排除”这一项,将comment-ajax填写进去就好了。如下图(点击放大,放大后按“F”键放至最大):这样,就只有一个文件被排除在外了。好了,大家去试试吧,有任何疑问可在底部讨论区提出。

官方微信
返回顶部