数据工厂平台-7:菜单和首页

2022-05-19 14:00:17 浏览数 (1)

上回我们成功的导入了第三方的菜单。虽然漂亮,功能多。但是也难免出现各种各样的问题:

比如它把我们之前的home页面的内容给遮盖了,导致我们看不到了。这种问题一般来说有很多解决方案,但是都需要我们自己去想办法解决,原作者可能并没有给出内置的方法。

首先肯定是被遮盖了,我们先在menu.html中加入几个换行符,给把home的内容撑出来:

刷新页面看看效果:

可以看到 一下就出来了~

然后我觉得主要内容太靠左了,所以我决定给这个左侧菜单增加一个外右距离,相当于给所有的页面内容往右侧撑 开一段距离:

margin-right:20px 。

但是问题来了,写在哪呢?

我们在页面右键,点开检查。

注意箭头指向的位置,我定位到了这个左侧菜单,它就是nav标签,它所有的样式都在右侧显示出来,那么我们手动在右侧手动添加 :

经过测试,添加在这个.cd-side-nav的属性中可以成功实现推开页面内容一段距离的效果,那么这个样式在哪呢?我们要实际去在项目中找到这个文件 添加才行,浏览器里修改的效果只不过是预览而已~

鼠标放在右侧这里 就会告诉你答案喽~

然后根据提示找到这个文件:

果然和页面调试里看到的一样呢,所以我们手动加上:

然后刷新页面看看效果:

现在可以永久的实现这个效果了。其实我们修改第三方的样式都可以通过这种办法,浏览器上修改看效果,然后快速定位到原始JS/CSS文件上进行永久修改。

然后回过头来,我们再看看这个菜单,给它好好改造一下。

首先是左上角的LOGO。平台一般都有自己的lOGO的。一个好的设计会让使用者增加印象,如果实在没有,你就用你们公司自己的产品公司LOGO~

我这里随便找了个图片做为LOGO:

但是发现这里居然原来用的是.svg格式的。

我如果想替换个新的图片,那么最好也做成这个格式的。那么什么是svg呢?

看来是个高保真的矢量图。

我们这里有几个路线:

  1. 强行用一个普通的jpg,jpeg,png图片,然后在html里自己手动设置大小等。
  2. 去百度搜索一个svg在线转换生成网站,把图片转换svg。
  3. 去百度下载一个svg的图片资源,漂亮的。
  4. 干脆不要这个logo,换成文字等。

我这里就干脆不要这个logo了,换成了文案,简单高效,大家自己可以优化的改改,我的教程只是讲个思路,并不是说必须和我一模一样。

效果:

然后是顶部搜索菜单,我们暂时留着它。

右侧的按钮,我们删掉一个,留一个,然后也留着那个个人头像的。

改成如下:

Home按钮直接回到主页

{{ user.username }} 是当前登录者的名字,我们之后通过后台传就可以。前边的 是站位用的空格,以免后面变量为空时,引起视觉错误。

Yourself 让用户进入到自己的个人设置页面。

Logout 就是退出功能,我们之后再实现这个功能。

现在回到我们的views.py中,给前端传递当前登录用户的总数据,这样之后我们之后就可以随意使用user. xxxx 了

效果如下:

好了,今天的内容到此结束。

svg

0 人点赞