魔方金融是一套集客户、产品、订单、账单管理于一体的自动化管理系统无需人工干预，就能满足客户自主下单、自助交付、自主管理的目的，提高业务自动化水平虽然智简魔方官方有一套模板，但有时人们喜欢其他类型很多人会选择购买别人开发的模板，但也有很多人会选择自己开发。

当我们去查看官方文件时，我*，为什么一点教程，我去小组问，群友一号“万能debug”，群友二号“我告诉你一盒红牛”，群友三号“我也不会”此时此刻，你萌生了放弃的想法，别担心，看看我的教程！第一步：你必须有开发思路和一般风格，并了解一些html技能

首先，如果你只是自己用，我们需要有一个可以直接访问的html页面(那就别看了)如：

但是，他不能随着魔方财务背景的修改而改变这个页面然后我们需要在这个时候使用变量(我是这么理解的)我们需要将文件分为四个部分：风格文件、头部文件、页面文件、底部文件样式文件， 我推荐将assets文件夹分成css、js、img、四个svg文件夹，以便于使用

头部文件，即代码片段的这一部分页面文件， 所有代码片段都在里面底部文件， 代码片段位于结束后的代码片段如何存储文件？样式文件存储在assets文件夹中，头部文件和底部文件存储在common文件夹中，并分别命名为header.html和footer.html，页面文件放在你模板的目录中(/public/themes/web/模板名称)。

根据以上教程，我们解剖文件后，命令indexindex主页文件.html，接下来，我们将将头部和底部文件引入页面头部引入：{include file="common/header" /}底部引入：{include file="common/footer" /}

也许是这样当你访问时，你可能会发现css的所有风格都是404，因为我们需要修改文件的路径（大部分在头部和底部，少数在页面上） 比如我的我们只需要在assets前添加它{$setting.web_view}/就行了 也就是 修改所有需要引入样式文件的路径，大功告成。

首页写完了，快去欣赏你的杰作吧！ emmm，我有空的时候可以更新高级教程~最后，可以加入{debug}也可以参考官方模板，让您看到系统的一些变量！

来源：易风软件库