博客界面升级（增加“界面定制”、“文章目录”、“自动刷评论”、“全屏显示”等）

　　上个月底，俺把博客评论功能升级了一下，之后收集到不少热心读者的反馈。有的是帮俺测试并发现了一些隐蔽的 Bug，有的是提出一些界面改进的建议。于是俺就利用“十一假期”，把博客的界面做了一些改进，主要目的是——增加大伙儿的【易用性】。
　　本来以为“十一假期”结束的时候，就能推出新界面。可惜俺还是太乐观了——大部分修改工作一直到昨天才基本搞定。很多琐碎的细节修改，反而占据了很多时间。另外还花了不少时间测试“浏览器兼容性” :(
　　下面是每个新功能的逐一说明。这次新增的【所有功能】，都需要浏览器支持 JavaScript 脚本。换句话说，如果你的浏览器禁用了 JS 脚本，这些功能是用不了的。

★界面定制

　　“十一期间”收集到的读者反馈，有一类让俺很头疼，那就是关于“界面字体的大小”。有的人嫌太小，有的人觉得正好。所以俺干脆做了一个“界面定制”的功能，让大伙儿自己去微调界面的元素（比如：字体）。
　　后来俺觉得，既然字体大小可以定制，干脆把其它选项也开放出来，让大伙儿自己定制。目前俺提供了如下几个选项，让读者定制：
1. “正文区”的字体大小
2. “评论区”的字体大小
3. “最新评论区”的字体大小
4. 是否开启“文章目录”（关于这个，下面会单独说）
5. 是否开启“自动刷新最新评论”（关于这个，下面会单独说）
6. BBCode 图片的显示方式（关于这个，下面会单独说）
7. 是否显示工具条，是否支持拖拽（关于这个，下面会单独说）

　　如果你想先看一下定制界面，请猛击 https://program-think.blogspot.com/p/options.html
　　你可以在博客界面的不同地方看到 的图标，点击该图标就可以进入“界面定制”。

　　由于俺这个博客架设在 Google 的 Blogspot 博客平台上。该平台只提供客户端页面的定制功能，【不提供】服务器端的存储功能。如果要保存读者的配置选项，俺只能保存到浏览器的 cookie 中。
　　而“浏览器 cookie”会导致隐私方面的担忧，所以在上述定制界面，俺会事先征询你的同意，然后才会保存定制参数到你的浏览器 cookie 中。

★最新评论的【刷新】功能

　　那些翻墙去浏览俺博客的网友，有很多是在博客留言，参与讨论的。对这些网友而言，需要经常看“最新评论”才知道别人的留言。
　　在没有提供“自动刷新”功能之前，这些网友需要依靠手动刷整个页面，才能看出是否有新的评论。
　　如今俺同时提供了“自动刷新”和“手动刷新”两种功能。

　　手动刷新
　　在“最新评论区”的上部增加了一排按钮，其中的 表示“手动刷新”。

　　自动刷新
　　如果开启了“自动刷新”，“最新评论区”每个几分钟会自动抓取最新的评论，然后插入到“最新评论区”的上方（俺模仿了 Twitter 的刷新风格）。
　　刷新的时间间隔是可定制的（在刚才提到的“界面定制”中）。

★最新评论的【tooltip】功能

　　有些读者发的留言比较长，而“最新评论区”的界面空间不大。所以俺会对超过某个长度的评论进行截断。（在改版之前）如果要看整条评论，需要点击进入对应的博文。
　　如今俺提供了 tooltip 功能。对于被截断的评论，你把鼠标移动到该评论上方，会出现淡黄色的 toolip 提示框，里面包含该评论的全部内容。
　　当你把鼠标移走，这个 tooltip 会自动消失，不妨碍你阅读。

★文章目录

　　大概在去年，就有读者建议俺提供这个功能。
　　开启了“文章目录”功能之后，当你打开某篇博文，会在博文的标题和正文之间，自动生成此文的内部目录结构，方便你直接点击跳转到某个章节（此功能对长篇博文尤其方便）。
　　大约从2010年开始，俺都会在博文内部使用“层级标题”。文章目录就是根据“层级标题”生成的。对于2010年之前的博文，因为文中没有使用“层级标题”，会导致“文章目录”无法生成（俺有空的话，把那些老博文也补上“层级标题”）。

★全屏显示

　　俺在“正文区”的右上角放置了一个 的按钮。点击此按钮就进入“全屏模式”。
　　在全屏模式下，会自动隐藏右侧栏（包括“最新评论”），会自动隐藏当前博文的“评论区”，会自动隐藏博客标题（也就是最顶上那行大字“编程随想的博客”）。
　　这个功能对于屏幕分辨率不够高的网友，应该有好处。而且，进入全屏模式之后，也方便你把博文打印出来。
　　另外，已经有热心读者更进一步提出了“Printer-Friendly”的建议。严格来讲，目前的“全屏模式”还不能算是“Printer-Friendly”。真要实现“Printer-Friendly”，还需要考虑很多细节。不知道有这个需求的读者多不多？
　　大伙儿还可以考虑一下，“评论区”或“最新评论区”是否需要全屏显示的功能？

★BBCode 图片的显示方式

　　俺博客在2年前开始在评论中支持 BBCode 自定义语法。（没听说过的同学，请先看《博客的评论功能升级，顺便分享一下实现方法》）
　　这个功能是某个香港读者提出的，主要是基于安全性（隐私性）的考虑。
　　目前俺博客的评论功能支持用 BBCode 语法插入一些特殊的格式（超链接、粗体、斜体、图片）。由于任何人都可以发评论，并且在评论区中用 BBCode 插入图片。这时候可能会引发一些安全方面的担忧。
　　像港台的读者或者其它海外的读者，他们不需要翻墙（无代理）就可以直接访问俺的博客。在这种情况下，如果博客评论中有 BBCode 图片，浏览器会直接加载该图片（没有经过代理）。这时候，存放该图片的网站服务器，就可以看到访问者的“真实公网IP”（因为当中没有代理）。虽然 Google 服务器也可以看到访问者的 IP，但是 Google 公司是比较靠谱的。而存放图片的服务器，有可能来自于某些不靠谱的公司。
　　对于墙内的读者，因为需要翻墙访问俺的博客，所以就不存在这个风险。也就是说：Google 服务器看到的“访问者IP”是你用的代理服务器的 IP。如果评论中嵌入了 BBCode 图片，存放图片的网站服务器看到的“访问者IP”也是你用的代理服务器的 IP。
　　为了解决上述隐患，俺增加了一个定制选项——BBCode 图片的显示方式。目前有三种可选参数：自动显示、手动显示、不显示。
　　所谓的“手动显示”就是：评论区不会自动显示图片，而是先显示图片的网址。如果你觉得这个网址对应的网站是靠谱的，再点击某个“加载图片”的按钮，把图片打开。

★悬浮工具条

　　“十一假期”还没结束的时候，俺就增加了这个“悬浮工具条”。一开始加入的时候，还引发了某些热心读者的批评——说这个工具条所处的位置不理想。
　　如今俺提供了这个工具条的定制参数。你可以设置“是否显示”。所以那些不喜欢工具条的读者，可以直接关闭它。
　　另外，还提供了“是否拖拽”的定制选项。如果开启“拖拽”功能，你可以把这个工具条拖到某个你认为理想的位置。并且每次拖拽之后，会自动保存工具条的位置。
　　俺使用“相对比例”来保存工具条的位置信息。也就是说，如果你的屏幕比例变化了，或者是窗口的大小变化了，工具条依然能处在合适的位置上。

★结尾

　　欢迎大伙儿继续提出各种合理化的建议，也欢迎大伙儿帮忙测试新功能。需要给出反馈的读者，请到俺博客留言。


俺博客上，和本文相关的帖子（需翻墙）：
博客评论功能升级（“未读”状态、按时间过滤）——兼谈“为啥俺不用其它博客平台”
博客评论功能升级（增加“留言过滤”、“200条之后自动加载”等）
博客评论功能升级（引入 BBCode 语法），顺便分享一下实现方法

版权声明
本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者编程随想和本文原始地址：
https://program-think.blogspot.com/2014/10/custom-blogger-ui.html?m=0