Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件

Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块
1. 配置Bootstrap 4及依赖文件

Bootstrap 4 下载地址 https://getbootstrap.com/docs/4.1/getting-started/download/
下载并解压js和css两个文件夹到新建目录**static/bootsrap/**下
因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行,因此这两个文件我们也需要一并下载保存。附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可):
jquery.js: https://jquery.com/download/
popper.js: https://popper.js.org/
全部完成后目录结构如图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件_第1张图片
同时我们应该告诉django我们静态文件的位置,因此在settings.py文件末尾加入如下代码:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

2. 编写模板
在templates/中新建三个文件

base.html是整个项目的模板基础,所有的网页都从它继承;

header.html是网页顶部的导航栏;

footer.html是网页底部的注脚。
编写base.html


{% load staticfiles %}


<html lang="zh-cn">
<head>
    
    <meta charset="utf-8">
    
    <title>{% block title %}{% endblock %}title>
    
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
head>
<body>
    
    {% include 'header.html' %}
    
    {% block content %}{% endblock content %}
    
    {% include 'footer.html' %}
    
    <script src="{% static 'jquery/jquery-3.3.1.js' %}">script>
    <script src="{% static 'popper/popper-1.14.4.js' %}">script>    
    
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}">script>
body>
html>

header.html:


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    
    <a class="navbar-brand" href="#">我的博客a>
    
    <div>
      <ul class="navbar-nav">
        
        <li class="nav-item">
          <a class="nav-link" href="#">文章a>
        li>
      ul>
    div>
  div>
nav>

footer.html:

{% load staticfiles %}

<div>
    <br><br><br>
div>
<footer class="py-3 bg-dark fixed-bottom">
    <div class="container">
        <p class="m-0 text-center text-white">footerp>
    div>
footer>

最后编写list.html


{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
    首页
{% endblock title %}

{% block content %}

<div class="container">
    <div class="row mt-2">
        {% for article in articles %}
        
        <div class="col-4 mb-4">
        
            <div class="card h-100">
                
                <h4 class="card-header">{{ article.title }}h4>
                
                <div class="card-body">
                    <p class="card-text">{{ article.body|slice:'100' }}...p>
                div>
                
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">阅读本文a>
                div>
            div>
        div>
        {% endfor %}
    div>
div>
{% endblock content %}

最后运行服务器在浏览器中输入: http://127.0.0.1:8000/article/article-list/
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件_第2张图片
目录
Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块

你可能感兴趣的:(python后端,Django,python,博客)