给 Typecho 博客添加文章页相册功能

2022年06月04日 · 昆明

demo-lopwon-album.jpg


使用场景

写文章时(比如出行游记),如果在内容区一张一张的插入很多很多图片,会显得文章比较冗长,尤其是使用竖版构图的图片,往往高度霸屏。此时,若能以相册的方式,在当前页面集中呈现这些照片,会大大增强浏览体验。


主要效果
1. 相册以九宫格(可调数量)的形式呈现在文章末尾。

2. 九宫格的图片以随机形式呈现,刷新页面可见效果。

3. 点击图片后以灯箱的形式呈现,并能添加图片描述。

4. 点击最后方块可以链接至相关内容,如文章或相册。

实现方式

方式一:在文章 A 的文末调用文章 A(或文章 B)的附件中所有图片作为相册展示,并链接至相关内容(如文章 B)。查看演示(当前页文末九宫格图集),刷新页面可见随机图片效果。

方式二:在文章 A 的文末调用通过 Snapic Page(Typecho 独立页相册模板)创建的相册 A,并链接至相册 A。查看演示(演示页文末九宫格图集)。


如何实现

电邮 lopwon@qq.com 付费改造。也可以选择 Typecho 的 Snapic 相册。

  1. 关于竖屏中文排版heti(https://sivan.****.io/heti/)的实现很完整,效果也很棒,也许可以参考一下。

    1. @1900

      我是参考了掘金的一篇文章 https://****.cn/post/6966449320744714277

    2. @1900

      heti 的日期也没立起来嘛

      1. @Lopwon

        最好是把日期转换为中文格式。数字垂直排列本就很不好阅读

        1. @1900

          是的,有空研究下php中文格式日期。

  2. 再加上:
    text-orientation: upright; text-transform: uppercase;

    1. @S

      我是说.single-meta类里面。

      1. @S

        确实,中英文显示规整多了,赞!

    2. @S

      哈哈,发现竖排坑好深,单单日期就多用了十多行代码,还有中英文混排、字母大小写、标点乱码……好多问题。

      1. @Lopwon

        哈哈是不是给你增加了不少闲暇折腾代码的乐趣

        1. @S

          确实是学到不少技巧。

  3. 提个意见,标题既然是复古的竖版,日期为什么又是横版,抬头空了一大片好难看呢。
    以及干脆正文也竖版会不会b格更高一些。

    1. @S

      之前的日期也是竖版的,但是发觉竖排的数字不能一眼看清,就弄了横版的日期。抬头的空白嘛,主要是文章首图本身也是白底,所以了……如果是照片的话会感觉充实些

      1. @Lopwon

        可以把数字改成中文的,比如


        廿


        然后具体罗马日2022/5/2用title标签hover浮上面。

        1. @S

          这个点子可以试下,不过得先把php的日期格式转成中文。

  4. 形式不错

视频:2017,征途一夏
1544868000
视频:2017,征途一夏
大理上关镇的稻米田
1342778400
大理上关镇的稻米田
有声:阿叔,卖冰棒
1555754400
有声:阿叔,卖冰棒
39,小寒
1609808400
39,小寒
4 失焦的街头照
1627747020
失焦的街头照
40,雨水
1645243200
40,雨水
40,大暑
1658548800
40,大暑
store