界面优化,解决bug

之前刚刚加载完markdown处理后,发现css有一个bug,试用html编码的时候无法显示

{% extends 'base.html' %}
{% load static %}
{% load comment_tags %}

{% block head_title %}个人信息推送{% endblock %}

{% block top_file %}

有的时候我们试用markdown,但是不能很好的解析django前端模板函数 之前我们用Pygments生成的css文件,默认的代码背景是黑色的,为了增加对比。我们把没有放入span标签的代码全部展示成白色: $('div#article pre').addClass('text-muted'); 修复结果:

优化前端界面的header,使用mdui-headroom

实现页面滚动时做出响应,例如在页面向下滚动时,应用栏消失;页面向上滚动时,应用栏出现。

首先官网文档和教程:https://www.mdui.org/docs/collapse

使用方法:

通过自定义属性调用 使用该方式无需编写 JavaScript 代码。只需在元素上添加 mdui-headroom="options" 属性即可激活该插件。

若组件是动态生成的,则需要调用 mdui.mutation() 进行初始化。

其实可以查看一下我的网站源代码,我的header也是调用了这个。

优化前端界面的header

之前一直忽略的一点、bootstrap的导航栏是响应式的,我竟然没发现,之前一直自己写的前端header的样式,包括响应式布局。 好了不多说直接调用。删除我的源码,直接配上bootstrap的标签。这里源码可以直接查看我的不用上贴了。

我们可以看看这个导航栏的实际效果: 分辨率大的时候: 当我们缩小分辨率,或者手机访问的时候:

编写函数当图片保存时自动修改文件名和后缀

apps/blog/model.py:

img = models.ImageField(upload_to='media/article',
                            default='media/artile/default.png', storage=ImageStorage())

将img中添加一个storage方式,我们重构一下图片存储的方式:

from django.core.files.storage import FileSystemStorage
。。。。。
class ImageStorage(FileSystemStorage):

    def __init__(self, location=settings.MEDIA_ROOT, base_url=settings.MEDIA_URL):
        #初始化
        super(ImageStorage, self).__init__(location, base_url)

    def _save(self, name, content):
        #重新文件上传
        import hashlib
        #获取文件后缀
        ext = '.bmp'
        #文件目录
        d = os.path.dirname(name)
        #定义文件夹名称
        fn = time.strftime(
            '%Y%m%d%H%M%S')
        # fn = hashlib.md5(time.strftime(
        #     '%Y%m%d%H%M%S').encode('utf-8')).hexdigest()
        name = os.path.join(d, fn+ext)

        #调用父类方法
        return super(ImageStorage, self)._save(name, content)

当我们上传文件的时候就会自动调用这个函数,来重新编写文件的后缀名。

原创文章,转载请注明出处:https://boywithacoin.cn/article/you-hua-headertou-bu-cai-dan-lan-ya-suo-jing-tai-wen-jian/