ChanCMS

ChanCMS系列教程二:模板开发

2025-07-07 03:06:59 阅读(2527)

「导读」ChanCMS教程之模板开发,模板目录介绍、模板文件介绍、模板开发核心流程、自定义模板数据。

模板目录

default默认模板路径

app/modules/web/view/default

模板文件

default默认模板核心模板文件

common/head.html 头部
common/footer.html 底部
common/nav.html 导航
common/search.html 搜索
common/meta.html  meta
common/lang.html 语言切换
index.html  首页
list.html 列表页
article.html 文章页
page.html  单页
search.html 搜索页
tag.html tag 列表页面
message.html  留言
404.html 404页面
500.html 500页面

default默认模板静态资源

默认模板静态资源目录

app/public/template/default/

模板开发核心流程(例:模板名称为chancms)

1. 创建模板目录

在目录下创建模板目录

app/modules/web/view/

2. 创建模板文件

在view目录下,创建chancms文件夹,把默认default模板中的文件复制过来,或者直接复制一份default文件夹并修改名称为chancms。

3. 创建模板静态资源

在`app/public/template/`目录下创建模板静态资源目录chancms,和模板目录名称保持一直。

4.修改默认模板名称

默认模板为default,当模板文件和静态资源都已经按照上面要求操作完成后,在后台管理系统->站点管理 ,默认default模板名称改成chancms。

5.根据自己的需求写静态页面,然后调用标签实现模板皮肤的开发。

自定义模板数据

复制一份`app/modules/web/controller/home.js`文件,进行备份。默认home首页数据固定,如果自己需要功能,调用common.js文件里面的方法。

在`app/modules/web/controller/home.js`中找到首页渲染的方法进行修改。

//首页展示特定栏目id为1,2,3的最新文章(头条和最新内容)
let article = await CommonService.getArticleListByCids([1,2,3,])
//获取所有栏目的最新文章(头条和最新内容)
let article = await CommonService.getArticleListByCids();
//指定栏目内容调用 cid->栏目id len->个数 attr->头条 2推荐 3轮播 4热门
let news = await CommonService.getArticleListByCid(cid, len = 5, attr = "");

更多的通用方法可以查看`app/modules/home/service/common.js`,需要什么数据直接调用对应方法,基本常见的都已经封装。

ChanCMS 当前页面数据:

site-> {"name":"ChanCMS","domain":"www.chancms.top","email":"867528315@qq.com","wx":null,"icp":"皖ICP备2024030927号-1","code":"","title":"ChanCMS内容管理系统","keywords":"chancms_ChanCms_禅cms_网站建设_网站制作_企业建站","description":"chancms是一款基于Express和MySQL研发的高质量实用型CMS管理系统。它具备多种类型网站开发,公司,企业,学校,政府,图片,下载,产品等各类型网站建设。易扩展、基于模块化和插件化开发模式,适用于商用企业级程序开发。","json":""}

nav-> [{"id":9,"pid":0,"name":"首页","pinyin":"home","path":"/home","orderBy":1,"target":"0","status":"0","listView":"chanyue.html","articleView":"chanyue.html","seoTitle":"","seoKeywords":"","seoDescription":"","type":"1","level":1},{"id":1,"pid":0,"name":"案例","pinyin":"case","path":"/case","orderBy":2,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"禅cms案例","seoKeywords":"禅cms,ChanCMS","seoDescription":"禅cms网站案例","type":"0","level":1},{"id":2,"pid":0,"name":"文档","pinyin":"docs","path":"/docs","orderBy":3,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS文档","seoKeywords":"ChanCMS,禅cms,cms,express,nodejs","seoDescription":"ChanCMS使用文档","type":"0","level":1},{"id":3,"pid":0,"name":"模板","pinyin":"muban","path":"/muban","orderBy":4,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS模板","seoKeywords":"禅cms,ChanCMS","seoDescription":"ChanCMS模板市场","type":"0","level":1},{"id":5,"pid":0,"name":"定制","pinyin":"custom","path":"/custom","orderBy":5,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS定制","seoKeywords":"ChanCMS,禅cms,cms,nodecms,express","seoDescription":"ChanCMS基于express进行可定制开发需求","type":"0","level":1},{"id":8,"pid":0,"name":"关于","pinyin":"about","path":"/about","orderBy":6,"target":"0","status":"0","listView":"list.html","articleView":"page.html","seoTitle":"ChanCMS","seoKeywords":"ChanCMS","seoDescription":"ChanCMS","type":"1","level":1}]

category-> [{"id":9,"pid":0,"name":"首页","pinyin":"home","path":"/home","orderBy":1,"target":"0","status":"0","listView":"chanyue.html","articleView":"chanyue.html","seoTitle":"","seoKeywords":"","seoDescription":"","type":"1","level":1},{"id":1,"pid":0,"name":"案例","pinyin":"case","path":"/case","orderBy":2,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"禅cms案例","seoKeywords":"禅cms,ChanCMS","seoDescription":"禅cms网站案例","type":"0","level":1},{"id":2,"pid":0,"name":"文档","pinyin":"docs","path":"/docs","orderBy":3,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS文档","seoKeywords":"ChanCMS,禅cms,cms,express,nodejs","seoDescription":"ChanCMS使用文档","type":"0","level":1},{"id":3,"pid":0,"name":"模板","pinyin":"muban","path":"/muban","orderBy":4,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS模板","seoKeywords":"禅cms,ChanCMS","seoDescription":"ChanCMS模板市场","type":"0","level":1},{"id":5,"pid":0,"name":"定制","pinyin":"custom","path":"/custom","orderBy":5,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS定制","seoKeywords":"ChanCMS,禅cms,cms,nodecms,express","seoDescription":"ChanCMS基于express进行可定制开发需求","type":"0","level":1},{"id":8,"pid":0,"name":"关于","pinyin":"about","path":"/about","orderBy":6,"target":"0","status":"0","listView":"list.html","articleView":"page.html","seoTitle":"ChanCMS","seoKeywords":"ChanCMS","seoDescription":"ChanCMS","type":"1","level":1}]

friendlink-> [{"title":"ChanCMS官网","link":"https://www.chancms.top"}]

static_url-> /public/template/chancms/

frag--->{"PowerBy":"<p style=\"text-align: center;\">Powder By <a href=\"http://www.chancms.top\" target=\"_blank\" rel=\"noopener\">ChanCMS v3.0.14</a></p>","chancms":"<p><span style=\"font-size: 14px;\">ChanCMS是一款基于Node、Express、MySQL、Vue3研发的高质量实用型CMS系统。轻量、灵活、稳定、高性能、易扩展,让开发更简单。</span></p>"}

tag--->{}

position------>[{"id":2,"pid":0,"name":"文档","pinyin":"docs","path":"/docs","orderBy":3,"target":"0","status":"0","listView":"list.html","articleView":"article.html","seoTitle":"ChanCMS文档","seoKeywords":"ChanCMS,禅cms,cms,express,nodejs","seoDescription":"ChanCMS使用文档","type":"0","level":1}]

navSub------>

article------>{"id":82,"cid":2,"subCid":"","title":"ChanCMS系列教程二:模板开发","shortTitle":"","tagId":"","attr":"","articleView":null,"source":"","author":"","description":"ChanCMS教程之模板开发,模板目录介绍、模板文件介绍、模板开发核心流程、自定义模板数据。","img":"","content":"<h3>模板目录</h3>\n<p>default默认模板路径</p>\n<pre class=\"language-markup\"><code>app/modules/web/view/default</code></pre>\n<h3>模板文件</h3>\n<p><strong>default默认模板核心模板文件</strong></p>\n<pre class=\"language-markup\"><code>common/head.html 头部\ncommon/footer.html 底部\ncommon/nav.html 导航\ncommon/search.html 搜索\ncommon/meta.html meta\ncommon/lang.html 语言切换\nindex.html 首页\nlist.html 列表页\narticle.html 文章页\npage.html 单页\nsearch.html 搜索页\ntag.html tag 列表页面\nmessage.html 留言\n404.html 404页面\n500.html 500页面</code></pre>\n<p><strong>default默认模板静态资源</strong></p>\n<p>默认模板静态资源目录</p>\n<pre class=\"language-markup\"><code>app/public/template/default/</code></pre>\n<h3>模板开发核心流程(例:模板名称为chancms)</h3>\n<p>1. 创建模板目录</p>\n<p>在目录下创建模板目录</p>\n<pre class=\"language-markup\"><code>app/modules/web/view/</code></pre>\n<p>2. 创建模板文件</p>\n<p>在view目录下,创建chancms文件夹,把默认default模板中的文件复制过来,或者直接复制一份default文件夹并修改名称为chancms。</p>\n<p>3. 创建模板静态资源</p>\n<p>在`app/public/template/`目录下创建模板静态资源目录chancms,和模板目录名称保持一直。</p>\n<p>4.修改默认模板名称</p>\n<p>默认模板为default,当模板文件和静态资源都已经按照上面要求操作完成后,在后台管理系统->站点管理 ,默认default模板名称改成chancms。</p>\n<p>5.根据自己的需求写静态页面,然后调用标签实现模板皮肤的开发。</p>\n<h3>自定义模板数据</h3>\n<p>复制一份`app/modules/web/controller/home.js`文件,进行备份。默认home首页数据固定,如果自己需要功能,调用common.js文件里面的方法。</p>\n<p>在`app/modules/web/controller/home.js`中找到首页渲染的方法进行修改。</p>\n<pre class=\"language-markup\"><code>//首页展示特定栏目id为1,2,3的最新文章(头条和最新内容)\nlet article = await CommonService.getArticleListByCids([1,2,3,])\n//获取所有栏目的最新文章(头条和最新内容)\nlet article = await CommonService.getArticleListByCids();\n//指定栏目内容调用 cid->栏目id len->个数 attr->头条 2推荐 3轮播 4热门\nlet news = await CommonService.getArticleListByCid(cid, len = 5, attr = \"\");\n\n</code></pre>\n<p>更多的通用方法可以查看`app/modules/home/service/common.js`,需要什么数据直接调用对应方法,基本常见的都已经封装。</p>","status":0,"pv":2527,"link":"","createdAt":"2024-05-30T07:30:39.000Z","updatedAt":"2025-07-06T19:06:59.000Z","field":{}}

article.tags------>

news------>[{"id":86,"title":"ChanCMS系列视频六:PM2定时清理logs日志(视频)","shortTitle":"","img":"","createdAt":"2024-05-30T08:27:10.000Z","description":"日志可以方便我们查找问题,过多的日志会占用空间,降低服务器运行性能。定期清理日志是必不可少的一步。","pinyin":"docs","name":"文档","path":"/docs"},{"id":85,"title":"ChanCMS系列教程五:Linux服务器部署教程(视频)","shortTitle":"","img":"","createdAt":"2024-05-30T08:18:02.000Z","description":"ChanCMS系列教程五:Linux服务器部署教程(视频操作),讲解nodejs环境部署,mysql安装,pm2运行,域名绑定,反向代理等操作。","pinyin":"docs","name":"文档","path":"/docs"},{"id":84,"title":"ChanCMS系列教程四:后台基本操作(视频)","shortTitle":"","img":"","createdAt":"2024-05-30T08:13:11.000Z","description":"ChanCMS后台基本操作视频,主要讲解一下功能点,通过此视频可以大概了解ChanCMS基本功能。","pinyin":"docs","name":"文档","path":"/docs"},{"id":83,"title":"ChanCMS系列教程三:常用模板标签","shortTitle":"","img":"","createdAt":"2024-05-30T08:06:25.000Z","description":"ChanCMS系列教程三:常用模板标签","pinyin":"docs","name":"文档","path":"/docs"},{"id":82,"title":"ChanCMS系列教程二:模板开发","shortTitle":"","img":"","createdAt":"2024-05-30T07:30:39.000Z","description":"ChanCMS教程之模板开发,模板目录介绍、模板文件介绍、模板开发核心流程、自定义模板数据。","pinyin":"docs","name":"文档","path":"/docs"},{"id":81,"title":"ChanCMS系列教程一:安装运行快速入门","shortTitle":"","img":"","createdAt":"2024-02-03T14:21:08.000Z","description":"环境配置​前置条件:安装node.js mysql 和 mysql可视化工具。本地开发推荐用phpStudy。","pinyin":"docs","name":"文档","path":"/docs"}]

hot------>[{"id":81,"title":"ChanCMS系列教程一:安装运行快速入门","path":"/docs","pv":4741},{"id":82,"title":"ChanCMS系列教程二:模板开发","path":"/docs","pv":2528},{"id":84,"title":"ChanCMS系列教程四:后台基本操作(视频)","path":"/docs","pv":2177},{"id":85,"title":"ChanCMS系列教程五:Linux服务器部署教程(视频)","path":"/docs","pv":1807},{"id":83,"title":"ChanCMS系列教程三:常用模板标签","path":"/docs","pv":1656},{"id":86,"title":"ChanCMS系列视频六:PM2定时清理logs日志(视频)","path":"/docs","pv":1469}]

imgs------>[]

pre------>{"id":81,"title":"ChanCMS系列教程一:安装运行快速入门","name":"文档","path":"/docs"}

next------>{"id":83,"title":"ChanCMS系列教程三:常用模板标签","name":"文档","path":"/docs"}