1)打开网站代码:打开应用Sublime Text3,File - > Open Folder - > 打开当初解压的druupal文件夹(我的在E:drupal)
2)添加区块:打开主题的.info.yml文件(Themes - > basic - > basic.info.yml) - > 将新区域添加到现有区域列表中(在footer: Footer底下添加:
featured_1: ‘Featured First’
featured_2: ‘Featured Second’
featured_3: ‘Featured Third’)
3)更新page.html.twig文件,设置div标签:打开page.html.twig文件(Themes - > basic - >Templates - > page.html.twig) - > 为了将新区域显示在内容区域下方,紧随着内容区域的关闭div标签之后,将添加以下代码:(在
<div id="featured-content-area-2">
{{ page.featured_2 }}
</div>
<div id="featured-content-area-3">
{{ page.featured_3 }}
</div>
</div>
4)设置区块样式:添加style.css文件(Themes - > basic - >css下) - > 在style.css样式表中创建CSS以将区域渲染为想要的样式(33%页面的宽度,浮动每个区域彼此相邻,即添加代码:
featured-content-area {
border-top: #676767 2px solid;
padding-top: 20px;
}
featured-content-area-1,
featured-content-area-2,
featured-content-area-3 {
width: 33%;
float: left;
padding: 10px;
}
5)切记保存全部
6)回到网站 - > 管理 - > 配置 - > 性能 - > 清空所有缓存 - > 保存配置
此时新区域就添加成功啦,可以通过管理 - > 结构 - > 区块布局( - > 演示块区域)查看
注意:若添加代码并保存过程中,返回网站时出现不可预知的错误,则返回以上三个文件,撤销所有动作。