当前位置: 首页 > Web前端 > HTML5

Django20200408博客开发005

时间:2023-04-05 00:42:43 HTML5

效果图:使用网格样式:修改blog\_list.html{#删除base中重复的内容,保留唯一的内容,然后填充到下面两块中#}{#这是页面标题#}{%extends'base.html'%}{#importthecontentinbase.html#}{%blocktitle%}{#用来填写标题#}刘子君的博客{#因为前面的标题被包裹了,所以直接用直接变量#}{%endblock%}


{#这是页面的内容#}{%blockcontent%}***{%forbloginblogs%}{##},只剩下30个字符可以显示了。我不知道为什么它在这里工作,但pycharm将其识别为错误#}

{{blog.-敬请关注,暂无博文-----

{%endfor%}{#

共有{{blogs|length}}篇博文

{{blogs\count}}{#用于统计博客中有多少博文#}

有{{blogs|length}}篇博文

{#BlogCategory#}

BlogCategory

    {%forblog\typeinblog\types%}
  • {{blog\type.type\name}}
  • {%空%}{#如果没有#}
iv不分类{%endfor%}
ivdiv>***{%endblock%}由于blog\_list.html需要在app(博客)中使用views.py,一般与app密切相关的文件应该放在app下,所以mysite/templates应该放这里把/blog切割成mysite/blog/templates也可以避免和后面app的静态文件重名。然后通过视图函数将blog\_type传给前端:当前效果如下:没有明显的边界,用面板加一个边界:效果如下:不要之前的点,加新增内容:同理修改博客列表内容:效果如图:另外我想把total...放在博客列表后面的图片里,修改如下:效果如下:另外,将原来的md改成sm:因为md对小屏幕不是很友好,而sm会自动适配屏幕尺寸,适配小屏幕。修改:修改上面,将我们的css样式放在css文件中,如下:然后在static中创建一个blog.css文件来设置样式:然后导入blog\_list.htmlblog.css文件将blog.css文件放在blog下的static/blog中,修改blog\_list.html中的链接:然后将各个布局包裹在自己的div中,对各处的内容进行微调:{#deleteandbase重复的内容,留下唯一内容,然后分别填入下面两块#}{#Thisisthepagetitle#}{%extends'base.html'%}{#importthecontentinbase.html#}{%blocktitle%}刘子君的博客{%endblock%}{#用来填充标题#}{%blocknav\_blog\_active%}active{%endblock%}{#导入blog.css文件#}{%loadstatic%}{%blockheader\_extends%}{%endblock%}{#pagecontent#}{%blockcontent%}{%blockblog\_list\_title%}博客列表(共{{blogs|length}}个博客){%endblock%}
{%forbloginblogs%}

{{blog.title}}

{{blog.blog\_type}}{{blog.created\_time|date:"Y-m-d"}}p>

{{{blog.content|truncatechars:30}}

{#{#管道符管道符表示表示不知道为啥起作用用了但pycharm识别为错误#}{%empty%}

-敬请期待,暂无博文-

{%endfor%}博客分类{%forblog\_Typeinblog\_Types%}}">{{blog\_Type.type\_Name}}{%空%}
  • 无分类
  • {%endFor%}>{%endblock%}在blog.css中添加相应的样式:修改blog\_with\_type.html代码:{%extends'blog/blog\_list.html'%}{%blocktitle%}{{blog\_type.type\_name}}{%endblock%}{%blockblog\_list\_title%}类别:{{blog\_type.type\_name}}(总共{{blogs|length}}blogs)查看所有博客{%endblock%}相应修改blog\_with\_type在view.py中以下blog\_types:修改blog\_detail.html中的代码:{#删除base中重复的内容,保留唯一的内容,然后将其填充到下面的两个块中#}{#这是页面标题#}{%extends'base.html'%}{#importcontentinbase.html#}{%blocktitle%}{#用来填充title#}{{blog.title}}{#这里因为之前title被包裹了,所以直接使用变量#}{%endblock%}{%loadstaticf%}{%blockheader\_extends%}{%endblock%}{#pagecontent#}{%blockcontent%}

    {{blog.title}}

  • 作者:{{blog.author}}
  • 类别:{{blog.blog\_Type}
  • 发布日期:{{blog.创建\_time|date:"Y-m-dH:n:s"}}
  • {{blog.content}}/div>{%endblock%}再次修改blog.css文件(上面是粘贴在一起的,这里不再赘述)里面遇到的所有bug都是madpecker写的,还有新的bug每天出现...