管理员 发布的文章

Tampermonkey + Greasy Fork vip视频+++++++


我相信我们的读者里有很多都是原生浏览器爱好者,比如 Chrome 、 Edge 或者是 Safari ,我用的就是 Chrome 。我非常喜欢 Chrome 干净简洁的界面,但是有些时候会发现这个浏览器在功能上也有一点太“干净简洁”了,于是乎我就开始研究起了 Chrome 插件,于是乎我就发现了我今天要推荐的 Tampermonkey ……

Tampermonkey是个什么东西?

微信图片编辑_20210814195447.jpg
Tampermonkey ,俗称“油猴”,是一款在浏览器上运行和管理脚本的插件。所谓脚本就是一段代码,它们能够优化您的网页浏览体验。安装之后,有些脚本能为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容。

有了 Tampermonkey ,你能够轻松有效地使用和管理网页脚本,让你的上网体验更加舒适。

你需要准备什么?

Chrome浏览器

这款插件除了Chrome之外还支持 Microsoft Edge 、 Safari 、 Opera Next 和 Firefox。

如何使用?

首先下载安装插件……

微信图片编辑_20210814195837.jpg

图片是chrome在应用商城中的的截图

如何安装插件

脚本我一般是在 Greasy Fork 这个网站上下载,步骤非常简单,找到你想安装的脚本,点一下安装此脚本就行了。

微信图片编辑_20210814200629.jpg

这个插件能干什么?

脚本数量可以说是数不胜数,我在这里给大家推荐几个我自己常用的。

视频去广告、音乐直接下载、百度网盘直接下载等功能

Greasy Fork 中直接安装

微信图片编辑_20210814200144.jpg

示例图片
1.vip视频解析+去广告
微信图片编辑_20210814200457.jpg
2.vip音乐下载
微信图片编辑_20210814201217.jpg
微信图片编辑_20210814201402.jpg


pro、pre、test、dev环境


今天给大家介绍一下开发过程中,四个环境以及各自的功能特点,四个环境分别是:pro、pre、test、dev环境,中文名字:生产环境、灰度环境、测试环境、开发环境,其实大家看英文应该就差不多可以看出来对应的是什么环境。

环境介绍:

pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境。

pre环境:灰度环境,外部用户可以访问,但是服务器配置相对低,其它和生产一样。

test环境:测试环境,外部用户无法访问,专门给测试人员使用的,版本相对稳定。

dev环境:开发环境,外部用户无法访问,开发人员使用,版本变动很大。

分成四个环境原因:

大多数人都知道四个环境指的是什么,但是很多人却不知道为什么要这么区别,甚至为了省事就只有dev和pro环境。如果项目没有上线之前没有问题,如果项目上线之后就会有非常麻烦的事情发生.


jstree 的右键菜单增删改


问题

写【草书文档】这个应用的时候用到了目录树,相关配置挺多的,留存一下。
jstree中文官网
jsttee英文官网
英文官网要比中文的版本高一些,所以用要用github最新版的,看文档就都差不多了。

代码解析

$("#menu").jstree({
                    "core": {
                        "check_callback" : true,
                        "themes": {"stripes": true},
                        "data": d.menu
                    },
                    contextmenu   : {
                        items : function(node){
                            let menu = {
                                createCatalog  : {
                                    label   : "新建目录",
                                    icon    : "fa fa-folder-open",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"catalog"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建目录";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                createPage : {
                                    label: "新建文档",
                                    icon: "fa fa-file-o",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"page"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建文档";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                rename  : {
                                    label: "重命名",
                                    icon: "fa fa-share",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.edit(obj);
                                    }
                                },
                                delete  : {
                                    label: "删除",
                                    icon: "fa fa-times",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        if(inst.is_selected(obj)) {
                                            inst.delete_node(inst.get_selected());
                                        } else {
                                            inst.delete_node(obj);
                                        }
                                    }
                                },
                            }
                            if(node.type == "page"){
                                // 文档-重命名、删除
                                delete menu.createCatalog;
                                delete menu.createPage;
                            }
                            return menu;
                            
                        }
                    },
                    types : {
                        root    : {
                            icon  : "fa fa-home",
                            valid_children : ["catalog","page"]
                        },
                        catalog   : {
                            icon  : "fa fa-folder-open",
                            valid_children : ["catalog","page"]
                        },
                        page      : {
                            icon  : "fa fa-file-o",
                            valid_children : []
                        }
                    },
                    plugins : ["contextmenu", "dnd", "search","state", "types", "wholerow"]
                }).on("changed.jstree",function(e,d){
                    // console.log(d)
                    // if(d.node.children.length == 0 && d.node.original.type == "page"){
                    //     console.log(d.node.id)
                    // }
                });

linux查看进程占用网速和流量使用情况


有三个命令vnstat、iftop、nethogs(推荐)

都需要额外安装软件 使用yum或apt-get

一、vnstat使用,查看接口统计报告

vnstat -i eth0 -l #实时流量情况
微信图片编辑_20210728234545.jpg
还有其他命令使用--help查看

ctrl+c结束后,会显示监控期间的流量统计结果
微信图片编辑_20210728234632.jpg

二、iftop使用,检查带宽使用情况

iftop可以用来监控网卡的实时流量(可以指定网段)、反向解析IP、显示端口信息等

命令用法:

-i设定监测的网卡,如:# iftop -i eth1

-B 以bytes为单位显示流量(默认是bits),如:# iftop -B

-n使host信息默认直接都显示IP,如:# iftop -n

-N使端口信息默认直接都显示端口号,如: # iftop -N

交互命令:

按n切换显示本机的IP或主机名;

按s切换是否显示本机的host信息;

按d切换是否显示远端目标主机的host信息;

按t切换显示格式为2行/1行/只显示发送流量/只显示接收流量;

按N切换显示端口号或端口服务名称;

按S切换是否显示本机的端口信息;

按D切换是否显示远端目标主机的端口信息;

按p切换是否显示端口信息;

使用截图:
微信图片编辑_20210728234748.jpg

三、nethogs使用,按进程实时统计网络带宽利用率(推荐)

命令用法:

1、设置5秒钟刷新一次,通过-d来指定刷新频率:nethogs -d 5

2、监视eth0网络带宽 :nethogs eth0

3、同时监视eth0和eth1接口 : nethogs eth0 eth1
交互命令:
以下是NetHogs的一些交互命令(键盘快捷键)
m : 修改单位
r : 按流量排序
s : 按发送流量排序
q : 退出命令提示符

使用截图:
微信图片编辑_20210728234327.jpg


苹果手机H5audio标签无法自动播放音乐处理方法


问题

搞地产活动的H5页面,有个自动播放音乐的按钮,安卓手机自动播放正常,苹果手机中就会出现不自动播放的情况,而且点击播放按钮还是可以播放音乐的。

解决代码

<audio id="back_music" autoplay="" loop="" src="{if !empty($base['backmusic'])}{php echo tomedia($base['backmusic']);}{else}../addons/ruifan_yaoyiyao/static/background_music.mp3{/if}" preload="auto"></audio>
<div id="play_button">
    <img src="../addons/ruifan_yaoyiyao/images/audio.png" width="100%" />
</div>

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('back_music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});