模板制作教程:入门教程

模板设计入门指南

视频操作教程:https://www.xunruicms.com/doc/video-%E7%BD%91%E7%AB%99%E6%A8%A1%E6%9D%BF%E5%88%B6%E4%BD%9C%E6%95%99%E7%A8%8B.html



宸逸模板引擎是将cms固定标签转换成php执行代码,让界面设计者可以无需了解php技术,进行数据查询和调用

宸逸模板制作人员需要具备的基本条件

1. 具备基本的html代码知识(必备);

2. 懂得简单的逻辑判断和循环知识(可选);

3. 最好也能懂点SQL语句知识(可选);

4. 懂点css和js技术(可选);

5. 能够熟练操作宸逸CMS系统。

模板分为电脑端pc和手机端mobile,系统会自动识别客户端来选择对应的模板。

blob.png

模板结构电脑端和手机端的目录层次结构是一样的,当手机端没有模板时会调用电脑端模板来显示。

blob.png

default是模板目录,在后台网站配置中选择,默认为default。

宸逸CMS采用合理规范化的目录层级来存储模板,层次分明,一目了然:

/存储目录/终端目录/自定义名称/前端或会员/具体文件.html
/template/pc/default/home/index.html

前端页面

tempate/pc或mobile/default可定义名字/home/*.html 

前端模块页面

tempate/pc或mobile/default可定义名字/home/模块目录/*.html

会员模板

tempate/pc或mobile/default可定义名字/member/*.html

会员模块页面

tempate/pc或mobile/default可定义名字/member/模块目录/*.html

如何通过url找模板文件

设计模板时或者改模板时找不到当前页面是哪一个模板文件怎么办?很多人遇到这个问题。

例如,你访问/index.php?s=news这个地址,我如何知道它对应的模板文件是什么?


方法一:

1、启用开发者模式,在/index.php中修改一下参数:

// 是否是开发者模式
define('IS_DEV', 1);

2、然后进入需要访问的页面url

image

下面的【火图标】views选项

image


方法二:

1、启用开发者模式,在/index.php中修改一下参数:

// 是否是开发者模式
define('IS_DEV', 1);

2、然后进入需要访问的页面url

3、然后在浏览器中查看页面源代码,即可看到

image


制作网站模板/设置模板目录

操作视频:https://www.xunruicms.com/doc/video-%E7%BD%91%E7%AB%99%E6%A8%A1%E6%9D%BF%E5%88%B6%E4%BD%9C%E6%95%99%E7%A8%8B.html


CMS主要任务是后台的数据管理,前端界面可以由开发者设计出各种各样的展示界面来显示后台的数据。


1、了解CMS模板目录结构

http://help.xunruicms.com/369.html


2、创建自己的模板

新建模板目录:/template/pc/test_html/ (如果创建移动端模板,就建在mobile目录下即可)

test_html目录就是新的模板目录,用于存放html界面的解析文件


新建风格目录:/static/test_css/

test_css目录用于存放css和图片资源的


image.png



3、在后台指定当前网站的模板

image.png

选择好之后需要保持配置并更新缓存生效。


4、开始设计模板html文件......

这时候模板html文件都没有创建,是一个空白的模板目录,这时候你访问网站首页的时候,会有下面的提示:

模板文件 (/pc/test_html/home/index.html) 不存在

因此,你需要手动创建该文件,你可以通过url访问的提示模板来创建模板html文件

固定变量介绍

页面SEO信息变量:

{$meta_title}

引用css风格目录:

常量对照目录表:

{HOME_THEME_PATH} 当前模板风格 /static/风格目录/
{ROOT_THEME_PATH} 绝对与主站域名的路径
{THEME_PATH} 资源目录/static/
{MOBILE_THEME_PATH}移动端风格目录路径

{$my_web_url} 当前页面的url地址
{SITE_ID} 当前项目的ID号,默认为1
{SITE_URL} 当前网站的url域名
{SITE_MURL} 当前网站的移动端域名
{CLIENT_URL} 当前终端的域名

{DOMAIN_NAME} 当前url的域名部分

{SITE_NAME} 当前网站名称
{SITE_LOGO} 当前网站的logo图片
{LANG_PATH} 当前网站的语言包目录
{MEMBER_URL} 用户中心地址
{SITE_ICP} 网站ICP备案号
{SITE_TONGJI} 网站统计代码
{APP_DIR} 项目App目录,也就是url中的s变量值
{MOD_DIR} 如果是模块页面,表示当前模块目录;否则不解析

系统关键js引用:


var is_mobile_cms = '{IS_MOBILE}';



所有引用方式都是采用电脑URL的方式引用

前端模板JS类 cms.js

系统JS函数类文件

{THEME_PATH}assets/js/cms.js

它用于/home/***.html模板的表单操作、提交操作、页面点击动作操作、阅读量读取、收藏等动作的支持

注意:这个js库仅仅适用于新手或者懒人




应用傻瓜式js库方法:将以下代码放在html的头部head内




var is_mobile_cms = '{IS_MOBILE}';



如果没有使用系统的js函数(dr_前缀开头的js函数)就可以不必引用他了





专业前端人员可以参考下cms.js的函数体来自己写js函数。

// 提交时追加执行函数
function dr_post_addfunc(func) {
    cms_post_addfunc.push(func);
}

// 处理post提交
function dr_post_submit(url, form, time, go) { }

// ajax提交
function dr_ajax_submit(url, form, time, go) { }

// ajax提交登录或者注册
function dr_ajax_member(url, form) { }

// 提示
function dr_cmf_tips(code, msg, time) { }

... 等等



模板调试信息debug用法

视频教程:https://www.xunruicms.com/doc/video-xr-Bom%E5%AD%97%E7%AC%A6%E6%B8%85%E7%90%86%E6%96%B9%E6%B3%95.html


用于循环标签的诊断测试,方便查看标签的数据情况,数据库不出现的原因等问题

使用方法:

1、开启开发者模式,在index.php文件中开启

2、使用下方的变量进行输出调试信息


例如

{module *******}

{/module}
{$debug} 会输出这个标签的诊断信息


当标签自定了return,需要这样改写

{module ******* return=r}

{/module}
{$debug_r} 会输出这个标签的诊断信息

---

{module ******* return=rs}

{/module}
{$debug_rs} 会输出这个标签的诊断信息

需要加上后缀


查看网页源代码

在做模板标签时,有时候需要查看网页源代码来排查标签是否正常,查看方式为:

{xunruicms_img_title}

1、访问某个网站地址

2、在网页空白处点击【网页源代码】

3、找的对应的区域即可

==================后台查看源代码的方法==========================