02-YaYa-Layui-Admin-Plus基础配置

1
2
3
4
5
6
7
作者: 夜泊1990
企鹅: 1611756908
Q 群: 948233848
邮箱: hd1611756908@163.com
博客: https://hs-an-yue.github.io/
B 站: https://space.bilibili.com/514155929/
公众号: 丫丫模板的成神之路

第一章 首页LOGO配置

1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
需要修改的文件: yaya-layui-admin-plus/index.html (大概在37行~42行之间)

LOGO: svg标签,也可以换成图片
标题: h4标签

<!-- LOGO -->
<div class="yaya-logo">
<!-- LOGO图标 -->
<svg t="1769259060319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5060" width="25" height="25"><path d="M150.320611 720.240765c7.749498-8.218172 20.813025-8.218172 28.562523 0 7.995091 7.525394 7.995091 20.589944 0 29.05371l-50.559513 50.336432c-7.994068 8.218172-21.305235 8.218172-29.031197 0-8.017604-7.995091-8.017604-20.813025 0-29.031197L150.320611 720.240765 150.320611 720.240765zM786.42514 365.541347 786.42514 365.541347c0 70.167083-56.856939 126.800941-127.024022 126.800941s-127.269615-56.633858-127.269615-126.800941c0-69.654406 57.102532-126.778428 127.269615-126.778428S786.42514 295.374264 786.42514 365.541347L786.42514 365.541347zM659.401118 279.406594 659.401118 279.406594c-47.656393 0-86.11224 38.232766-86.11224 86.134753 0 47.433312 38.455847 85.666078 86.11224 85.666078 47.433312 0 86.157265-38.232766 86.157265-85.666078C745.55736 317.638337 706.83443 279.406594 659.401118 279.406594L659.401118 279.406594zM190.495612 645.964084 190.495612 645.964084c0-26.352181 1.452071-52.257178 4.846378-78.608336 1.429559-9.223059 2.411933-18.401092 4.109598-27.603685l-7.258311 2.90312c-16.703427 6.789637-32.180933 16.705474-45.981241 29.52443-13.778818 12.594853-35.329646 11.858072-48.14758-1.675152-2.411933-3.148713-4.600785-5.828752-5.806239-8.977465-21.281699-42.341341-28.048823-89.997734-20.791535-135.711891 7.258311-45.490054 28.048823-88.345094 62.908772-123.161041l0 0 0 0c31.44313-32.202423 70.88135-52.257178 111.74913-61.234643 34.859949-7.258311 70.680782-6.297426 105.519242 2.680039l6.274914-6.297426 0.5137-0.959861-0.5137 0c73.561389-73.092715 162.621774-122.669854 256.483512-147.83807 97.256044-26.396183 199.849654-26.396183 297.127188 0 12.349259 3.148713 21.282722 12.573363 24.431435 24.185842l0 0.491187 0 0.245593c25.882484 97.010451 25.882484 199.378933-0.245593 296.390407-25.145703 93.637634-74.745355 183.145204-148.061151 256.215406l-2.188852 2.434445-4.823865 4.355191c9.42465 34.367739 10.161431 70.635757 2.657526 105.496729-8.709359 40.644699-29.05371 79.83528-60.989049 111.547539l-1.919722 1.944282c-34.369785 33.363875-76.934207 53.953819-121.241318 61.189617-46.205345 7.034207-94.107331 0.245593-137.185452-21.282722-16.458857-8.218172-23.224957-29.031197-14.984273-45.735647 1.429559-2.657526 3.394307-5.560646 5.783727-7.995091 12.595876-13.533224 22.756283-29.255301 29.544897-45.736671l2.90312-7.480368c-9.200546 1.697665-18.893302 3.148713-28.071336 4.353145-27.111474 3.640923-54.199413 4.847401-81.310887 4.601808-9.178033 0-17.396205-3.617387-23.693632-9.44614l0 0L199.920262 672.828942C192.908568 665.348574 189.513238 655.901411 190.495612 645.964084L190.495612 645.964084zM262.584464 576.288189 262.584464 576.288189c-2.390443 19.361977-3.864004 38.969547-4.332678 58.08593l132.115993 132.339074c19.339464-0.468674 38.70144-2.166339 58.040904-4.600785 23.493064-3.1262 47.210231-7.503904 70.167083-14.270005 3.394307-0.959861 7.258311-1.452071 10.898211-1.205455 18.647709 0.468674 33.631982 16.458857 32.649608 35.329646-0.959861 26.373671-6.744611 52.257178-16.905018 77.1798-3.885494 8.463766-8.240685 17.418718-13.08604 25.882484 18.401092 4.131087 37.517475 4.600785 56.387241 0.982374 30.728862-5.091972 60.229756-18.893302 84.437088-42.341341l1.206478-1.473561c22.509666-21.99699 36.310997-49.599651 42.36283-77.894068 6.744611-29.523407 4.109598-60.497862-6.788613-89.037872-4.846378-12.103666-1.452071-27.334555 9.178033-36.780695l10.652618-10.18292 8.486278-8.686846 1.205455-1.227967c65.321728-64.829518 108.869546-143.460366 130.642432-225.486544 21.305235-79.122035 23.24747-163.067936 4.846378-243.173368-79.837326-17.909905-163.090449-15.968693-242.436588 5.069459-82.761935 22.286586-161.14719 66.056462-226.000244 130.910539l-9.44614 9.178033-0.223081 0-9.178033 10.18292c-9.223059 10.875698-24.208355 15.497972-38.008662 9.915837-28.541033-10.875698-59.761082-12.842493-88.792279-6.54302-28.54001 5.828752-55.897078 20.098757-78.162174 42.341341l0-0.223081c-24.430412 24.431435-38.946011 54.199413-43.793412 86.134753-3.148713 18.155499-2.90312 37.494962 0.982374 56.142671 8.709359-4.868891 17.418718-9.44614 26.128077-13.087063 24.677029-10.161431 50.314942-15.477506 76.44302-17.173125 3.6399 0 7.770987 0.245593 11.142781 1.695618 18.401092 4.356214 28.562523 23.695678 23.694655 41.605583C270.824125 529.122983 265.977747 552.839127 262.584464 576.288189L262.584464 576.288189zM276.139178 845.835228 276.139178 845.835228c7.749498-7.972579 20.567431-7.972579 28.562523 0 8.240685 7.995091 8.240685 20.813025 0 28.785603l-50.805106 50.827619c-7.995091 7.726985-20.813025 7.726985-28.54001 0-8.240685-7.749498-8.240685-21.305235 0-28.785603L276.139178 845.835228 276.139178 845.835228zM213.230406 782.680862 213.230406 782.680862c7.748475-7.749498 20.567431-7.749498 28.562523 0 8.240685 8.240685 8.240685 21.058618 0 29.05371L126.603443 927.123602c-7.972579 7.995091-20.790512 7.995091-28.54001 0-8.463766-8.218172-8.463766-21.058618 0-29.031197L213.230406 782.680862 213.230406 782.680862z" fill="var(--tab-text)" p-id="5061"></path></svg>
<!-- 标题 -->
<h4>丫A丫A</h4>
</div>

根据注释修改即可

第二章 页面页脚配置

2

1
2
3
4
5
6
页脚一般只有在登录页面才有

<!-- 网站底部 -->
<div class="layui-footer login-footer">
Copyright © 2026 YaYa-Layui-Admin-Plus <svg t="1769072378478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4955" width="15" height="15"><path d="M780.288 750.592H244.736V415.744C244.736 229.376 396.288 79.872 460.8 24.576c29.696-24.576 71.68-24.576 101.376 0 65.536 55.296 217.088 204.8 217.088 391.168v334.848z m-453.632-81.92h371.712V415.744c0-150.528-128-277.504-186.368-326.656-57.344 49.152-186.368 176.128-186.368 326.656v252.928zM509.952 87.04z" fill="#16b777" p-id="4956"></path><path d="M326.656 750.592H148.48c-43.008 0-78.848-34.816-78.848-78.848v-76.8c0-26.624 13.312-51.2 34.816-65.536l221.184-146.432v367.616z m-175.104-81.92h92.16v-133.12l-92.16 61.44v71.68zM875.52 750.592H697.344V384l221.184 146.432c22.528 14.336 34.816 38.912 34.816 65.536v76.8c1.024 41.984-34.816 77.824-77.824 77.824z m-96.256-81.92h92.16v-71.68l-92.16-61.44v133.12zM513.024 489.472c-64.512 0-116.736-52.224-116.736-116.736S449.536 256 513.024 256s116.736 52.224 116.736 116.736-52.224 116.736-116.736 116.736z m0-151.552c-18.432 0-34.816 15.36-34.816 34.816s15.36 34.816 34.816 34.816 34.816-15.36 34.816-34.816S532.48 337.92 513.024 337.92zM512 1017.856c-22.528 0-40.96-18.432-40.96-40.96v-163.84c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v163.84c0 22.528-18.432 40.96-40.96 40.96zM351.232 953.344c-22.528 0-40.96-18.432-40.96-40.96v-66.56c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v66.56c0 22.528-18.432 40.96-40.96 40.96zM673.792 953.344c-22.528 0-40.96-18.432-40.96-40.96v-66.56c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v66.56c0 22.528-18.432 40.96-40.96 40.96z" fill="#16b777" p-id="4957"></path></svg> MIT Licensed
</div>

第三章 个人中心页配置

3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
不同的企业可能叫不同的名字,例如有的企业叫个人中心,有的企业叫用户设置等,可以根据企业进行自定义修改

需要修改的文件:
1. yaya-layui-admin-plus/index.html (大概在83行~87行之间)

<dl class="layui-nav-child">
<!--
yaya_add(参数1,参数2,参数3):函数
参数1: 参数1这个值随便给,但是不能与左侧菜单中的yaya-id属性相同,否则会出现选项卡切换混乱问题
参数2: 选项卡名称,名字自定义
参数3: 点击个人中心跳转的具体的页面地址
a标签中的内容(个人中心),一般与参数2相同
-->
<dd><a onclick="yaya_add('888888888','个人中心','views/personal-center.html')">个人中心</a></dd>
<dd id="pwdChange"><a>修改密码</a></dd>
<dd><a href="login.html">退出</a></dd>
</dl>

2. yaya-layui-admin-plus/js/yaya-admin-plus.js (大概在385行~387行和491行~494行两部分)
2.1 第一部分修改的代码在setTabs()函数中
let personYayaId='888888888'; //与上面的参数1对应
let personYayaTitle='个人中心'; //与上面的参数2对应
let personYayaUrl='views/personal-center.html';//与上面的参数3对应

2.2 第二部分修改的代码在yaya_general_bread()函数中
if(menu_id==='888888888'){ //888888888与上面的参数1对应
$('.layui-breadcrumb').html('<a><cite>个人中心</cite></a>');//与上面的参数2对应
}

第四章 首页默认菜单配置

4


左侧的菜单生成一般分两种情况

  • 第一种情况: 左侧菜单全部由后端服务器提供
  • 第二种情况: 左侧菜单会留一个默认菜单(由前端默认配置)其余的由后端提供

我们这里说第二种情况,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
如果左侧菜单有一个默认的由前端配置,那么需要怎么配置? 都需要配置哪些地方。

看上面的图示 👆👆👆👆👆
图示中仪表盘作为默认菜单,需要配置三个地方:
1️⃣. 左侧菜单需要配置
2️⃣. 顶部面包屑导航需要配置
3️⃣. 选项卡需要配置
以上三个位置在哪里呢? 接下来开始进行代码配置。

1. 左侧菜单 配置文件位置-01: yaya-layui-admin-plus/index.html (大概在44行~52行之间)
<!-- 导航菜单 采用的手风琴效果 -->
<ul class="layui-menu" id="yaya-menu" lay-accordion>
<!--
菜单项-默认菜单
yaya-id: 标记默认菜单的唯一值(取一个特殊值,不能与后台的菜单ID重复,否则菜单会报错)
yaya-url: 点击菜单后跳转的地址,有的菜单是带有跳转功能的
yaya-title: 菜单名称
yaya_add(参数1,参数2,参数3): 函数
参数1: 菜单ID,和yaya-id属性相同,保证不能与数据库菜单相同,保证唯一
参数2: 选项卡名称,点击菜单时右侧顶部生成选项卡,选项卡名字和菜单名字相同,所以此参数和yaya-title属性相同
参数3: 右侧内容区域显示的内容页面,设置菜单的跳转地址,不一定和yaya-url属性相同,有的菜单没有yaya-url属性,只有带有跳转的菜单才有yaya-url属性.
下面的a标签中的仪表盘,也需要同步修改,修改成企业需要的名称
-->
<li yaya-id="999999999" yaya-url="views/dashboard.html" yaya-title="仪表盘" onclick="yaya_add('999999999', '仪表盘', 'views/dashboard.html')" class="layui-menu-item-checked"><!-- 默认选中 -->
<div class="layui-menu-body-title">
<a><span><i class="layui-icon layui-icon-chart-screen"></i>&nbsp;&nbsp;仪表盘</span></a>
</div>
</li>
<!-- 其它菜单由后端动态生成 ... -->
</ul>

1. 左侧菜单 配置文件位置-02 配置文件位置: yaya-layui-admin-plus/js/yaya-admin-plus.js (大概在382行~384行,需要修改的代码在setTabs()函数中)
let welcomeYayaId='999999999'; // welcomeYayaId值与上面的yaya-id属性值相同
let welcomeYayaTitle='仪表盘'; // welcomeYayaTitle值与上面的yaya-title属性值相同
let welcomeYayaUrl='views/dashboard.html';//welcomeYayaUrl与上面的yaya_add()函数的参数3相同

2. 顶部面包屑导航 配置文件位置: yaya-layui-admin-plus/index.html (大概在65行~68行之间)
<!--面包屑菜单-->
<span class="layui-breadcrumb" lay-filter="yaya-breadcrumb" style="margin-left: 15px;">
<!--
默认面包屑导航值,和菜单yaya-title属性值对应上
-->
<a><cite>仪表盘</cite></a>
</span>

3. 选项卡 (不需要单独修改)

🔔 👀 🎉 🚀 💪 A Happy And Wonderful Day ☀️ 🌙 ✨ 🦅 🐎

--------------------------已经到底啦!--------------------------