首页 > 代码库 > 为Luci添加自定义主题
为Luci添加自定义主题
最近打算对Openwrt中做一些UI上的定制，研究了一下Luci自定义主题，在这里记录一下.
我是直接在路由器上操作的，所以这里只是说明如何直接在运行着Openwrt的路由器上修改Luci主题。
自定义Luci的主题主要要修改的有3个地方
1、静态资源(样式表，图片，JS文件)
Luci将网页的静态资源都放在/www/luci-static下，默认可能有2个目录，这个跟你安装的主题多少有关系，以我的为例，我只安装Openwrt模板，所以能看到有2个目录openwrt.org和resources。
openwrt.org 这个目录保存的是主题中用到的css文件和图片，所以我们自定义主题的css和图片都可以放在这里。
resources 这个目录保存是的主题用到的公共的js文件。
这样我们自定义的主题也可以按照这个目录结构来保存我们的资源文件。我建了一个yuchen目录放我的资源文件。当然，那些js具体是放在resources还是以自定义主题命名的目录里，就随便你啦。
2、页面模板
Luci的页面模板其实是由2个带有Lua脚本的htm组合而成，分别是header.htm和footer.htm，将这2个文件生成的html代码组合起来就是Luci中所有页面的框架。这2个文件位于/usr/lib/lua/luci/view/themes中，我在这个目录里建了以个yuchen目录，并将自己修改的header.htm和footer.htm放在此处。在这里我只是打算说明一下Luci的目录结构，具体的文件内容由于涉及到lua脚本，所以就不详细的说如何修改这2个文件了，相信随便有点前端开发经验的都能搞定。
3、配置文件
前面2步完成以后，就要将自己定义的主题配置到luci的配置文件中，这个文件位于/etc/config/luci，文件结构如下：
vi /etc/config/luci
1 config ‘core‘ ‘main‘ 2 option ‘lang‘ ‘zh_cn‘ 3 option ‘resourcebase‘ ‘/luci-static/resources‘ 4 option ‘mediaurlbase‘ ‘/luci-static/openwrt.org‘ 5 6 config ‘extern‘ ‘flash_keep‘ 7 option ‘uci‘ ‘/etc/config/‘ 8 option ‘dropbear‘ ‘/etc/dropbear/‘ 9 option ‘openvpn‘ ‘/etc/openvpn/‘10 option ‘passwd‘ ‘/etc/passwd‘11 option ‘opkg‘ ‘/etc/opkg.conf‘12 option ‘firewall‘ ‘/etc/firewall.user‘13 option ‘uploads‘ ‘/lib/uci/upload/‘14 15 config ‘internal‘ ‘languages‘16 option ‘zh_cn‘ ‘Chinese‘17 option ‘en‘ ‘English‘18 19 config ‘internal‘ ‘sauth‘20 option ‘sessionpath‘ ‘/tmp/luci-sessions‘21 option ‘sessiontime‘ ‘3600‘22 23 config ‘internal‘ ‘ccache‘24 option ‘enable‘ ‘1‘25 26 config ‘internal‘ ‘template‘27 option ‘compiler_mode‘ ‘memory‘28 option ‘compiledir‘ ‘/tmp/luci-templatecache‘29 30 config ‘internal‘ ‘themes‘31 option ‘OpenWrt‘ ‘/luci-static/openwrt.org‘
我们只需要在config ‘internal‘ ‘themes‘ 这一节下面增加一行自己的主题就行，在后面添加：
option ‘yuchen‘ ‘/luci-static/yuchen‘
然后保存退出，在浏览器中打开luci，将主题选择为yuchen，刷新就能看到自己定义的主题了。
个人比较懒，没有截图，只是想记录下来，免得自己日后忘记，大家就凑合着看吧。