鼠标流光背景特效（乱起的名别太在意 :@(献花) ），canvas画布配合JS即可实现，这个版本是我从一个人单页里面抄下来的，顺便优化了一下后将其加入到了本站夜间模式

{card-default label="快速实现" width=""}

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>
<style>
.sbcanvas{
    display: block;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

{/card-default}

将特效设为博客夜间模式

1.先在body写入

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>

2.更改css属性display为none（日间模式不显示该元素）

.sbcanvas{
    display: none;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

3.在joe.mode.css文件夹最下面加入以下代码

html[data-night='night'] .sbcanvas{display:block;}

完成以上操作即可大功告成，快去开启夜间模式试一下吧

　　前几天给博客换了个CDN后由于时间原因就没多看了，直到昨天调式的时候才发现，纳尼，这是啥情况（如图），咋这么多错误了 。

　经过一段时间的搜集，终于在网上找到了解决办法。出现这种情况是由于用户与浏览器之间是HTTPS交互，但实际上PHP接收到的是来自CDN的 HTTP 交互，所以PHP使用了 HTTP 进行响应，结合Typecho的一些特性形成了这个问题。简单说就是CDN开启了HTTPS，但使用的是HTTP回源，就出现了这种情况。

解决办法

{card-default label="办法一" width=""}
进入你网站所使用的CDN控制后台，把回源协议改为：HTTPS即可（改完记得刷新缓存，部分需要等一会才会生效），这里不做演示。
此方法增加网站源IP地址泄漏风险，此处暂不展开叙述。
{/card-default}

{card-default label="办法二(ty推荐)" width=""}
1.打开网站根目录
2.找到 config.inc.php 文件并打开
3.在图示部位添加代码并保存即可
为什么推荐这个方法呢，因为Typecho后台只能绑定一个域名，如果绑定多个域名时其它域名域名只能显示主页，插件等页面会报错，但是加上这个就不会了，所以还是提前改了吧。
{/card-default}

在适当位置加入如下代码

// 动态域名跨域
define('__TYPECHO_SECURE__',true); 

PHPMyAdmin激活高级功能

版本

phpMyAdmin：4.9

前期准备

将phpMyAdmin文件夹中（你的phpMyAdmin安装路径，宝塔面板一般是在www/server中）

/phpMyAdmin/sql/

中的

create_tables.sql

下载到本地！

第一步

将create_tables.sql导入到phpMyAdmin

导入后可能会报一下错，不过这并不影响

第二步

打开phpmyadmin文件夹下的“config.sample.inc.php”文件并复制，重命名为“config.inc.php”（如果已经有“config.inc.php”文件，直接修改即可）

第三步

将“config.inc.php”文件中的

/ Storage database and tables /

到

/* End of servers configuration */

之间的代码全部删除注释即可

第四步

注销phpmyadmin之后并重新登录。大功告成！
这时再去看数据库工具栏里就多出来“事件、程序、设计器等功能”

定时执行SQL语句

1、首先查看计划事件是否开启：

在phpmyadmin的SQL查询框中填入“show variables like '%scheduler%';”并执行

当显示event_scheduler的“Value”为“ON”时，表示计划事件已开启；

当显示event_scheduler的“Value”为“OFF”时，表示计划事件未开启。

2、如果计划事件未开启，可按以下操作开启：

到mysql配置文件my.cnf新增一项，在mysqld后面添加event_scheduler = on（或是event_scheduler = 1），保存后重启mysql服务器即可。

在phpmyadmin的“事件”功能里，“事件计划状态”显示为“开”即计划事件已正常开启。

3、添加定时任务

在phpmyadmin的“事件”功能里，点击“新建”下的“添加事件”

根据弹窗填写表格

其中状态

“ENABLED”为“启用”

“DISABLED”为“不启用”

“SLAVESIDE_DISABLED“为“在从库上不启用该事件“

事件类型

"RECURRING"为“循环执行”

"ONE TIME"为“只执行一次”

运行周期即根据需要选择执行的周期时间

起始时间即开始执行的时间

终止时间即结束时间，留空表示一直执行下去

定义即执行的SQL语句

用户按"数据库用户名@数据库地址"的格式填写

最后点击"执行"即创建定时任务完成。

最后

这里记录下防以后踩坑！

UPDATE 表名 SET B列名=A列名

需求：把一个表某个字段内容复制到另一张表的某个字段。

实现sql语句1:

代码如下:

UPDATE file_manager_folder f1
LEFT OUTER JOIN file_manager_folder f2 
 ON f1.name = f2.name AND f2.parentId = 54
SET f1.parentId = 54 
WHERE f2.name IS NULL AND f1.id IN (1,2,3);

实现sql语句2:

代码如下:

update B set extra = A.extra from A join B on (A.id = B.id);

实现sql语句3:

代码如下:

update b set b.sms = (select a.sms from a where a.id = b.id)

需要确定两张表中的id都是主键或者唯一

实现sql语句4:

代码如下:

UPDATE A SET A.SMS = (SELECT B.SMS FROM B WHERE A.ID = B.ID) WHERE EXISTS (SELECT 1 FROM B WHERE A.ID = B.ID);

实现sql语句5:
复制一个表字段数据到另外一个表的字段，可以这么写：
实现sql语句5:

代码如下:

UPDATE tb_1 INNER JOIN tb_2 ON tb_1.tid = tb_2.tid
SET tb_1.tcontent = tb_2.tcontent

附：同表复制

需求：把同一张表的一个字段内的内容复制到另一个字段里

例1：
我想把article表中A字段的内容复制到article表中B字段里面sql语句为：

代码如下:

update article set B=A;

例2：
有时候，我们需要复制某个字段一整列的数据到另外一个新的字段中，这很简单，SQL可以这么写：

代码如下:

UPDATE tb_1 SET content_target = content_source;

大概写法如下：

代码如下:

Update {your_table} set {source_field} = {object_field} WHERE cause

现有表A和表B，希望更新A表，当 A.bid = B.id时，a.x = b.x, a.y=b.y：

update a inner join b on a.bid=b.id set a.x=b.x,a.y=b.y;

网站使用方法：

<style type="text/css">
*{
cursor: url('指针链接.cur'),auto;
}
  <style>

鼠标指针地址

鼠标指针：点我跳转鼠标指针

::(滑稽) 感觉还不错的一款源码 ❤ 里面所有图片均可替换，全开源！
https://lab.iarc.top/Christmas-Code/

技术栈

代码主要是由 HTML + LESS 编写

注释在style.less文件，有能力自由发挥~

展示图

下载地址

{hide}

{cloud title="https://xql.lanzoue.com/i0SdE0jeuojc" type="lz" url="https://xql.lanzoue.com/i0SdE0jeuojc" password=""/}

{/hide}

代码：

将下面代码加在head标签或者body中即可

<!-- 灯笼代码 -->
<meta charset="utf-8">
<div class="deng-box2">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">年</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box3">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">新</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b">
            </div>
        </div>
    </div>
</div>
<div class="deng-box1">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">乐</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">快</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<style type="text/css">
    .deng-box {
        position: fixed;
        top: -40px;
        right: 150px;
        z-index: 9999;
        pointer-events: none;
    }
    .deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box2 {
        position: fixed;
        top: -40px;
        left: 150px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box3 {
        position: fixed;
        top: -30px;
        left: 10px;
        z-index: 9999;
        pointer-events: none
    }
    .deng-box1 .deng,
    .deng-box3 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px #fc903d
    }
    .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, .8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px #fa6c00
    }
    .deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .1);
        margin: 12px 8px 8px 8px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03
    }
    .deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, .1);
        margin: -4px 8px 8px 26px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03
    }
    .xian {
        position: absolute;
        top: -20px;
        left: 60px;
        width: 2px;
        height: 20px;
        background: #dc8f03
    }
    .shui-a {
        position: relative;
        width: 5px;
        height: 20px;
        margin: -5px 0 0 59px;
        -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px;
        background: orange;
        border-radius: 0 0 5px 5px
    }
    .shui-b {
        position: absolute;
        top: 14px;
        left: -2px;
        width: 10px;
        height: 10px;
        background: #dc8f03;
        border-radius: 50%
    }
    .shui-c {
        position: absolute;
        top: 18px;
        left: -2px;
        width: 10px;
        height: 35px;
        background: orange;
        border-radius: 0 0 0 5px
    }
    .deng:before {
        position: absolute;
        top: -7px;
        left: 29px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        z-index: 999;
        border-radius: 5px 5px 0 0;
        border: solid 1px #dc8f03;
        background: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
    }
    .deng:after {
        position: absolute;
        bottom: -7px;
        left: 10px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        margin-left: 20px;
        border-radius: 0 0 5px 5px;
        border: solid 1px #dc8f03;
        background: orange;
        background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
    }
    .deng-t {
        font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
        font-size: 3.2rem;
        color: #dc8f03;
        font-weight: 700;
        line-height: 85px;
        text-align: center
    }
    .night .deng-box,
    .night .deng-box1,
    .night .deng-t {
        background: 0 0 !important
    }
    @-moz-keyframes swing {
        0% {
            -moz-transform: rotate(-10deg)
        }
        50% {
            -moz-transform: rotate(10deg)
        }
        100% {
            -moz-transform: rotate(-10deg)
        }
    }
    @-webkit-keyframes swing {
        0% {
            -webkit-transform: rotate(-10deg)
        }
        50% {
            -webkit-transform: rotate(10deg)
        }
        100% {
            -webkit-transform: rotate(-10deg)
        }
    }
</style>

水平垂直居中

margin: auto;

{margin-left:auto;margin-right:auto;}

缩写形式为:

{margin:0 auto;}

0为上下边距，可按自己需要设置成不同的

实现最高渲染性能的去除下边框css

div { 　border: 1px solid; 　border-bottom: 0 none;  /**key code here**/}

增加icon按钮点击区域

点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38

.icon- clear { 　width: 16px; 　height: 16px; 　border: 11px solid transparent; 　 /**key code here**/}

永远居中的dialog(可兼容到IE7)

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><style>       .container {           position: fixed;           top:0;           right: 0;           left: 0;           bottom: 0;           background-color: rgba(0,0,0,.5);           text-align: center;           font-size: 0;           white-space: nowrap;           overflow: auto;       }       .container:after {           content: '';           display: inline-block;           height: 100%;           vertical-align: middle;       }       .content {           width: 240px;           height: 120px;           padding: 20px;       }       .dialog {           display: inline-block;           vertical-align: middle;           border-radius: 6px;           background-color: #fff;           font-size: 14px;           white-space: normal;       }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>

去除页面默认滚动条(PC端有效)

/**good code**/html {overflow: hidden;}/**bad code**/html, body {    overflow: hidden;}

简单地说，就是某些不法网站未经许可，通过在其自身网站程序里非法调用其他网站的资源，然后在自己的网站上显示这些调用的资源，达到填充自身网站的效果。这一举动不仅浪费了调用资源网站的网络流量，还造成其他网站的带宽及服务压力吃紧，甚至宕机。

2.网站资源被盗链带来的问题

若网站图片及相关资源被盗链，最直接的影响就是网络带宽占用加大了，带宽费用多了，网络流量也可能忽高忽低，Nagios/Zabbix等报警服务频繁报警

3.企业真实案例：网站资源被盗链，出现严重问题

某日，接到从事运维工作的朋友的紧急求助，其公司的CDN源站，源站的流量没有变动，但CDN加速那边的流量无故超了好几个GB，不知道怎么处理。

该故障的影响：由于是购买的CDN网站加速服务，因此虽然流量多了几个GB，但是业务未受影响。只是，这么大的异常流量，持续下去可直接导致公司无故损失数万元。解决这个问题可体现运维的价值。

通过宝塔Nginx Web服务实现防盗链实战

在默认情况下，只需要进行简单的配置，即可实现防盗链处理

利用referer，并且针对扩展名rewrite重定向

第一步，先打开宝塔网站=》设置=》配置文件

第二步:找到以下代码进行配置

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }

配置前


    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }



配置后


    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
 valid_referers *.iarc.top iarc.top;
 if ($invalid_referer) {
  rewrite ^/ https://www.iarc.top/img/fdl.png;
  #return 404;
 }
 expires  30d;
}

valid_referers *.iarc.top iarc.top;这些是许可域名
gif|jpg|jpeg|png|bmp|swf这些你要进行防盗链设置的文件后缀，用|隔开

众所周知，网站上声音无法自动播放一直是IOS/Android上的惯例。桌面版Safari也在2017年第11版宣布禁止带声音的多媒体自动播放功能。随后2018年4月发布的Chrome 66正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。
而通过网上搜索来解决这个问题，大部分都会提到使用javascript原生的play()来解决。但是，当你运行它的时候，你会发现你在Chrome浏览器下调用play后的错误：
DOMException: play() failed because the user didn’t interact with the document first.
但是，如果你想的是将音频当作背景音乐来播放时，当页面加载时音频文件就会自动响起，这个时候，用户是没有与页面进行数据交互的，所以play()会报错，很多人百度后便会找到两种主流的方法
这里就不赘叙浏览器如何设置成自动播放了，因为你总不能让用户访问网站之前让他提前设置好浏览器自动播放的吧

方法一

//浏览器适用       
contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext ||
    window.msAudioContext;
try {
    var context = new contextClass();
    var source = null;
    var audioBuffer = null;

    function stopSound() {
        if (source) {
            source.stop(musics); //立即停止
        }
    }

    function playSound() {
        source = context.createBufferSource();
        source.buffer = audioBuffer;
        source.loop = true;
        source.connect(context.destination);
        source.start(0); //立即播放    
    }

    function initSound(arrayBuffer) {
        context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
            audioBuffer = buffer;
            playSound();
        }, function(e) { //解码出错时的回调函数
            console.log('404', e);
        });
    }

    function loadAudioFile(url) {
        var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) { //下载完成
            initSound(this.response);
        };
        xhr.send();
    }
    //这里用来存储背景音乐的路径
    loadAudioFile('audio/music.flac');
} catch (e) {
    console.log('无法找到音乐！');
}

构建播放器后，可以在进入页面时缓存，然后自动播放背景音乐，不考虑浏览器。

方法二

    <script>    
        var audio=document.createElement('audio');
        audio.src='http://music.163.com/song/media/outer/url?id=31365604.mp3';
        audio.autoplay=true;
        var duration;
duration=audio.duration;//长度单位是秒
function bgm(){
    audio.play();//播放
}
window.setInterval("bgm()",duration*1000+1000);
        document.head.appendChild(audio);
    </script>

注意事项

这种方法只对浏览器有效，无法实现APP上自动播放音乐的效果。