微微CMS模板的制作非常简单,并没有刻意的去追修Layout之类的方式来增加模板认知负担,您只需要了解基本的HTML语法和给定的函数以及所在的页面能够获取到什么变量即可!
基础模板构成
通过对 themes 目录下得default模板解析后,我们可以看到一个模板的基本标准即:
- static 目录,存放静态文件
- views 目录,存放视图文件
- info.json 文件,用于标识模板文件的信息
- screenshot.png 文件,模板的预览图片
- vvdata.json 文件,模板自定义的数据文件
info.json 数据解析
info.json 提供了模板的基础信息数据,包含了模板包名称,模板秒速,模板作者,作者的邮箱联系方式,模板的版本,作者的网站首页,是不是十分简单。按照这个demo直接粘贴替换即可!
{
"package":"默认模板",
"description":"微微CMS官方提供的默认模板",
"author":"微微CMS",
"mail":"aveyuan@osblog.cn",
"version":"4.0",
"link":"www.vvcms.cn"
}
Static 目录解析
static 目录用于存放静态文件,可以通过 /static 路径文件直接访问
静态文件中一般存放的数据
- 第三方静态库
- js
- css
- images
特别的关注的目录
在后台编辑器中,也就是主题管理中的模板编辑,会把静态文件中的/static/js 和/static/css 进行渲染,让您可以在后台的模板编辑中随时进行静态文件的编辑!所以,如果您要编辑第三方js库,应该把三方js放入到js中。
views目录解析
views 是页面最重要的组成部分了,因为它提供了页面可视化的html。来看看views的目录结构
公共部分
在默认的模板中,我们抽离了一些组件成为公共部分,这可以让我们少写代码,自由的引入组合!
- header.html 用于放置到头部head里面
- nav.html 用于导航引入
- bread.html 面包屑,用于标识层级
- js.html js文件
- footer.html 页脚文件
- sidebar.html 侧边栏文件
以上6个文件都是公共组件,在各个页面中进行引入即可,可以减少代码量,让代码更加简洁
页面部分
- index.html 不用说了,这个一定就是网站的首页模板文件了。网站首页模板自由组装即可,页没有特殊的变量渲染。
- category.html 分类页面,这个页面集成了 分类列表,搜索,用户主页,tag列表为一身体。最大地简化了页面数量。如果您想对每个功能都进行特殊化定制,那么使用标签来判断页面是个不错的选择(isCategory,isSearch,isAuthor,isTag)
- article.html 文章详情页面,最终文章的落地页,这个就不用说了,不管是分类还是搜索还是用户主页,亦或者是tag,最终的导向就是文章了。
- page.html 单页页面,微微CMS并没有跟其他CMS一样,把单页放在文章里面去,而是独立一张表,一个页面存在。单页大部分可以自定义模板数据,和文章访问的方式也不同。
- message.html 留言页面,这个页面是一个典型的单页自定义页面,通过单页的自定义模板中指定message.html为承载单页显示的html,可以让单页获得更多的个性化功能(这个页面不是必须要的,不要固定自己的思维,留言可以做在任何页面)。
- 404.html 这个就不用说了吧!当程序找不到路径或者找不到自由的时候就会抛出404.html里面的内容!
以上就是实际页面上的内容了。如果你不想复用公共组件,那么去除message.html 也就5个页面就完成了整个网站的构造,是不是特别简单:ps 建议层级目录上使用平铺,不要做上下级增加复杂度。