分类：踩坑随笔 - 风也雨忆笙

一桩高斯模糊引发的惨案

踩坑随笔

发布于：2020年4月15日

最近一段时间有点忙碌，主要是开始着手开发一款属于自己的typecho主题了，有着wp主题ease的经验，相信这次应该也可以更好的收场。

但是我却被CSS的模糊折磨了我好几个小时。。。

高斯模糊

我是挺喜欢高斯模糊的样式的，追溯到很久很久以前，miui6的模糊真的是让人眼前一亮。

css也是支持图片模糊的，并且实现也非常的简单，使用filter属性即可。首先，我们来看看filter到底是什么：

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)，说白了就是给图片加个滤镜。如果你不知道啥是高斯模糊，没关系，你一定见过某些H图片被模糊掉的地方。

语法什么的直接参考菜鸟教程：https://www.runoob.com/cssref/css3-pr-filter.html

重点来了，我通过使用backdrop-filter：blur(10px);来为我的图片背景添加模糊效果，

这样给我带来了很好的视觉体验，在我调整好样式之后准备下一步的工作，我发现了一个问题，就是FireFox不支持这个属性。也就是说我新写的内容在它那里完全无效。

然后我就奔溃了！闲着没事开发那么多浏览器内核干嘛？？ ::tieba:Y.tb8::

解决方案

删掉body的背景图片，然后设置了一个div，内部放上一张图片作为网站背景图，并设置z-inde属性。

然后直接使用filter属性即可。

最后效果是这个样子

烽火HG2543C1光猫破解教程【转载】

踩坑随笔

发布于：2020年3月6日

HG2543C1光猫路由模式改桥接模式

###打开光猫telnet功能

浏览器访问 http://192.168.1.1:8080/cgi-bin/telnetenable.cgi?telnetenable=1

telnet进入光猫获取telecomadmin密码

登录用户名root，密码是默认wifi密码+默认useradmin密码，具体看光猫背面
cat /flash/cfg/agentconf/factory.conf 查看telecomadmin密码
cat /flash/cfg/app_conf/pppoe/chap-secrets 查看宽带账号和密码

使用telecomadmin账号登录

浏览器访问 http://192.168.1.1:8080/cgi-bin/login.htm.cgi
打开网络–宽带设置，设置2_INTERNET_B_VID_xxxx连接方式为桥接

原文链接

http://shigc.top/2019/10/17/article4/

域名DNS解析CNAME记录和MX记录为@时冲突导致域名邮箱无法接收邮件的解决办法

踩坑随笔

发布于：2020年3月2日

自从上次说用网易免费企业邮箱绑定自己的域名使用之后，就一直没有在意使用情况，因为那个时候使用的是篱落主机，因为是直接A记录过去，所以就没有和MX记录冲突的问题存在。

最近的情况是域名备案完了，然后新的域名也换过来了，也用CNAME套上了CDN，就没有发现DNSPOD的解析有点问题，CNAME和MX同时在解析，当时也没有注意到这个问题，所以这几天我的域名邮箱一封邮件也没有。

评论回复的时候我就突然发现别人回复评论之后，我只能收到微信的评论通知，没有邮件通知，当时我就很纳闷，以为是阿里邮件推送的问题，还特地用了好几个邮箱地址互相发送邮件，结果发现只有网易自己的邮箱可以接受到，邮件推送一直是失败的状态。

然后我们敬爱的萧瑟大大帮我查询了一下是因为MX记录没有生效的问题，然后给他看了解析，都是一且正常的，就是查询不到MX记录，后来才突然想起来是CNAME和MX记录冲突。

解决方案

这里就非常感谢萧瑟大哥（青衫慧博客）了，大晚上的还远程帮我做解析。采用了cloudxns 和京东云独有的解析方法，将CNAME的记录通过一个LINK记录来解析映射（京东是JNAME）

最后效果图就是这个样子的：

两个CDN解析是因为我使用了两个服务商，国内和国外分别解析。这个时候邮件服务和CDN都已经正常了。

然后测试了邮件推送服务，还有邮件发送，都正常，目前网站访问解析也正常。

为了学习C语言，我抛弃了Windows系统

踩坑随笔

发布于：2020年2月28日

近期的状况，除去每天例行的记单词以及在群里扯皮，其余的时间大部分都在恶补C语言的知识，不得不说，编程语言这个东西真的很有魅力，当然也有很强的挫败感，会是会了，但就是写不出来东西，哈哈哈哈哈。为此，我还建立了一个wiki站点。

令我不爽的IDE

遵照网络时代的潮流，桌面上的IDE和编辑器越来越多。但是学习C语言这个事情，我觉得用IDE实在是太太太重重重了了了！

网上都建议初学使用VC++6.0，这个能用是能用，但是用着实在是太难受了。。。比如，每次就写几行代码的事情，还要建项目，建立main文件，最重要的事情是这货不能输入中文，而且不支持代码行的显示，每次要打印语句，就是考验我英语功力的时候了。

相比较之下，CodeBlocks则良心的多，至少干了一个IDE该干的事情。但是无奈在我这个win10下，老是出现编译错误无法运行的情况，明明复制到VC++6.0上都能正常的编译运行，而且编译之后运行的极其慢。还是因为我接触C语言太少了，对他没什么了解。

像什么VS啊我也装了，最后还是选择VSCode了，因为这个编辑器用了很久了，用起来得心应手，还比较轻量级。目前也就装了这些常用的插件。

用VScode来写C，其实还是很不错的，但是在编译的时候又出错，我已经不想解决了。

Ubuntu+GCC+VScode

我抛弃了Windows平台来学习C语言，动用了我的毕生所学瞬间下好了Ubuntu1804的镜像，又在刹那间安装了VirtualBox启动了这个镜像。一杯咖啡（白开水）的时间过后，就安装启动好了。

换源

安装之后是要换国内的镜像源的，不然速度很慢，其实很好换，不需要找网上的教程去修改souce.list，因为Ubuntu自带了一个软件叫软件和更新直接在这里面切换阿里云的源就行了。

安装GCC

首先看一下是否自带的有GCC编译器

1
2
3

gcc -v
// 或者
gcc --version

如果有的话就是这个样子

如果没有的话就直接安装

1 2	sudo apt update // 更新源 sudo apt install build-essential //安装gcc

安装之后默认的版本就可以了，因为只是简单的学习，能用就行。

安装VScode

打开自带的Firefox，打开vscode官网，下载deb包，然后安装，行云流水。

https://code.visualstudio.com/

新建一个目录STUDYC用来盛放所有的源文件，就可以愉快的开始学习了。

编译

这一点比Windows平台方便的多，不管是在终端编译还是直接用VScode的控制台，都可以轻松的用一行命令搞定。

1 2	gcc hello.c //编译完成会出现a.out ./a.out //运行刚才编译的程序

多个源文件编译

1 2	gcc test1.c test2.c -o main.out ./main.out

总结

对于日常的学习来说，并不需要动用IDE来搞定这件事情，因为也不是去做一个非常大的项目，简单的使用vscode编辑器就可以很好的学习啦，而且还可以直观的显示每个目录下的源文件，即使是目录包含中文也不会影响到编译。笔记我都记录在我的wiki站点啦，虽然现在很少，随着慢慢的积累肯定会越来越多越来越多的！

原生JS获取浏览器地址并进行域名无缝替换跳转

踩坑随笔

发布于：2020年2月17日

先说一下这个需求的来源，最近换掉了域名，然后给网站做了全站301跳转，由于原来的域名备案还在，图片什么的还在cdn图床里面，所以之前的域名还是要接着使用的，于是我工单联系了一下阿里云的客服。

由于我的域名是直接301跳转到新域名，就想当于原来的域名无法直接访问，而备案需要在主域名下挂上备案号，于是客服就说这个情况备案有可能会被作为空壳网站给清理掉，在清理之前会有有邮件提醒，整改就可以避免被清理。于是我就想到了做一个跳转界面。

在这之前，我用了百度搜索资源平台的网站改版工具将百度收录的链接给替换了，早上提交的中午就显示改版完成，也不知道什么时候收录的链接会被替换掉，平台给出的建议是：改版跳转关系请长期保持，直到新站流量完全稳定。

为了做好充足的准备，我下午花了两个小时做出来了一个跳转界面。

然后我就发现这个链接跳转不够完美，只能跳转到首页，我之前在b站发的链接地址别人访问的话就会回到首页，很影响用户的体验。

使用PHP处理链接跳转

首先我是想到使用php来获取地址，然后再将地址的链接给替换掉，返回给window.location.href这样就可以做到链接跳转，子页面也可以跳转。

经过我的实验，我的猜想是正确的，但是最后我并没有使用php转换链接，而是使用了原生的js，因为php会获取到index.php，影响跳转。

PHP获取完整浏览器URL地址

这是我参考的文章

https://www.cnblogs.com/as3lib/p/6500989.html

#测试网址:     http://localhost/blog/testurl.php?id=5

//获取域名或主机地址 
echo $_SERVER['HTTP_HOST']."<br>"; #localhost

//获取网页地址 
echo $_SERVER['PHP_SELF']."<br>"; #/blog/testurl.php

//获取网址参数 
echo $_SERVER["QUERY_STRING"]."<br>"; #id=5

//获取用户代理 
echo $_SERVER['HTTP_REFERER']."<br>"; 

//获取完整的url
echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
#http://localhost/blog/testurl.php?id=5

//包含端口号的完整url
echo 'http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; 
#http://localhost:80/blog/testurl.php?id=5

//只取路径
$url='http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]; 
echo dirname($url);
#http://localhost/blog

使用JS处理链接跳转

本着为服务器节省性能的原则，我将目光转向了JS，JS也可以轻松的获取浏览器的地址。

JS获取完整浏览器URL地址

我找了一下JS获取浏览器地址的方法：

原文链接：https://blog.csdn.net/u013288800/article/details/82787641

var url;
 
			url = window.location.href; /* 获取完整URL */
			alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */
 
			url = window.location.pathname; /* 获取文件路径（文件地址） */
			alert(url); /* /Test/index.html */
 
			url = window.location.protocol; /* 获取协议 */
			alert(url); /* http */
 
			url = window.location.host; /* 获取主机地址和端口号 */
			alert(url); /* http://127.0.0.1:8020/ */
 
			url = window.location.hostname; /* 获取主机地址 */
			alert(url); /* http://127.0.0.1/ */
 
			url = window.location.port; /* 获取端口号 */
			alert(url); /* 8020 */
 
			url = window.location.hash; /* 获取锚点（“#”后面的分段） */
			alert(url); /* #test?name=test */
 
			url = window.location.search; /* 获取属性（“?”后面的分段） */
			alert(url);

最终的实现方式：

 <!-- 进度条 -->
<div id="myProgress">
                        <div id="myBar"></div>
                    </div>
 <!-- 点击按钮跳转 -->
<div class="eas1cn">
                        <a href="javascript:void(0);" onclick="goUrl()" class="btn btn-info" role="button" id="eas1cn">点击访问</a>
                    </div>

<script>
        // 替换域名链接
        function goUrl() {
            window.location.href = window.location.href.replace(/kaygb.top/, "eas1.cn");
        }

        move(); //调用进度条
        // 进度条
        function move() {
            var elem = document.getElementById("myBar");
            var width = 0;
            var id = setInterval(frame, 50);

            function frame() {
                if (width >= 100) {
                    clearInterval(id);

                    var url = window.location.href;
                    newurl = url.replace(/kaygb.top/, "eas1.cn");
                    window.location.href = newurl;
                    console.log("当前地址已转换：");
                    console.log(newurl);

                } else {
                    width++;
                    elem.style.width = width + '%';

                }
            }
        }

    </script>

目前在我本地测试通过，然后找了一个子域名试了一下，跳转正常，但是不支持泛域名的跳转，这个后期再补充，毕竟只是给一个域名使用。

利用404页面获取子页面的url

还需要在nginx的配置文件中设置404的默认页面，支持跳转的首页是index.html，那么久需要在配置文件中指定404页面为index.html

这个页面我关掉了跳转，然后放在了我旧域名泛解析的站点上，等到特殊情况来临，就可以直接给替换掉。

还有一些内容后面再补充，目前博主非常困，所以文章有不通顺的地方，我后面可能会修改，谢谢！

给网站添加一个实时在线的聊天室

踩坑随笔

发布于：2020年2月12日

无意间发现了闲聊么这个好玩的东东，可以给网站添加一个在线的聊天窗口，便于大家一起交流学习。

安装

安装使用的方式很简单，只需在注册以后，点击生成新网站，然后把生成的代码复制到网页的body内即可。

<script>
    var xlm_wid='这里是你的ID';
    var xlm_url='https://www.xianliao.me/';
</script>
<script type='text/javascript' charset='UTF-8' src='https://www.xianliao.me/embed.js'></script>

注册地址

https://www.xianliao.me/account/signup

使用

安装之后在网站的右下角就会显示一个按钮，点击之后就会出现一个悬浮窗

可以点击设置按钮，然后进行一些配置，包括添加聊天室，修改名称等等之类，并且还可以添加管理员。

可以发布网站公告

总之，看起来很好玩的样子

关于聊天

这个系统的设置有一点感觉不是很好，就是必须要使用微信登陆之后才可以发消息，可能有些对信息敏感的人来说，这一点非常不好吧，但是这也能理解，如果开放了匿名的话，可能会出现一些无法控制的现象。

最后

欢迎大家在聊天室里踊跃发言，畅谈人生理想和追求，哈哈！记得一定要先用微信登陆，不然的话输入的内容也许就要从新输入了哦!

解决谷歌广告抽风导致网站加载缓慢的问题

踩坑随笔

发布于：2020年2月11日

在我个人看来，谷歌广告是各大广告商中体验最好的一个，因为他的广告比较智能，不会出现一些不堪入目的广告，同时它的自动广告我也觉得很满意，当然，最重要的一点就是：在众多广告联盟中，只有谷歌通过了我的申请！！！

速度优化

自从我的小站接入谷歌广告以来，它偶尔的加载缓慢，甚至一些资源根本无法正常加载，导致了网页不能正常滚动，这已经非常严重的影响了访问的体验！！！

谷歌广告虽好，但是也要进行优化一下，就在历史性的今天，我把它给解决掉了。不多说，直接开始。

分析

首先分析一下谷歌给我们的代码：

//引用的主要js
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
//右侧栏的一块广告位代码
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

其实谷歌已经做过了优化，使用的是async异步请求加载的方式，但是，国内的情况大家都有了解，所以会有偶尔加载失败的情况。

JS监听加载

这里我使用了JS监听加载的方式，来使网站看起来加载非常快

只需要修改这段代码

1	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

修改为：

<script>
window.onload = function() {
        setTimeout(function() {
                let script = document.createElement("script");
                script.setAttribute("async", "");
                script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
                document.body.appendChild(script);
        }, 2e3);
}
</script>

原理

这个的原理就是我们在网站加载完成，且那个浏览器标签上的圆圈不转的时候，才开始加载谷歌的JS，并不是真正意义的加速，只不过让广告在后台加载了，这样的话不会影响到页面的访问。

建议

当然，如果你有很多个广告位，并不需要每个代码位都加载这个JS文件，只需要在页脚加载一次即可。

阿里云安全组规则授权对象设置为固定IP段访问

踩坑随笔

发布于：2020年2月11日

阿里云的ESC建站需要在安全组放通一些端口才能正常访问，所以我们在开放端口的时候就直接设置了全部ip可访问,授权对象填入0.0.0.0/0,意味着允许全部ip访问或者禁止全部ip访问。

但是我们有了一个新的需求，我们想让这个端口只能固定ip段可访问，假如我们当前本地的ip地址是123.123.123.123，我们可以直接将这个ip填入授权对象一栏，以达到只允许这个ip访问的目的。

但是，问题来了，我们家庭使用的宽带网络的ip地址并不是唯一的，同时几百个人共享一个ip也是可能的，这就意味着我们之前填入的ip地址是会不停变化的，我们之前的ip是123.123.123.123,可能过了两天就变成了123.123.122.111,同时，我们授权的那个ip地址和现在的ip不符，于是我们就无法访问这个端口了。

所以，我们就要使用CIDR网段格式来进行ip段的控制。关于这个网段的说明，阿里云官网也没有明确的说明（也可能是我没找到）

我们之前所用的0.0.0.0/0就是这个格式，他代表着全部的ip

我们先看一下CIDR网段格式

所有IP 0.0.0.0/0 

A级段 192.168.1.1/8 
表示192.0.0.0-192.255.255.255 
对应子网掩码格式 192.168.1.1/255.0.0.0

B级段 192.168.1.1/16 
表示192.168.0.0-192.168.255.255
对应子网掩码格式 192.168.1.1/255.255.0.0

C级段 192.168.1.1/24 
表示192.168.1.0-192.168.1.255
对应子网掩码格式 192.168.1.1/255.255.255.0

现在我们对比一下我们主机所变化的ip

变化之前	变化之后
123.123.123.123	123.123.122.111

通过对比发现，只有第二个点后面的内容发生了改变，和上面的B级段吻合，所以我们就可以将授权对象设置为123.123.123.123/16，这样就可以实现123.123.0.0到123.123.255.255这个区间内的所有ip访问了。

关于网站的速度优化以及数据持久化备份的思路

踩坑随笔

发布于：2020年2月7日

近期有朋友问我关于图片存储和网站备份的问题，想着我也有必要记录一下，就整理一下目前的服务器状况，给大家提供一些思路。

网站配置

服务器配置：阿里云1H2G1M学生机

运行环境：centos7+宝塔面版lnmp

全站CDN：国内腾讯云，国外又拍云

静态资源加速：七牛云

图片：Picgo+又拍融合云存储，绑定了阿里云OSS

图片的持久化访问与网站数据备份

我在又拍云创建了一个融合云存储，绑定了阿里云OSS，就相当于图片上传到又拍云之后自动给镜像到阿里云oss，访问又拍云的加速域名和阿里云oss的加速域名都可以访问到这张图片。

同时它也有一个好处，就是在又拍云的服务出现问题的时候CDN节点会将图片链接自动跳转到阿里云oss的加速域名。

备份在OSS里也不用担心又拍云哪天跑路了，毕竟阿里云这种大厂实力大家有目共睹。OSS的40G存储包一年只要9块钱很划算了，只是做图片备份的话完全够用。

当然，也可以使用GitHub作为图床，jsdeliver为GitHub公共仓库提供了全球免费CDN加速。

关于融合云的例子

假定：

又拍云加速域名为：a.img.com
阿里云OSS加速域名为：b.img.com
picgo设置的图片的路径为：/images/picgo/

当我使用Snipaste截了一张图（a.png），然后按下快捷键Ctrl+Alt+Z，这个时候这张图片已经通过Picgo上传到了又拍云的云存储，因为开了融合云存储的原因，又拍云自动将这张图片上传到了阿里云OSS，同时路径保持不变。

所以现在我就可以通过两个域名访问到这张图片：

a.img.com/images/picgo/a.png

b.img.com/images/picgo/a.png

由于阿里云OSS的流量是收费的，而又拍云联盟每个月有免费的15G流量，我们就可以将开销缩减到最小。

网站备份

使用OSS其实有个很不错的优点，就是OSS支持内网访问，而且不计费，内网带宽足够大，直接挂载就犹如本地磁盘一样，前提是你的服务器和OSS在同一个区域。所以在备份图片的同时，它也是我进行网站备份的主要使用方式，加上宝塔支持计划任务，可以很方便的进行网站的备份。

CDN网站加速服务

为什么要开CDN？对于小站来说，开CDN并不会对网站起到很好的加速效果，甚至会拖慢网站的加载速度，因为用户访问网站会自动访问的最近的CDN节点，第一次访问CDN节点会先访问源站进行缓存，当同区域的用户再次访问此节点时CDN会直接返回节点缓存的内容。

当然，我打开CDN服务是为了在更多的区域可以访问到我的网站，CDN的一大好处就是可以隐藏服务器的IP地址，我们都知道，常见的攻击手段都是直接打的IP，我们的IP隐藏了，可以规避一定的风险。

说一下我现在的CDN结构，用腾讯云的原因是腾讯云有免费的流量，同时它也有一个弊端，就是只能加速中国大陆区域，这个问题对我来说并不是问题，因为又拍云的CDN可以全球加速，所以我网站国外的CDN支持是使用又拍云的。

如何国内外CDN分离？

现在主流的DNS解析都支持选择解析的线路，在阿里云的话，过年选择默认线路，国外选择境外就可以了。

静态资源加速

这里的静态资源主要是指网站的一些CSS,JS，图片之类的文件，因为服务器本身的带宽有限，将这些静态资源分离出去可以给服务器减轻很大的压力。这里我选择了七牛云，因为七牛云也是有免费的10G流量的，不过有一点，七牛的HTTPS访问并不免费，但是价格也不算高，充十块钱可以用很久了。

总体开销

这样算下来，其实我们的开销并不多，算一下一年需要付费的开销

服务器：118（阿里云学生机，我看了续费需要117.62，按118算）
阿里云OSS：9
七牛云HTTPS：10（小站一年其实也用不了10元）
超出额度外的费用预计：50
域名：cn域名29元

一年差不多需要200左右就可以基本搞定开销，当然，如果你喜欢折腾又经常控制不住的话，也许会花费更多。

获得了什么？

CDN流量：10G（腾讯云）+10G（七牛云）+15G（又拍云）

云存储：40G（OSS）+10G（七牛云）+10G（又拍云）

即做到了为网站加速，又起到了服务器瘦身的作用，同时开销也不是很大。

关于谷歌广告

你可能觉得我的网站速度加载的并不是很快，其中一很大一部分原因是因为我使用了谷歌广告，由于各种不可描述的问题，经常会有某些资源加载失败的问题影响了速度。

其实谷歌广告对于我这小站来说，带来的收入确实不多，自从我添加了广告到现在，差不多三四个月了，收入也只有一美元，说不上多，够一杯咖啡，有些时候我都想关掉，但申请又不易，那就这样吧，如果看到您觉得有用的广告信息，欢迎点击访问！

关键

为什么要使用免费的服务，或者说我们付费这么少，服务商赚不到钱，会不会倒闭跑路？

其实这个问题完全不用担心，服务商主要是赚大客户的钱，我们小站用的流量对那些大客户来说简直少的可怜，提供免费的服务有益于建立口碑，同时可以为服务商吸引更大的用户。

最后

目前这个是我现在这个网站的解决方案，如果您有更好的，欢迎一起讨论。

美化404页面并添加了恐龙快跑小游戏

踩坑随笔

发布于：2020年2月1日

原本的404页面是这个样子的：

说丑呢，其实也还好，但是总感觉与现在的handsome格格不入！于是我就copy了友链的模板，然后稍加修改，就变成了现在的这个样子：

如何修改

我把修改的源文件放出来，需要的自行下载就可以了，这个小游戏的源码还是很久之前在某个博主那里看到的，本人记忆力差，忘记了，望体谅！评论一下就可以看到源码了，然后直接替换原本的404.php就可以了，念旧的可以备份一下。

下载

[scode type=”green”]2020，0504，已经修复无法使用的问题[/scode]

[button color=”success”]点击下载[/button]