2020-03
18

全屏搜索大功告成

By xrspook @ 20:04:21 归类于: 烂日记

昨天,我把COLOR3模板的搜索功能终于做上去了。从前的搜索都非常简单,就是在网页上做一个输入框,然后再加一个提交按钮,搜索都这样。我有想过要不要在WordPress里形成一个搜索的页面,然后要搜索的话就到那里输入内容然后提交,最后返回搜索结果。这样做显然就绕了一圈,我在任何一个页面想搜索,就必须先到达那里,于是网站就要在那两个地方跳转。对于我来说这个体验肯定是不好的。因为这就意味着又要重新把网页加载一次。直接在任何一个页面就能提交搜索然后反馈得出答案跟多绕一圈差别很大,起码我个人觉得这样很折腾。

现在跟10年前的区别大概在于搜索的花样多了很多,比如现在终于可以通过CSS做出比较好看的效果,从前那只是CSS的一个美好梦想。CSS的改进让我印象深刻的是鼠标悬停时的过渡效果以及半透明的展示。从前要展示半透明,每个浏览器出来的东西还不一样,所以写一个效果还得备着多个浏览器的不同选择版本。如果是Chrome和Firefox还好一点,版本兼容性还不错。如果遇到不同版本的IE,出来的东西千差万别。我没有去研究过现在主流的浏览器都有哪些,但可以肯定的是,非常大一部分用户是的是智能设备,而不是传统的PC电脑,所以即便是看到主流浏览器的使用比例,参考性也不大。

从前,当我有了自己的网站,又或者说我有了自己的blog以后,即便blog在BSP上,我已经试图在做网站优化,尽量的让搜索网站能找到我的东西。但现在我已经完全不在乎那些东西了。所以,我连Google的SEO插件也直接删掉。百度也好,Google也好,其它搜索引擎也好,收不收录,收录多少我根本无所谓,搜索得到,搜索不到,我没兴趣去知道,从前我隔一段时间就会神经病地在搜索网站上找自己,但现在我完全不这么干了。那对我来说毫无意义。比如说我在B站上有了账号,而某些视频的点击率又很高。非常有可能,在搜索网站输入我的网名出来的大都是那些点击率很高的东西,不知道看到多少条才看到我自己的blog,但什么重要,什么不重要,哪些有价值,哪些才是我的代表作,我心里明白,我不需要知你们觉得,我不需要知道网页爬虫觉得。之所以要把网站搞好,是因为我要对自己负责。首先网站要让我自己觉得顺眼好看,我自己用得舒服,其次才是别人的浏览体验到底如何,或者我是否应该根据访客的需求进行改进。这么多年以来,我已经习惯了网站一直都冷冷清清。对我来说,有人评论是稀罕事,没人评论是再正常不过的常态,但因为我每天都会写blog,所以即便没有评论,我也要去那里去看一眼,但非常有可能一天就只看那么一眼。

回到搜索功能这个话题上,这一次我给网站配置的搜索是一个全屏搜索。因为我把链接做在版头的导航栏上,所以blog里任何网页都能到达,但是连接我做得有点隐晦,不是正常人所熟知的那种放大镜,所以要找到那个功能,可能会有点难。搜索很简单,就是点击一个像链接一样东西,然后就会有个全屏的搜索框,把需要搜索的关键字敲进去,回车就能得到结果。那个全屏搜索的界面很简洁,甚至没有提交按钮,只有右上角的一个X,作为关闭窗口。会不会有人不知道如何提交搜索内容,有没有人找不到右上角的X把这个搜索界面关掉呢?我不知道,但我相信,可能会有这种存在。这个炫酷的搜索功能是CSS和JS的配合,但是JS只用了非常简单的两条语句。我在CSS那里用了半透明的句子,从前这种东西在浏览器可能行不通,但现在无论是IE还是非IE,效果都很好。因为我是一个懒到了极点的人,所以在做这种全屏搜索的时候,我并没有加其它特效,比如说渐变。那的确很好看,但意味着要加载更多的语句。现在我已经很满意搜索界面的效果了,我把字体搞得很大。能摸到那个搜索入口,试用过以后,估计会觉得很爽,起码我自己是这么觉得的。

过去几天我就像一个少年一样,改进自己的东西,这种专心致志的感觉非常好。

2020-03
17

页码导航,搞定!

By xrspook @ 10:44:11 归类于: 烂日记

昨天突然发现,备份下来的COLOR3模板的截图是2014年的,所以这个模板是不是没有10年历史这么悠久呢?WordPress我用了10年,但这个模板用了多少年?我真的没有仔细翻查过资料。(发布这篇blog之前我又验证了一下,COLOR3的确是2010年的作品)。就怪当年设计好模板之后,我没有在上面标注时间,现在完成改版以后,我会在CSS上标注上版本的更新信息。我会不会把这个模板用一辈子呢?真不知道,又或者不知道多年以后我不用WordPress了呢。

昨天我把之前用插件解决的页码导航也实现了,但实际上不知道从第几个版本的WordPress开始,已经内置了页码导航,但很多个版本的官方标准模板上面的只有上一页和下一页。上一页跟下一页的设置非常原始,对内容有非常多的blog来说,这简直就是把人杀死的节奏,虽然有一点观察力的访客会发现,除了主页是没有页码以外,只要你翻到第2页,从网址上你就已经能看到页码了,所以接下来你只需要天马行空地在那里输入你想要的数字,就能跳转到那个地方,但问题是,对一个路人甲来说。页面只显示了上一页跟下一页,但最后一页是多少呢?难道还要搞一个猜谜游戏?于是,这又让我想起了那个什么逼近法。用靠谱的页码导航就不会有这种烦恼,那些算数问题全部都留给服务器了,因为任何一个导航页面都会有首页和最后一页的锚点(最后一页其实是算出来的),上一页跟下一页的锚点也是有的,当然如果那是最前头和最末末,会缺少了其中一个方向的锚点。中间的页面要展示多少个锚点,系统预留了控制点。我不知道这么好用的功能,为什么WordPress不把它光明正大读放出来,当然,没有很光明正大放出来的还有很多神奇的函数,比如,里面有很好几个预设参数,没有评论的时候可以显示一个信息,一条评论的时候可以显示一个信息,多条评论的时候可以显示一个信息,不允许评论的时候又可以有另外一个信息。对中文用户来说,一条评论和多条评论从语句设定上没有区别,但是,对英文来说,就有一个单数跟复数的区别,WordPress是外国人开发的,当然就会有把这两种分开来预设。昨天我没花什么功夫就找到了WordPress原生自带的那个页码导航,这纯粹是我运气好,万一我搜索了好几个小时才找到呢?找到那个原生的函数以后,我只需要对里面的东西进行格式化。WordPress肯定也知道。他们没有格式过的界面是没办法直接使用的,所以早就放好了各种关键字,只要你对那些东西进行合适的处理,就能做出你想要的效果。

在使用原生页码导航之前我查看了WordPress最新官方模板2020的代码,那个模板用的就是原生的页码导航,但经过高度的格式化处理。不知道现在的开发理念是不是区块管理,所以在2020模板里一个php又引用了另外无数的php。一个模板里有好几个文件夹,一个文件夹里有好几个php。当你打开一个以后,你不得不又继续跳到另外一个,继续有可能还要到其它地方。我是个很懒惰的人,基本上我把我需要引用的函数都丢到我的functions.php里。之前的COLOR3有好几个sidebar相关的php,但现在通过用函数判断,我直接把它们都缩到一个里。十年之前的COLOR3,基本上我都只是对CSS动刀,但现在,我会自己研究php里面的判断。其实无论是哪个编程语言,我觉得最终都可以变成简单的几条。第1条是分配,第2条是判断,第3条是循环,第4条是输出。基本上可以这么说,所有编程语言都在玩这几条,尤其是判断跟循环,不断地组合搭配,就能得出你想要的东西。现在回想起来,当年学习C语言的时候,冒泡法基本上可以被称作是终极大boss。当时老师觉得那是教学大纲里最高端的了,搞懂了那个,其它基本上不成问题,而冒泡法这种东西,连老师自己上课的时候也说得小心翼翼,因为她自己也没达到可以随便就脱口而出谈冒泡法的境界。估计现在再让我去冒泡法,我会得心应手很多。

大概当我彻底完成COLOR3模板升级以后,我会重新开始学习Java。几年前那本深入浅出学习Java的书看得我直接投降,因为后面的习题我就没做对几个,如果现在再去看的话,估计会有一些长进了。

2020-03
16

背景颜色

By xrspook @ 11:58:14 归类于: 烂日记

又花了一个下午的时间,我总算把超链接给搞定了。之前我就已经发现了那么个现象,如果我为一个图片做超链接,而那个超连接的默认的格式有悬停背景色的时候,无论我怎么整,图片下方都会有一条线,问题只是,那条线是粗还是细。昨天我遇到的问题是我需要在三个64*64像素的小图片上面做超链接。三个的图片完全没有文字,让人很绝望的无论我如何操作,那三个图片下面都有一个64*17的超链接方块,从颜色看来,那就是我在那个区域设定的超链接背景颜色。无论我怎么设置,分辨出来的东西还是会有那个颜色。之所以会是17,是因为我把文字的高度设定为16px。最终我终于记起了一条规定,如果之前你没有对某个元素设定规则的话,后面你可以重新为这个元素设定格式,但有些如果前面你已经设定了格式,后面,你又要推翻这个格式,并把它变成无格式的话,这是不可能的,除非我祭出大招“!important”。我在某片区域对超连接设定了背景颜色。但是在某些特定的情况之下,我又要把背景颜色去掉,单纯的background-color:transparent做不到的,但假如暴力的“!important”就可以。要去掉那个背景颜色,在不加“!important”的前提下,我把超链接的颜色设置为和那片区域背景颜色一致,所以颜色虽然存在,但就不会被看到了,但这么低端的做法CSS维护的时候就麻烦了。这个让我纠结了一个下午的事从前我也就结果,但因为太久远,已经忘记了。

昨天我匆匆把翻新过的COLOR3模板上线,感觉还不错。其实我也没改什么,主要是一些功能完善以及格式上的东西。我还专门找了一个色卡的网站去研究到底背景要用什么颜色。最普通的是浅灰色,但是那实在太普通了,然后我把黄色,橙色,粉色,蓝色,绿色,这几种很浅的马卡龙颜色都试了一遍,感觉有点怪怪的。说不准到底是为什么,反正就是和主体区域的白色混搭起来会有点刺眼。另外一个让我纠结的就是版头的颜色,之前我用的是纯黄色和纯橙色。这两个颜色加起来会让人有酸酸甜甜的热烈感觉,但是跟那些浅色混在一起,会莫名地让人觉得刺眼。以前模板的背景颜色是白色,同样也是橙色和黄色之所以没感觉刺眼,是因为我在所有板块外面都加了5px的边框,而这一次我把5px的边框全部都去掉了。之所以要去掉边框,是因为某一次,不知道谁留言说,我那些黑色的边框让人觉得辣眼睛。看到那条评论的时候,我马上实验在网页上实时修改掉那些边框,但只是单纯去掉边框,就像PS掉大熊猫的黑眼圈一样,怪怪的。当我对版头和背景颜色一筹莫展的时候,我顺手写了个纯黑色背景上去,出乎我意料,效果非常好,简直是让人有惊艳的感觉!外围黑色让核心部分的内容更加突出提神。因为高对比度,5px的黑色边框根本不需要存在。除了黑色以外,我也在网站上实时测试了其他颜色,发现用深色效果都挺好,所以我可以根据心情,随便换颜色。比如喜庆的时候换个纯红色。几乎可以这么说,只要是偏深的颜色都适合当我的背景颜色,因为主体区域我用的是鲜艳的颜色。

我不是一个美工,我总喜欢把东西弄得很整齐而已。真正的美工大概都很在乎意境,所以我永远都到达不了他们的境界。

2020-03
13

减法

By xrspook @ 8:47:49 归类于: 烂日记

插件能解决的问题,为什么要自己写代码呢?东拼西凑代码就能解决的问题,为什么还要把那加到小工具里呢?我也不知道我为什么要这么纠结,以前我从来没有这么纠结过,但是那是以前。回看10年前自己做的WordPress模板,从现在的角度去考虑,其实很多地方我已经冥思苦想了,因为至今要我给出一个更好的解决方案,尚且无能。当时,我之所以把这个模板叫做COLOR3。因为英语的THREE和FREE的发音比较类似,完全翻译成中文就是色彩飞扬,因为我在模板里面加入了好多颜色,几乎可以说是五颜六色。我用了很多颜色,但是我几乎没用图片。整个模板里我只用了三张小图。为了找到那三张适合的图,我寻觅了不少图库。在那个时候我的这种做法是比较大胆的,因为基本上主流好看的模板都需要有不少小型图片支持,之所以是小型,是因为即便只是小小的一块图片也可以通过横向纵向重复的方式扩展成无限大小的大图案。从好看的角度考虑,背景用一大张高像素的图当然厉害,但是大图的体积也非常大。如果遇到网速不好,又或者服务器糟糕的话,非常有可能路人已经看完了你的网站,你的背景图片都还没加载出来。在我设计COLOR3的时候,我非常注重网站的加载速度,因为我的blog的服务器放在国外,所以从中国访问速度肯定会有点慢。也正是因为我在模板里几乎没有加入图片,所以我不需要考虑把网站的图片放哪里这种问题。不过我为网站设定了一个ico。那个东西极小,但是一旦被收藏,可以有很高的识别度。设计模板的时候我没加图片,因为我觉得真正吸引读者目光的应该是文章本身。可能是文章的文字,可能是文章的配图。从前好长一段时间,每篇文章我都几乎会配图,但是后来,配图这种事对我来说变成极小概率事件。从2014年夏天开始到2020年,在这超过15年里,我每天都写至少一篇。5400多篇日志,想想都觉得很疯狂。对别人来说,基本上数不出什么当年今日的日志有多少,但我可以数出一大堆。所以很多人blog里版块的链接有随机文章,相关文章,最近文章,热评文章之类的东西,但是对我来说,一个当年今日已经足够震撼了。刚好当年今日这个功能,其实根本没必要用插件去实现,简单的语句就可以做到。在10年前,我做COLOR3的时候,我就把插件的语句直接放到了模板的function里面。但是,那只是把php引用的代码具体的模板里,是定死的。那种自由远不如把当年今日做成一个小工具。小工具意味着可以对不同功能的东西进行区块管理。几乎可以这么说,有无限排列组合的可能。对低端人士来说,你有多少个箱子、有多少个工具,你就只能对那些进行排列组合,但是,对高端人士来说,无论是小工具还是放小工具的箱子,都是想有多少,就有多少的。之前,我只会创造箱子,但昨天,我连小工具都有点懂得该如何模仿组装了。

10年前,我通过插件让blog在文章链接上面开了挂。10年后,我选择的是要开挂,自己来,能节省,就绝不开挂。

2017-09
7

改模板

By xrspook @ 12:42:21 归类于: 烂日记

昨天提到的我的天模板问题,很快就解决了。我同时用Win7 22寸宽屏的显示器以及XP 10.1寸的小笔记本测试。同样使用Firefox浏览器,Win7用的版本是50的,XP用的版本是40的,因为往后Firefox就再也不支持XP系统了。文章评论提交按钮的问题很好解决,原来按钮的宽度是100px,这容不下“Submit Comment”这么多字符,所以我改为120px了,我也试过用150px,也没什么问题,因为按钮我设置了字体横向居中,但如果120px就能搞定,我也就没必要用150px了。至于版头的导航栏有点麻烦。XP系统下默认字体是宋体,Win7系统默认字体是微软雅黑。我的天整个网页我都对字体做了设定,用的单位是px,但问题是宋体和雅黑同样是15px,Firefox辅助网页编辑插件计算出来的大小是29,而雅黑是31。在不同的系统、不同的显示器分辨率之下,同样是宋体,XP在10.1寸是27,Win7在22英寸是29。这样的数据差异绝对会整死人的!!!因为我的版头导航分为2个部分,一左一右,为了要把左右分开,所以必须用float:left;和float:right。float之后是ul,ul下面是li。ul没有一个固定的高度,ul的高度是由下一级的li去确定的。ul在id nav之下,nav设定了一个绝对的高度定位,nav就是float:left的元素,只有这般绝对定位了,nav才不会跑到我的网站标题前面。但绝对定位遇到不同系统不同浏览器不同字体发生的字体大小差异几乎算是一个打不开的结。在更大的显示器分辨率和默认雅黑字体下,无论如何浏览器计算出来的字体大小都要比宋体大。在Win7下,尤其是在浏览器里看过宋体和雅黑的都会觉得雅黑更舒服。之前设计Color3模板的时候我用的是XP搭配17寸的方屏,默认字体是宋体,所以当网页用雅黑字体浏览的时候就会出问题。问题也不是很严重,就是那个导航栏的按钮会有点压在我的border框上。让所有浏览器都必须使用宋体或者雅黑作为默认字体是不可能的,所以最终我只能遵循我在Win7系统22寸显示器,Firefox 55.0.3下计算出的状况来调整。最终我把nav的绝对定位从之前的100px改成了96px,这就保证了在Win7雅黑的情况下版头导航栏是完美的。然后我把nav ul li设置了固定高度height:31px,如果没有这一条,在XP宋体的时候导航栏和下边框之间会有条线,如果这般设置了,那条线将和鼠标不覆盖导航栏鼠标特效之前的导航栏颜色一致。即便鼠标处在hover的状态,不过等于是按键下面多了一条特殊的颜色。有些网页是故意做这种特效的,所以我觉得从美观上还能接受。不知道现在还有多少用XP的人会访问我的网页,估计用移动终端的更多吧。移动终端默认会用插件的移动界面,所以那里看到的不是我设计的Color3模板。所以呢,最终Color3模板是给谁看的呢?大概目标人群就只是我自己吧。

昨天从上午开始就在折腾Access,到下午下班之前思路理清了,但还是没办法解决我的联合查询,于是我就找网友帮忙了。他秒杀就解决了我的问题,我折腾了那么一大轮原来最终跪在了一个拖放的字段关联操作上。如果没有高人指点,我自己折腾一个星期都不会想得出还可以这样,因为我已经把所有右键以及菜单栏里的详细菜单都翻遍了。如果我真找不到可视化操作方式,我也可以用SQL语句实现那样的关联,具体语句是“31 INNER JOIN 32 ON [31].ID=[32].ID”(把表31的ID字段和32的ID字段关联),然后就可以在查询里一次性地筛选合并出31和32的内容了。这一点很多人都能想到,但具体该怎么操作则需要知识。我学习Access的路还有很长~

研究代码是个烧脑的过程,但又不会太剧烈。

归档:2017-09-07 Taare Zammen Par

© 2004 - 2020 我的天 | Theme by xrspook | Power by WordPress