2018年11月16

firekylin二次开发之自定义主题

firekylin二次开发前提,首要任务就是先自定义主题,然后才能继续后面的各种需求开发,本次记录一下自定义主题的第一步的过程。

准备工作

  • 仓库版安装
  • 复制主题
  • 增加自定义js
  • 引入自定义js
  • 测试并调试

仓库版安装

首先,你需要以仓库版安装,才有机会二次开发,具体教程参考:firekylin仓库版安装

复制主题

复制当前主题,新增一个版本,以此作为备份,防止修改过多切出错或想还原。

firekylin系统的前台页面是用的主题方式,默认在项目根目录下www/theme下,这里面每一个文件夹便是一个主题,默认主题为firekylin,每个主题文件夹都会有一个package.json文件,这个文件里的两个属性很重要:nameversion,分别代表当前主题名称主题版本

复制当前默认主题,我这里把文件夹修改成firekylin-v2,再打开里面的package.json,把nameversion修改成如下:

{
"name": "firekylin-v2",
"version": "0.2.0",
}

然后把这个文件夹上传到服务器,如果直接就是在服务器搞可以忽略。

最后测试一下主题是否安装成功:登录后台管理系统,在主题设置页面,如果能看到如下图所示,代表主题安装第一步成功:

配置主题.png

如果以上都OK,尝试选择新的主题,提交,如提示成功,再次访问前台首页,打开控制台,网络调试,看下页面中加载的资源是否是从新主题下加载,如果没有效果,尝试清除浏览器缓存,再次尝试,最终应该会看到类似下图的效果:

resource.png

如果红色框中的内容是我们新复制的主题名称,就代表对了,默认是firekylin

增加自定义js

在新主题版本中增加一个新的js文件,作为以后自定义处理逻辑。

在新主题目录下的res/js下面新增一个js文件,我这里用的是v2.js

引入自定义js

在公共文件中引入你这个新的js文件。

在新主题目录下的layout.html中,在接近最后面的地方,找到下面的代码:

<script src="/theme/{{options.theme}}/res/js/firekylin.js" data-ls="js_firekylin"></script>

在此行后面再加一行:

<script src="/theme/{{options.theme}}/res/js/v2.js" data-ls="js_v2"></script>

测试并调试

再次访问前台,任何一个页面,没有效果还是清除缓存再次尝试,如果成功加载了新的v2.js,代表新增的js引入成功,后面就可以想干啥就干啥了。

本文链接:https://yaimeet.com/post/firekylin-development-custom-theme.html

-- EOF --

Comments