最近打算對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,刷新就能看到自己定義的主題了。
個人比較懶,沒有截圖,只是想記錄下來,免得自己日后忘記,大家就湊合着看吧。