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

2022-06-04 昆明


使用场景

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


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

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

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

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

5. 注意:相册读取自指定文章附件中的所有图片格式,在文末呈现,非文中段落间插入相册。

实现方式

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

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


如何实现

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


影像图集

Store

16 条评论

  1. 1 1900 小伙伴274

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

    1. Lopwon Lopwon 博主
      @ 1900

      heti 的日期也没立起来嘛

      1. 1 1900 小伙伴274
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 1900

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

    2. Lopwon Lopwon 博主
      @ 1900

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

  2. S S 小伙伴182

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

    1. Lopwon Lopwon 博主
      @ S

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

      1. S S 小伙伴182
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ S

          确实是学到不少技巧。

    2. S S 小伙伴182
      @ S

      我是说.single-meta类里面。

      1. Lopwon Lopwon 博主
        @ S

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

  3. S S 小伙伴182

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

    1. Lopwon Lopwon 博主
      @ S

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

      1. S S 小伙伴182
        @ Lopwon

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


        廿


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

        1. Lopwon Lopwon 博主
          @ S

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

  4. S S 小伙伴182 noreply

    形式不错

新一篇40_Mangzhong.jpg
昔日
旧一篇40_Xiaoman.jpg

CC BY-NC-ND
准备下山 准备下山
Snapic Plus v5
使用 Lopwon POP 实现