Django 快速搭建博客第六节_django-blog-tutorial-优快云博客

本文链接：https://blog.youkuaiyun.com/xudailong_blog/article/details/78509508

本节教程将介绍如何在Django项目中使用bootstrap模板，将数据库中的文章数据与详情页关联。首先，下载并配置静态文件，如css和js，使网站外观更美观。接着，更新模板代码，引入bootstrap样式，并调整index.html以显示文章列表。在views.py中传递post_list到模板，通过for循环显示文章。然后，创建admin用户，通过后台添加文章。最后，文章在前端页面上成功显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上节我们用模板弄出来第一个hello world ，这节课，我们把数据库里面真正的数据跟单篇文章的详情页显示出来

一. 模板的下载

这里的模板下载指的是，下载js和css文件，一个网站想要变得漂亮，变得可以稍微好看点，这里我们使用是bootstrap，是facebook的一套模板？适配了手机，平板，移动端。我也是因为学这个才了解到的这套框架，不过据公司前端小哥哥说，现在已经是算过时了，有很多vue,angular,react框架，不过我们现在用一下还是可以行得通的。
下面说下模板使用步骤：

1 . https://github.com/zmrenwu/django-blog-tutorial-templates(用的追梦大哥的，这套学习系列也是基于这个自己做一个更深刻的总结)
2. 下载完后，我们在blog/下新建一个static文件夹，在static下再新建一个blog文件夹，我们这样子写是按照功能static下的blog是以后还会有其他功能，或者是comments功能之类的，工作经验会让你懂得这是为什么的，

这时候我们把css，js文件夹都拷到static/blog下，把模板中的index.html 替换掉我们之前写的index.html,这时候我们再启动一下服务器会看到：

模板未做修改的index.html.png

这样子看起来是js和css 没有起到作用的，我们需要在index.html中head标签中进行重新修改一下
：

<head>
    <title>Black &amp; White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">

    <!-- js -->
    <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}<