当前博客:[WebUI系列]11.layuimini框架主页面改造

166 次浏览

博客作者:【汨酴】

个性签名:增强知识,努力学习

1.框架能为我所用才有用,先给其拍张原始照

2.接下来我们要真正让其为我所用,改造工程开始

  • 改造一:logo及标题

         进入\api\init.json

修改

"logoInfo": {
    "title": "汨涂WebUI",
    "image": "images/logo.png",//要改自己准备图片,这里就不演示了
    "href": ""
  },
  •  改造二:顶部模块显示

采用多模块并不显示,做如下修改

              
//index.html注释以下代码
  <!--电脑端头部菜单-->
                <!-- <ul
                    class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show">
                </ul> -->

                <!--手机端头部菜单-->
                <!-- <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>
                        <dl class="layui-nav-child layuimini-menu-header-mobile">
                        </dl>
                    </li>
                </ul> -->
  • 改造三:显示菜单项目

         进入\api\init.json

去繁就简修改成我们自己的

"menuInfo": [
    {
      "title": "常规管理",
      "icon": "fa fa-address-book",
      "href": "",
      "target": "_self",
      "child": [
        {
          "title": "汨涂博客",
          "href": "",
          "icon": "fa fa-home",
          "target": "_self",
          "child": [
            {
              "title": "火山视窗",              //修改标题
              "href": "page/welcome-1.html",      //修改链接
              "icon": "fa fa-tachometer",          //修改图标
              "target": "_self"
            },
            {
              "title": "火山安卓",
              "href": "page/welcome-2.html",
              "icon": "fa fa-tachometer",
              "target": "_self"
            }
          ]
        },
        {
          "title": "我爱火山",
          "href": "page/menu.html",
          "icon": "fa fa-window-maximize",
          "target": "_self"
        }
      ]
    }
  ]
  • 改造四:配色方案页

         进入js\miniTheme.js

3.主页面改造完成,已经是我们想要的了,让我们看看效果吧

Generic placeholder image
利快云编程教育平台 Time: 2021-10-13 19:59:00

老哥厉害,好样的

Generic placeholder image
手可摘星辰 Time: 2021-10-15 13:05:33

我什么时候才能这么厉害啊


[WebUI系列]11.layuimini框架主页面改造