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

简说Python

共 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-dianzan"></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><div class="item jubao qinglite-jubao">举报</div></div></div></div><div class="comments_wrapper comments"><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"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments"><div class="title">推荐 <a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list"><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0054951650e309ada0cd" title="HTML5 Music Blog音乐博客首页" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">HTML5 Music Blog音乐博客首页</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f00572876514b6a6e41a9" title="Blog ThisChrome博客扩展" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Blog ThisChrome博客扩展</div><div class="right-top-icon-tag"></div></div><div class="desc">这个工具可以让你在任意页面只需要点击一次就开始写Blogger,对于Blogger党来说是很方便的。</div></a><a href="https://jishu.proginn.com/pedia/f00561626514b6a5f03dd" title="Blog ThisChrome博客扩展" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Blog ThisChrome博客扩展</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f0058111651a3f3660aa8" 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. 代码写</div></a><a href="https://jishu.proginn.com/pedia/f0058045651a3f35242ef" title="Pivot Blog博客系统" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Pivot Blog博客系统</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0058045651a3f35242ef" title="Pivot Blog博客系统" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Pivot Blog博客系统</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0051066651a3ca8b596f" title="Pebble Blog博客平台" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Pebble Blog博客平台</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0058445651a3cf838ee8" title="JSP Blog博客平台" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">JSP Blog博客平台</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0054597651a48a823a70" title="静态blog静态博客" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">静态blog静态博客</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/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><a href="https://jishu.proginn.com/pedia/f0054597651a48a823a70" title="静态blog静态博客" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">静态blog静态博客</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f00561626514b6a5f03dd" title="Blog ThisChrome博客扩展" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Blog ThisChrome博客扩展</div><div class="right-top-icon-tag"></div></div><div class="desc">这个工具可以让你在任意页面只需要点击一次就开始写Blogger,对于Blogger党来说是很方便的。</div></a><a href="https://jishu.proginn.com/pedia/f00561626514b6a5f03dd" title="Blog ThisChrome博客扩展" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Blog ThisChrome博客扩展</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f0055025651a4718096a1" title="jfinal blog个人博客程序" class="content"><div class="qinglite_item_top_wrapper"><div class="title">jfinal blog个人博客程序</div><div class="right-top-icon-tag"></div></div><div class="desc">使用 jFinal 框架, Mysql数据库,ehcache缓存,freemarker模板引擎的博客系统。可以部署在cloudfoundry上运行。点击 我的博客 进行查看软件使用效果 </div></a><a href="https://jishu.proginn.com/pedia/f0055025651a4718096a1" title="jfinal blog个人博客程序" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">jfinal blog个人博客程序</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></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-dianzan"></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><div class="item jubao qinglite-jubao">举报</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><div class="container"><div class="links"><i class="copyright">2023©技术圈</i><a href="https://jishu.proginn.com">隐私协议</a><a href="https://jishu.proginn.com">用户协议</a><a href="https://jishu.proginn.com/about">关于我们</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/layui.js?v=v202311290132"></script><script> let token = ""; var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v202311290132"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v202311290132"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v202311290132"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v202311290132"></script></body></html>