saber酱的抱枕

听着 fallen down,回忆起了天降。动力炉,好痛

@saber1周前

07/14
03:53
学习

给WordPress文章里的图片添加放大效果

css3 javascript js scale wordpress 图片放大

昨天我在初音社(www.mikuclub.cn)看到了这个效果,有些地方的图片在鼠标经过时会放大,感觉很棒,整个网页似乎生动了不少,今天我也给自己的网站添加上了这个效果。

首先分析一下原理:在图片外层套了一个容器,这个容器和图片大小一样,设置超出隐藏。然后给图片添加上放大效果就可以了。

不过初音社应用这个效果的地方的宽高是固定的,但本站文章里的图片宽高是不一致的,所以需要用JavaScript来设定外层容器的宽高。

实现步骤如下:

首先添加css样式:

.img_scale_wrap{overflow: hidden;} /*外层元素*/
.post_t img{transition:1s;} /*设置过渡时间*/
/*.post_t img:hover{transform: scale(1.2);}*/ /*图片放大规则。但在移动端一些浏览器上,点击图片等同于触发hover效果,所以这句规则可以考虑用js来动态添加,避免在移动端也生效*/

然后添加JavaScript代码:

if (isPC) { // 仅在pc端启用此效果,此处按自己需要处理
    var post_img = document.querySelectorAll(".post_t img"); // 选择所有图片
    if (post_img.length > 0) {
	// 添加鼠标经过图片放大的css规则
	var img_scale_css=document.createElement("style");
	img_scale_css.innerHTML=".post_t img:hover{transform: scale(1.2);}";
	document.body.appendChild(img_scale_css);
        // 给图片添加外层元素
        function set_post_img_wrap(img) {
            var post_img_wrap = document.createElement("div");
            post_img_wrap.className = "img_scale_wrap";
            img.parentNode.insertBefore(post_img_wrap, img);
            post_img_wrap.appendChild(img);
            post_img_wrap.style.width = img.width + "px";
            post_img_wrap.style.height = img.height + "px";
        }
        // 给图片添加事件
        for (var i = post_img.length - 1; i >= 0; i--) {
            if (post_img[i].complete) { // 已加载完成的图片马上进行设置
                set_post_img_wrap(post_img[i]);
            } else { // 未加载完成的图片等到加载完再进行设置,否则获取不到宽高
                post_img[i].onload = function() {
                    set_post_img_wrap(this);
                }
            }
        }
    }
}

本文的代码也可以用在其他类型的网站上,不只是WordPress里才能用。但是移植时要按自己情况修改css选择器和js选择器。

给WordPress文章里的图片添加放大效果

@saber1周前

07/12
07:42
软件

吐槽360

办公室里有个电脑我前几天才重装了系统,很干净的系统,结果刚才那个同事说电脑卡。这才用了三天啊。

我过去看了一眼屏幕右下角,看到了360,就说你把360卸了吧。他不想卸,说卸了也没用。

我和他说,卸了总比不卸好,之后他竟然说:我就是因为电脑卡才装了360。

卧槽他还指望用360加速球(负优化)来加速系统还是怎么的?我无fuck说,只能送他一句:“那随便你吧”,转身走了。

以前我见过有些人,用360的理由是“不用360我用什么杀毒啊”,一幅不知道世界上还有其他杀毒软件的样子。但这么些年了我还是头一次看到有人因为电脑卡主动装了360。就让他这么卡着吧。

吐槽360

@saber2周前

07/9
16:06
软件

IIS的文件防盗链处理

首先安装官方的URL Rewrite Module(URL 重写模块),之后配置检测referer 的规则即可。

配置有两种办法,一个是在IIS 里找到这个URL 重写模块,通过可视化操作设置规则。

另一个办法是直接在网站根目录的web.config 里添加规则。我用的是后一种办法。

在web.config 里添加一条规则:

<rule name="Prevent hotlinking">
	<match url="^.*\.(jpg|png|gif)$" ignoreCase="true" />
	<conditions>
		<add input="{HTTP_REFERER}" pattern="https://simple.com/.*" negate="true" />
	</conditions>
	<action type="CustomResponse" statusCode="403" />
</rule>

这样就ok了。

iis URL Rewrite Module Windows Server 2012 防盗链 referer

如果最后你不想显示403状态码,而是显示一个自定义图片的话,可以把action 改成这样:

<action type="Rewrite" url="/img/bitch.png" />  

如果想要允许复数的referer ,可以把add 规则复制,按自己的需要修改pattern 参数。

Read More →

IIS的文件防盗链处理

@saber2周前

07/8
07:40
其他

七牛图床的文件已经迁移到本站的服务器了

七牛 图片 迁移

前段时间我把网站升级到了https,但是因为图片是放在七牛上的,仍然是http,所以浏览器仍然会显示不安全的提示。七牛配置ssl需要域名做备案,我不想做,所以当时是放着不管了。

但最近考虑到省钱的因素,我决定把七牛上的文件都迁移到服务器里(额外的好处是图片也可以https了)。我现在有两个七牛账号,存储文件达3GB,月流量合集400GB以上,每月流量费用最少100元人民币。我现在的服务器每月流量1000GB,我发现我完全可以把图片放到服务器上,不必额外支付流量费用了。七牛一年的流量费用大约有1000元,但是这个vps一年才400元,流量还用不完,非常的划算。

迁移完毕也花了不少时间,记录一下主要过程。

1.下载七牛的qshell工具,使用qdownload API 逐个空间下载所有文件。
2.下载完成后,为方便调用,将所有空间的文件合并到一个文件夹里,遇到了一些文件名冲突的情况,逐个处理了。
3.到数据库里替换所有七牛域名为自己域名。这一点也挺麻烦的,因为我在七牛里创建的存储空间比较多,每个空间又有多个私有域名,结果写了几十个替换条件。
4.压缩一些体积较大的图片。本站早期的时候我传的很多图片都是高分辨率的,体积很大。我挑选了一些体积大于一定程度的jpg文件批量压缩了下,另外对于少数体积很大的png文件单独处理,先转换为jpg,然后到文章里修改对应的url。处理之后共缩小了0.5GB的空间。
5.图片资源做了防盗链处理。之前在七牛上一直没做也是因为绑定自己的域名必须是备案过的域名,所以没做。现在做了防盗链多少安心了些。

其实本站现在还有个问题,自从网站搬到新服务器上之后一直没有解决。那就是中文tag的分页会乱码,比如福利tag,底部的页码里的tag名字是乱码,我现在还没能很好的解决这个问题。

七牛图床的文件已经迁移到本站的服务器了

@saber2周前

07/7
03:28
学习 软件

使用MySQL命令行恢复phpMyAdmin导出的sql文件

数据库的备份与恢复是个常见的问题,但是不同备份工具备份出来的.sql文件内容与格式不尽相同。

对于phpMyAdmin导出的sql文件,似乎用phpMyAdmin恢复比较容易。但我用其他一些MySQL数据库管理工具经常无法恢复成功(如使用Navicat for MySQL、HeidiSQL运行转储的sql文件,没有任何效果)。今天我试了下用MySQL命令行恢复phpMyAdmin导出的sql文件,感觉比较好使,记录一下。

恢复之前先手动创建一个空的数据库,编码和排序方式按需要选择。比如dedecms和WordPress默认的都是utf8_general_ci。

之后运行MySQL命令行,输入密码开始使用。

之后依次输入命令(按需要修改):

use databasename;
set names utf8;
source d:\desktop\simple.sql;

如下:

 database mysql phpmyadmin sql 恢复 数据库

记得输入分号,否则第二个命令会跑偏。

输入第三条之后就开始恢复了,等到执行完毕就ok了。

其实前两条命令,有些工具导出的sql文件里已经有了,有的没有(phpMyAdmin导出的就没有,这应该也是直接运行它备份的sql文件时无法恢复数据的原因)。所以有些工具备份的sql文件可能比较容易恢复,有的就要手动输入命令了。

使用MySQL命令行恢复phpMyAdmin导出的sql文件

@saber2周前

07/7
02:20
软件

百度离线宝调用API

百度离线宝是百度推广后台的一个功能,它默认的代码会在网页上生成一个输入电话并拨打的功能。但如果我们想在自己做的按钮上调用它的功能,默认代码就做不到了,我们需要调用它的API JS文件。

如下图的按钮:

api javascrip js 电话 百度 离线宝

代码如下:

<input type="text" name="vtel" id="vtela" value="输入您的电话号码">
<input type="button" name="cbBtn" id="cbBtna" value="点击拨打">
<script>
	// 输出离线宝js文件,注意替换uid为自己后台的id
	document.write('<script data-lxb-uid="百度推广后台userid" data-lxb-gid="" src="http://lxbjs.baidu.com/api/asset/api.js?t='+new Date().getTime()+'" charset="utf-8"></scr'+'ipt>');
	// 通过按钮调用离线宝功能
	$("#cbBtna").click(function () {
		lxb.call($("#vtela").val());
	});
</script>

百度离线宝调用API

@saber3周前

07/2
03:18
ACG

2017年6月里番合集

2017年6月里番 H hentai 动画 磁链 福利 资源 里番

Fate/Apocrypha 动画开播啦~特配上阿塔一张 pid=61576464

6月里番合集资源:

桜都字幕组:
magnet:?xt=urn:btih:7633D42ACA3B4F7E3DD5B5BC5CA05AA5D4BB1008

目录:
[Collaboration Works] メンヘラ歩理のヤまないおねだり ~ヘッドホンははずせない~ 1stシングル.売れない元アイドル大ピンチ! エッチで良い曲作ります!編
[PoRO petit] らぶ2Quad 「妹巫女痴漢・ほのか~羞じらいねだる桃尻電車」
[ピンクパイナップル] 妻みぐい3 THE ANIMATION 第二章
[EDGE(エッジ)]魔獣浄化少女ウテア soul.4 シスターズ
[Animan]妻が温泉でサークル仲間の肉便器になったのですが… AnimeEdition
[QueenBee]ずっと好きだった2[柚木N’]
[ばにぃうぉ~か~]バカだけどチンチンしゃぶるのだけはじょうずなちーちゃん #1 ちーちゃん、ほんとに勉強頑張れるの?

2017年6月里番合集

@saber3周前

07/2
02:58
软件

windows+IIS 申请 Let's Encrypt 证书相关记录

https iis Let's Encrypt ssl windows server 教程 证书 (这个小绿锁是在后台截的)

因为最近网站搬到了vps上,我也开始考虑申请ssl证书,把网站升级到https。

但是说到证书这一块,就又触及到我的知识盲区了。后来还是找了教程摸索出来的。

申请Let's Encrypt 证书教程:
《windows申请免费SSL证书-Let's Encrypt》
(申请Let's Encrypt 证书有很多不同的途径,使用的工具和步骤也不尽相同,我这个办法好像比较麻烦,不过能对流程有个大致的了解。另外有一些我踩过的坑,我会在文末附加说明)

证书申请完成之后,如何导入到 IIS 以及在网站里绑定,参考下面文章的 IIS 部分:
《IIS部署SSL,.crt .key 的证书》

此外还需要将http请求的页面自动跳转到https,参考教程:
《(各种版本) http怎么做自动跳转https?》

我添加了里面的iis的规则,可以正常使用。
Read More →

windows+IIS 申请 Let's Encrypt 证书相关记录

@saber3周前

06/29
16:10
软件

网站搬家记录

现在的网站:

 Apache iis web.config wordpress 伪静态 教程 经验 网站搬家

(话说IIS 8.5 比起IIS 6真是方便了太多)

以前我的网站用的是香港的一家虚拟主机,从一开始到现在,三年的时间都是在用那个空间。(主机商是51php,总体上满意,售后服务挺好。以后不用它了,就当做是帮它宣传一下吧)

其实我的网站只占用极少的磁盘空间和数据库空间,只有流量用的多。随着流量逐渐增长,我也不断升级主机套餐,最近又面临不得不升级的情况,我觉得不能再这样继续下去了,正好最近尝试了vultr的vps,所以打算把网站搬到vultr上面去。

本月的主机使用情况:

 Apache iis web.config wordpress 伪静态 教程 经验 网站搬家

其实现在套餐的流量是30GB/月,前几天就用完了,现在的45GB是我让客服临时加了点。虽然我最近做了些优化措施,但预计以后每月流量仍会达到20GB以上,现在这个套餐的流量未来也会不够用。

相比现在的虚拟主机,vultr的vps有诸多优势:
1.价格不贵,5美元/月,一年也就400RMB,和我现在这个虚拟主机套餐差不多是相同价位,但流量上限高得多;
2.vps可直接登陆操作系统,管理网站更为便捷,可以摆脱掉ftp了,对网站的控制也更加随心所以了;
3.避免一些奇葩的事情,比如之前我发现我的主机被禁止google抓取了,后来我找客服解除了限制。
3.vps作为一个操作系统,能做的事情比只能放网站的虚拟主机强多了,最简单的应用就是充当vpn上网。其他的比如架ss什么的我还没研究过。

我原来的虚拟主机的环境是Linux + Apache,但因为我不会linux,所以vultr上我安装的是windows + IIS。这个搬家的过程也踩了不少坑,也记录一下吧。
Read More →

网站搬家记录

@saber3周前

06/28
10:44
其他

使用vultr vps安装windows server 操作系统

vultr是近几年比较火的一家vps服务商,最低只需5美元/月 即可购买一个vps,可谓物美价廉。

但是在5美元/月 的这个价位上,操作系统不能选windows server,因为我们需要为windows server付出约10美元/月 的额外价格。不过这也不难解决,因为vultr可以允许我们自己上传操作系统的iso镜像,这样在vps启动时我们便可以安装自己上传的操作系统。这个功能是免费的。

操作步骤可以参考《Vultr VPS安装Windows 7系统全过程及ISO上传和部署设置》

tips:
1.网上有一些集成了VirtIO驱动的系统镜像:
《已集成 VirtIO驱动windows server 2012, 2008, 2003的ISO镜像下载》
2.镜像可能下载很慢,我提交的4GB的windows server 2012 r2 镜像花了5个小时。
3.使用上传的iso创建vps之后,先重启vps,之后从VNC远程管理里开始安装系统:

这个view console 就是用vnc远程。
4.用自己上传的iso创建服务器,相当于这个iso文件一直挂在在服务器的光驱里。在登陆windows server之后也可以看到这个镜像被挂载在光驱里。
5.如果想使用windows远程桌面来登陆vps,需要先开启windows server的远程桌面连接,然后在windows防火墙里允许公网的远程桌面请求。(这个防火墙规则设置可以参考此处
6.基于安全考虑,推荐修改远程桌面默认的3389端口。注意这个需要重启。

我现在用“Win2012激活工具_KMS10”先激活了,但是用它激活时要先关闭防火墙。另外还有个“kmspico”也可以激活,不过我没试。这个时候,我就想起来免费的linux操作系统得好了(可惜我不会呀)。


这个 windows server 安装后防火墙默认是禁止ping的,可以设置开启:
《Windows Server 不能Ping改为允许的方法》

这个 windows server 默认也不会保存桌面设置,每次注销后重新登录,桌面图标就重新排序了,很烦,解决办法如下:
运行gpedit.msc,定位到用户模板-桌面-退出时不保存设置,禁用之。

如果有需要,也可以启用桌面体验

使用vultr vps安装windows server 操作系统