模板编辑与管理
WebFuture 网站群平台内置对模板文件和风格文件的管理功能。支持按站点对模板/风格文件进行逻辑隔离,即在平台的模板/风格文件管理中可以管理整个站群的所有模板/风格文件,而在站点的模板/风格文件管理中只能管理本站点的模板/风格文件。支持类似Windows资源管理器(文件夹树导航中栏+文件列表的右栏)的方式管理模板/风格文件,文件列表支持缩略图和列表两种方式,支持按文件名排序、按修改时间排序。模板所调用的风格文件(CSS、JS、图片等资源文件)独立于模板文件保存在专门的风格文件夹中,同样按设备分别保存在对应的设备风格文件夹中。支持对模板/风格文件进行编辑、重命名、删除、移动、复制、搜索、上传、复制到指定设备等操作。
动易系统在站群平台、主站以及单个子站中都提供了模板功能。其管理地址是:在站群平台、主站或单个子站点的管理界面中,打开左侧管理导航中的“文件管理”菜单即可看到网站模板的管理导航,其中“模板文件管理”是网站模板的结构文件,“风格管理”是网站模板的样式文件,点击管理菜单即可进入相应的管理界面。
模板管理界面
WebFuture 提供了便捷的模板管理界面。网站模板管理分成了模板文件管理和风格文件管理两个子功能模块。
进入模板管理界面,顶部左侧提供了可以对单个模板文件或多个文件进行上传、移动、复制和批量删除模板文件等管理操作功能按钮。顶部右侧为模板文件的搜索、刷新、排序、缩略图以及列表切换显示等功能按钮。
为了方便查找和修改各层级的模板文件,在中部提供了文件夹导航,可以象资源管理器一样打开各个模板文件夹的层级。右侧可以上传、移动、复制和批量删除模板文件,可以新建模板的文件夹。在后台操作与在电脑上对文件夹和文件的操作相似,以确保模板管理的流畅性。
将鼠标移到模板文件上,系统出现对每个模板文件进行删除、编辑、重命名以及创建或复制至指定设备等管理操作功能按钮,如果直接点击模板名称可快速进入模板的编辑管理界面。
在编辑管理界面中,可以隐藏左侧菜单或以全屏方式以扩大编辑界面,可以利用顶部工具栏中的功能按钮对模板代码进行复制、粘贴、保存、格式化等操作,也可以进行撤消或重做的操作。右侧可以输入代码进行快速搜索定位,修改完毕点击底部的“保存”按钮即可。在编辑界面中,可以快速切换编辑不同设备(PC/手机/PAD)下相同名称的模板文件。
WebFuture 支持在站点、节点等各处设置模板的页面中直接编辑相应的模板,在选择模板页面智能推荐最相关的模板文件。系统在平台管理和主站、子站各个站点中都可以管理各自所属的模板。在平台管理中可以管理站群中的所有站点的模板和样式,在各站点中只能管理本站点使用的模板和样式,各站点的模板自动对应与本站点标识符号相同名称的目录。
在线管理和文件管理
WebFuture 设计了后台在线管理和网站模板文件两种模板文件管理方式,让前端工程师在制作模板时能使用灵活、操作方便。前端工程师既可以通过网站后台添加、修改和管理网站模板页面,也可以直接在服务器上以文件的方式添加、修改和管理网站模板页面,两种方式的修改结果都会自动保持同步。
WebFuture 模板文件编辑中支持以格式化规范显示 Html 代码,对于一些特定的定义与值以不同色彩进行区分。系统以无刷新保存方式,方便设计师随时保存修改结果与浏览前台效果。系统支持书签式管理界面,可以打开多个模板文件或风格文件进行管理编辑。
WebFuture 模板和组件对应于 MVC(Model View Controller)中的视图和分部视图,视图文件以 .cshtml 为扩展名在网站目录中进行存储,视图文件中均支持 Razor 语法。模板文件支持布局嵌套,可以将通用的页面布局部分抽取出来做成基础布局页、公共布局页,将个性的布局在单个模板页面中进行定义,极大地方便了模板通用性修改。系统提供灵活的组件功能,内置了通用组件、列表组件、信息类组件、图文组件、功能组件、扩展组件等大量常用的组件,有能力的设计师可以根据需要自定义组件,以实现不更改系统程序即可灵活实现各种功能应用及展现。
多屏优化模板管理
WebFuture 支持多屏优化技术,即在保持同一域名、同一后台、同一数据库、同一套系统的基础上,不同终端设备(PC/手机/PAD)来访问网站前台时,网站都会针对此类设备显示与之最相适应和专为此类设备的用户使用习惯优化的前台界面,从而在不同终端设备访问时都能提供最佳用户体验。因此在模板管理界面中,提供了 PC、Phone 和 Pad 三个下拉选项,分别对应不同的模板目录。
代码编辑和可视化编辑
WebFuture 对模板的编辑同时支持代码编辑和可视化编辑两种模式。
模板采用代码编辑模式时,支持类似常用的代码编辑器一样的代码语法高亮显示,支持代码内搜索,对代码支持一键格式化,支持emmet格式编写html代码。支持全屏编辑模式。支持撤消、重做。支持可视化编辑组件参数,这样不需要记忆每个组件的每个参数的含义即可快速修改组件的参数。支持快速切换编辑不同设备(PC/手机/PAD)下相同名称的模板文件。
模板采用可视化编辑模式时,将模板解析成调用此模板的相应页面的前台效果,以实现所见即所得的编辑效果。鼠标在原来模板中调用的组件解析后的相应区块悬停时可以编辑组件参数,编辑组件参数是以可视化的方式编辑。鼠标点击非组件的页面元素时,可以在弹出的代码编辑器中以代码方式编辑这些页面元素的HTML代码。从而可以让不懂代码的非专业人员无需培训即可对模板进行简单的小修改(比如改一下页面中的文字或图片,调整一下组件的调用参数等)。
针对组件功能参数繁多比较复杂,系统对模板提供了可视化编辑功能,以方便设计师调用系统组件的各类可用参数。将鼠标移到模板文件上,如果模板文件出现“可视化编辑功能”管理操作功能按钮,点击就可以进入模板的可视化编辑的模板管理界面。
在可视化编辑管理界面中,将鼠标移到显示各种数据及列表区域,则会出现“设置组件参数”的功能链接,点击即可弹出窗口设置本组件的各个参数,以使组件在前台模板页面中显示不同的效果。
在代码编辑模式下,组件的参数也支持可视化界面设置。在代码编辑模式中若鼠标点击标@后面的签名,则会出现“编辑参数”的选项,点击即可以可视化方式编辑组件的参数,这样不需要记忆每个组件的每个参数的含义即可快速修改组件的参数。
文件编辑
如果设计师有远程文件同步权限,可以直接利用软件对网站中模板、样式文件夹(Views 和 Content 文件夹)中的 .cshtml 文件进行编辑,然后同步到服务器中,这样利用进行网页设计、代码输出的专业软件进行网页设计和代码输出,可以高质、高效地制作复杂多样的网页模板。系统提供的后台在线管理和网站模板文件两种方式可以同结果的功能设计,依靠强大的视图模板解析引擎技术为专业设计师提供了强有力的支撑。
风格管理
进入风格管理界面中,其管理界面与模板管理界面保持一致。顶部左侧提供了可以对单个风格文件或多个风格文件进行上传、移动、复制和批量删除风格文件等管理操作功能按钮。顶部右侧为风格文件的搜索、刷新、排序、缩略图以及列表切换显示等功能按钮。将鼠标移到风格文件上,系统出现对每个风格文件进行删除、编辑、重命名以及创建或复制至指定设备等管理操作功能按钮,点击风格名称可快速进入风格的编辑管理界面。
在编辑管理界面中,可以隐藏左侧菜单或以全屏方式以扩大编辑界面,可以利用顶部工具栏中的功能按钮对模板代码进行复制、粘贴、保存、格式化等操作,也可以进行撤消或重做的操作。右侧可以输入代码进行快速搜索定位,修改完毕点击底部的“保存”按钮即可。在编辑界面中,可以快速切换编辑不同设备(PC/手机/PAD)下相同名称的模板文件。
样式文件编辑中支持以格式化规范显示 CSS 样式定义,对于样式的属性与值以不同色彩进行区分。系统以无刷新保存方式,方便设计师随时保存修改结果 。
模板历史记录
WebFuture 支持自动保存模板历史记录功能。每次保存模板时,在保存之前,系统应先将当前正要保存的模板文件内容与服务器上的现有模板文件进行对比,如果有变化,在保存模板成功后将新的模板内容添加到历史版本记录中(修改前的模板已经有历史记录了)。
WebFuture 支持手动保存模板历史记录功能。在修改模板文件的界面中,系统提供“保存为版本”按钮,点击此按钮时,只保存为历史版本记录中,不实际保存到正在修改的模板文件(以免马上生效)。这样就方便保存一些中间想要的修改效果以备后来尝试修改错了恢复到此版本。
WebFuture 支持模板历史记录的查阅和恢复。在历史记录页左侧列出了所有历史记录(还可以筛选出有版本号的历史记录),右侧为这一历史记录的模板内容。在历史记录页,选中某个历史版本后,可以保存为版本,可以恢复为这个历史记录。恢复操作不保存模板文件内容,只是读取历史版本的模板内容到当前编辑器中。
WebFuture 支持模板历史记录的对比,支持查阅已删除模板文件的历史记录。
WebFuture 支持全自动维护模板文件历史记录。针对以下使用场景做了模板文件的历史记录的自动维护工作:安装时,系统会扫描所有模板文件,为每一个模板文件添加一条历史记录;上传、移动、复制模板文件时,保存模板文件成功后,也都会自动添加历史版本记录;系统每次启动时,检查模板文件是否有变更,如果有,就添加历史版本记录;直接在服务器上修改模板文件,触发了模板文件修改事件,在监听事件的处理过程中,添加历史版本记录,但处理过程中要考虑排重,即在后台修改时已经添加了历史记录,监听事件中就不要再添加。
模板备份/还原
WebFuture 支持模板备份/还原。支持平台级和站点级两级备份/还原。平台级的模板备份/还原可以针对整个平台的所有模板和风格文件进行备份/还原,站点级的备份/还原则是只针对当前站点的所有模板和风格文件进行备份/还原。备份包中的文件除了模板文件以外,还包含风格样式文件,包含所有设备。还原时不覆盖没有修改过的文件,以避免因为模板文件修改而引发清理全站缓存。支持定时自动备份和对过期备份包文件的自动清理。
模板权限
可以在系统后台“用户与权限管理”中,设置站内管理员以不同的角色权限,以获得或仅授权对站群或站点模板的管理权限,方便对站群模板进行分级维护。
此外,WebFuture 支持模板引擎是限定了前台模板文件只能调用系统内置服务,不能进行 IO 等操作,以防止普通管理员通过修改模板来提权得到 WebShell。在单个站点中,网站的模板修改权限一般是交给站点超管或技术人员,他们拥有着服务器权限、数据库权限,所以隐性权限往往大于站点超管,但这没有什么问题。若是在集约化网站群模式下,假如平台管理员为了减少自己的工作量,可能想对子站管理员开放模板修改权限,让子站自己修改模板,但这种情况下,肯定又会担心他们修改模板的话,就能直接访问平台中的所有数据,可以利用修改模板来提权得到 WebShell,从而获得超过平台超管的更高权限。我们系统中早就预见到了这种情况,所以改进了模板解析引擎功能,对 Razor 中的 IO 读写等操作进行了限制,如限定前台模板代码中只能调用系统内置的服务、不能直接访问数据库中的数据、子站超管只能修改自己站点下的模板文件等等一系列安全防护措施,在给最大限度模板管理自由的同时以确保系统最高的安全性。