Thread
随时间扩展内容的视觉和Web实现问题
-
随时间扩展内容的视觉和Web实现问题
视觉上,线性增加的条目记录和经过逻辑上综合的叙述并不一致,显然需要区别对待两种情况,简单来说可以做成时间线和文章两种样式,并用话题首个文章的文内特殊标记来指定需要的样式。
反链接的显示如何在不使用JS的情况下实现并且而不破坏文章的连续视觉结构?这个问题比较麻烦。理想情况下应当显示为所有反链接均为展开的状况,但是仅靠CSS无法做出“两列依次粘连”的布局。
-
关联帖子样式
考虑到对非JS场合的兼容,目前有一种方法似乎可行:
- 总是加载话题中所有的关联帖子。
- 正常时隐藏其他关联帖子,在点击某个帖子之后显示对应的几个关联(通过改高亮样式表中显示的
.elem[attr='what']
实现)。同时推URL,不刷新页面。 - 非JS时直接显示所有关联帖子。点某个帖子之后是超链接到激活这个帖子的情况。
- 当前帖子和它的关联帖子显示为高亮背景色。
- 激活帖子与别的只有背景颜色不同,保留点击区域。
这样也适合卡片/页面的布局。在最近页面显示为卡片,在话题页面显示为页面,在条目页面似乎可以按月份或者连续修改而分组,自动标记时间,或者指定按周或者月,这样显示美观也符合阅读顺序。
-
分两栏显示链接帖子和主贴子实现起来始终不是很理想,现在决定还是显示在文内(每个帖子的末尾),通过帖子选择按钮调出,菜单按钮放在右侧还是不变,之后可以修改样式。考虑目录栏实际没什么用,因此删掉它,这样一来也不需要为了在移动端的布局额外做奇怪的控制结构。
这样空出来的左侧可以显示成详细导航栏,以及在它的下方可以显示相册或者热门帖子,之后做个链接到单独的热门页面可以往后翻页。
同时,这样一来主要内容“纸张”栏会稍微变宽。图像是否能更好地显示还不清楚。可能还是保留目前的显示样式。
-
话题的视觉类型
目前用到的话题按种类应区别显示:
- 文章或者只言片语
- 按时间增补的条目
- 存档表格(“Interesting”)
其中存档表格与帖子分类的功能仍然显得重复,干脆去掉存档表格,分类显示时按最近页同样的样式即可,实际上的确会显得稍微高了点,不过这样允许非表格格式,形式更加自由。
-
那么就剩下了时间线或者传统话题(文章)。可能可以使用特殊标记
{timeline week|month}
这类似的显示为自动时间线。此时每个时间段内的帖子合并为与传统话题一样的样式。传统话题具体显示时和现在一样采取无缝隙样式,最近页显示为每个分开。 -
标题栏和左侧导航的切换要在非JS的情况下可用。因此做成隐式的按钮并用CSS同级选择(
~
)控制区域的显示和隐藏。 -
注意:
column-span:all;
会影响margin合并。 -
最后为了兼容自动overflow,还是去掉了表头的粘连。
-
希望文内引用样式更瘦,此时图片缩略图如何放置有点问题。
-
现在的这种通过侧面条点击展开收纳链接帖子的整法主要问题是视觉上展没展开是一样的。要变下颜色或者使用个颜色条才能显示有展开的条目。
可能不要激活帖子链接帖的背景,但是这样灰色可能有点难读。
-
执行了修改:
- 导航条放到了右侧,同时将关联帖子数放到了右下角,并且保证了非js状态的可用性。
- 增加了侧方位导航栏。
过去日期查看的移动端菜单暂未改为js兼容,需要处理。侧方位导航的移动端样式需要作为块型。
2022/08/12 23:35:36