本篇是在plumemo，带LuckyBlog进入2.0时代！的基础是写的，在这个的基础之上继续优化，再看本篇文章之前建议先看下那篇文章

一、前言

在前一次优化之后，电脑端的优化基本就完成了，可是用手机看的时候，发现移动端和电脑端显示的并不一致，在电脑端设置的菜单没有同步显示，新增的都没有显示，而且移动端头像没有显示，我们这次主要优化下这部分，顺带把页尾也整整

二、移动端侧边栏优化

2.1 如何调试

和上一篇一样，我们仍然采用F12+Ctrl+F大法

~~完，手机上没F12，搞不来了~~

我们还在电脑上面整

F12是可以看移动端页面的，点红圈圈住的地方就行

F12moblie

↑顺带展示下完成的样子

2.2 开整

首先，来康康电脑端的长啥样

注：以下代码不能直接复制，复制的时候注意根据需要增加/减少尾巴上的)

2.2.1 侧边栏菜单

~~让我访问~~

// 电脑上的标准导航栏，以成长日志、站内导航、音乐播放器为例
o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/article/7",className:"nav-item"},o.a.createElement("i",{className:"iconfont icon-file"}),o.a.createElement("span",null,"\u6210\u957f\u8bb0\u5f55"))),o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/article/8",className:"nav-item"},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-navi(16x16).550ijf2d0uw0.png",alt:""}),o.a.createElement("span",null,"\u7ad9\u5185\u5bfc\u822a"))),o.a.createElement(nn,null,o.a.createElement("a",{href:"https://musicplayer.luckykeeper.site:44443/",target:"_blank",className:"nav-item"},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-music(24x24).5m7nn0a41us0.png",alt:""}),o.a.createElement("span",null,"")))

再来康康移动端侧边栏菜单长啥样

~~让我访问x2~~

// 移动端侧边栏，以标签墙为例
o.a.createElement("li",null,o.a.createElement(u.b,{to:"/tags",className:"item flex-items",onClick:this.openMonav},o.a.createElement("i",{className:"iconfont icon-tag"}),o.a.createElement("span",null,"\u6807\u7b7e\u5899")))

对比电脑端和移动端的代码，我们来改写下移动端的侧边栏

// 改写
// 成长记录（图标从内部引入）
o.a.createElement("li",null,o.a.createElement(u.b,{to:"/article/7",className:"item flex-items",onClick:this.openMonav},o.a.createElement("i",{className:"iconfont icon-file"}),o.a.createElement("span",null,"\u6210\u957f\u8bb0\u5f55")))
// 站内导航（图标从外部引入）
o.a.createElement("li",null,o.a.createElement(u.b,{to:"/article/8",className:"item flex-items",onClick:this.openMonav},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-navi(16x16).550ijf2d0uw0.png",alt:""}),o.a.createElement("span",null,"\u7ad9\u5185\u5bfc\u822a")))
// 音乐播放器（图标从外部引入）
o.a.createElement("li",null,o.a.createElement("a",{href:"https://musicplayer.luckykeeper.site:44443/",target:"_blank",className:"item flex-items",onClick:this.openMonav},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-music(24x24).5m7nn0a41us0.png",alt:""}),o.a.createElement("span",null,"\u97f3\u4e50\u64ad\u653e\u5668")))

2.2.2 侧边栏的头像

我们再来参照着整个侧边栏的头像吧

// 标准Header-tou
o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/header-tou.jpg",alt:""
// 改侧边栏Header-tou
// 格式参考：o.a.createElement("img",{src:url,alt:"")))
o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/header-tou.jpg",alt:"")))

三、页底

写的时候已经改好了，来看看改完是什么样的吧

LuckyBlog页底

原先的页底是2020-2021在下，浅色，Powered那行在上面，深色，总感觉怪怪的，而且不能加链接，我们来交换下这两行的位置，全部设置成灰色，再设置一下到LuckyBlog、plumemo和theme-react-sakura的链接吧

注：以下代码不能直接复制，复制的时候注意根据需要增加/减少尾巴上的)

时间、LuckyBlog、icp在上，a herf指向LuckyBlog，字改为黑色

// 原0行，Sakura logo
o.a.createElement(En,null,o.a.createElement("div",{className:"site-info"},o.a.createElement("div",{className:"footertext"},o.a.createElement("p",{className:"foo-logo"}) //不改
// 原一行
                                                                                            o.a.createElement("p",{className:"name"},o.a.createElement("span",null,o.a.createElement("a",{href:t,rel:"noopener noreferrer",target:"_blank"},e)))
// 原二行
o.a.createElement("p",null,"\xa9 2020-2021 ",i," ",o.a.createElement("a",{href:"http://www.beian.miit.gov.cn/",target:"_blank",rel:"noopener noreferrer"},a)))))}}])

// 内置方法参考
o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/tags",className:"nav-item"},o.a.createElement("i",{className:"iconfont icon-tag"}),o.a.createElement("span",null,"\u6807\u7b7e\u5899")))

// 一行改（先写文字，再放链接，这里LuckyBlog不新建标签页跳回）
o.a.createElement("p",null,"\xa9 2020-2021 ",o.a.createElement("a",{href:"https://blog.luckykeeper.site:24680/"},o.a.createElement("span",null,"LuckyBlog"," ",o.a.createElement("a",{href:"http://www.beian.miit.gov.cn/",target:"_blank",rel:"noopener noreferrer"},a))))
// 二行改（先写文字，再放链接，这里plumemo和theme-react-sakura是新建标签页跳回）
o.a.createElement("p",null,"Powered By LuckyServer and ",o.a.createElement("a",{href:"https://www.plumemo.com/",target:"_blank"},o.a.createElement("span",null,"plumemo@",o.a.createElement("a",{href:"https://www.bygit.cn/archives/91",target:"_blank"},o.a.createElement("span",null,"theme-react-sakura")))))