分类目录归档:HTML 类别

将自己网站的搜索功能加入到Chrome Tab中

在使用 Chrome 浏览器的时候,你肯定会发现,在地址栏输入 google.com, bing.com 等网站时,右侧会出现按 Tab 进行搜索的功能,免去了先进入页面再进行搜索的步骤。如果你也想要此功能,那就继续看吧~

实现原理

怎么让浏览器知道你的网站有搜索功能?

非主动添加情况

在使用 Chrome 访问一个网站时,Chrome 会先查看有没有定义 OpenSearch XML,如果没有的话,会在网页中找有没有这样一个表单:

  1. 表单以GET方式提交(POST不可以);
  2. 表单的提交url为HTTP协议的(HTTPS不可以);
  3. 表单没有附加onSubmit事件(确保提交过程不被用户代码干涉);
  4. 表单中仅包含一个input输入框,而且类型为text(其他类型的都不可以,多余的控件也都不可以)

如果有这样一个表单,Chrome会认为这是一个搜索框,并根据这个表单的信息推断出这个网站的搜索方法。具体可以查看 Chrome 文档说明

主动添加情况

如果 Chrome 没有自动识别上,我们只要遵循 OpenSearch XML 协议告诉 Chrome 即可,而且配置方法简单,无需对服务器改造。

前提条件

你的网站必须有搜索功能,且搜索链接较为固定,例如:

// 我的网站搜索格式
https://www.nousbuild.org/search/?q=搜索词

// Bing 的搜索格式
https://cn.bing.com/search?q=搜索词

// Google 的搜索格式
https://www.google.com/search?q=搜索词

// Baidu 的搜索格式
https://www.baidu.com/s?wd=搜索词

即,只要替换 关键词 的内容,即可进行搜索。

OpenSearch 协议

OpenSearch 是用于共享搜索结果的简单格式集合,在 Github 项目中,你可以查看到最新的、详细的说明:点击此处

截至此文章发布,目前最新的协议版本是 OpenSearch 1.1 Draft 6,请尽可能的查看最新说明。

实现操作

下面开始如何操作吧。首先在 首页 <header> 处添加一条 <link> 声明,仅仅在网站首页添加即可:

<link rel="search" type="application/opensearchdescription+xml" href="http://www.nousbuild.org/opensearch.xml" title="SA Search">

你只要修改 title=”网站名称/搜索引擎名称”, href=”xml文件的地址” 即可,建议使用绝对连接(即使支持https协议也建议写成http协议)。

接下来就是新建一个 XML 文件(opensearch.xml):

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<ShortName>SA Search</ShortName>
	<Description>Search SA Website</Description>
	<Url type="text/html" method="get" template="http://www.nousbuild.org/search/?q={searchTerms}"/>
</OpenSearchDescription>

我只定义了三个属性,ShortName 表示搜索引擎的名字,Description 表示搜索引擎的描述,Url 表示刚刚说的你的固定搜索格式,你只需将上面说的 关键词 替换为 {searchTerms} 即可 (同样,即使支持https协议也建议写成http协议)。

到此,大功告成,上传更新即可。

除了此方法定义外,还有 JavaScritp 定义当方法等,你可以自行继续阅读官方文档。

继续阅读将自己网站的搜索功能加入到Chrome Tab中

小喵心语

小喵心语 是我的原创校园漫画《那些年的校园与我们》发行的小程序平台。

小喵心语开发 v1.0

有了第一次开发小程序的经验,这一次开发起来就很游刃有余了。这一次我并不打算将漫画用网页版的形式发布与共享,而使用小程序,原因有以下几点:

  1. 因为小程序内不可以保存漫画图片(顶多就是截图,你能有我的宽2048px分片率的图片高?),达到一定程度的版权保护。
  2. 漫画故事由中学真人真事改编,向互联网所有访问者公布也不太好。再一个朋友、同学使用微信还是比较多的,也有利于仅在朋友圈范围内传播分享,这样更合适一些。
  3. 虽然小程序是个鸡肋,不看齐HTML5标准,但是坐拥10亿用户的微信,还是稍微开发练个手吧。

所需功能

作为一个小范围的漫画小程序,就需要一个不太难看的UI,和一个动态更新漫画的后台就可以了,有时间的话,还可以个彩蛋来活跃活跃氛围。

所以就需要至少2个页面就可以了,一个是主页,另一个就是漫画页面,能随着漫画的更新而更新。

我就用猫怎么了?!你管我~ 当然了,还有一个彩蛋页面,就看你能不能发现啦!!

这真的是后台吗?

没错,你没看错,后台就是这个不起眼的 .json 文件(是不是大跌眼镜),一个 .json 足够了,毕竟重点是画漫画啊!

当然,现在小程序有了云开发功能,你也可以使用小程序的云数据库作为后台开发:

当然,有个小坑,setData() 的时候注意留意一下数据有没有被写入。

与用别人的 API 不同的是,自己的 .json 完全自己定啊!想要什么类别就定什么类别,超级方便,还不用心里默默的吐槽这个 API 设定怎么会这么反人类。

小喵心语开发 v2.0

嗨!我又回来啦,现在距小喵心语 1.0 版本开发已经过去2个月啦,其实今年1月30日我就提交了 2.0 版本的小喵心语,并在过年后逐步更新并增强稳定性。那为什么等到 3 月底才继续更新这篇文章呢?原因是,懒!哈哈哈,其实是在学机器学习,并且又写了个小喵心语官网出来 cattalk.nousbuild.org,方便无微信或者讨厌微信的伙伴们看漫画的。

2.0 版小喵心语小程序与 1.0 版最大的区别就是以下两点:

  1. UI 更新,页面增加,功能分割更清晰。
  2. 更新使用 小程序云开发 可以增加更多互动功能。

UI与页面的调整

与 1.0 版的两个主页面不同,2.0 版增加到四个主页面,独立出了「表情包」页面,新增加了「个人中心」页面,整体 UI 进行了优化,并没有过大的改动。

找表情包更方便了,按人物归类,还有多人互动表情等你发现。我还专门写了表情添加教程,方便大家参考。

云开发

使用云开发,在节省服务器成本的同时,还可以与微信账户进行更多交互,例如用户登录、留言、反馈机制等等。

云开发比服务器端代码更简单、简洁,使用也非常方便。虽然功能、权限、可拓展性根本不是服务器对手,但是对于个人小型开发项目,还是很有用的。

邀你看漫画

快去看漫画吧!进入小程序或者访问 小喵心语官网

或者来看看漫画的创作中的故事,看这篇文章

使用手机 QQ / 微信扫描下方小程序码也可以观看哦~

利用HTML代码下载配有HTTP_REFERER验证的文件

现在很多服务器,都有引入判断函数,能够判断出,终端调用链接的方式,从而阻止一些盗链和禁止下载的行为。

就拿必应搜索来说:

html-download-bing-1

通过HTML源代码或者获取并还原了图片或视频的下载地址的时候,单独访问文件地址,则会出现无效链接的情况:

html-download-bing-wrong

链接其实是没有问题的,只是必应最近增加的判断链接调用方式的函数,使得直接访问文件的方式失效。想要下载必应中的图片或者视频,就必须骗过验证。

借助于 IE 的 F12开发人员工具,我们可以查看出两种请求方式的区别:

从必应网站访问:

html-download-bing-source

直接访问文件地址:html-download-bing-http-get

对比就是:

html-download-bing-referer

两者的区别就是 Referer。HTTP Referer是header的一部分,当浏览器向 Web服务器 发送 Get请求 的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。

除了使用 BurpSuite 修改抓包信息外,比较简单的方法是自己构造。所以,我们就要将调用视频链接地址的方式,

使用 <body></body> 调用

新建一个HTML文档,在<body></body>中调用视频:

html-download-bing-code

然后再本地打开文档,另存为保存文件,即可下载:

html-download-bing-downloading

继续阅读利用HTML代码下载配有HTTP_REFERER验证的文件

Apple的0.03em,却让你望其项背

 苹果在工业设计方面,一向是追求极致的,这无可争议。其实,在苹果中,处处都能找到用心的设计,这一次来看看苹果的网页设计是如何折服你的。

在苹果的 OS X EI Capitan 的介绍页面,下面有一句说明:OS_X_El_Capitan_logo_svg

“There’s more to love with every click”

点击 OS X 图标查看 Apple 镜像页面 →

很高兴你没有把 click 认成 dick,这这一定程度上,得益于苹果的用心设计。下面来细细看一下:

OS X EI

苹果非常用心的单独对 click 使用了一个 <span></span> HTML标签独立出来,单独使用CSS调整字符间距,使每一个字符间距增大0.03em,使得你不会将 d 分辨为 cl.

OS X EI3

CSS3修饰代码如下:

apple-osx-ei-css3-code

调整一下,取消掉 click 的0.03em增量,来看看对比的效果:

OS X comparison

我们再来调整为 -0.08,看一下夸张的效果:

OS X EI -0.08

不要在意这小小的0.03em,它可能让别人对你望其项背,这种对于设计一丝不苟的敬业精神,是很值得我们学习的!

继续阅读Apple的0.03em,却让你望其项背

CSS简单滚动条样式

浏览器的默认滚动条发展到今天,已经发展到很简约的风格了,但有时候为了更好的显示效果,我们可以利用CSS代码,简单的修改一下滚动条的样式。

展示效果:Demo

浏览器的支持:

仅支持 Internet Explorer,不支持 Chrome 和 Microsoft Edge

CSS代码规则如下:

先来看一下引入的CSS代码样式的格式:

SCROLLBAR-ARROW-COLOR: color; //箭头颜色
SCROLLBAR-FACE-COLOR: color;  //箭头和滚动条面板颜色
SCROLLBAR-DARKSHADOW-COLOR: color; //滚动条右下方颜色
SCROLLBAR-HIGHLIGHT-COLOR: color;  //滚动条左上方颜色
SCROLLBAR-3DLIGHT-COLOR: color;  //滚动条边缘左上颜色
SCROLLBAR-SHADOW-COLOR: color;   //滚动条边缘右下颜色
SCROLLBAR-TRACK-COLOR: color;  //滚动区域底层颜色

我们很容易可以看出每一条声明规则应用的范围;同时,还可以使用Scrollbar呈现出代码和结果:

scrollbar-settings

继续阅读CSS简单滚动条样式