模板概览

微微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的目录结构

公共部分

在默认的模板中,我们抽离了一些组件成为公共部分,这可以让我们少写代码,自由的引入组合!

  1. header.html 用于放置到头部head里面
  2. nav.html 用于导航引入
  3. bread.html 面包屑,用于标识层级
  4. js.html js文件
  5. footer.html 页脚文件
  6. sidebar.html 侧边栏文件

以上6个文件都是公共组件,在各个页面中进行引入即可,可以减少代码量,让代码更加简洁

页面部分

  1. index.html 不用说了,这个一定就是网站的首页模板文件了。网站首页模板自由组装即可,页没有特殊的变量渲染。
  2. category.html 分类页面,这个页面集成了 分类列表,搜索,用户主页,tag列表为一身体。最大地简化了页面数量。如果您想对每个功能都进行特殊化定制,那么使用标签来判断页面是个不错的选择(isCategory,isSearch,isAuthor,isTag)
  3. article.html 文章详情页面,最终文章的落地页,这个就不用说了,不管是分类还是搜索还是用户主页,亦或者是tag,最终的导向就是文章了。
  4. page.html 单页页面,微微CMS并没有跟其他CMS一样,把单页放在文章里面去,而是独立一张表,一个页面存在。单页大部分可以自定义模板数据,和文章访问的方式也不同。
  5. message.html 留言页面,这个页面是一个典型的单页自定义页面,通过单页的自定义模板中指定message.html为承载单页显示的html,可以让单页获得更多的个性化功能(这个页面不是必须要的,不要固定自己的思维,留言可以做在任何页面)。
  6. 404.html 这个就不用说了吧!当程序找不到路径或者找不到自由的时候就会抛出404.html里面的内容!

以上就是实际页面上的内容了。如果你不想复用公共组件,那么去除message.html 也就5个页面就完成了整个网站的构造,是不是特别简单:ps 建议层级目录上使用平铺,不要做上下级增加复杂度。