Typecho实现手机端下方添加导航按钮

素颜
2021-11-25 / 12 评论 / 558 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年08月02日,已超过854天没有更新,若内容或图片失效,请留言反馈。
广告


l6c3dlle.png

前言:

这其实是导航按钮 添加也很简单的!
适用于Ty、WP等主题,推荐Joe,其他也可以的。
废话少说!直接上教程!

1、修改页脚footer.php文件,Joe在:pubilc/footer.php

在页脚文件footer.php或者foot.php最下方添加以下代码:

2.修改include.php文件

在/usr/themes/Joe/public/include.php的19-29行之间新增如下代码:


l0igl68l.png

3.新增cysjdh.css文件

在/usr/themes/Joe/assets/css/路径下新增cysjdh.css文件,内容如下:

@import url("//at.alicdn.com/t/font_2611504_8nq4wp1bmb3.css");
@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}
本文共 115 个字数,平均阅读时长 ≈ 1分钟
10

打赏

海报

正在生成.....

评论 (12)

语录
取消
  1. 头像
    大宝 Lv.2
    ·Windows 10 · QQ Browser
    沙发

    能够教你读书可爱的学妹和生硬的父亲还有……这片星空我现在拥有的东西,只有这样我能够给阿良良木你的,只有这些这些就是,全部

    回复 删除 垃圾
  2. 头像
    云菟 Lv.3
    ·Android · Google Chrome
    板凳

    就算是自私⋯⋯我也希望那些人能够永远都有笑容⋯⋯

    回复 删除 垃圾
  3. 头像
    亮哥小窝 Lv.2
    ·MacOS · Safari
    地毯

    路过的熟悉,如同有你,已无转身的距离。

    回复 删除 垃圾
  4. 头像
    796 Lv.4
    ·iPhone · Safari
    第4楼

    好男儿胸怀像大海

    回复 删除 垃圾
  5. 头像
    匿名 Lv.6
    ·iPhone · Safari
    第5楼

    奇迹不是免费的,如果你祈求了希望,也会散播出同等的绝望。

    回复 删除 垃圾
  6. 头像
    腾讯 Lv.1
    ·iPhone · Safari
    第6楼

    区区一只趴在地上的蝼蚁,谁允许你抬起头的, 虫子就要有虫子的样子,低头伏地然后去死。

    回复 删除 垃圾
  7. 头像
    Lv.1
    ·Windows 10 · Google Chrome
    第7楼

    666666

    回复 删除 垃圾
  8. 头像
    阿星 Lv.1
    ·Android · QQ Browser
    第8楼

    谢谢大佬分享

    回复 删除 垃圾
  9. 头像
    阿星 Lv.1
    ·Windows 10 · Google Chrome
    第9楼

    谢谢大佬分享

    回复 删除 垃圾
  10. 头像
    6u6 Lv.1
    ·Windows 10 · QQ Browser
    第10楼

    66666666

    回复 删除 垃圾
  11. 头像
    相关的方法 Lv.1
    ·Android · QQ Browser
    第11楼

    谢谢大佬分享

    回复 删除 垃圾
  12. 头像
    214124 Lv.1
    ·Windows 10 · Google Chrome
    第12楼

    谢谢大佬分享

    回复 删除 垃圾