Django Blog|05 修改首页显示博客列表

共 1222字,需浏览 3分钟

 ·

2021-11-01 13:50

作者:老表
来源:简说Python

大家好,我是老表,这个系列将会更新我编写,项目的学习笔记,也是后面更新的一个重点,希望个人博客页面可以早点和大家见面~欢迎大家点赞、留言支持。

Django Blog|01 创建环境和项目

Django Blog|02 创建admin账户&settings.py介绍

Django Blog|03 创建一个blog app和Article模型

Django Blog|04 创建blog视图和完成MVT框架开发

通过前面四节的学习,我们完成了从零开始实现一个Django MVT框架开发,当然,我们的T前端模板很简陋,并且没有显示我们想要的内容,所以这节,我们主要来修改下前端模板。

同样,我们直接将项目跑起来,严格来说,除非因为代码错误自动停止,没有必要去关闭这个django项目。

打开templates中的home.html,将原先的代码简单改一下:

<title>老表的博客title>
<h1>这里是老表的博客,该怎么显示文章列表呢?h1>

刷新页面会发现,页面标题和显示内容变了,当然这只是简单的改变,如果你一点前端基础都没有,我建议你去先学习下前端技术,可以查看文章:小白三天入门前端HTML肝货笔记

接下来我们让前端页面展示我们的博客列表:

<title>老表的博客title>
<h1>博客列表h1>

<ul>
{% for article in object_list %}
    <li>
        {{article.title}} - {{article.author}}br>
        {{article.summary}}
    li>
{% endfor %}
ul>

首先</code>表示页面标题,h1-h6表示的内容标题(一级标题-六级标题),然后是<code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);"><ul></code>是无序列表元素,里面一个或者多个元素,<code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);"><li></code>是列表条目元素。</p><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">在<code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);">{% for article in object_list %} {% endfor %}</code>是js代码,记住格式就可以了,可以进行逻辑控制。</p><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">object_list是通过<code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);">ListView</code>的Django对象的查询集,即查出的所有article对象列表。</p><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">这样就可以简单的在页面中展示出,我们所有博客的基础信息了~<img data-fileid="100035726" data-ratio="0.5759368836291914" src="https://filescdn.proginn.com/e0a814a5eab21b5806a8afed03d44bb9/7a6644b87f3bddf8ef6747ed6ddd2c85.webp" data-type="png" data-w="1014" style="display: block;margin-right: auto;margin-left: auto;"></p></section><p data-tool="mdnice编辑器" style="padding: 8px 10px;letter-spacing: 0px;white-space: normal;line-height: 26px;font-size: 16px;color: black;word-break: break-word;text-align: left;font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;">欢迎大家点赞、在看、转发支持,点击在看,下次可以第一时间收到公众号推文~</p><p data-tool="mdnice编辑器" style="padding: 8px 10px;letter-spacing: 0px;white-space: normal;line-height: 26px;font-size: 16px;color: black;word-break: break-word;text-align: left;font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;"><strong style="text-align: justify;display: inline !important;">本文为付费专栏,每周更新1-2篇,利用Django带大家一起实现个人博客,最后也会上线。</strong></p><p data-tool="mdnice编辑器" style="padding: 8px 10px;letter-spacing: 0px;white-space: normal;line-height: 26px;font-size: 16px;color: black;word-break: break-word;text-align: left;font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;"><span style="text-align: justify;">如果是对Django感兴趣的初学者可以购买,如果你对Django已经有所了解了,那我不建议你付费,你可以选择后面你感兴趣的、更深层次的章节进行付费,如果需要的话。</span></p><p data-tool="mdnice编辑器" style="padding: 8px 10px;letter-spacing: 0px;white-space: normal;line-height: 26px;font-size: 16px;color: black;word-break: break-word;text-align: left;font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;">阅读到这里的都是真想学习Django的学习者,我为大家准备了一个Django学习交流群(付费,目前直接购买本系列任意一篇文章即可加入),加入方式如下:</p><p><mp-pay-preview-filter></mp-pay-preview-filter></p> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 1</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-aixin"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div></div></div></div><div class="comments_wrapper comments app_hide"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="善语结善缘,恶言伤人心"></textarea></div><div class="button"><div class="error"><div class="comment-emojis"><div class="comment-choose-img qinglite_upload"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupianyangshi2"></use></svg><span>图片</span></div><div class="comment-choose-img comment-emoji-btn"><svg class="icon show-emoji-list" aria-hidden="true"><use xlink:href="#icon-biaoqing"></use></svg><span class="show-emoji-list">表情</span><div class="comment-emoji-list"></div></div><div style="display: none" class="comment-choose-img"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinwenjian1"></use></svg><span>视频</span></div></div></div><button class="qinglite-comment">评价</button></div><div class="medias qinglite_upload_content"></div></div></div><div style="display: none" class="comments app_hide"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments hide_app"><div class="title">推荐 <a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list flow_post_list_recommend hide_app"><div class="item img qinglite_item"><a href="https://www.qinglite.cn/doc/32306476d7df9f453" title="Django Blog|056 添加博客详情页视图,显示博客详情" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/57d6d89fa2e6ae6c9e3e95bd6280ff2c/e3357fcd8c938e0ddfa974a2e6ee4cba.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://www.qinglite.cn/doc/32306476d7df9f453" title="Django Blog|056 添加博客详情页视图,显示博客详情" class="title_middle">Django Blog|056 添加博客详情页视图,显示博客详情</a><a href="https://www.qinglite.cn/u/2991647501676a3a0" title="简说Python" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/551050/cps_wx_0177d7ea5cef.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">简说Python</div><div class="expand"></div><div class="likes"><i class="iconfont icon-aixin"></i></div><span class="num">0</span></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/pedia/f0054951650e309ada0cd" title="HTML5 Music Blog音乐博客首页" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML5 Music Blog音乐博客首页</div><div class="right-top-icon-tag"></div></div><div class="desc">HTML5和CSS3创建扁平化个人音乐博客首页。</div></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/doc/f0051344650e309c0c79c" title="HTML5 Music Blog音乐博客首页" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML5 Music Blog音乐博客首页</div><div class="right-top-icon-tag"></div></div><div class="desc">HTML5 和CSS3创建扁平化个人音乐博客首页。</div></a></div><div class="item img qinglite_item"><a href="https://www.qinglite.cn/doc/44496476f250d3b3e" title="Django Blog | 09 这么简单!实现博客markdown输入和显示" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/1646f953d1d0b3fd946deb756f6390c5/a9d7537b0982cf8971858afcad10b8df.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://www.qinglite.cn/doc/44496476f250d3b3e" title="Django Blog | 09 这么简单!实现博客markdown输入和显示" class="title_middle">Django Blog | 09 这么简单!实现博客markdown输入和显示</a><a href="https://www.qinglite.cn/u/2991647501676a3a0" title="简说Python" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/551050/cps_wx_0177d7ea5cef.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">简说Python</div><div class="expand"></div><div class="likes"><i class="iconfont icon-aixin"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://www.qinglite.cn/doc/289264771a2483ecf" title="Django Blog | 11 添加Django博客删除功能(基础版)" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/883263f67630c45947336e40c16c81a7/6f78c9f6d221b599e51ccd60ba906136.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://www.qinglite.cn/doc/289264771a2483ecf" title="Django Blog | 11 添加Django博客删除功能(基础版)" class="title_middle">Django Blog | 11 添加Django博客删除功能(基础版)</a><a href="https://www.qinglite.cn/u/2991647501676a3a0" title="简说Python" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/551050/cps_wx_0177d7ea5cef.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">简说Python</div><div class="expand"></div><div class="likes"><i class="iconfont icon-aixin"></i></div><span class="num">0</span></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/pedia/f0058445651a3cf838ee8" title="JSP Blog博客平台" class="content"><div class="qinglite_item_top_wrapper"><div class="title">JSP Blog博客平台</div><div class="right-top-icon-tag"></div></div><div class="desc">JSPBlog是一个只使用纯JSP技术的webBlog。Servlet容器使用Tomcat,数据库用MySQL。</div></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/pedia/f0054597651a48a823a70" title="静态blog静态博客" class="content"><div class="qinglite_item_top_wrapper"><div class="title">静态blog静态博客</div><div class="right-top-icon-tag"></div></div><div class="desc">基于yeoman结构,采用backbone、requirejs、bootstrap、sass等的静态blog。其中包括搜索等等。完全可以用于Github等静态网站博客。例子:http://fightt</div></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/doc/f0053836651a48a975818" title="静态blog静态博客" class="content"><div class="qinglite_item_top_wrapper"><div class="title">静态blog静态博客</div><div class="right-top-icon-tag"></div></div><div class="desc">基于yeoman结构,采用backbone、requirejs、bootstrap、sass等的静态</div></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/pedia/f0051066651a3ca8b596f" title="Pebble Blog博客平台" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Pebble Blog博客平台</div><div class="right-top-icon-tag"></div></div><div class="desc">Pebble是一个轻量级的开源JavaEE博客工具。它体积小,速度快,功能丰富,并且易于安装和使用。博客内容以XML文件的形式存储在磁盘上,并可以动态提供,因此无需安装数据库。所有维护和管理都可以通过</div></a></div><div class="item qinglite_item qinglite_item_news"><a href="https://www.qinglite.cn/pedia/f0058045651a3f35242ef" title="Pivot Blog博客系统" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Pivot Blog博客系统</div><div class="right-top-icon-tag"></div></div><div class="desc">Pivot是一个开源PHP文本型Blog程序,有以下优点1.不需要MySQL数据库2. 代码写得比较好,Blog应有的功能都有3.生成HTML(其实是缓存解析)4. 速度很快5. 支持Rewrite,</div></a></div><i></i><i></i><i></i><i></i><i></i></div><div class="float-bar" id="float-bar"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-aixin"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div><a href="#recommend" class="item iconfont icon-huidaodingbu"></a></div></div></article></div></main><script> let act_type = 1; let act_pro_id="214937"; let act_point = 0; let act_kind = 0; let act_time =0; let act_page_id=""; </script><footer id="footer"><div class="container"><div class="links"><i class="copyright">2023©轻识</i><a href="https://www.qinglite.cn/doc/8908642f6995bc140">隐私协议</a><a href="https://www.qinglite.cn/doc/8963642f69a51e604">用户协议</a><a href="https://www.qinglite.cn/about">关于我们</a><a href="https://www.qinglite.cn/robot" rel="nofollow" style="display: none;">机器人</a><a class="last" target="_blank" href="https://beian.miit.gov.cn/">浙ICP备19021730号-8</a><a class="last" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002017279">浙公网安备 33011002017279号</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui-v2.9.21/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui-v2.9.21/layui.js?v=v202311290125"></script><script> var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v202311290125"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v202311290125"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v202311290125"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v202311290125"></script></body></html>