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

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

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

时间: 2024-10-12 17:55:38

为Luci添加自定义主题的相关文章

Android Studio empty activity取消默认title的办法

解决办法: 1.找到res/values/styles.xml文件,在其中添加自定义主题,添加如下: <style name="myTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item

Android Dialog AlertDialog

1.普通的对话框 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" 4 android:gravity="center" 5 android:orientation=&q

Android 主题资源风格定制 &lt;1&gt;

无论是定制系统还是自行开发APP的UI,其无论是使用标准UI还是自定义UI,最终都是需要自己熟悉主题风格的各种属性设置,不过属性非常的多,如果需要知道某个UI可以临时查看一下SDK的  D:\liuzhibao\Android\sdk\platforms\android-N\data\res路径下的,但是这个是纯粹的资源文件,没有java文件,所以还是推荐repo下来framework/base代码. 下面先看看自定义View如何添加属性之类的: 新建一个PumpKinCustomeView

django-xadmin常用内容记录

自定义菜单名称: 1 修改app下的 apps.py文件 添加 class OperationConfig(AppConfig): name = 'operation' verbose_name = '用户操作' 2 修改app下的 __init__.py文件 添加 default_app_config = "operation.apps.OperationConfig" 添加自定义主题: 任选app 在adminx.py 中添加: from xadmin import views c

为 Drupal 7 网站添加自定义CSS

当我们在逛聊天室或者论坛时,经常会碰到有人提问怎么向 Drupal 网站中添加自定义CSS —— 通常来讲,通过 Drupal 主题来进行添加最好.不过在某些情况下,因为环境限制或网站管理员没有访问主题文件的权限,而不得不考虑其它办法. 今天本文就来介绍一下,如何使用CSS Injector模块来为 Drupal 7 网站中添加自定义CSS. (译注:不论是 CSS Injector 还是 CSS Editor,都可作为临时性的CSS添加和调整手段,但最终都还是应该通过主题CSS文件来进行添加)

创建自定义 jQuery 移动主题

自定义页面.工具栏.内容.表单元素.列表.按钮等元素的外观 智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求.jQuery Mobile 框架支持您创建能与原生应用程序开发结果相匹敌的移动 Web 体验,让用户能够通过 Web 浏览器提供对应用程序和网站的及时访问,而不是让他们下载和安装移动应用程序.本文将了解如何使用 jQuery Mobile 主题框架创建具有自定义品牌的移动网站和 Web 应用程序. 0 评论: Kris Hadlock, Web 开发人员/

Android-风格和主题

Android-风格和主题 一 Style和主题Theme的区别 1,Theme是针对窗体级别的,改变窗体样式 2,Style是针对窗体元素级别的,改变指定控件或者Layout的样式 二 使用Style的方式 1,创建Style 在res/values下创建styles.xml文件 添加节点(根节点) 添加自定义的style和其属性: style的写法格式 <style name="MyStyle" parent="指定的父style" name前面不需要有a

推荐5 款WordPress主题后台选项开发框架

在开发WordPress 主题的时候,借用成熟的WordPress 主题后台选项开发框架可以为我们省下不少功夫.相信你接触过不少国人做的所谓“原创”主题,一看后台都是千篇一律的界面(连CSS 都懒得改一下),这样所谓的“原创”主题也只能骗骗小白.今天为大家介绍5 款国外前沿的WordPress主题后台选项开发框架,如果你是WordPress 开发者,对你一定有帮助. 本文部分介绍文字由DeveWork.com 的Jeff 翻译自WPexplore,感谢原作者. Options Framework

android 主题和样式-style和Theme的区别和使用

项目中经常使用style和Theme,但却从来没有考虑过它们的区别,只会copy来copy去的,有时候还有些迷茫,为了彻底告别迷茫,现把这两者的区别和使用总结出来,供自己和大伙参考 一.作用域 Theme是针对窗体级别的,改变窗体样式. Style是针对窗体元素级别的,改变指定控件或者Layout的样式 二.使用方式 Theme 1. 在res\values\ 下创建themes.xml或者styles.xml文件 2. 添加<resouces>节点(根节点) 3. 添加自定义的style 4