如何编辑、管理、调用模板

简单易懂的模板引擎,美工人员可独立完成模板制作及数据调用,让程序人员和美工人员分工协作,最大可能提高团队执行力。多个工具箱,可方便的调用来自其他系统的数据。如果你懒得换,默认基于跨设备,跨浏览器优秀的用户体验的bootstrap3.0模板,已经能支持所有主流浏览器(甚至包括IE7),提供对平板和智能手机的支持。如果你喜欢张扬个性,完全可以轻松定制自己的模板。

所有模板方案都保存在 ./_themes/ 目录下,每一个模板就为一个子文件夹,更改模板文件将更改到网站的外观。如从H!Grid CMS下载默认样式模板名称为 hicms

文件结构

模板文件结构例子如下:

_themes/
    hicms/
    css/
        js/
        layouts/
        partials/
        templates/

各文件夹的内容

  • css :放入CSS文件,可方便使用 {{ theme:css src="bs.min.css"}}调用,这个不是必须的。
  • js :与CSS文件夹类似,放入JavaScript文件,可方便使用 {{ theme:js src="bs.min.js"}}调用,这个不是必须的。
  • layouts:整个站点的风格文件 {{ layout_content }}调用,这个是 必须 的。
  • partials :与CSS文件夹类似,放入一段多次调用的小代码,可方便使用 {{ theme:partial src="_hicms_footer" }}调用,这个不是必须的。
  • templates :这是站点所依存的模板文件,至少有1个模板,这个是 必须 的。

当然,完全可以将 cssjs 文件放在别处,如同普通的网站一样调用。

如何安装一个新模板

将新模板文件拷贝进 ./_themes/ 目录下,这样文件结构如下:

_themes/
    newtheme/
    css/
        js/
        layouts/
        partials/
        templates/

更改根目录下的_config/settings.yaml 文件为 _theme: newtheme ,刷新后可看到效果

提示:部分模板可能使用到自定义变量,如果显示有部分错误,请更改模板和内容中相应的设置

随机文章 Random Posts