巧用图文模块为文章添加卡片式文章内链功能

isdola
253
文章
183
评论
2019年6月1日 评论 429 5359字阅读17分51秒

一、前言

以往,我们在后台编辑文章时需要链接到文章中的其他文章时,通常的做法是使用文章编辑器中的【插入或编辑链接】功能,比如这样:《分享几个增强文本小工具实例》。这的确是个方法,也是我们大多数博主常用的方法。但这种方法毕竟有些单调,有时因为种种原因和需求,希望在链接其他文章的同时,可以显示被链接文章的标题、缩略图、摘要等信息,以丰富文章的展示效果。

 

二、引出问题

本来,我想单独为这样的效果制定一个短代码并集成到主题的短代码中去,也上网找过相关的教程。有是有,只是教程中涉及到缩略图部分的代码不是非常适合我的主题 ? 大多调用的特色图像,然而我没启用特色图像,无奈自己也对这些代码一知半解,于是这个想法就给耽搁下来了。

直到前两天,我想发布一篇文章《新海诚作品合集》,按照以往《宫崎骏作品合集》、《NHK晨间小说连续剧合集》等合集类文章内容的排版惯例,应该是这样的:

也就是说,合集类文章内容通常有以下两个特征:

  • 文章内容主要由多个其他文章片段组成
  • 每个文章片段都会涉及到相同的元素,比如:标题、简介、图片、下载链接等

只有这样,才能统一合集类文章内容排版。而在这些特征中,影响排版的最主要元素是图片的尺寸和布局。遗憾的是,我在寻找新海诚的那些作品时,适用于宽图的素材并不多。

看来,想按以往宽图布局的形式是行不通了,于是我想到了使用缩略图来代替宽图。毕竟,每部作品一般都会有他们各自的海报,通常情况下海报也会比较精美,尺寸也相对统一。

但,很快我就发现了新问题,就是长宽比不美观,海报一般都是长>宽,且宽度方向上不能铺满或不能和文章正文宽度协调起来。这样的话,图片左右两侧就会有一大块空白,就像下面这样:

想像一下,合集中要添加十多个其他文章片段,而每个文章片段又那么长(基本占满一个可视界面的高度了),这样一来整篇文章就变得更长了,需要多次滚动滚轮才能把文章看完,体验效果也不是很好。因此这个方案就弃用了。

 

三、图文模块分析

后来,我想到了【图文模块】这个功能。这个功能设计之初是作为向正文中添加商品而存在的,就像下面这样:

上图中的图片、标题、简介、价格和按钮文字都是可以通过后台设置的。这个效果基本已经可以满足合集类文章内容排版的元素(有标题、图片、简介和链接)和要求(每个文章片段格式可以统一)了,但默认的效果还是存在一些问题:

  • 模块中设置链接地址后,前台会对图片、标题和简介中前面一部分文字自动加上链接,而按钮却没有加上链接(点击按钮是没有反应的,因为按钮不存在链接
  • 按钮和按钮文字样式较丑,如果不设置按钮上的文字的话,前台还是会显示按钮(只是不显示文字罢了,而不设置原价和现价的话,前台是不会显示的
  • 如果简介中存在文章设置的标签(也就是关键字),这些标签的文字样式显示的是灰色的(因为我启用了【文章关键字自动添加链接】功能),和文章正常的标签颜色不一致

于是,我对这个模块进行了改进,最终基本可以满足自己预期的效果,如下(试着将鼠标移动到模块中来):

巧用图文模块为文章添加卡片式文章内链功能
昼颜:工作日下午3点的恋人们 昼顔~平日午後3時の恋人たち~

《昼颜》(昼颜~平日午後3时の恋人たち~)是由西谷弘执导,上户彩、吉濑美智子等主演的日本电视剧,于2014年7月17日起每周四晚上10点在富士电视台播出。

该剧主要讲述了平时送丈夫去公司后认真做完家务,却在平日白天和其他男性坠入爱河的主妇的故事。