我的天

网页里面的select和option，这两个东西估计是在一开始出现网页的时候就已经有。周三的时候我发现option的hover效果是无论如何设置不了的，你可以设置option的颜色或者背景，但是hover上去没有效果。你也可以通过css设置select的hover或者focus。该怎么设置这个option呢？最后发现是无解的，所以我又研究了一下其他人的替代方案，有些很酷的网站，他们用js写了个脚本，在option的上面又覆盖了一层由li和span组成的东西，所以你看到的特效实际上是有那些产生的，而不是option本身。那个效果非常的炫酷，但是你要引入大量的js，也要引入大量的css。漂亮是要有代价的，这是显然的，本来我已经想好，要模仿其中一个，结果却突然想到它的下拉可能就只有几个选项，但我的下拉有可能有十几二十个选项。我选定的那种款式，默认没有滚动条，所以这该怎么办呢？所以我只能放弃。

周四当我搜索的时候，我又发现了一个英文网站里面用了纯css实现了option的hover，之所以可以做到这样，是因为他在select那里使用了onfocus之类的事件。为什么onfocus之后就可以设置option呢？之前option做不到的东西，加入了那些事件以后就变得可以做到了。接下来你就可以在option里面设置你想要的东西。本来我觉得自己有救了，之所以说本来，是因为后来我又发现了一些很无语的现实。

做的这个静态网站，我觉得受众大多数是用手机打开的。虽然可能他们准备资料的时候是在电脑旁，但是要查询资料的时候，估计他们不会先打开个电脑。所以这就意味着这个网站的开发我得兼容手机和PC。select和option的展示方式，不同浏览器不一样，手机和电脑不一样，不同的手机品牌也不一样。非常有可能在PC上的效果已经设置得如我所愿，但实际上到了手机上还是自动套用了手机经典的款式，所以等于做了个寂寞，与其这么大费周章，还不如直接放弃治疗。同一个手机，不同浏览器出来效果不一样；再换一个平板，虽然内核都是Chrome， 但实际上又会有差别。我不知道那些人是如何做到兼容这有一切的，起码对我来说这实在太难了。所以我只能尽量做到在不同的设备上效果都过得去。所以在选择字体大小上应该用什么样的比例，我又研究了一番。如果完全就只是一个PC的网页，设置好我想要的也就可以了，大概差不多也就那些字体大小，但是手机上看到的东西我感觉比PC上看到的小很多，于是我不得不把字体放大，但是放得太大，PC上就像一个搞笑的存在。以前body的font-size我都是用绝对像素。这一次我不得不采用相对单位。PC上点击用的是鼠标，图标再小，你都可以准确按到，但手机上你用的是手指，所以那个按钮必定不能太小。这些矛盾的东西，当你不是真的碰上的时候，是不会想象得出来的。

最后，我感觉大概差不多就那样了，剩下的事情就只是等待最终的数据源。

我终于做到了用模板的方式以及我自己的数据生成静态网页。暂时我还不知道，那些放进去就能用的格式类东西应该怎么在生成网站的时候顺便一并放进去。肯定是有方法的。虽然现在我手动挪一挪也无所谓。我觉得那大概是一个获取文件，然后解压到目标位置的操作。

jinja的模板套用比我想象中简单。在进行我自己的操作之前，我复制了网上的一个教程的代码，发现真的很容易。模板本身也可以通过浏览器查看效果，这个非常棒。从前BSP不就是干这种事吗？无论是可视化编辑的，还是纯代码操作的，其实都是在设计模板。现在我也终于明白，为什么相比于其它核心功能，在模板方面，我为什么总感觉自己有那么多的经验，因为实际上，我的确在那个方面花了很多时间。现在我已经不记得BlogBus的模板是怎样的了，唯一的印象是他们用的是代码编辑。他们会给你一些核心代码的封装，你可以把那些东西放在指定的某些模板里。封装的东西以外的部分，你可以通过css，或者js去控制，但是封装在里面的，基本上就是一个无药可救的状态了。所以有些格式你觉得你应该可以控制得了，实际上你却做不到，因为封装在里面，已经把格式给写死了。不知道如果我在css那里强行加个important，能不能扭转局面，但显然，当时我根本不知道有important这种东西。css的important的确威力无穷，但是important如果经常用，就会破坏规则，也不好维护。不得已我才会用，即便用了，一个css文件里面，通常不会超过三处。

以前的模板设计，我只是能处理一些格式上的东西。现在，我自己写脚本生成静态网站。无论前台后台，我都玩了，我得顾及前台的模板形式。也要考虑后台的数据整合以及数据的架构类型。在用jinja模板之前，我用的是人肉低端的字符串合并。虽然实际上，我做的低端操作也是实现模板的功能，但就维护来说，这实在太困难了！如果一个网页里面有很多数据是动态的，我就不得不把网页切分为很多份。切着切着，我都不知道自己切到哪里了。就数据生成效率来说。我的低端做法效率会更高，至于为什么，我不知道。9498个页面，我的低端做法转化需要22秒，jinja模板只需要32秒。这个不是偶然事件，在进行9498个页面转化之前，我先进行了一个只有几个页面的测试。结果跟大数据的很类似，低端做法，要比高端做法快1/3。这其中的原因是什么呢？据说jinja已经是个生成速度自称为“快速”的脚本，如果是另外一些，可能更慢。9000多个页面才多10秒钟，任何人都忍受得了。就维护的便捷性来说，低端拼接的维护成本随便超过10秒,所以用jinja模板绝对是值得的。这让我想起了我最在行的邮件合并，用word和Excel联合起来批量生产东西。我不知道其他人玩这个能溜到什么程度，反正这个东西一直都是让我引以为傲的，当然了，这种技能，也是后天逼出来的，工作使然也。

一些我觉得可能挺不容易的东西，居然很轻松就被我攻克了，感觉非常意外。接下来，生成搜索引擎所需的索引，估计不是件容易的事。生成索引，最重要的是思路，而过程不过是一些机械操作而已，我必须掌握好那个思路！

昨天，我把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，效果都很好。因为我是一个懒到了极点的人，所以在做这种全屏搜索的时候，我并没有加其它特效，比如说渐变。那的确很好看，但意味着要加载更多的语句。现在我已经很满意搜索界面的效果了，我把字体搞得很大。能摸到那个搜索入口，试用过以后，估计会觉得很爽，起码我自己是这么觉得的。

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

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

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

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

时间用在查找代码上去得特别快。感觉问题还没解决，时间就已经溜了。大体上看，就只有几个大问题需要解决，但实际上那些东西是完全没有头绪应该怎么去做的。昨天我花了一个下午的时间去处理comments.php。那个模板用来设定在哪里显示评论，哪里显示评论框，这其中还不包括评论框里的具体格式。看上去这是非常简单的事情，实际上，还是要考虑好几个问题，但显然，10年前，做那个模板的时候，我没有在comments.php这个问题上纠结，我顶多是往里面放了一些我设定好的CSS，所以那个部分的逻辑到底是怎样的，我没去修改，沿用的是某个模板。实际上我用的那个模板是不是标准的，我也说不准，因为我实在不记得当年我用作改造的模板是哪一个。因为通常WordPress的官方模板都非常简单，甚至可以说简单过头，于是你不知道该如何在那个的基础之上改造。大概之前，我的那个comments.php测试的时候，我只是考虑了一般情况。但除了正常情况，WordPress里还是会有一些极端情况，比如说某篇日志被设计为密码可见。无论是日志还是评论，在输入密码之前都应该是一片空白。那个模板就很神奇，日志部分已经是提示输入密码才可见，评论部分直接不显示就行了，但实际上，那里居然在会提示一次输入密码才可见，显然这就是画蛇添足了。让我纠结的时间最长的是嵌套格式的代码。因为正文部分我分为左边和右边，左边是文章的主体以及评论框，右边是边栏。这两个板块，一个是float向左，一个向右，一旦代码嵌套不合理，右边的边栏就会进入左边，又或者直接消失，也有可能是因为缺少结束嵌入代码，所以网页底部的东西飞上去了。要解决这些结构格式上的问题，就首先要搞清楚，那些php代码的开始结束位置。比如说某篇文章设定了不允许评论，但是对于已经有的评论，你还是要把它们显示出来，然后在最后一条的那里显示不许再评论。之前我根本没有测试过不许评论这个功能，显然当我在撰写日志的时候设定了不允许评论以后，之前的模板相应网页会出状况。而之所以这样，是因为默认的模板里面我只在if下面添加了足够多的格式结束标签，在else里面没写。不许评论就是else的部分，判定函数应该是评论是否开放，但实际上，不允许评论这句话从结构看来，应该是放在评论列表的最后。这样的风格才会统一，因为有些时候，不许评论之前可能文章已经有评论了，如果硬生生地把那放在允许评论就有评论框，不允许评论评论框消失并写着不允许评论，那样就太生硬了。

我花了几乎一个下午的时间去处comments.php，最后终于搞清了里面的逻辑关系。为了让那些if跟else，以及endif能更好地维护，我在上面做了很多注解，基本上每个的那里我都会写清楚了对应的是哪个，同时我也进行了缩进。那么以后找的时候就不会那么头痛。如果写代码的人用的是大括号，显然就不需要纠结endif对应谁。我也不知道为什么那个人不用大括号，在没有标注也没有缩进的情况下搞清那些东西真的好费神。

纠结不是毫无用处的，这会让我变得更强大。