首页 Typo3正文

TYPO3 CMS后端布局的生成和评估

kumb Typo3 2020-07-17 12:15:33 238 0

6.3.9 后端布局的生成和评估

了解当前的前后台布局

(1)当前后台布局。在后台单击“Page”→“Home”,选择“Columns”,可以看到后台布局如图6-99所示。

img

图6-99 后台布局

(2)当前前台布局。前台是两列布局,如图6-100所示。

img

图6-100 前台布局

创建后台两列布局

(1)单击“List”→img图标,拖曳img图标到“Home”上方。将其命名为“Backend Layout”并右击它,在弹出的快捷菜单中单击“Enable”,创建一个后台布局,如图6-101所示。

img

图6-101 创建后台布局“Backend Layout”

(2)单击img图标,弹出“New record”对话框,选择“Backend Layout”,如图6-102所示。

img

图6-102 选择“Backend Layout”

(3)创建新的两栏后台布局。单击“Backend Layout”后,弹出“Create new Backend Layout on page "[Default Title]" ”对话框,在“Title”下的文本框内输入“default-Layout(2 Spalten)”,如图6-103所示。

img

图6-103 创建新的后台布局

(4)添加列。单击img图标后弹出编辑列的对话框,单击img按钮添加一列,如图6-104所示。

img

图6-104 添加列

(5)编辑列。单击“not set”图标上的img,在弹出的对话框中“Name”后的文本框内输入“Main content”,“Column number”后的文本框内输入“0”,并单击“Save to cell”保存。单击“1x0”图标上的img,在弹出的对话框中“Name”后的文本框内输入“Aside”,“Column number”后的文本框内输入“1”,单击“Save to cell”保存。具体操作如图6-105所示。

img

图6-105 编辑列

(6)生成标签。存盘退出后返回“Create new Backend Layout on page "[Default Title]" ”对话框,这时Config项如图6-106所示。

img

图6-106 Config项

全部标签如下:

img
img

应用Backend Layout

(1)查看Backend Layout。单击“Save and close”后,后台输入样式如6-107所示。

img

图6-107 后台输入样式

(2)将“Backend Layout”应用到“Home”。右击“Home”→“Edit”,在弹出的“Edit Page "Home"”对话框中,单击“Appearance”选项卡,在“Backend Layout (this page only)”和“Backend Layout (subpages of this page)”下的文本框内均选择“default-Layout(2 Spalten)”,如图6-108所示。

img

图6-108 应用Backend Layout

(3)查看应用布局。单击“Page”→“Home”→“Columns”,这时的“Home”后台布局是两列,如图6-109所示。

img

图6-109 后台两列布局

编辑页

(1)打开“New content element”对话框。单击“Page”→“Home”,单击“Aside”下的“Content”,如图6-110所示。

img

图6-110 打开“New content element”对话框

(2)添加侧边文本。在弹出的“New content element”对话框中单击“Typical page content”选项卡,再单击“Text & Media”。在弹出的“Create new Page Content on page "Home"”对话框中,单击“General”选项卡,再在“Type”下的文本框内选择“Text”,在富文本编辑器内输入“这是侧边文本”,如图6-111所示。然后单击“Save and close”返回“Home”对话框。

这时浏览前台,还不会显示侧边文本。

img

图6-111 添加侧边文本

编辑TypoScript

(1)编辑“/Configuration/TypoScript/Library/”目录下的2000_page.ts文件,修改标签,如图6-112所示。

img

图6-112 编辑2000_page.ts文件

(2)打开“/Resources/Private/Templates/”目录下的DefaultTemplate.html文件,修改<aside>与</aside>之间的标签,如图6-113所示。

img

图6-113 编辑DefaultTemplate.html文件

(3)存盘,清理缓存,浏览前台,其显示如图6-114所示。

img

图6-114 前台显示侧边文本

(4)为侧边文本添加模板。编辑“/Configuration/TypoScript/Library/”目录下的2000_page.ts文件,修改标签,如图6-115所示。

img

图6-115 编辑2000_page.ts文件

(5)测试模板。在后台的“这是侧边文本”的下边,单击“Content”,增加“第二行侧边文本”。然后存盘,清理缓存,浏览前台,结果如图6-116所示。

img

图6-116 测试模板


我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://www.kumb.cn/2939.html

发表评论

评论列表(0人评论 , 238人围观)
☹还没有评论,来说两句吧...