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

2022-06-04 昆明

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


使用场景

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


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

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

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

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

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

实现方式

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

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


如何实现

电邮 lopwon@qq.com 付费改造。


Jun04

16 条评论

  1. S̆̈ S̆̈ 小伙伴108 noreply

    形式不错

  2. S̆̈ S̆̈ 小伙伴108

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

    1. Lopwon Lopwon 博主
      @ S̆̈

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

      1. S̆̈ S̆̈ 小伙伴108
        @ Lopwon

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


        廿


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

        1. Lopwon Lopwon 博主
          @ S̆̈

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

  3. S̆̈ S̆̈ 小伙伴108

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

    1. S̆̈ S̆̈ 小伙伴108
      @ S̆̈

      我是说.single-meta类里面。

      1. Lopwon Lopwon 博主
        @ S̆̈

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

    2. Lopwon Lopwon 博主
      @ S̆̈

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

      1. S̆̈ S̆̈ 小伙伴108
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ S̆̈

          确实是学到不少技巧。

  4. 1900 1900 小伙伴226

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

    1. Lopwon Lopwon 博主
      @ 1900

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

    2. Lopwon Lopwon 博主
      @ 1900

      heti 的日期也没立起来嘛

      1. 1900 1900 小伙伴226
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 1900

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

T