如何给Jeo博客主题添加底部导航栏

效果图

首先在网站主题assets/css目录下，新建一个名为lyxdh.css的文件，并将如下代码放置于该文件中

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--seat)
}

::-webkit-scrollbar-track {
    background: transparent
}

::-moz-selection {
    color: #fff;
    background: var(--theme)
}

::selection {
    color: #fff;
    background: var(--theme)
}

body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -520;
    pointer-events: none
}

input[type='text'] {
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500
}

iframe {
    display: block;
    border: none;
    margin: 0 auto;
    vertical-align: middle
}

textarea {
    font-size: 14px;
    resize: none;
    -webkit-appearance: none
}

li {
    list-style: none
}

a {
    text-decoration: none
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 500
}

img {
    border: 0;
    vertical-align: middle
}

img[src=''],img:not([src]) {
    border: 0;
    opacity: 0
}

svg,canvas {
    vertical-align: middle
}

button {
    cursor: pointer;
    -webkit-appearance: none;
    font-size: 13px
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.joe_main {
    min-width: 0;
    flex: 1;
    padding: 15px 0
}

.joe_container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px
}

@media (min-width: 576px) {
    .joe_container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .joe_container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .joe_container {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .joe_container {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    .joe_container {
        max-width:1320px
    }
}

@font-face {
  font-family: "cyicon"; /* Project id 2611504 */
  src: url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff2?t=1623735805644') format('woff2'),
       url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff?t=1623735805644') format('woff'),
       url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.ttf?t=1623735805644') format('truetype');
}

.cyicon {
  font-family: "cyicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zrnq-xintiao:before {
  content: "\e6e7";
}

.zrnq-saoma:before {
  content: "\e6e2";
}

.zrnq-haibaofenxiang:before {
  content: "\e6e3";
}

.zrnq-pinglun:before {
  content: "\e605";
}

.zrnq-tongji3:before {
  content: "\e6ce";
}

.zrnq-time:before {
  content: "\e6be";
}

.zrnq-huanyingye:before {
  content: "\e728";
}

.zrnq-106collect:before {
  content: "\e7a7";
}

.zrnq-womendefuwu:before {
  content: "\e8d8";
}

.zrnq-yu:before {
  content: "\e602";
}

.zrnq-zhichi:before {
  content: "\e639";
}

.zrnq-ganxie:before {
  content: "\e638";
}

.zrnq-huoban:before {
  content: "\e63a";
}

.zrnq-xinaixin:before {
  content: "\e608";
}

.zrnq-beian:before {
  content: "\e61a";
}

.zrnq-zhuye-copy:before {
  content: "\e601";
}

.zrnq-hi:before {
  content: "\e606";
}

.zrnq-guandianjianpingcopy:before {
  content: "\e87b";
}

.zrnq-weiyuqiang-:before {
  content: "\e631";
}

.zrnq-guanyu:before {
  content: "\e6a8";
}

.zrnq-search-copy:before {
  content: "\e600";
}

.zrnq-daohang:before {
  content: "\e60a";
}

.zrnq-dashang:before {
  content: "\e7fb";
}

.zrnq-3132:before {
  content: "\e603";
}

.zrnq-dashang1:before {
  content: "\e65d";
}

.zrnq-yinyue-copy-copy:before {
  content: "\e60b";
}

.zrnq-gongju:before {
  content: "\e609";
}

.zrnq-youlianguanli:before {
  content: "\e66f";
}

.zrnq-shezhi:before {
  content: "\e629";
}

.zrnq-dashang2:before {
  content: "\e61f";
}

.zrnq-yanjing:before {
  content: "\e60c";
}

.zrnq-gongjuxiang:before {
  content: "\e607";
}

.zrnq-shuaxin:before {
  content: "\e647";
}

.zrnq-fuzhi:before {
  content: "\e697";
}

.zrnq-google1:before {
  content: "\e87a";
}

.zrnq-backward:before {
  content: "\ea87";
}

.zrnq-go:before {
  content: "\ea8b";
}

.zrnq-rhome-fill:before {
  content: "\ec0b";
}

.zrnq-service-Fill:before {
  content: "\e8e6";
}

.zrnq-144message02:before {
  content: "\e7b0";
}

.zrnq-352:before {
  content: "\e7ca";
}

.zrnq-baidu:before {
  content: "\e6b6";
}

.zrnq-banquan:before {
  content: "\e6c9";
}

.zrnq-aixin2:before {
  content: "\e6ff";
}

.zrnq-sitemap:before {
  content: "\e80a";
}

.zrnq-RSS:before {
  content: "\e604";
}

.zrnq-shengming:before {
  content: "\e627";
}

.zrnq-anquanguanli:before {
  content: "\e7c6";
}

.zrnq-anonymous-full:before {
  content: "\e8f0";
}

.zrnq-taiji:before {
  content: "\e653";
}

.zrnq-shuaxin3:before {
  content: "\e6db";
}

.zrnq-dengdai:before {
  content: "\e6df";
}


@media screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}
#mobile-menu{display:block}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}

然后复制如下代码粘贴于footer.php文件 <?php $this->footer(); ?> 后边即可

 <link href="<?php _getAssets('assets/css/lyxdh.css'); ?>" rel="stylesheet">
<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://www.lyx6.com/"> <span class="cyicon zrnq-zhuye-copy"></span> 首页 </a></li>
        <li> <a href="https://www.lyx6.com/links.html"> <span class="cyicon zrnq-youlianguanli"></span> 友链 </a></li>
        <li> <a href="https://www.lyx6.com/images.html"> <span class="cyicon zrnq-aixin2"></span> 壁纸 </a></li>
        <li> <a href="https://www.lyx6.com/tools.html"> <span class="cyicon zrnq-gongju"></span> 工具 </a></li>
        <li> <a href="https://www.lyx6.com/about.html"> <span class="cyicon zrnq-guanyu"></span> 关于 </a></li>
             </ul>
</div>   

最后保存看效果吧