分类目录归档:Code

将自己网站的搜索功能加入到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中

树莓派当作局域网外接设备

树莓派可以安装 Samba 来搭建 NAS 系统,这样在家里看高清电影的时候,就不需要用 U 盘拷贝电影再插入到电视上播放,可以直接利用局域网实现秒传,秒播放。

安装 Samba

在执行安装前,还是老样子,先来一波例常更新准备:

sudo apt-get update && apt-get upgrade

更新完毕后,运行安装:

建议全部安装,如果你的树莓派 IPMac地址 没有绑定,那么我强烈建议你安装可选服务,否者你的树莓派内网地址可能会发生变化,你需要在电视上每次都手动更改。当然你也可以选择不安装。

sudo apt-get install samba samba-common-bin
sudo apt-get install netatalk (可选,用于支持AFP)
sudo apt-get install avahi-daemon(可选,用于支持网内的计算机自动发现)

安装过程中,可能会出现以下对话框:

你需要查看一下你的路由器是不是使用了 DHCP 服务:

其实你也可以不看,一般来说,咱们家用的宽带服务,都要开启 DHCP 服务才行;校园网的话,应该是不适用 DHCP,总之具体情况分清楚就好。

配置 Samba

我们要修改 etc/samba/smb.conf 这个文件

首先,一定要把 [homes] [printers] 这两个屏蔽(包括所有附属的内容),不然无法实现免密码。有的智能电视是不支持账户密码登陆的(比如我家的长虹),虽然能检测到,但是就是进不去。

然后在文件后面增加下面配置:

[share]
 comment = share
 path = /home/pi
 read only = no
 create mask = 0777
 directory mask = 0777
 guest ok = yes
 browseable = yes
 public = yes
 writable = yes

两种操作方法,自己选一种习惯的:

方法一(VI文本编辑):

sudo nano /etc/samba/smb.conf

方法二(手动修改):

先获取文件权限:

sudo chmod -R 777 /etc/samba

然后双击打开文件修改,然后保存。

[homes] 以及下方缩进行,都要用 # 注释掉:

[printers] 以及下方缩进行,都要用 # 注释掉:

添加用户

直接添加咱们的默认用户 pi 即可:

smbpasswd -a pi

然后再激活用户:

smbpasswd -e pi

重启 Samba

最后一步完成后,重启即可:

sudo smbd restart

电视测试

我打开电视,进入本地设备,就直接能发现树莓派。如果你没有安装可选服务,可能需要自己手动添加共享设备。

打开后,我们发现就是整个树莓派的目录,所以你把文件放在桌面,Videos 文件夹 或者其他地方都可以。

我在桌面刚刚上传了一个 晚安喵 的视频,现在打开看看:

嗯,看来没什么问题,速度也很快。

其他问题

  1. 如何将文件传到树莓派?你可以使用 FTP 或者 VNC 自带的传输工具;
  2. 播放卡顿?你看看树莓派是不是用有线连接,无线的话可能会慢;路由器是不是局域网300M传输带宽?你的 SD卡 或者 TF卡 是不是 Class 10 或者更高等级?
  3. 空间不够?你可以更换更大的 SD/TF卡 或者给树莓派插 U 盘、挂载硬盘等。

如仍有问题,可以留言并留下联系方式以便回复,或者直接给我发邮件。

继续阅读树莓派当作局域网外接设备

网页自定义Facebook/Twitter/QQ/微信分享预览

我们幸幸苦苦做完网站后或多或少都会分享链接,如何让我们分享的链接分享更好看呢?就需要对各主流平台一一进行内容配置。

Facebook 的 Open Graph 和 Twitter Card 想必我们都很了解,使用相应的 meta 标签,定义相关内容即可。

Facebook

挑一些重点来说,一般常用的就如下几个:

<!-- Facebook Open Graph -->

<meta property="og:site_name" content="图筑风暻" />
<meta property="og:url" content="nousbuild.org" />
<meta property="og:title" content="图筑风暻" />
<meta property="og:image" content="http://nousbuild.org/icon.png" />
<meta property="og:description" content="欢迎访问图筑风暻官网。" />

如果需要更多 meta 标签,你可以访问 Facebook 页面,或是 The Open Graph protocol 查看:

地址:Facbook Open Graph(可能需要科学上网)

地址:The Open Graph protocol

Twitter

Twitter 采用的也是 meta 标签,只是标记不同,常用的如下:

<!-- Twitter Card -->

<meta name='twitter:card' content='欢迎访问图筑风暻官网。' />
<meta name='twitter:site' content='@图筑风暻' />
<meta name="twitter:url" content="nousbuild.org" />
<meta name='twitter:title' content='图筑风暻 | Scenery Architecture' />
<meta name='twitter:image' content='http://nousbuild.org/icon.png' />
<meta name='twitter:description' content='欢迎访问图筑风暻官网。' />

用法也不用多说,大家肯定都很熟悉,如果需要更多 meta 标签,你可以访问 Twitter 页面:

地址:Twitter Card(可能需要科学上网)

QQ

咱们主流的社交软件当然是就是 QQ 和 微信了,下面先来介绍 QQ 链接自定义预览的方法吧:

<!-- QQ Sharing -->

<meta itemprop="name" content="图筑风暻" />
<meta itemprop="image" content="http://nousbuild.org/icon.png" />
<meta name="description" itemprop="description" content="Scenery Architecture" />

QQ 非常人性化,使用了通用标准,在 QQ移动Web开发平台 中可以看到示例:

也非常简单,仅仅只有 标题、缩略图、站点描述或内容,三个标签。

微信

最后一个,微信。为什么把微信放到最后一个写?是因为重要吗。当但不是!我放到最后一个仅仅是因为微信是最坑的一个!

你访问微信 JSSDK 文档会发现,仅仅只有引入 js 的方法,凭什么一个简单功能我还要引入微信的 js,不仅拖累加载速度,而且三天两头随意更改规则!气愤!!

于是我开始看看其他大企业的官网网站都是怎么设置的,直到我看到了星巴克的中文官网

让我们查看下星巴克的源代码:

星爸爸真是很良心的帮我们把注释的写好了,最底下的这个就是我们要的:

<!-- WeChat Sharing -->

<script>
  var WECHAT_TITLE = '图筑风暻';
  var WECHAT_DESC = 'Scenery Architecture';
  var WECHAT_IMAGE = 'http://www.nousbuild.org/icon.png';
  var WCHAT_NO_GA = '';
</script>

怎么样,很奇葩的使用了 js 模块来实现,而且插入 <script> 会导致此文章保存错误,真是坑。微信目前我发现了只有 标题、缩略图、站点描述或内容,三个标签。由于找不到官方资料,如果以后发现还有更多标签,我在更新此文章。

注意问题

最后说几个注意问题:

  1. 顺序。有时候你的通用 meta 标签在微信标签之前,读取时有时候会直接读取通用 meta 标签的内容,如果你的微信标签的题目与通用标签的题目不一致,很可能在分享链接时会出现内容替换。
  2. 缩略图。缩略图的链接如果使用相对链接出现问题,建议该用绝对链接。图片最好是正方形,尺寸大于等于300px。

如果你找到更多内容,欢迎评论交流。

继续阅读网页自定义Facebook/Twitter/QQ/微信分享预览

小喵心语

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

小喵心语开发 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 进行了优化,并没有过大的改动。

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

云开发

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

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

邀你看漫画

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

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

继续阅读小喵心语

Windows/macOS/Linux下批量修改后缀名

Windows, macOS, Linux 系统下都有操作简单的批量修改后缀名的方法,无需安装或借助额外的工具,原生的操作系统即可进行批量操作。

我们可能经常需要在网络上获取资源,而有些网站的媒体文件没有后缀名,并使用 Javascript 或是相关加密播放工具在线预览和播放。当我们批量下载完这些没有后缀名的媒体文件后,如何批量修改呢?

Windows

Windows 操作系统有自己的 .bat 批处理文件,而且语法简单、操作简便,是不二之选。

Rename 命令就是我们需要的,一行语法即可搞定,下面以 .jpg 后缀批量修改为 .png 后缀为例:

ren *.jpg *.png

// * 是指后缀名之前的文件名称的通配符
// 红色 *.jpg 现在的文件后缀名
// 蓝色 *.png 想要修改后的文件后缀名

通配符一般分为两种:

星号(*) 可以代替0个或多个字符
问号(?) 可以代替一个字符

在记事本中输入后,另存为 .bat 文件,将 .bat 文件与要修改后缀名的文件放置在同一个文件夹中,运行 .bat 批处理文件即可。

下面,问题来了,如果是没有后缀名的文件,想要加上后缀名该怎么办呢?

ren * *.jpg

直接用 * 匹配名称即可,这里有一个问题,会将 .bat 批处理文件也修改为目标后缀名,其实影响不大,批处理指令我们使用完成后也会删除,如果你想要保留 .bat 批处理文件,可以使用 cd 添加执行目录

cd C:\Users\haoning\Desktop\add-jpg
ren * *.jpg

// cd 后路径为要修改的媒体文件文件夹地址
macOS & Linux

macOS 与 Linux 操作系统,那就要使用 Shell脚本 来完成这个任务啦!

Shell 语句总共分为三行:路径操作完成,以 .jpg 后缀批量修改为 .png 后缀为例:

for i in /Users/wuhaoning/Downloads/*.jpg;
do mv "$i" "${i%.jpg}.png";
done

// 第一行是在macOS“下载”文件夹中读取所有.jpg后缀的文件
// 第二行执行mv指令,现有后缀名写在{}中,目标后缀名写在最后
// 第三行结束sh语句

将以上代码保存为 .sh 后缀的文本格式,然后在 Terminal (终端) 中执行此 Shell 即可:

同理,如果是没有后缀名的文件,想要加上后缀名该怎么办呢?

for i in /Users/wuhaoning/Downloads/*;
do mv "$i" "${i%}.jpg";
done

同理,直接用 * 匹配名称即可,同样也有一个问题,会将 shell 文件也修改为目标后缀名,因为已有执行目录,如果你想要保留 .sh 文件,只需将 .sh 放到执行文件夹以外即可

继续阅读Windows/macOS/Linux下批量修改后缀名