给文章列表的文章链接加入时间戳 #hash 提高访问体验

Posted

细节出处

在链接中加入一个为了提高浏览体验的 #hash 最早是在 V2EX中。

取得的效果

这个效果的说明需要一点点 Web 知识,在上网时,如果某个链接已经浏览过,颜色会发生变化,除非网站强制设置了一样的效果,不然对于已经浏览过的链接颜色(样式)是不痛的。默认链接是蓝色的,浏览过后会变成紫色。

对于浏览过的链接,CSS 中有一个专门的选择器 :visitedCSS :visited 选择器

:visited 选择器用于选取已被访问的链接。

这个选择器对于不同的链接地址是单独记录的(基于本地浏览器历史),这个地址也包含地址中的#号后面的内容,也就是 #hash

因为 V2EX 是一个个人论坛,所以帖子链接最好的随动方式就是回复数量,所以 v 站使用的是 #replayX 的形式,这样只有帖子有新回复,我们就能很好地与那些浏览后没新回复的帖子区分开来。

而对于博客,博文链接一般是不会变化的,只有博文被博主编辑过后对于访客才有重新浏览的价值,所以我经过思考,最终把发布时间作为 #hash,这样只要我在修改博文时修改时间就会更新,例如,本文是在 2020/02/11/ 18:16:48 撰写的,所以发布后,这个博文的链接就是:

https://sync.sh/txp-links-add-timestamp-hash#20200211_181648

如果我博文编辑过,修改时间就会发生变化,例如是发生在2秒后,这样就会跟这变化。

`https://sync.sh/txp-links-add-timestamp-hash#20200211_181650

在 Textpattern 中如何实现

找到 article_list 的位置,修改前:

<h4 itemprop="headline">
  <a href="<txp:permlink />" itemprop="url mainEntityOfPage" title="<txp:text item="read_more" />">
    <txp:title />
  </a>
 </h4>

重点就是对 tags:permlink 进行改造,查询后得知获得文章修改日期是使用 tags:modified ,最后修改结果为:

<h4 itemprop="headline">
  <a href="<txp:permlink />#<txp:modified format="%Y%m%d_%H%M%S" />" itemprop="url mainEntityOfPage" title="<txp:text item="read_more" />">
    <txp:title />
  </a>
</h4>

这样博文地址就会从

https://sync.sh/txp-links-add-timestamp-hash

变为

https://sync.sh/txp-links-add-timestamp-hash#20200211_214307

同时为了区分 :visited ,还需要增加以下样式使得访问过的链接变为浅灰色,区别于原来的 #000 黑色。

.article-list li h4 a:visited {
  color:#999;
}

以后某篇文章需要更新,修改一下发布时间,更新的博文就能很容易被分辨了。

Update:

感觉加上有明显语义的 #hash 对于分享 Url 时不好看,换成 Unix纪元的时间戳。

<h4 itemprop="headline">
  <a href="<txp:permlink />#<txp:modified format="%s" />" itemprop="url mainEntityOfPage" title="<txp:text item="read_more" />">
    <txp:title />
  </a>
</h4>

-EOF-