前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 Django 的个人网站(5)

基于 Django 的个人网站(5)

作者头像
不可言诉的深渊
发布2020-05-27 11:40:46
7880
发布2020-05-27 11:40:46
举报
文章被收录于专栏:Python机器学习算法说书人
上回说到,我们实现了搜索和分类两个页面,顺便简单地讲了一下 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 代码就完事了,在这里我直接给出修改好的完整的源代码,首先是 templates\index.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>

然后是 templates\article_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_website\views.py 中的 IndexView 的 paginate_by 临时修改成 1,运行项目看一下效果,如图所示。

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python机器学习算法说书人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档