9之间的字符(不包含9) * str.indexOf("/"); -->返回str中“/”第一次出现时的下标 * str.indexOf("/", 5); -->返回跳过...str的前6个字符后,“/”第一次出现的下标。...,我们要从str中取出name->Riven String riven = str.substring(4, 9); // 这里传入R的下标4,再传入第二个“/”的下标9,拿到的就是Riven...”之间的数据就是我们的name字段了 // indexOf()可以传两个参数,第一个是要寻找的子字符串,第二个是从哪个下标位置开始寻找,这里传入i+1就是跳过了第一个“/”之前的下标...System.out.println("id = " + id); System.out.println("riven1 = " + riven1); } 运行结果
前不久,处理生信分析网页版自动化报告的时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp...引入 jQuery 和 fancybox 样式文件 jquery@3.4.1/dist/jquery.min.js">...当然,我们可以直接修改样式也可以达到显示和隐藏滚动条的目的;或者可以在 fancybox3 的源码中设置 hideScrollbar 选项为 false,就可以出现滚动条了。...fancybox/dist/jquery.fancybox.js 源码中把 hideScrollbar: true,更改成 hideScrollbar: false,然后把修改后的 jquery.fancybox.js...细心的童鞋可能发现了,fancybox 默认使用的 js 文件是 jquery.fancybox.min.js ,相比源码文件 jquery.fancybox.js 多了一个 min 后缀!
写在前面 Hexo博客已经使用挺长时间了,其出色的静态网页渲染能力深得我的喜欢,然鹅也是因为 Hexo 基本完全依赖渲染模板的原因,如果在整博客的过程中引入了错误的代码段或者和已有代码发生了冲突,会直接影响博客的正常渲染...: fancybox/helpers/jquery.fancybox-buttons.js INFO Generated: fancybox/helpers/jquery.fancybox-media.js...主题部分(初始化/重置) Hexo模块化的结构和生成流程决定了Hexo本身和主题theme是分离的,或者说耦合性不大,如果博客的主题在先使用过程中出现了一些无法修改的问题,那么就需要重置一下主题,比如我是用的...再次提醒,大部分错误都是theme中的错误导致的,在替换时只需要修改blog目录中的theme文件夹,替换其中的主题即可,blog根目录的东西一般不会出毛病(一般自定义时都是修改主题内的文件)。...indigo中将一些基本文件替换到新的indigo中 indigo\ _config.yaml (注意是indigo目录下的配置文件) indigo\source (全部内容,除了js和css,这两部分可能包含先前的错误
front-end html HTML+CSS oblique 和 intalic 的区别 这两个都是font-style属性的值,这两个值都能实现倾斜的效果,但是有区别的。...javascript keydown 和 keypress keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) 如果用户按下了一个字符键不放,就会重复触发...详解键盘事件 (keydown,keypress,keyup) textContent、innerText 和 innerHTML 的区别 设置标签中的文本内容,应该使用textContent或innerText...(注意防止 XSS 注入) 如果某个属性在浏览器中不支持,那么这个属性的类型是undefined,判断这个属性的类型是不是undefined,就知道浏览器是否支持。...github 介绍 fancybox 源 1 2 fancybox/3.5.7/jquery.fancybox.min.css"
灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化 我的检测结果是:您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地页体验 我们可以直接使用...FancyBox来完成我们的需求,FancyBox是一款优秀的弹出框Jquery插件 1、允许我们用鼠标和键盘上的四个方向键切换图片 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时...1、引入相关文件 可以将FancyBox的 js、css 文件下载到主题目录中进行引入,这里我们直接使用 CDN 外链 请先在header.php文件的标签前引入Jquery文件 <script type...】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前,选择【附件显示设置】链接到【媒体文件】 需要将以下代码添加到当前主题的functions.php文件中 // fancybox3 图片添加 data-fancybox...或footer.php文件中 3.初始化 fancybox 一切加载完成后,就可以初始化FancyBox了,在刚才引入的FancyBox的 js、css 文件下面增加 $(document).ready
升级hexo版本和NexT版本 之前使用的NexT版本是5.1.2,没有自带 valine ,尝试了各种方法想把 valine 相关的代码复制到这个版本里,但结果都不理想,迫不得已只能升级。...升级NexT就比较操蛋了,theme 文件是以源代码的形式从 GitHub 上 clone 下来的,没有在原本版本升级的办法。..._internal: lib # FancyBox # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js # fancybox.../gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/...jquery.min.js fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js fancybox_css
和 github_sushengbuhuo.pub 这两个文件 2.密钥复制到托管平台上 vim ~/.ssh/github_sushengbuhuo.pub ,把内容复制至代码托管平台上 3.修改...github_sushengbuhuo Host abc.github.com HostName github.com User git IdentityFile ~/.ssh/github_abc 4.测试验证.../jquery.fancybox.css..../jquery.fancybox.js..../jquery.fancybox.js.
: 1.下载解压后从source文件夹中选择如下几个基本文件: ?..., $replacement, $content); return $content; } 代码解读:添加文章后,将文章中的图片链接自动添加上rel=fancybox属性用于在初始化时对图片的筛选 例:...中添加) 4.拓展: 若要添加鼠标滚动:载入lib文件夹中的jquery.mousewheel-3.0.6.pack.js文件。...更多功能大家自己探索吧O(∩_∩)O~ 后省(2015-12-24) 当初写时没细看代码,现在反过来看时感觉用来控制对应的应该是图片代码中的 rel='fancybox' 与header.php文件中的...jQuery(".gallery a").attr({rel: "fancybox"}); ,将rel='fancybox'的fancybox改为其他名字时需要同时改这两处地方。
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp...引入 jQuery 和 fancybox 样式文件 jquery@3.4.1/dist/jquery.min.js">...当然,我们可以直接修改样式也可以达到显示和隐藏滚动条的目的;或者可以在 fancybox3 的源码中设置 hideScrollbar 选项为 false,就可以出现滚动条了。...,我们可以直接在fancybox/dist/jquery.fancybox.js源码中把hideScrollbar: true,更改成hideScrollbar: false,然后把修改后的jquery.fancybox.js...细心的童鞋可能发现了,fancybox 默认使用的 js 文件是jquery.fancybox.min.js,相比源码文件jquery.fancybox.js 多了一个 min 后缀!
、WebScarab的使用 3.10、从爬行结果中识别相关文件和目录 ---- 3.10、从爬行结果中识别相关文件和目录 我们已经抓取了一个完整的web应用程序目录,并且有了所有引用文件的列表及其路径...我们要寻找的第一件事是登录页面和注册页面,这些可以让我们有机会成为应用程序的合法用户或通过猜测用户名和密码来冒充一个人。...应用程序的测试和开发版本通常受到的保护较少,而且相比于最终版本更容易发现漏洞,因此它们是我们搜索弱点的一个很好的目标。...原理剖析 上面列出的一些目录可能允许我们访问站点的受限部分,这是渗透测试中非常重要的一步; 如果忽略它们的存在,我们就无法找到这些地方的漏洞。...其中一些将为我们提供有关服务器的配置信息,以及使用的开发框架。 其他一些如Tomcat管理器和JBoss管理页面,如果配置错误,将有可能被恶意用户直接拿下Web服务器的权限。
从 Pygments 的名字也可以看出来,这款工具是 Python 语言编写的,因此编译时是需要 Ruby 和 Python 两种语言环境的。不过除此之外,它的配置还是比较简单的。...另外,Rouge 的主题和 Pygments 是完全兼容的,所以如果是从 Pygments 变到 Rouge,只需要在 _config.yml 配置文件做如下修改即可: markdown: kramdown...fancybox/dist/css/jquery.fancybox.css" rel="stylesheets" />...://cdn.jsdelivr.net/npm/fancybox/dist/js/jquery.fancybox.cjs.min.js"> /...其实在 Jekyll 中要做到这个也不是很难,只需要对整个文章的内容进行字符计数即可。
什么是 FancyBox FancyBox 是一个 jQuery 图片播放插件,它可以使用类似于 MAC 系统中 “Lightbox” 方式在网页前面浮动显示和播放图片,网页内容,或者其他多媒体内容。...FancyBox 的特性 支持图片,HTML 元素,Flash 动画,Iframe 以及 AJAX 支持。 可以自定义播放器和 CSS 样式。 可以以组的形式进行轮转播放。....bmp/.gif/.png) 和 Falsh 动画文件 (.swf) 自动获取 FancyBox 的弹出效果。...Fancy Gallery Fancy Gallery 整合 FancyBox 到你的 WordPress 博客中,同样,所有指向图片的链接都会自动使用 FancyBox 的方式弹出页面的上面,如果你使用...FancyBox Gallery FancyBox Gallery 把 FancyBox 这个 jQuery 插件集成到 WordPress 的 Gallery 功能中,你只需要在日志内容中试用 Gallery
themes/landscape 默认的皮肤 _config.yml 全局的配置文件 备注: 我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了...文章标题,文章类型,外部链接等 目录和标签 默认分类,分类图,标签图 归档设置 归档的类型 服务器设置 IP,访问端口,日志输出 时间和日期格式 时间显示格式,日期显示格式 分页设置 每页显示数量 评论.../helpers/jquery.fancybox-buttons.js INFO Generated: fancybox/helpers/jquery.fancybox-media.js INFO...Generated: fancybox/helpers/jquery.fancybox-thumbs.css INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css...在github项目中,新建一个文件CNAME,文件中写出你要绑定的域名sjf0115.club。通过浏览器,访问http://sjf0115.club , 就打开了我们建好的博客站点: ?
简介 Fancybox 是终极的(ultimate) JavaScript 灯箱替代品,为多媒体显示中的优质用户体验设定了标准。...支持图像、视频、地图、内联内容、iframe 和任何其他 HTML 内容。 此外,Fancybox 很容易集成到任何 JavaScript 框架中。...详情可以参见官方文档中关于 React、Vue 和 Angular 的示例。...安装和使用 由于 Fancybox 是用 vanilla JS 编写的,因此很容易集成到任何地方。您不需要jQuery或任何其他依赖项!...您可以在每个元素中混合图像、视频和任何 HTML 内容。
今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了。而目前easyui 1.4.x的jquery的版本已经到达1.11.x以上。...本以为不能再使用这个插件,但是发现还是有人重写了插件的方法让其支持jquery 1.11.x以上,最上面是下载地址。...不过有收费插件fancybox2.0,本身支持高版本的jquery,大家可以使用 使用fancybox非常简单。解压包下的index基本有所有例子 ? 直接运行结果: ? 显示非常动感。 ...这段代码来源于fancybox插件的第一个样例代码。...如果你的记录支持多张图片。那么必须再新建一张图片子表来关联。 然后用到样例中的:多张显示 ?
Fancybox是一款基于jquery开发的类Lightbox插件,同时也是一款很绚丽的 jquery 弹出层展示插件,支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。...Fancybox 可以节省您的时间并帮助您轻松创建包含图像、iframe、视频或任何类型的 HTML 内容的漂亮、现代的叠加窗口。...,以所有的img属性作为选项设置特定于图像的自定义选项,处理预加载,光标样式,单击,双击和滚轮事件,放大/缩小动画。...默认:can-zoom_out zoom {Boolean} 在启动或关闭fancybox 时从缩略图中缩放动画。...支持 Fancybox包含的插件提供了额外的媒体类型支持:图像,用于内嵌内容、iframe、视频(HTML5、Youtube 和 Vimeo)、Google 地图和 Ajax 的 HTML 。
概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进行优化和完善。...,然后创建站点,在 domain 中填入你设定的域名前半部分 # http://的部分>.duoshuo.com (domain只填上里的内容,不要填整个网址) youyan: on...友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。.../fancybox/2.1.5/jquery.fancybox.min.js fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css...想要在文章中插入图片的话,可以按照Markdown语法来插入,图片的存放有两种方式:在本地D:\Hexo\source目录下新建一个存放图片的文件夹,比如images,然后把想要插入的图片放在里面插入图片的路径
巴索罗缪·大熊 前言 这些年积累了很多前端性能优化的知识点和思路,日常工作很少涉及技术层极限优化,近期终于一点点把博客独立搭建并部署了,对之前的一些技术点进行了深度探索,最终结果也达到了预期效果,由于水平有限...gzip 模块的其他参数可以根据需要进行配置,以优化 Nginx 的 gzip 压缩功能 测试结果 添加 gzip 后的 完成 参数需要 3.03 秒 执行 5 次取平均值,最终结果为 3.02 秒...landscape 主题下的 _config.yml 中的 fancybox 设置为 false,同时删除 source 目录下的 fancybox 相关文件 图片压缩 首页背景图压缩 具体操作方式为把...,分析 jquery 文件的使用场景,结合页面功能和代码引入,只有在 script.js 中用了 分析目前页面上用到的功能,只有 script.js 中只有一个分享按钮代码有用,而且效果还不太好,把整个...js 文件不用的功能代码删掉,后面需要什么功能单独加代码 把分享功能先去掉,这个功能没有配置选项,在 article.ejs 中把 footer 标签注释掉就行了,这时候 jquery 引入代码也注释掉
一般的網頁,圖片是使用 img 標籤寫在 HTML 頁面中,圖片點擊并不會放大,想放大看圖片要麼方法整個網頁,要麼複製圖片鏈接新開窗口,操作繁瑣,而使用 Lightbox 的網站可以点击缩略图浮层显示大图...按下键盘 Esc 键或者点击关闭按钮可輕鬆關閉圖層,圖片流覽的體驗度是遠遠大於未使用的 Lightbox 的網站。 實現思路 大概思路就在每个图片的点击事件中添加图层与图片副本。...fancybox 是一個完善的 lightbox 插件 jQuery lightbox script for displaying images, videos and more....Quick start Add latest jQuery and fancyBox files 1 2 3 4 jquery.com/jquery-...="/path/to/jquery.fancybox.min.js"> Create links 1 2 3 4 5 6 7 fancybox="gallery" href
避免空的 src 和 href 使用 gzip 压缩内容 把 CSS 放到顶部 把 JS 放到底部 避免使用 CSS 表达式 将 CSS 和 JS 放到外部文件中 减少 DNS 查找次数 精简 CSS.../public/lib/fancybox/source/jquery.fancybox.pack.js', './public/js/src/utils.js', '..../public/lib/fancybox/source/jquery.fancybox.css', './public/css/main.css', '..../If-Modified-Since和Etag/If-None-Match) ,由服务器根据请求中的相关 header 信息来比对结果是否协商缓存命中;若命中,则服务器返回新的响应 header 信息更新缓存中的对应...如果我们有一个命中的 response ,我们返回被缓存的值,否则我们返回一个实时从网络请求 fetch 的结果。