基础篇30. 内容的覆写(上)

接下来,我们来看一下内容的覆写。在Drupal系统中,每一篇文章都是一个节点,因此,对内容的覆写意味着对节点的覆写,也就是node.html.twig这一层模板的覆写。

首先,我们来编辑一下之前输入的这篇内容。你可以在文档中找到相关文字内容和图片的下载地址。

http://www.nowicode.com/sites/default/files/inline-images/1.png

http://www.nowicode.com/sites/default/files/inline-images/2.png

http://www.nowicode.com/sites/default/files/inline-images/3.png

http://www.nowicode.com/sites/default/files/inline-images/4.png

接着,我们用相同的方法再次输入其他三篇内容。这里的过程就省略了。你当然可以使用其他的图片来替代,但是,后续的课程都会用到这几张图片,而且它们会影响最终的设计效果,因此,这里,我建议你使用我提供的图片和文字。

节点1 :

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?

节点2:

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?

节点3:

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?

节点4:

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam, ipsa quasi?

 

保存之后,我们就可以看到内容页面的样子了。如果此时你的上传图片成功了,但是页面上却没有显示图片的话,在你的 settings.(local.)php里加一段代码  :

$settings['file_public_path'] = 'sites/default/files';

 

回到首页,可以看到之前输入的四篇内容都被显示在了首页。这是一个views生成的列表,在后续的内容中我们会讲述。

我们再次回到内容页面,检查元素,可以看到,我们之前覆写的page模板。在page模板中,将代码一层一层展开,你首先可以找到区域和区块的模板。其中,标题和编辑菜单是核心提供的区块,编辑菜单区块只有管理员登录的时候才会看见。再往下,就是内容区块,在这里你就可以找到相对应的node.html.twig模板了。

这里theme debug模式为我们提供的注释告诉我们,这个模板来自于stable主题,因此,我们只要覆写这个模板,既可修改内容页面的展示效果。

过程和之前演示的一样,将文件复制一份到我们的主题模板文件夹中,重命名为node--article.html.twig。

重建缓存之后,模板就生效了。关于这个模板的细节,我们留到下一节讲。

本书共83小节:

评论 (2)