在博客的左上角增加了搜索按钮

2016-01-13 09:35:29 884 views

最近阅读了不少有关 WordPress 的文章,甚至在手机上所安装的一些新闻客户端里都订阅了有关 wordpress 的话题,据称全球有超过 25% 的网站使用 wordpress 驱动,对此我也深信不疑。

昨晚在看一篇文章的时候发现了一款比较不错的移动端主题,就想着借鉴一些理念对博客再进行优化一下。本博客前身为晓午林枫博客,自从后来更换了域名和博客名称,晓午林枫这个代号也逐渐在网络世界中淡化了,我之前也为网站做过安卓客户端,还上线到豌豆荚等应用商店中过,因为对程序语言几乎是一无所知,制作客户端我都是采用最简单的方法:直接调用安卓的 webview 组件打开博客。这种思路实现起来就是在网上找代码,用开发工具结合实际修改,嵌入自己的网址,最后打包成 apk 就可以了。这样的客户端把所有的界面问题都抛给了网站,也正是我思考如何改版网站的重要原因,借鉴了一些原生 app 的界面风格,加上 WordPress 强大的可定制性,现在博客就成了这个样子,我还在不断完善,反正就是先发现问题,再想办法解决。

今天其实对网站的调整也是很小的,在左上角添加了一个搜索按钮,关于那个放大镜的图标(电脑端会隐藏显示),我权衡了一下两种方案:其一是使用图标字体,其二是使用图片。想了一下,使用字体的话太浪费资源了,我还得在网站上多嵌入一个好几十 kb 的字体文件,于是就采用了第二种方案,在网页中有一种图片格式非常好用:.svg,主要是它有一个特征,这种格式是矢量的,无论怎么缩放都不会变得模糊而失真,于是我参考了网上的一些搜索图标,用 AI 软件自己画了一个,目前看起来还比较满意,但也不排除以后修改的可能。

有了图标就是代码实现了,这个过程花了不少时间,我对 JavaScript 是真的不太懂,至少目前是这样,测试了一些网上的代码,在我这儿总会有小问题,比如显示按钮和隐藏按钮是分开的,再比如点击显示出来了却消失不了……后来终于找到一个可以用的代码,修修改改,终于满足了要求,现在点击搜索小图标会出现一个浮动的搜索框,极大的方便了浏览者搜索内容,网站的整体风格也更趋向于一个 app 了。

在不断的尝试与折腾过程中,我对 PHP、JavaScript、HTML、CSS 这些有关网站的语言也有了一点更深入的理解,甚至有点喜欢上编程了,今天用来实现搜索按钮的这段代码可能还会用到其它地方。

文章最后,我还是打个广告吧,希望大家能够下载我的客户端软件体验一下,功能和原理确实非常简单,只是用来浏览本博客的文章,没什么特色,但我会继续努力。下载方式呢,就是在本站搜索“客户端”就可以找到下载地址了,当然,你也可以选择本博客前身的客户端软件“晓午林枫”,该软件已经上线到豌豆荚等一些知名的应用商店了,很容易找到,由于采用了相似的开发方案,在核心上与最近更新的这个版本几乎没有区别。更多精彩,请下载体验吧!你们的支持将是我进步的动力,在此表示非常感谢。

亲爱的读者:本文结束了,非常感谢你的阅读。阅读是美意,分享是鼓励,如果觉得本站文章对你有用,请分享文章给你的朋友。你的支持将鼓励我继续创作。本站电脑版此前长期一段时间下线了评论功能,目前已经恢复了,如果需要评论请使用手机访问或直接在下方填写,我们万分期待看到你的留言。

你可以通过下方的评论模块与我们进一步交流,评论内容不会公开展示:


扫码与我联系

★ ★ ★ ★ ★

“感谢你的鼓励与陪伴,我们的坚持才有意义”

创新与发展 – 我的博客网站保留所有权利 欢迎各界朋友与本站交换友情链接或在本站投放广告,如有合作意向请直接与站务联系

测试文字 体验新版 站内搜索 测试文字 鄂ICP备16016329号-1 测试文字 测试文字 测试文字 测试文字