在开始编辑数据库模板之前,我们将创建自定义CSS和JS文件,这些文件将允许我们自定义样式和功能,超出Pages的默认功能。
自定义CSS和JS文件适用于页面而不是数据库,所以即使您在做一些没有使用数据库特性的事情时,也可以使用它们。当然,在本教程中,我们将使用数据库,所以我们的样式将主要针对它们的样式。
创建文件
自定义CSS/JS文件是在AdminCP,所以请访问Pages -> Page Management -> Templates来访问模板编辑器。在左边的面板中,你会看到CSS和JS的选项卡——尽管这些选项卡现在是空的,但是一旦我们创建了新的自定义文件,它就会出现在这里,你以后也可以在这里编辑它们。
单击新按钮,然后选择添加CSS文件.输入名称,例如releasenotes(页面自动添加. css你的后缀)。因为我们这里只有一个CSS文件,选择将它插入到现有的“CSS”组(如果你有更复杂的页面,你可以创建自己的分组结构)。保存表单以创建它。
如果你现在点击CSS选项卡并展开组,你会看到新的(空的)releasenots . CSS文件:
重复相同的过程来创建javascript文件,选择新的javascript文件从新菜单,并命名它releasenotes.js.
将文件分配给页面
我们已经创建了自定义文件,但是现在我们的页面还不知道应该使用它们。要做到这一点,通过进入Pages -> page Management -> Pages并点击旁边的编辑图标来编辑为我们的数据库创建的页面发布说明(记住,我们在数据库创建过程中自动创建了这个页面)。
在Page Includes选项卡上,选择刚才创建的JS和CSS文件,然后保存表单。(只有当你已经添加了css/js文件时才会显示)
就是这样!现在,我们的页面在显示时包含了这两个文件,所以我们可以自定义了。
添加自定义CSS
通常,您可能会在编辑模板时一点一点地编辑CSS本身。然而,对于本教程的目的,您现在可以简单地添加CSS内容。下面是我们使用的样式:
.cRelease{显示:块;填充:15px 0 15px 15px;Border-top: 2px solid rgba(0,0,0,0.075);颜色:继承;} .cRelease:not(.cRelease_active):hover {background: rgba(255,255,255,0.4);} .cRelease:hover{颜色:继承;} .cRelease .ipsType_sectionHead {font-size: 20px;行高:1;margin-bottom: 5 px;粗细:500; } .cRelease .cRelease_security { margin-top: 12px; margin-right: 10px; } .cRelease_active { background: #fff; border-color: transparent; } li:first-child > .cRelease, .cRelease_active + .cRelease { border-color: transparent; } .cReleaseColumn { padding-right: 0; } .cReleaseColumn [data-role="tablePagination"] { background: #fff; padding: 5px; margin-top: 10px; margin-right: 7px; text-align: center; } .cReleaseColumn .ipsPagination_pageJump { display: none; }
报告指南