Tokinx 发布的文章

通过Dnsmasq自建干净的DNS服务

作者: Tokinx
时间: 2017-02-06
分类: 代码

不晓得为撒，用网上的一些公共DNS服务的时候，总是莫名其妙的有些网站无法解析，有时候114能解析，阿里DNS不行或者腾讯DNS不行，导致总是来回切换DNS，很是烦心。

于是就想着自己搭建一个DNS服务会不会好一点？网上搜了一下，好像很复杂的样子，一直就没动手，但是今天试了下，发现出奇的简单，体验了一番，感觉效果良好。

首先你要有一个VPS，质量不用太好，我在我美国的64M内存的VPS上面完美安装，看了下内存32M应该也是可以的。

如果你对解析速度要求比较高，建议是用亚洲的VPS，甚至用国内VPS中转也是可以的，但是成本就略高了点，还是根据自己需求DIY吧。

安装Dnsmasq

yum install dnsmasq -y 
service dnsmasq start

配置Dnsmasq

Dnsmasq的配置文件是 /etc/dnsmasq.conf，编辑成如下格式：

需要注意的一点是，检查一下no-hosts前面是不是已经有了#号，默认的情况下是有的，dnsmasq 会首先寻找本地的 hosts 文件再去寻找缓存下来的域名, 最后去上游dns 服务器寻找。

一般搭建DNS服务，可以允许所有用户使用你的DNS服务，即listen-address默认注释掉即可，如果你不想所有用户都使用你的DNS服务，可以在listen-address后面加上你指定的IP地址，如：

listen-address=listen-address=192.168.1.123,127.0.0.1

修改Dnsmasq上游DNS服务器

编辑 /etc/resolv.conf ，参考如下：

nameserver 8.8.8.8
nameserver 4.4.4.4

启动Dnsmasq并加入启动项

chkconfig dnsmasq on
/etc/init.d/dnsmasq restart

执行 netstat -tunlp|grep 53 可以查看Dnsmasq是否有正常启动

剩下的就是修改你本地的DNS就可以了。

提供一个我搭建好的DNS

63.223.104.179 （美国）

仅供测试，不保证永久可用

WordPress无刷新AJAX点赞功能

作者: Tokinx
时间: 2017-01-22
分类: 代码

无插件点赞功能由 #Fatesinger# 提供，不过 @大发好像删除了该篇文章。

实现原理大体是通过自定义字段保存赞数量，通过Cookie记录并禁止重复赞。

具体的代码如下：

function.php

/**
 * AJAX点赞
 * by: #fatesinger.com
 * modify: #biji.io #bgbk.org
 */
function dotGood()
{
    global $wpdb, $post;
    $id = $_POST["um_id"];
    if ($_POST["um_action"] == 'topTop') {
        $specs_raters = get_post_meta($id, 'dotGood', true);
        $expire = time() + 99999999;
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
        setcookie('dotGood_' . $id, $id, $expire, '/', $domain, false);
        if (!$specs_raters || !is_numeric($specs_raters)) update_post_meta($id, 'dotGood', 1);
        else update_post_meta($id, 'dotGood', ($specs_raters + 1));
        echo get_post_meta($id, 'dotGood', true);
    }
    die;
}
add_action('wp_ajax_nopriv_dotGood', 'dotGood');
add_action('wp_ajax_dotGood', 'dotGood');

JavaScript

$.fn.postLike = function () {
    if ($(this).hasClass('done')) {
        alert('点多了伤身体~');
        return false;
    } else {
        $(this).addClass('done');
        var id = $(this).data("id"),
            action = $(this).data('action'),
            rateHolder = $(this).children('.count');
        var ajax_data = {
            action: "dotGood",
            um_id: id,
            um_action: action
        };
        $.post("/wp-admin/admin-ajax.php", ajax_data,
            function (data) {
                $(rateHolder).html(data);
            });
        return false;
    }
};
$(".dotGood").click(function () {
    $(this).postLike();
});

CSS

.post-like{margin:10% 0 0;position:relative;}
.post-like a.dotGood{height:30px;line-height:30px;width:30px;font-size:24px;text-align:center;display:inline-block;cursor: pointer;position:relative;}
.post-like a.dotGood.done{color: #e2264d;}
.post-like a.dotGood span{position:absolute;display:inline-block;top:0;left:26px;width:auto;font-size:14px;}
.post-like a.dotGood span:before{content:'+';}

HTML

<a href="javascript:;" data-action="topTop" data-id="<?php the_ID(); ?>"
   class="dotGood <?php echo isset($_COOKIE['dotGood_' . $post->ID]) ? 'done' : ''; ?>">
    &hearts;
    <span class="count"><?php echo ($dot_good=get_post_meta($post->ID, 'dotGood', true)) ? $dot_good : '0'; ?></span>
</a>

至此，点赞功能就可以实现了。

js操作cookie保存一些基本信息

作者: Tokinx
时间: 2017-01-12
分类: 代码

JS设置cookie:

假设在A页面中要保存变量username的值("Tokin")到cookie中,key值为name，则相应的JS代码为： document.cookie="name="+username; JS读取cookie:

假设cookie中存储的内容为：name=Tokin;xxx=xxx;...

则在B页面中获取变量username的值的JS代码如下： var username=document.cookie.split(";")[0].split("=")[1]; 最后，username就可以取出来了。

既然知道了基本的cookie读写操作，那我们可以把这个操作封装成一系列函数，方便之后的频繁调用。

函数如下

//写cookies
function setCookie(name,value)
{
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}//读cookies
function getCookie(name)
{
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg)) return (arr[2]);
   else return null;
}
//删cookies
function delCookie(name)
{
   var exp = new Date();
   exp.setTime(exp.getTime() - 1);
   var cval=getCookie(name);
   if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

使用示例

setCookie("name","Tokin"); //写cookie
console.log(getCookie("name")); //读cookie
delCookie("name"); //删cookie
console.log(getCookie("name")); //再次读应该是读不到的

拓展功能

如果需要设定自定义过期时间，那么把上面的setCookie　函数换成下面两个函数就ok

//写cookie
function setCookie(name,value,time)
{
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}//设置时间
function getsec(str)
{
  alert(str);
  var str1=str.substring(1,str.length)1;//获取字母后的数字（这一步也可以过滤字母就获取到数字了）
  var str2=str.substring(0,1);//获取字符串字一个字母
  if (str2=="s") return str11000;
  else if (str2=="h") return str160601000;
  else if (str2=="d") return str1246060*1000;
}
//这是有设定过期时间的使用示例：
//s30是代表30秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","Tokin","h12"); //写入操作，可以设定过期时间了（12小时）

基本的代码就像上面，发挥自己的想象力吧

美化WordPress插入到文章中的相册

作者: Tokinx
时间: 2016-12-15
分类: 代码

不晓得哪个版本开始，WordPress在添加媒体入口里加入了“创建相册”功能，就是可以把你已上传的图片选择N个创建成相册，并且可以把相册插入到文章当中，对于某些多图的文章，使用这个功能让文章显得漂亮工整。

但是某些自己制作的主题并无法愉快的使用它，首先，插入的使用缩略图基本上要正方形的，如果之前上传的图片没有裁剪成正方形，那就有点难办了；其次，大大小小的图片有正方形有长方形的，另文章显得极其不规整，怎样让图片简单轻松无痛又漂亮的显示在文章页呢？

先看最终效果

每行2个：

[gallery columns="2" link="file" size="large" ids="3867,3540"]

每行3个：

[gallery link="file" size="large" ids="3882,3880,4079"]

每行4个：

[gallery columns="4" link="file" size="large" ids="3864,3863,3869,3859"]

每行5个：

[gallery columns="5" size="medium" link="file" ids="3884,3881,3878,3870,3874"]

还有更多就不演示了，回头自己试一下即可。

原理解释：

基本原理图如上，红色为图片原始比例，黄色为图片显示区域，超出部分隐藏，看似很简单，是实际上会稍微繁琐一些，因为图片始终无法合理的居中显示在黄色区域，好在CSS3给力

利用CSS3的translate()，WP的插入相册的DOM结构刚好够用，直接贴CSS吧

.gallery{
 margin:-1%!important;
}
.gallery .gallery-item {
 padding:1%;
 /* width:14.66666%!important; */
 margin: 0 !important;
 overflow:hidden;
 position:relative;
}
.gallery-columns-3 .gallery-item{
 width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
 content: "";
 display: block;
 padding-top: 100%;
}
.gallery .gallery-item dt {
 position: relative;
 box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
 background: #eee;
 cursor: pointer;
 overflow: hidden;
}
.gallery .gallery-item a {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: 1;
 -webkit-transition: opacity .1s;
 transition: opacity .1s;
 transform: translate(50%,50%);
}
.gallery .gallery-item img{
 position:absolute;
 top: 0;
 left: 0;
 max-height:100%;
 max-width:none!important;
 width:auto!important;
 border:0!important;
 transform: translate(-50%,-50%);
}

核心CSS如上，根据主题不同请自行调整。

兼容性

此方法兼容IE8及以上，IE8不支持居中单不会拉伸图片（效果依然不错）

PS: 2016年12月16日补充

感谢秋空提供的CSS3新属性：object-fit

新属性更加简单粗暴，仅居中代码从12行左右缩短到了3行（完美）

新属性代码如下：

.gallery{
 margin:-1%!important;
}
.gallery .gallery-item {
 padding:1%;
 /* width:14.66666%!important; */
 margin: 0 !important;
 overflow:hidden;
 position:relative;
}
.gallery-columns-3 .gallery-item{
 width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
 content: "";
 display: block;
 padding-top: 100%;
}
.gallery .gallery-item dt {
 position: relative;
 box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
 background: #eee;
 cursor: pointer;
 overflow: hidden;
}
.gallery .gallery-item img{
 position:absolute;
 top: 0;
 left: 0;
 height:100%;
 width:100%;
 object-fit:cover;
 border:0!important;
}

新属性兼容性

PC：兼容绝大部分现代主流浏览器（webkit内核、firefox），不支持IE

Mobile：Safari、Android4.4.4+（国内ROM上Android5.x兼容不同）

解决 mariadb/mysql 在低配 VPS 上崩溃问题

作者: Tokinx
时间: 2016-11-24
分类: 代码

最近博客又抽风了，打开主页后提示 Error Establishing a Database Connection 。仔细想想，应该就是数据库服务器 mariadb 挂了；以前也遇到过类似的问题。经过分析日志，并结合网上的资料最终解决了问题。

解决方法：

打开 /etc/my.cnf 查找 innodb_buffer_pool_size 将值设置为64M，一般是因为这个地方的值设置的过高内存紧张导致数据库因为内存不足而挂掉。

基本上上面设置之后，应该不会再遇到数据库挂掉的问题了，但是如果设置之后，依然会遇到此类问题，可以考虑设置 swap 交换分区，当系统因为突发事件导致内存不足时，软件会将一部分数据通过 swap 进行中转，不至于使软件崩溃。

运行下面命令设置 swap （1G）：

dd if=/dev/zero of=/swapfile bs=1024 count=1048576
mkswap /swapfile
swapon /swapfile

最后，在 /etc/fstab 中添加下面一行：

/swapfile       swap    swap defaults   0 0

重启服务器，使用 free -m 即可查看到内存情况了。