django快速做一个博客项目（2）

最新推荐文章于 2022-05-14 21:00:52 发布

Python_Heaven

最新推荐文章于 2022-05-14 21:00:52 发布

阅读量179

点赞数 1

分类专栏： django

本文链接：https://blog.csdn.net/qq_36710311/article/details/112502339

版权

django 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

接上文django快速做一个博客项目（1）

9 使用bootstrap实现静态博客页面。

9.1在blog应用里新建templates文件夹，里面创建index.html

https://v3.bootcss.com/getting-started/
进入bootstrap页面，进入起步栏，复制这行：

在这里插入图片描述

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

9.2 加入到index.html中，然后编写头部信息，body信息，将页面分成三部分，即如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>django快速做一个博客项目</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>mycontent</h1>
    <small>--bymyself</small>
</div>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            <div>
                <h2>文章标题1</h2>
                <p>111111111111111</p>
            </div>
            <div>
                <h2>文章标题2</h2>
                <p>1111111111111111111111</p>
            </div>
        </div>
    </div>
        <div class="col-md-3" role="complementary">
            <div>
                <h2>最新文章1</h2>
                <h4><a href="#">最新文章1</a></h4>
                <h4><a href="#">最新文章2</a></h4>
                <h4><a href="#">最新文章3</a></h4>
                <h4><a href="#">最新文章4</a></h4>
                <h4><a href="#">最新文章5</a></h4>
            </div>
    </div>
</div>
</body>
</html>

随便复制一些文字进去，使用浏览器打开，结果如图：
在这里插入图片描述

页面有点丑，将就看，哈哈哈。

9.3再复制index.html为detail.html

删除一些内容，结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>django快速做一个博客项目</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>文章标题1</h1>
</div>

<div class="body-main">
    <div>
        <p>111111111111111</p>
    </div>

</div>
</body>
</html>

静态页面完成。

10 Django的模板系统

10.1模板系统基本语法

变量标签{{变量}}，两个双引号引起来

<html><body>{{ now }}</body></html>

for 循环标签：

{% for x in list %}
{% endfor %}

if-else分支

{% if %}
{% else %}
{% endif %}

10.2 使用模板编写博客首页

在blog应用下创建tempates/blog/index.html,修改之前的如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>django快速做一个博客项目</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>mycontent</h1>
    <small>--bymyself</small>
</div>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main"></div>
        {% for article in article_list %}
            <div>
                <h2>{{ article.title }}</h2>
                <p>{{ article.brief_content }}</p>
            </div>
        {% endfor %}
    </div>

    <div class="col-md-3" role="complementary">
        <div>
            <h2>{{ 最新文章1 }}</h2>
            {% for article in article_list %}
                <h4><a href="#">{{ article.title }}</a></h4>
            {% endfor %}
        </div>
    </div>
</div>
</div>
</body>
</html>

编写blog下view视图，加一个get_index_page函数：

def get_index_page(request):
    all_article = Article.objects.all()
    return render(request, 'blog/index.html',
                           {'article_list': all_article})

编写blog下urls.py路由:


from django.urls import path

import blog.views

urlpatterns = [
    path('content', blog.views.article_content),
    path('index', blog.views.get_index_page),
]

输入链接查看
http://127.0.0.1:8000/blog/index
之前我们只写入了一篇文章，这里你可以自己加几个文章，页面如下图：
在这里插入图片描述

10.4 使用模板实现detail.html

在blog/templates/blog/下新建detail.html
写入如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>django快速做一个博客项目</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>{{ curr_article.title }}</h1>
</div>

<div class="body-main">
    <div>
        <p>{{ curr_article.content }}</p>
    </div>

</div>
</body>
</html>

然后编写blog/view.py新建函数

def get_detail_page(request):
    curr_article = Article.objects.all()[0]
    return render(request, 'blog/detail.html',
                  {'curr_article': curr_article})

blog/urls.py中加入:

path('detail', blog.views.get_detail_page),

打开链接如下图所示http://127.0.0.1:8000/blog/index
在这里插入图片描述

Python_Heaven

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
django快速做一个博客项目（2）

接上文django快速做一个博客项目（1）9 使用bootstrap实现静态博客页面。9.1在blog应用里新建templates文件夹，里面创建index.htmlhttps://v3.bootcss.com/getting-started/进入bootstrap页面，进入起步栏，复制这行：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
复制链接

扫一扫