By chenyi, 7 July, 2024

publication为例

 

1、创建一个为publication的内容类型,把所有的内容都添加进去。再创建一个view,输出所有publication的内容

 

 

接下来就是把网页的结构变成我们写的代码的样子。

一、首先把输出li的内容修改成我们想要的样子

 

PS

views的每一个li里面的结构基本上上都是图下这样,两个div包裹着

 

但是我们要修改成图下我们所知道的样子

 

1、勾选fields后面的设置,取消勾选

 

 

可以发现包裹的两个div消失了,变成我们想要的样子

 

 

2、接下来是解决红色框选部分

 

在网页端可以直接修改,最后会变成右下角这个样子

 

3、修改标题样式

 

先看网页端标题的结构,可以看到这个区块是由block--views-block--publications-block-1.html.twig来控制的,

我们复制一份block.html.twig,命名为block--views-block--publications-block-1.html.twig,看文件结构和我们写的代码结构区别,再通过区别把类名对应上,就可以让区块实现效果。

 

4、修改seeall的样式,首先在网页端修改显示的标题,再把类名对应上

 

 

最后实现这种效果