基于 Django 的个人网站（5）

2020-05-27 11:40:46 浏览数 (1)
上回说到，我们实现了搜索和分类两个页面，顺便简单地讲了一下 bootstrap 前端框架的安装，这回我们就来正式使用这个框架，来美化一下前端的内容。

bootstrap 的配置

配置 bootstrap 很简单，首先是 css 文件的导入，我们只要将 css 文件以 link 标签的形式添加到 head 标签中，并放置在所有其他样式表之前就行，代码如下：

代码语言：javascript复制
<link rel="stylesheet" href="/static/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

当然我这里是下载到本地进行引用的，因为我感觉直接引用在线资源可能会有问题。

最后是 JS 文件，以 script 标签的形式放在页面尾部，</body>标签之前就可以起作用了，代码如下：

代码语言：javascript复制
<script src="/static/js/jquery.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="/static/js/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

同样我也是下到本地，只不过这里有两个文件昨天并没有下载下来，因为我昨天下载的 bootstrap 中并没有那两个文件，在这里给出下载链接：

代码语言：javascript复制
https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

下载好了之后就放到对应的目录下，就完成了配置。

修改 html 代码

我们只要修改 html 代码就完事了，在这里我直接给出修改好的完整的源代码，首先是 templatesindex.html，代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陈志豪的个人网站</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        p{text-indent: 2em}
</style>
</head>
<body>
<div class="jumbotron">
    <h1 class="display-4" style="text-align: center">陈志豪的个人网站</h1>
</div>
<nav class="nav justify-content-center">
    <a class="nav-link active" href="/">首页</a>
    {% for category in categories %}
        <a class="nav-link active" href="/categories/{{ category.id }}">{{ category }}</a>
    {% endfor %}
</nav>
<div style="width: 100%;text-align: center">
    <!--suppress HtmlUnknownTarget -->
    <form action="/search" method="get">
        <div class="form-group">
            <label><input class="form-control" name="keyword" type="text"></label>
            <button type="submit" class="btn btn-primary">搜索</button>
        </div>
    </form>
</div>
<div class="list-group" style="padding-left: 100px;padding-right: 100px">
    {% for article in articles %}
        <a href="/articles/{{ article.id }}" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ article.title }}</h5>
            </div>
            <p class="mb-1">{{ article.abstract }}</p>
        </a>
    {% endfor %}
</div>
{% if is_paginated %}
    <nav>
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" aria-disabled="true">上一页</a>
                </li>
            {% endif %}
            <li class="page-item disabled">
                <a class="page-link" aria-disabled="true">
                    第{{ page_obj.number }}页/共{{ page_obj.paginator.num_pages }}页
                </a>
            </li>
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" aria-disabled="true">下一页</a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}
<ul class="list-group" style="text-align: center;padding-left: 100px;padding-right: 100px">
    <li class="list-group-item">QQ：3480430977（需备注来源）</li>
    <li class="list-group-item">QQ群：822163725（需备注来源）</li>
    <li class="list-group-item">微信公众号：小陈学Python</li>
    <li class="list-group-item">GitHub：https://github.com/3480430977</li>
</ul>
<script src="/static/js/jquery.slim.min.js"
        integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous">
</script>
<script src="/static/js/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="/static/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>

然后是 templatesarticle_detail.html，代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article.title }}</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="/static/css/prism.css" rel="stylesheet" />
    <style>
        blockquote{background-color:#eeeeee;
            color:#111111}
        p{text-indent:2em}
        figure{text-align:center;
            margin:0 auto}
</style>
</head>
<body>
<div class="jumbotron">
    <h1 class="display-4" style="text-align: center">陈志豪的个人网站</h1>
</div>
<nav class="nav justify-content-center">
    <a class="nav-link active" href="/">首页</a>
    {% for category in categories %}
        <a class="nav-link active" href="/categories/{{ category.id }}">{{ category }}</a>
    {% endfor %}
</nav>
<div style="width: 100%;text-align: center">
    <!--suppress HtmlUnknownTarget -->
    <form action="/search" method="get">
        <div class="form-group">
            <label><input class="form-control" name="keyword" type="text"></label>
            <button type="submit" class="btn btn-primary">搜索</button>
        </div>
    </form>
</div>
<h1 style="text-align: center">{{ article.title }}</h1>
<div style="padding-left: 100px;padding-right: 100px">
    <p>{{ article.abstract }}</p>
    {{ article.content|safe }}
</div>
<ul class="list-group" style="text-align: center;padding-left: 100px;padding-right: 100px">
    <li class="list-group-item">QQ：3480430977（需备注来源）</li>
    <li class="list-group-item">QQ群：822163725（需备注来源）</li>
    <li class="list-group-item">微信公众号：小陈学Python</li>
    <li class="list-group-item">GitHub：https://github.com/3480430977</li>
</ul>
<script src="/static/js/prism.js"></script>
<script src="/static/js/jquery.slim.min.js"
        integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous">
</script>
<script src="/static/js/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="/static/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>

下面我先把 personal_websiteviews.py 中的 IndexView 的 paginate_by 临时修改成 1，运行项目看一下效果，如图所示。

可以发现变得比较好了，我相信你们应该会弄得比我好，因为我毕竟审美很差，接下来进入文章详情页面，就点击富文本文章标题就行了，如图所示。

可以发现该显示的东西都正常显示了，所以修改样式的时候并没有修改内容，今天就到这里，明天直接进行部署（1.会弄得尽量简单；2.使用的是虚拟机模拟部署），数据库就直接使用 sqlite 就够了，当然可以改成其他数据库。

bootstrap css html 数据库 sql

0 人点赞