码迷,mamicode.com
首页 > 其他好文 > 详细

为Luci添加自定义主题

时间:2014-07-19 23:04:56      阅读:524      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   文件   io   html   

最近打算对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,刷新就能看到自己定义的主题了。

 

个人比较懒,没有截图,只是想记录下来,免得自己日后忘记,大家就凑合着看吧。

为Luci添加自定义主题,布布扣,bubuko.com

为Luci添加自定义主题

标签:style   blog   color   文件   io   html   

原文地址:http://www.cnblogs.com/jzyuchen/p/3855528.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!