魔方财务是一套集客户、产品、订单、账单管理于一体的自动化管理系统。满足客户自主下单、自助交付及自主管理目的无需人工干预，提高业务自动化水平

虽然智简魔方官方自带了一套模板，但往往有时候有人就喜欢其他的类型很多的人会选择去购买他人已经开发好的模板，但也有很多人会选择自己开发当我们去查看官方文档时，我*，为什么就一点点教程，我去群里问问，群友一号“万能debug”，群友二号“给一箱红牛我告诉你”，群友三号“我也不会”此时此刻，你萌生了放弃的想法，别急，看看我的教程！

第一步：你肯定要有开发思路和大概样式，并且懂一些html技巧首先我们需要有一个能够直接访问的html页面（如果你只是自己用，那就别看了）如：

 

但是这个页面他不能跟着魔方财务后台的修改而变化那么这个时候我们就需要用到变量了（我是这么理解的）

我们需要把文件解刨成四部分：样式文件、头部文件、页面文件、底部文件

样式文件， 我推荐放在assets文件夹中分成css、js、img、svg四个文件夹，以便于使用头部文件，也就是这个部分的代码片段页面文件， 就是里面的所有代码片段底部文件， 位于结束后的代码片段

如何存放文件呢？样式文件存放于assets文件夹、头部文件跟底部文件存放于common文件夹，并分别命名为header.html和footer.html，页面文件就放在你模板的目录（/public/themes/web/模板名字）按照上面的教程，我们把文件解刨之后，把首页文件命令index.html，接下来我们要把头部跟底部文件引入到页面里头部引入：{include file="common/header" /}底部引入：{include file="common/footer" /}大概是这样子

当你访问，你可能会发现css这些样式全部404，这是因为我们要修改文件的路径（大部分在头部跟底部，少部分在页面）比如我的

我们只需要在assets前面加上{$setting.web_view}/就行了也就是把全部需要引入样式文件的路径全部修改一遍，大功告成首页就写完了，快去欣赏一下你的杰作吧！

emmm，进阶教程等我有空再更新~最后的最后，可以加入{debug}让你看到系统的一些变量，也可以去参考官方模板！

怎么样，看完你是否已经学会了如何开发一个魔方财务前端的主题首页呢？看完就赶紧动起手来开发，现在行动，还可参与智简魔方财务系统主题开发大赛哦~

最后，附上智简魔方官方开发文档