实用插件 – 有爱前端 http://gzui.net 贵在有爱 Wed, 21 Jul 2021 06:47:23 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.8.9 docker常用命令 http://gzui.net/archives/2984 http://gzui.net/archives/2984#respond Sat, 01 Jun 2019 02:21:32 +0000 http://www.gzui.net/?p=2984 两小时入门 Docker
进入容器

docker exec -it f9c43dd7e0e6 /bin/bash

docker start/stop/restart :开启/停止/重启container

docker rm :删除一个或多个container

docker rm -f <>:删除一个正在运行的容器

将容器封装为一个镜像
docker commit 6c4b67800f97(为容器名/ID) node:node1(为新的镜像名)

基于新镜像运行容器

docker run -it -d -p 88:80 --name test1 node:node1 /bin/bash

-p为端口映射

docker stop docbookstack && docker rm docbookstack

转载请注明:有爱前端 » docker常用命令

]]>
http://gzui.net/archives/2984/feed 0
用 Chrome 的人都需要知道的「神器」扩展:「油猴」使用详解 http://gzui.net/archives/2652 http://gzui.net/archives/2652#respond Thu, 06 Sep 2018 01:42:31 +0000 http://www.gzui.net/?p=2652 https://sspai.com/post/40485

不装扩展(Extensions)的 Chrome 只能发挥它 40% 的能力。

各类实用的 Chrome 扩展是不少人选择 Chrome 浏览器的重要原因,经过多年发展,Chrome 的扩展种类已经非常丰富,除了那些「即装即用」的小工具之外,也有很多被誉为「神器」的强大扩展程序。

少数派此前介绍过的 Stylish 就算一款「神器」,通过安装各类 CSS 模板,它几乎可以美化一切网页。而另一款不得不提的「神器」就是今天要介绍的 Tampermonkey,也被戏称为「油猴」。

和 Stylish 类似,「油猴」也可以通过安装各类脚本对网站进行定制。不过它能定制的不仅仅是网站的样式,还能实现更多更强大的功能,例如:

  • 直接下载百度网盘文件
  • 重新定制繁杂的微博页面
  • 去掉视频播放广告
  • 将网站默认的「二维码登录」改回「账号密码登录」
  • 绕过搜索引擎的跳转提示
  • 还原清新的小说阅读模式
  • 豆瓣和 IMDb 互相显示评分
  • ……

你可能听说过「油猴」,但是因为看到「脚本」而不敢尝试,其实它的操作非常简单,只要经过简单设置,下载一些现成脚本,就可以实现上面提到的实用的功能。

如何使用 Tampermonkey

如果能正常访问 Chrome 应用商店,可以直接在商店内下载 Tampermonkey

如果不能,在这里推荐一个叫 Crx4Chrome 的网站,可以直接下载 Chrome Store 插件,在 Crx4Chrome 搜索并下载 Tampermonkey 插件 到本地之后,再打开 Chrome 浏览器「扩展程序」页面,将下载的 crx 文件拖拽到页面即可完成安装。

另外,Tampermonkey 还支持 Microsoft Edge、Safari、Opera Next、Firefox、Dolphin Browser、UC Browser 等浏览器平台,你可以在 软件官网 下载到对应版本。

Tampermonkey 设置选项

安装好之后,会在浏览器地址栏右侧看到类似望远镜的图标,这个就是 Tampermonkey,点击右键选择选项,即可看到设置页面:

Tampermonkey 提供了友好的中文化界面,懒得折腾的用户使用默认设置即可,无需更改任何选项。

如果需要更多高级设置选项的话,可自行打开「初学者」或者「高级」配置模式,设置将提供动作菜单、更细致的脚本更新、TESLA、加强版编辑器、安全、黑名单检查等高级选项。

脚本安装和管理

油猴默认是没有安装任何脚本的,你可以通过设置页面的「已安装脚本 - 获取脚本…」来下载各种脚本。

比较常用的下载渠道有三个:

  • Greasy Fork:支持中文,按照今日安装、总安装数、得分、创建日期等的排序方式给出脚本列表,可按脚本生效的网站过滤,每一脚本都有中文介绍,并且详细列出了作者、安装数、更新日期日志、安装使用截图、兼容性、应用到、代码查看等信息描述。
  • OpenUserJSUserscripts Mirror:这两个网站都没有提供中文界面,Userscripts Mirror 已经停止了更新,用户可以在这个站点找到历史资源。

找到需要的脚本后,会在介绍页面看到安装(install)按钮,点击下载脚本后会自动跳转到安装界面,再点击安装就可以享用脚本了。

比如,在 OpenUserJS 的 Yet Another Weibo Filter 脚本页面,点击右侧 Install 之后会跳转到 Tampermonkey 的安装页面,这里列出了脚本的基本说明和源代码,再次点击页面中的「安装」按钮即可。

此时打开微博网站,点击地址栏右侧的 Tampermonkey 图标,可以看到这个 Yet Another Weibo Filter 已经成功启用,用户可以点击 ON 按钮临时关闭使用该脚本。

打开 Tampermonkey 设置页面的「已安装脚本」,我们可以看到刚安好的 Yet Another Weibo Filter 脚本,用户在这里可以选择是否打开脚本,或是对脚本进行编辑、提交 Bug 以及删除脚本等多项操作。

建议在安装好各个脚本之后,在实用程序的页面中,将脚本存储和 Tampermonkey 设置以文件或者压缩包的形式导出,方便以后数据备份。

优秀脚本推荐

在上面提供的三个网站大家可以看到各种功能的脚本,你可以根据自己的需求进行下载,如果不知道该下载哪些,下面为大家推荐 15 个优秀实用的用户脚本,不妨先来看看。

看真正想看的微博:Yet Another Weibo Filter

Weibo 官方界面已经成为不少脚本应用必修的对象,ts 开发的这款脚本可以高度定制 Weibo 电脑端版面,去除各类广告、微博主自带的各种徽标、过滤热门话题等主要功能,用户需要在脚本的设置中启用相应功能。

如果希望单独安装浏览器插件的话,推荐 眼不见心不烦,其支持 Chrome 和 Firefox 脚本

还原真实下载地址:百度网盘直接下载助手

安装百度网盘直接下载助手之后,打开需要下载的资源页面,会出现下载助手的按钮,提供直接下载(支持多文件和目录下载)、显示链接以及外链下载的选项,可实现直接复制到下载工具使用。

让所有视频网页全屏:视频网页全屏

可以让网页中任何一个视频网页全屏播放的「神器」,目前支持有多个视频的任意网页、HTML5 格式的视频。

豆瓣和 IMDb 互相显示评分:MoreMovieRatings

不少人看电影时喜欢参考 IMDb 和豆瓣电源的评分,这款脚本正好满足两者需求,可以在豆瓣和 IMDb 互相显示评分,电影党必备。

查看完整的知乎回答而无需注册登录:Zhihu Visitor

知乎问题页面里,比较长的答案添加展开按钮,点击可以显示全文。点击「更多回答」可以加载更多回答而非登录框。隐藏了必须登录才能使用的相关功能的按钮,如点赞或收藏等。

增强版的 YouTube 功能改造:YouTube +

YouTube + 可以给 Youtube 增加更多的功能选项,包括但不限于小窗口播放视频、播放您最近订阅播放列表、视频截图保存、只允许你订阅频道的视频播放广告等等。不过目前 YouTube + 不支持 YouTube beta Material Layout 测试版。

自动翻页 Google 搜索结果:Endless Google

实现无需手动点击 Google 搜索结果的页码,实现自动翻页显示搜索内容。

轻松下载 Instagram 图片和视频:IGHelper

方便用户下载 Instagram 的图片和视频,将鼠标移动到图片或者视频上,即可看到下载按钮。

悬停查看和下载图片:Mouseover Popup Image Viewer

只需将鼠标光标悬停在多媒体资源的链接上,即可直接显示完整的图像和视频剪辑,避免了用户二次点击,并且通过快捷键实现下载、缩小放大、顺序浏览图册等功能。脚本已经上百个图像和视频托管服务(如 Facebook、500px、Flick 和 YouTube)。

YouTube 影片下载为 MP3 格式文件:Simple YouTube MP3 Button

脚本提供了即时转换功能,可将 YouTube 影片以 MP3 音频文件格式下载到本地。

GitHub 中文化界面:GitHub 汉化插件

很多新手朋友不太会玩 GitHub,可能被全英文界面所困扰,这款脚本实现汉化了 GitHub 界面的部分菜单及内容,新手熟悉之后可选择停用脚本恢复英文模式。

给你最好用的 YouTube 视频下载工具:Youtube Best Video Downloader 2

脚本提供了 YouTube 视频下载的快捷功能,可保存为 Full-HD MP4、FLV、3GP、MP3(码率为 128kbps 或者 192kbps)、M4A 以及 AAC 格式。经测试,这款脚本会和上面提及到的 YouTube + 脚本有冲突,需要暂时停用 YouTube +,才可看到下载按钮。

Feedly 订阅工具增强版:Feedly filtering and sorting

此脚本主要是为 Feedly 订阅增强了部分功能,包括了高级关键字匹配、自动加载、高亮显示自定义标题、订阅内容高级排序规则等。

还你清新的小说阅读模式:My Novel Reader

小说阅读脚本实现了统一阅读样式,内容去广告、修正拼音字、段落整理,自动下一页的功能,相当适合重度的小说阅读用户。

绕过搜索结果的自我跳转,直接访问原始网页:AC-baidu

脚本可实现绕过百度、搜狗搜索结果中的自己的跳转链接,直接访问原始网页(间接缩短访问目标网页的时间);可去除百度搜索结果中多余广告 ;添加 Favicon 显示;添加计数。

结语 | 动手玩

上面给出的 15 个脚本只是很小的一部分,脚本工具可以专门改变特定网站的行为,比如过滤广告、添加下载按钮、网页界面定制等等,同时由于涉及到版权的问题,并没有向大家推荐类似绕过 VIP 视频限制之类的脚本。这些在 Greasy Fork 和 OpenUserJS 都提供了相当不错的选择,大家根据需求自行下载试玩。

如果觉得现有的脚本还不够完善,那就动手写一个吧。最后,欢迎大家在留言中批评、指点、分享、投币,也可以留言哪些脚本神器值得推荐。

参考链接:

转载请注明:有爱前端 » 用 Chrome 的人都需要知道的「神器」扩展:「油猴」使用详解

]]>
http://gzui.net/archives/2652/feed 0
放个日历(日程)插件 以后好找 http://gzui.net/archives/1035 http://gzui.net/archives/1035#respond Wed, 16 Dec 2015 02:24:58 +0000 http://www.gzui.net/?p=1035 http://jquery-plugins.net/bootstrap-calendar-bootstrap-based-full-view-calendar
http://kylestetz.github.io/CLNDR/

http://elemefe.github.io/daterangepicker/

转载请注明:有爱前端 » 放个日历(日程)插件 以后好找

]]>
http://gzui.net/archives/1035/feed 0
密码保护:异步加载地图 http://gzui.net/archives/709 http://gzui.net/archives/709#respond Tue, 14 Jul 2015 06:58:15 +0000 http://www.gzui.net/?p=709

此内容受密码保护。如需查阅,请在下列字段中输入您的密码。

转载请注明:有爱前端 » 密码保护:异步加载地图

]]>
http://gzui.net/archives/709/feed 0
echarts 基本使用 http://gzui.net/archives/655 http://gzui.net/archives/655#respond Tue, 30 Jun 2015 07:05:58 +0000 http://www.gzui.net/?p=655 最近项目中要做图形报表,要求使用echarts实现,图形报表有很多中实现之前也接触过,但echarts还是头一次听说,正好可以趁这个机会好好学习一下它。

之前不知道就不知道啦,现在知道了就了不得了,一下子喜欢上了echarts,今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了:1,开源软件,无私的为我们提供漂亮的图形界面;2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts;3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了;4,兼容性好,基于html5动画渲染超棒。

echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现。这样毕竟比较费时,我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示:

echarts饼状图实现步骤:

1,在简单的html中引入js文件

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
</body>

2,为图形准备容器

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
   
    <div id="picturePlace"></div>
 
</body>

就是在html中添加一个div给定id,图表就会显示在div中。

3,模块导入js

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
    </script>
</body>

4,添加显示数据

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
        
         // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>)); 
                
                option = {
                      title : {
                          text: '某站点用户访问来源',
                          subtext: '纯属虚构',
                          x:'center'
                      },
                      tooltip : {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                      },
                      legend: {
                          orient : 'vertical',
                          x : 'left',
                          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                      },
                      toolbox: {
                          show : true,
                          feature : {
                              mark : {show: true},
                              dataView : {show: true, readOnly: false},
                              restore : {show: true},
                              saveAsImage : {show: true}
                          }
                      },
                      calculable : true,
                      series : [
                          {
                              name:'访问来源',
                              type:'pie',
                              radius : '55%',
                              center: ['50%', '60%'],
                              data:[
                                  {value:335, name:'直接访问'},
                                  {value:310, name:'邮件营销'},
                                  {value:234, name:'联盟广告'},
                                  {value:135, name:'视频广告'},
                                  {value:1548, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

5,运行程序显示结果

以上是饼状图的实现步骤,柱状图散点图跟这个类似就是引用js时饼状图是pie,柱状图是bar,对应的option里面的数据不同,程序的架子是一样的。。

点击下载源码: 地址1地址2

http://blog.csdn.net/lishuangzhe7047/article/details/38895117

转载请注明:有爱前端 » echarts 基本使用

]]>
http://gzui.net/archives/655/feed 0
背景弹性滚动的导航效果 http://gzui.net/archives/563 http://gzui.net/archives/563#comments Fri, 19 Jun 2015 12:57:59 +0000 http://www.gzui.net/?p=563

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » 背景弹性滚动的导航效果

]]>
http://gzui.net/archives/563/feed 1
select美化 http://gzui.net/archives/572 http://gzui.net/archives/572#respond Thu, 18 Jun 2015 12:35:49 +0000 http://www.gzui.net/?p=572 目前市面上的select美化组件很多,但主要缺点是拿来用后select要重新实现,原有js要修改
这个jQuery.selectui的方便之处在于旧项目中原有的操作select的代码不用改动,即可使用
亮点一是支持IOS和安卓
亮点二是对盲人用户友好(对键盘友好)

提示:你可以先修改部分代码再运行。

https://github.com/gucong3000/jquery.selectui
http://www.w3cfuns.com/article-5599438-1-1.html

转载请注明:有爱前端 » select美化

]]>
http://gzui.net/archives/572/feed 0
js多个倒计时并存 http://gzui.net/archives/548 http://gzui.net/archives/548#comments Tue, 16 Jun 2015 04:38:32 +0000 http://www.gzui.net/?p=548

提示:你可以先修改部分代码再运行。

到毫秒

//倒计时
 function countDown(time, fn) {
    var maxtime = (new Date(time) - new Date()) / 10;//剩余秒
    var timer = setInterval(function () {
      if (maxtime >= 0) {
            var dd = parseInt(maxtime /100/ 60 / 60 / 24, 10);//计算剩余的天数
            var hh = parseInt(maxtime /100/ 60 / 60 % 24, 10);//计算剩余的小时数
            var mm = parseInt(maxtime /100/ 60 % 60, 10);//计算剩余的分钟数
            var ss = parseInt(maxtime /100% 60, 10);//计算剩余的秒数
            var hm = parseInt(maxtime % 100, 10);//计算剩余的毫秒数
            hh = checkTime(hh);
            mm = checkTime(mm);
            ss = checkTime(ss);
            hm = checkTime(hm);
            msg = hh + ":" + mm + ":" + ss + ":" + hm;
            fn(msg);
            --maxtime;
          }
          else {
            clearInterval(timer);
            fn("已结束");
          }
        }, 10);
  }
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  };

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » js多个倒计时并存

]]>
http://gzui.net/archives/548/feed 1
jQuery用户数字打分评分代码 http://gzui.net/archives/538 http://gzui.net/archives/538#comments Mon, 15 Jun 2015 15:59:29 +0000 http://www.gzui.net/?p=538

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » jQuery用户数字打分评分代码

]]>
http://gzui.net/archives/538/feed 1
jQuery鼠标悬停上下滑动导航条 http://gzui.net/archives/532 http://gzui.net/archives/532#respond Mon, 15 Jun 2015 14:34:13 +0000 http://www.gzui.net/?p=532

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » jQuery鼠标悬停上下滑动导航条

]]>
http://gzui.net/archives/532/feed 0