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

文章目录

★界面定制
★最新评论的【刷新】功能
★最新评论的【tooltip】功能
★文章目录
★全屏显示
★BBCode 图片的显示方式
★悬浮工具条
★结尾

上个月底,俺把博客评论功能升级了一下,之后收集到不少热心读者的反馈。有的是帮俺测试并发现了一些隐蔽的 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

Written by

编程随想的blogspot镜像,欢迎关注!编程随想:IT宅,热衷于:抹黑党国、揭露洗脑、普及翻墙。 偶尔会谈点技术。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store