首先在本地把AcquiaDevDesktop2环境打开,然后打开自己的本地drupal8的环境。准备一个主题(这里是basic 8.x-1.2),并安装好。

01|添加区域列表
如图1,打开Sublime Text 3 程序,进入到basic主题里找到后缀名为.info.yml的文件,并打开它。具体操作是file-openfile-drupal-themes-basic-basic.info.yml。

如图2,将以下这行代码复制到regions中的footer后面,并保存。
featured_1: 'Featured First'
featured_2: 'Featured Second'
featured_3: 'Featured Third'

02|更新主题模板文件
如图3,进入到basic主题里找到后缀名为page.html.twig文件,并打开它。具体操作是file-openfile-drupal-themes-basic-templates-page.html.twig。

如图4,将以下这行代码复制到63-65行,覆盖,并保存。


03|创建一个CSS样式表
如图5,进入到basic主题里找到CSS文件夹,打开之后在其中新建一个文本文档,命名为style,并将后缀名改为.css,并将其打开。具体操作是file-openfile-drupal-themes-basic-css-style.css。

如图6,将以下这行代码复制到其中,并保存。
#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;
}

如图7,最后,打开drupal8,找到区块布局,翻到页脚,如出现如图所示的三个区块,则大功告成。具体操作是管理-结构-区块布局-页脚。

注:如图8,若未能出现如图7的效果,返回到管理-配置-开发-性能中,选择【清除所有缓存】,并保存配置,即可解决。

网友评论