展示
template-404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.message {
position: absolute;
top: 20%;
right: 5%;
color: #fafafa;
font-size: 30px;
animation: textRotate 0.8s linear 0.5s infinite alternate;
}
body {
padding: 0px;
margin: 0px;
border: 0px;
width: 100%;
height: 100%;
}
@keyframes textRotate {
from {
transform-origin: top;
transform: rotateX(-30deg);
}
to {
transform-origin: top;
transform: rotateX(12deg);
}
}
.NotPage {
position: relative;
z-index: -10;
background: #000;
height: 100vh;
overflow: hidden;
display: flex;
font-family: "Anton", sans-serif;
justify-content: center;
align-items: center;
-webkit-perspective: 1000px;
perspective: 1000px;
}
div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.rail {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-transform: rotateX(-30deg) rotateY(-30deg);
transform: rotateX(-30deg) rotateY(-30deg);
}
.rail .stamp {
position: absolute;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #141414;
color: #fff;
font-size: 7rem;
}
.rail .stamp:nth-child(1) {
-webkit-animation: stampSlide 40000ms -2300ms linear infinite;
animation: stampSlide 40000ms -2300ms linear infinite;
}
.rail .stamp:nth-child(2) {
-webkit-animation: stampSlide 40000ms -4300ms linear infinite;
animation: stampSlide 40000ms -4300ms linear infinite;
}
.rail .stamp:nth-child(3) {
-webkit-animation: stampSlide 40000ms -6300ms linear infinite;
animation: stampSlide 40000ms -6300ms linear infinite;
}
.rail .stamp:nth-child(4) {
-webkit-animation: stampSlide 40000ms -8300ms linear infinite;
animation: stampSlide 40000ms -8300ms linear infinite;
}
.rail .stamp:nth-child(5) {
-webkit-animation: stampSlide 40000ms -10300ms linear infinite;
animation: stampSlide 40000ms -10300ms linear infinite;
}
.rail .stamp:nth-child(6) {
-webkit-animation: stampSlide 40000ms -12300ms linear infinite;
animation: stampSlide 40000ms -12300ms linear infinite;
}
.rail .stamp:nth-child(7) {
-webkit-animation: stampSlide 40000ms -14300ms linear infinite;
animation: stampSlide 40000ms -14300ms linear infinite;
}
.rail .stamp:nth-child(8) {
-webkit-animation: stampSlide 40000ms -16300ms linear infinite;
animation: stampSlide 40000ms -16300ms linear infinite;
}
.rail .stamp:nth-child(9) {
-webkit-animation: stampSlide 40000ms -18300ms linear infinite;
animation: stampSlide 40000ms -18300ms linear infinite;
}
.rail .stamp:nth-child(10) {
-webkit-animation: stampSlide 40000ms -20300ms linear infinite;
animation: stampSlide 40000ms -20300ms linear infinite;
}
.rail .stamp:nth-child(11) {
-webkit-animation: stampSlide 40000ms -22300ms linear infinite;
animation: stampSlide 40000ms -22300ms linear infinite;
}
.rail .stamp:nth-child(12) {
-webkit-animation: stampSlide 40000ms -24300ms linear infinite;
animation: stampSlide 40000ms -24300ms linear infinite;
}
.rail .stamp:nth-child(13) {
-webkit-animation: stampSlide 40000ms -26300ms linear infinite;
animation: stampSlide 40000ms -26300ms linear infinite;
}
.rail .stamp:nth-child(14) {
-webkit-animation: stampSlide 40000ms -28300ms linear infinite;
animation: stampSlide 40000ms -28300ms linear infinite;
}
.rail .stamp:nth-child(15) {
-webkit-animation: stampSlide 40000ms -30300ms linear infinite;
animation: stampSlide 40000ms -30300ms linear infinite;
}
.rail .stamp:nth-child(16) {
-webkit-animation: stampSlide 40000ms -32300ms linear infinite;
animation: stampSlide 40000ms -32300ms linear infinite;
}
.rail .stamp:nth-child(17) {
-webkit-animation: stampSlide 40000ms -34300ms linear infinite;
animation: stampSlide 40000ms -34300ms linear infinite;
}
.rail .stamp:nth-child(18) {
-webkit-animation: stampSlide 40000ms -36300ms linear infinite;
animation: stampSlide 40000ms -36300ms linear infinite;
}
.rail .stamp:nth-child(19) {
-webkit-animation: stampSlide 40000ms -38300ms linear infinite;
animation: stampSlide 40000ms -38300ms linear infinite;
}
.rail .stamp:nth-child(20) {
-webkit-animation: stampSlide 40000ms -40300ms linear infinite;
animation: stampSlide 40000ms -40300ms linear infinite;
}
@-webkit-keyframes stampSlide {
0% {
-webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
}
100% {
-webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
}
}
@keyframes stampSlide {
0% {
-webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
}
100% {
-webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
}
}
.world {
-webkit-transform: rotateX(-30deg) rotateY(-30deg);
transform: rotateX(-30deg) rotateY(-30deg);
}
.world .forward {
position: absolute;
-webkit-animation: slide 2000ms linear infinite;
animation: slide 2000ms linear infinite;
}
.world .box {
width: 200px;
height: 200px;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
}
.world .box .wall {
position: absolute;
width: 200px;
height: 200px;
background: rgba(10, 10, 10, 0.8);
border: 1px solid #fafafa;
box-sizing: border-box;
}
.world .box .wall::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 7rem;
}
.world .box .wall:nth-child(1) {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.world .box .wall:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(100px);
transform: rotateX(180deg) translateZ(100px);
}
.world .box .wall:nth-child(3) {
-webkit-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.world .box .wall:nth-child(3)::before {
-webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
-webkit-animation: zeroFour 4000ms -2000ms linear infinite;
animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(4) {
-webkit-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(4)::before {
-webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
-webkit-animation: zeroFour 4000ms -2000ms linear infinite;
animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(5) {
-webkit-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.world .box .wall:nth-child(5)::before {
-webkit-transform: rotateX(180deg) translateZ(-1px);
transform: rotateX(180deg) translateZ(-1px);
-webkit-animation: zeroFour 4000ms linear infinite;
animation: zeroFour 4000ms linear infinite;
}
.world .box .wall:nth-child(6) {
-webkit-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(6)::before {
-webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
-webkit-animation: zeroFour 4000ms linear infinite;
animation: zeroFour 4000ms linear infinite;
}
@-webkit-keyframes zeroFour {
0% {
content: "4";
}
100% {
content: "0";
}
}
@keyframes zeroFour {
0% {
content: "4";
}
100% {
content: "0";
}
}
@-webkit-keyframes roll {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
85% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
87% {
-webkit-transform: rotateZ(88deg);
transform: rotateZ(88deg);
}
90% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
100% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
}
@keyframes roll {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
85% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
87% {
-webkit-transform: rotateZ(88deg);
transform: rotateZ(88deg);
}
90% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
100% {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
}
@-webkit-keyframes slide {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
}
@keyframes slide {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
}
</style>
</head>
<body>
<div class="NotPage">
<div class="message">功 能 开 发 中 ...</div>
<div class="rail">
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
</div>
<div class="world">
<div class="forward">
<div class="box">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</div>
</div>
</div>
</body>
</html>
add_article.html
{% extends 'backend.html' %}
{% block title %}
<h3 class="h3">添加文章</h3>
{% endblock %}
{% block articles %}
<div>
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="">标题</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="">内容</label>
<textarea name="content" id="editor_id" cols="200" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="">分类</label>
<select class="form-control" name="category">
{% for category in category_list %}
<option value="{{ category.id }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="">标签</label>
<select class="form-control" multiple name="tag">
{% for tag in tag_list %}
<option value="{{ tag.id }}">{{ tag.name }}</option>
{% endfor %}
</select>
</div>
<div class="text-center">
<button class="btn btn-danger">新增文章</button>
</div>
</form>
</div>
{% endblock %}
{% block script %}
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width: '100%',
height: '600px',
resizeType: 0,
uploadJson: '/upload_file/',
filePostName: 'myfile',
extraFileUploadParams: {
csrfmiddlewaretoken: '{{ csrf_token }}'
}
});
});
</script>
{% endblock %}
article_detail.html
{% extends 'base.html' %}
{% block header %}
<link rel="stylesheet" href="/static/css/common_css.css">
{% endblock %}
{% block content %}
<h2 class="text-center" article_id="{{ article.id }}">{{ article.title }}</h2>
<hr>
{{ article.content|safe }}
<hr>
{# 点赞点踩#}
<div id="div_digg">
<div class="diggit dianji">
<span class="diggnum" id="digg_count">{{ article.up_number }}</span>
</div>
<div class="buryit dianji">
<span class="burynum" id="bury_count">{{ article.down_number }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</div>
</div>
{# 评论区#}
<div class="clearfix">
<div style="margin-bottom: 20px">
<h3><span id="id_commit_text" >评论列表</span></h3>
</div>
<ul class="list-group">
{% for commit in commit_list %}
<li class="list-group-item">
<div>
<span><a href="">{{ forloop.counter }} 楼</a></span>
<span>{{ commit.create_time|date:"Y-m-d H-i" }}</span>
<span><a href="/{{ commit.user.username }}">{{ commit.user.username }}</a></span>
<div class="pull-right">
<span><a href="">回复</a></span>
<span><a href="">删除</a></span>
</div>
<br>
{{ commit.content }}
</div>
</li>
{% endfor %}
</ul>
</div>
{# 评论框#}
{% if request.user.is_authenticated %}
<div>
<p><h4>发表评论</h4></p>
<p><textarea name="" id="id_text" cols="100" rows="10" style="margin-left: 10px"></textarea></p>
{# 警示框#}
<div class="alert alert-info alert-dismissible fade show" role="alert" >
<p style="margin-left: 50%">记得输入内容哟~</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<button class="btn btn-success pull-right" id="btn_commit">评论</button>
</div>
{% endif %}
{% endblock %}
{% block script %}
<script>
//给点赞和点踩分别绑定一个事件,分别提交
$('.dianji').click(function () {
//判断，有diggit就是点赞，有buryit就是点踩
var up = $(this).hasClass('diggit')
//发送ajax请求
$.ajax({
url: '/upanddown/',
method: 'post',
data: {
article_id: '{{ article.id }}', //被点的文章
up: up, // 点赞
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
console.log(data)
$('#digg_tips').html(data.msg)
if (data.code == 100) {
// 让数字加1 赞+1 踩 +1
var num = Number($('.digg').children('span').html())
$('.digg').children('span').html(num + 1)
}
}
})
})
//评论功能
$('#btn_commit').click(function (){
var content = $("#id_text").val()
if (content){
$.ajax({
url:'/commit/',
method:'post',
data:{
article_id: '{{ article.id }}',
content: content,
csrfmiddlewaretoken: '{{ csrf_token }}'
},success:function (data){
console.log(data)
if(data.code == 100){
$("#id_text").val('') // 清空输入框内容
// 要写入前端的代码
var html_content = `
<li class="list-group-item">
<p><span class="fa fa-address-card-o">${data.username}:</span></p>
<p>${data.content}</p>
</ul>
`
$('.list-group').append(html_content) //写入改代码
}else {
console.log(data.msg)
}
}
})
}else {
$('#alert_error').obj.style.display=""
}})
</script>
{% endblock %}
backend.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.108.0">
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/dashboard.js"></script>
<style>
body {
font-size: .875rem;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
height: calc(100vh - 48px);
overflow-x: hidden;
overflow-y: auto;
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
</style>
{% block header %}
{% endblock %}
</head>
</body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">CSND 后台管理</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="您想问什么呢？"
aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">点击查找</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
个人博客
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/add_article/">
<span data-feather="file" class="align-text-bottom"></span>
新建文章
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart" class="align-text-bottom"></span>
修改头像
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users" class="align-text-bottom"></span>
文本草稿
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2" class="align-text-bottom"></span>
博客主页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers" class="align-text-bottom"></span>
个人站点
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>分类</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle" class="align-text-bottom"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
分类一
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
分类二
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
{% block title %}
<h3 class="h3"> {{ user.username }}的个人博客</h3>
{% endblock %}
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar" class="align-text-bottom"></span>
This week
</button>
</div>
</div>
{% block articles %}
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">文章ID</th>
<th scope="col">文章名字</th>
<th scope="col">创建时间</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
{% for article in article_list %}
<tr>
<td>{{ article.id }}</td>
<td>{{ article.title }}</td>
<td>{{ article.create_time|date:"Y年m月d日" }}</td>
<td>
<a href="" class="btn btn-success">编辑</a>
<a href="/delete/{{ article.id }}" class="btn btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
</main>
</div>
</div>
{% block script %}
{% endblock %}
</html>
base.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.108.0">
<title>Blog Template · Bootstrap v5.3</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif /*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
@media (min-width: 768px) {
.h-md-250 {
height: 250px;
}
}
.blog-footer {
padding: 2.5rem 0;
color: #727272;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
html,
body {
overflow-x: hidden;
}
body {
padding-top: 56px;
}
@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
}
.nav-scroller .nav {
color: rgba(255, 255, 255, .75);
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-scroller .nav-link:hover {
color: #007bff;
}
.nav-scroller .active {
font-weight: 500;
color: #343a40;
}
a {
color: rgb(255, 255, 255);
text-decoration: none;
}
a:hover {
color: rgb(19, 151, 199);
text-decoration: underline;
}
</style>
{% block header %}
{% endblock %}
</head>
<body>
<div class="header">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
{% if request.user.is_authenticated %}
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
<img src="media/{{ request.user.avatar }}" alt="mdo" width="32"
height="32"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" style="">
<li><a class="dropdown-item" href="">个人主页</a></li>
<li id="change_word"><a class="dropdown-item" href="#"><span data-bs-toggle="modal"
data-bs-target="#myModal">修改密码</span></a>
</li>
<li><a class="dropdown-item" href="#">修改头像</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">退出</a></li>
</ul>
</div>
{% else %}
<ul class="nav navbar-nav navbar-right">
<li><a href="/login/">登录</a></li>
</ul>
{% endif %}
<a class="navbar-brand" href="/">CSND</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">下载</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">学习</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">社区</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">更多设置</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">创作中心</a></li>
<li><a class="dropdown-item" href="#">帮助</a></li>
<li><a class="dropdown-item" href="#">设置</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="您想问什么呢" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
{#模态框#}
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header p-5 pb-4 border-bottom-0">
<!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
<h1 class="fw-bold mb-0 fs-2">修改密码</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="alert alert-primary " role="alert" id="alert_error">
<p style="text-align: center">提示大小姐来咯~</p>
</div>
<form class="">
{% csrf_token %}
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="old_password" name="old_password">
<label for="old_password">旧密码</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="new_password" name="new_password">
<label for="new_password">新密码</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="re_password" name="re_password">
<label for="re_password">确认密码</label>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="id_submit">确定</button>
</div>
</div>
</div>
</div>
<main class="container">
{% block biaoti %}
{% endblock %}
<div class="row g-5">
<div class="col-md-8">
{% block name %}
{% endblock %}
{% block content %}
{% endblock %}
</div>
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
{% load common_right %}
{% right username %}
</div>
</div>
</div>
</main>
</body>
{% block script %}
{% endblock %}
</html>
home.html
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.108.0">
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
html,
body {
overflow-x: hidden;
}
body {
padding-top: 56px;
}
@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
}
.nav-scroller .nav {
color: rgba(255, 255, 255, .75);
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-scroller .nav-link:hover {
color: #007bff;
}
.nav-scroller .active {
font-weight: 500;
color: #343a40;
}
a {
color: rgba(1, 4, 12, 0.92);
text-decoration: none;
}
a:hover {
color: rgb(19, 151, 199);
text-decoration: underline;
}
.text-small {
font-size: 85%;
}
.dropdown-toggle {
outline: 0;
}
body {
min-height: 100vh;
}
main {
height: 100vh;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.dropdown-toggle {
outline: 0;
}
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #d2f4ea;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #d2f4ea;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body class="bg-body-tertiary">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button"
aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (dark)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em">
<use href="#moon-stars-fill"></use>
</svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text" style="">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
<use href="#sun-fill"></use>
</svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark"
aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
<use href="#moon-stars-fill"></use>
</svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto"
aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
<use href="#circle-half"></use>
</svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em">
<use href="#check2"></use>
</svg>
</button>
</li>
</ul>
</div>
<div class="header">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
{% if request.user.is_authenticated %}
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
<img src="media/{{ request.user.avatar }}" alt="mdo" width="32" height="32"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" style="">
<li><a class="dropdown-item" href="/backend/">后台管理</a></li>
<li id="change_word"><a class="dropdown-item" href="#"><span data-bs-toggle="modal"
data-bs-target="#myModal">修改密码</span></a>
</li>
<li><a class="dropdown-item" href="#">修改头像</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="/logout/">退出</a></li>
</ul>
</div>
{% else %}
<ul class="nav navbar-nav navbar-right">
<li><a href="/login/" style="color: rgba(0,178,255,0.86);margin-right:5px">登录</a></li>
</ul>
{% endif %}
<a class="navbar-brand" href="#">CSND</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">下载</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">学习</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">社区</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">更多设置</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">创作中心</a></li>
<li><a class="dropdown-item" href="#">帮助</a></li>
<li><a class="dropdown-item" href="#">设置</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="您想问什么呢" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="nav-scroller bg-body shadow-sm">
<nav class="nav" aria-label="Secondary navigation">
<a class="nav-link active" aria-current="page" href="#">糖果爱上我</a>
<a class="nav-link" href="#">
消息
<span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">前端</a>
<a class="nav-link" href="#">后端</a>
<a class="nav-link" href="#">移动开发</a>
<a class="nav-link" href="#">编程语言</a>
<a class="nav-link" href="#">Java</a>
<a class="nav-link" href="#">Python</a>
<a class="nav-link" href="#">人工智能</a>
</nav>
</div>
</div>
{#模态框#}
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header p-5 pb-4 border-bottom-0">
<!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
<h1 class="fw-bold mb-0 fs-2">修改密码</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="alert alert-primary " role="alert" id="alert_error">
<p style="text-align: center">提示大小姐来咯~</p>
</div>
{# <div class="alert alert-warning alert-dismissible fade in hidden" role="alert"#}
{# id="alert_error">#}
{# <button type="button" class="close" data-dismiss="alert"#}
{# aria-label="Close"><span#}
{# aria-hidden="true">×</span></button>#}
{# <strong>密码修改成功</strong>#}
{# </div>#}
<div class="modal-body p-5 pt-0">
<form class="">
{% csrf_token %}
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="old_password" name="old_password">
<label for="old_password">旧密码</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="new_password" name="new_password">
<label for="new_password">新密码</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control rounded-3" id="re_password" name="re_password">
<label for="re_password">确认密码</label>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="id_submit">确定</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="flex-shrink-0 p-3 bg-white" style="width: 220px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<i class="fa fa-paw" style="font-size:24px"></i>
<span class="fs-5 fw-semibold">Collapsible</span>
</a>
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
关于自己
</button>
<div class="collapse" id="home-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">关注</a></li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">我的评论文章</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">我的点赞文章</a>
</li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
文章分类
</button>
<div class="collapse" id="dashboard-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">软件工程</a></li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">操作系统</a>
</li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">数据库</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">其他</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
精选博客
</button>
<div class="collapse" id="orders-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">新闻头条</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">特别头条</a></li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">最多点赞</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">最多评论</a></li>
</ul>
</div>
</li>
<li class="border-top my-3"></li>
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
更多
</button>
<div class="collapse" id="account-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">所有随笔</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">最新评论</a>
</li>
<li><a href="#"
class="link-dark d-inline-flex text-decoration-none rounded">官方博客</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">博客皮肤
</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-7">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="lbt">
<div class="carousel-item active" data-bs-interval="5000">
<a href="">
<img src="https://img-baofun.zhhainiao.com/fs/55a3e4c862060fd625d666ab5f9471ab.jpg"
class="d-block w-100" alt="...">
</a>
</div>
<div class="carousel-item" data-bs-interval="5000">
<a href="">
<img src="https://lmg.jj20.com/up/allimg/1112/060Q9134P2/1Z60Q34P2-8-1200.jpg"
class="d-block w-100" alt="...">
</a>
</div>
<div class="carousel-item" data-bs-interval="5000">
<a href="">
<img src="https://lmg.jj20.com/up/allimg/1011/12021G03252/1G202103252-6-1200.jpg"
class="d-block w-100" alt="...">
</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<hr>
{% for article in article_list %}
<div class="media">
<h4 class="media-heading"><a href="/{{ article.blog.userinfo.username }}/articles/{{ article.id }}.html">{{ article.title }}</a></h4> {#文章标题#}
<div class="media-left">
<div class="row">
<div class="col-md-1">
<a href="/{{ article.blog.userinfo.username }}">
<img alt="64x64" class="media-object" style="width: 64px; height: 64px;"
{#用户头像#}
src="media/{{ article.blog.userinfo.avatar }}">
</a>
</div>
<div class="col-md-11" style="color: #555555">
{{ article.desc }} {#摘要#}
</div>
</div>
</div>
{# #文章尾部#}
<div class="bottom-article" style="margin-top: 8px">
{#作者名字#}
<span style="margin-right: 3px;color: #245269 "><a
href="/{{ article.blog.userinfo.username }}">{{ article.blog.userinfo.username }}</a></span>
{#文章发布时间,date过滤器#}
<span style="margin-right: 10px">发布博客{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
{#点赞数量#}
<span class="fa fa-heart" style="margin-right: 4px">{{ article.up_number }}</span>
<span><i class="fa fa-user-circle"
{#点赞数#}
style="margin-right: 10px"></i><span>{{ article.commit_number }}</span></span>
</div>
</div>
<hr>
{% endfor %}
</div>
<div class="col-md-3">
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">向您推荐</h6>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">CSDN指数</strong>
<a href="#">点击</a>
</div>
<span class="d-block">@糖喵喵</span>
</div>
</div>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">Eolink开发者社区</strong>
<a href="#">点击</a>
</div>
<span class="d-block">@橙子汪汪</span>
</div>
</div>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">Authing身份云</strong>
<a href="#">点击</a>
</div>
<span class="d-block">@南林大呆萌</span>
</div>
</div>
<small class="d-block text-end mt-3">
<a href="#">更多好玩内容~</a>
</small>
</div>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">暖心博客</h6>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@橘子皮</strong>
不要沉醉于过去，不要遐想于未来，专注于即将流逝的现在...
</p>
</div>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#e83e8c"></rect>
<text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text>
</svg>
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@*夏野*</strong>
一定会和喜欢的人在夏日夜晚牵手慢步...
</p>
</div>
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#6f42c1"></rect>
<text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text>
</svg>
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@糖果爱上我</strong>
能管理好自己的情绪，你就是优雅的，能控制好自己的心态，你就是成功的...
</p>
</div>
<small class="d-block text-end mt-3">
<a href="#">更多</a>
</small>
</div>
</div>
</div>
</div>
</body>
<script>
// 修改密码警示款
$('#id_submit').click(function () {
// jquery 都是给标签修改属性--attr-自定义属性和prop->自有属性的区别
// 给按钮添加不可点击的属性
$(this).prop('disabled', true)
$.ajax({
url: '/change_password/',
method: 'post',
data: {
old_password: $('[name="old_password"]').val(),
new_password: $('[name="new_password"]').val(),
re_password: $('[name="re_password"]').val(),
csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()
},
success: function (data) {
console.log(data)
// 显示错误信息，并显示
$('#alert_error').children('p').html(data.msg)
// 让按钮可以点击
$('#id_submit').prop('disabled', false)
console.log(data.msg)
if (data.code == 200) {
$('#alert_error').addClass('hidden')
// 模态框消失
$('#myModal').modal('hide')
console.log(data.msg)
// 跳到登录，重新登录
location.href = '/login/'
} else {
// 3s 后，错误提示消失
setTimeout(function () {
$('#alert_error').addClass('alert-dismissible fade in hidden')
console.log(data.msg)
}, 3000)
}
}
})
})
</script>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
.form-, .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
a {
color: rgba(1, 4, 12, 0.92);
ext-decoration: none;
}
}
</style>
<body>
<main class="form-signin w-100 m-auto">
<div class="text-center">
<div class="form-group">
<label for="id_avatar">
<img class="mb-4 "
src="https://tse3-mm.cn.bing.net/th/id/OIP-C.VeJFhbdc95msPtA2RFHHbwAAAA?rs=1&pid=ImgDetMain"
alt="" height="80px" width="80px" id="id_img1"
style="margin-left: 20px">
</label>
<input type="file" id="id_avatar" class="form-control" accept="image/*" style="display: none">
<h1 class="h3 mb-3 fw-normal">糖果爱上我</h1>
</label>
</div>
</div>
<form id="login_form">
{% csrf_token %}
<div class="form-floating">
<div class="group-group">
<label for="id_username">用户名</label>
<input type="text" name="username" class="form-control"
id="id_username">
<span class="pull-right error" style="color: red"> </span>
</div>
<div class="form-group">
<label for="floatingInput">密码</label>
<input type="password" name="password" class="form-control"
id="id_password">
<span class="pull-right error" style="color: red"> </span>
</div>
<div class="form-group">
<label for="floatingInput">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" class="form-control" id="id_code">
</div>
<img src="/get_code/" alt="" class="col-md-6" height="35" id="id_img">
</div>
</div>
</div>
</form>
<div class="w-100 btn btn-lg btn-primary" id="id_submit" style="margin-top: 20px">登录</div>
<span class="error" style="color: darkred;margin-left: 10px" id="id_error"></span>
<p style="color: #888888">您还没账号吗?那我们先注册一个吧~ <a href="/register/">滴滴</a></p>
<p class="mt-5 mb-3 text-muted">* 佳祺今天也要加油鸭</p>
</main>
</body>
<script>
$('#id_img').click(function () {
// img标签有个特性：只要src变了，就会重新src地址请求拿数据
var url = $(this).attr('src') + '?' // /get_code/???
console.log(url)
$(this).attr('src', url)
})
// 使用ajax做登录
$('#id_submit').click(function () {
var serialize_data = $('#login_form').serializeArray()
console.log(serialize_data)
var data = {}
// 简单
/*
$.each(serialize_data, function (i, v) {
data[v['name']] = v['value']
{
)#}
*/
var username = $('[name="username"]').val()
var password = $('[name="password"]').val()
var code = $('[name="code"]').val()
var csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val()
data['username'] = username
data['password'] = password
data['code'] = code
data['csrfmiddlewaretoken'] = csrfmiddlewaretoken
console.log(data)
$.ajax({
url: '',
method: 'post',
data: data,
success: function (data) {
console.log(data)
if (data.code == 100) {
location.href = data.url
} else {
$("#id_error").html(data.msg)
}
}
})
}
)
</script>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
.form-, .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
<body>
<main class="form-signin w-100 m-auto">
<form id="register_form">
{% csrf_token %}
<div class="text-center">
<div class="form-group">
<label for="id_avatar">
<img class="mb-4 "
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff2bdcbad-2064-4b7e-8b99-3b31394f3162%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704955726&t=7882c5db5f60980bf8ae3a61cc7d27b8"
alt="" height="80px" width="80px" id="id_img"
style="margin-left: 20px">
</label>
<input type="file" id="id_avatar" class="form-control" accept="image/*" style="display: none">
<h1 class="h3 mb-3 fw-normal">糖果爱上我</h1>
</label>
</div>
</div>
<div class="form-floating">
<form id="register_form">
{% for foo in form %}
<div class="form-group">
{# <label for="floatingInput">{{ foo.label }}:</label> {# 拿到表里中文名 #}
{# {{ foo }}#}
{{ foo.label }}
<input type="{{ foo.widget_type }}" name="{{ foo.name }}" class="form-control" id="{{ foo.auto_id }}">
<span class="pull-right error" style="color: red"> </span>{# placeholder="请输入{{ foo.label }}" #}
</div>
{% endfor %}
</form>
</div>
<div class="w-100 btn btn-lg btn-primary" id="id_submit" style="margin-top: 20px">注册</div>
<span class="error" style="color: darkred;margin-left: 10px" id="id_error"></span>
<p class="mt-5 mb-3 text-muted">* 佳祺今天也要加油鸭</p>
</form>
</main>
</body>
<script>
//1、监控文件变化
$('#id_avatar').change(function () {
var fileReader = new FileReader();
//放进文件阅读器
fileReader.readAsDataURL($('#id_avatar')[0].files[0])
//等文件读完，再放入,触发匿名函数,通过attr可以改所有属性
fileReader.onload = function () {
$('#id_img').attr('src', fileReader.result)
}
})
//2、按钮提交，注册功能
$('#id_submit').click(function () {
var formdata = new FormData()
// 把文件放入
formdata.append('my_img', $('#id_avatar')[0].files[0])
//放数据：用户名，密码，确认密码，手机号，邮箱 ，你可以一个个放--->笨办法
/*
formdata.append('username', $('#id_username').val())
formdata.append('password', $('#id_password').val())
formdata.append('re_password', $('#id_re_password').val())
formdata.append('phone', $('#id_phone').val())
formdata.append('email', $('#id_email').val())
formdata.append('csrfmiddlewaretoken', '
*/
// 简单方案
var register_form = $('#register_form').serializeArray() // 会把当前form表单中得数据放到列表套字典的形式
/*
数组
[{name:xx,value:yy}, {…}, {…}, {…}, {…}]
*/
//console.log(register_form)
// jq 的循环
$.each(register_form, function (i, v) {
//console.log(v['name'])
//console.log(v['value'])
formdata.append(v['name'], v['value'])
})
$.ajax({
url: '/register/',
method: 'post',
processData: false,
contentType: false,
data: formdata,
success: function (data) {
if (data.code == 100) {
location.href = '/login/'
} else { // 不成功
// 两次密码不一致，把错误写在 注册按钮后面
// input 自己的错误，写在自己后面
// 循环返回的错误
$.each(data.errors, function (key, value) {
if (key == '__all__') {
$('#id_error').html(value[0])
}
$('#id_' + key).next().html(value[0]).parent().addClass('has-error')
})
// 过3s后，清空错误，和红框
setTimeout(function () {
$('.error').html("").parent().removeClass('has-error')
//alert('asfdsdaf')
}, 3000)
}
}
})
})
//3、当用户名输入框失去焦点，我们就去后端校验用户是否注册
$('#id_username').blur(function () {
var username = $(this).val()
$.ajax({
url: '/check_username/?username=' + username,
method: 'get',
success: function (data) {
console.log(data)
if (data.code != 101) {
$('#id_username').val('').next().html(data.msg).parent().addClass('has-error')
}
}
})
})
</script>
</html>
rigit.html
<div class="my-3 p-3 bg-body rounded shadow-sm" >
<h5 class="border-bottom pb-2 mb-0 "style="color: #ffffff" >时间文档</h5>
{% for item in res_date %}
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#e83e8c"></rect>
<text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">{{ item.create_date|date:'Y年m月' }}({{ item.aritcle_count }})</strong>
<a href="/{{ user.username }}/archive/{{ item.create_date|date:'Y-m' }}.html"">点击</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h5 class="border-bottom pb-2 mb-0 "style="color: #ffffff" >我的分类</h5>
{% for category in res_category %}
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff"></rect>
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">{{ category.category__name }}({{ category.article_count }})</strong>
<a href="/{{ user.username }}/category/{{ category.category__id }}.html">点击</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h5 class="border-bottom pb-2 mb-0 "style="color: #ffffff" >我的标签</h5>
{% for tag in res_tag %}
<div class="d-flex text-body-secondary pt-3">
<svg class="bd-placeholder-img flex-shrink-0 me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#6f42c1"></rect>
<text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text>
</svg>
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<strong class="text-gray-dark">{{ tag.tag__name }}({{ tag.article_count }})</strong>
<a href="/{{ user.username }}/tag/{{ tag.tag__id }}.html">点击</a>
</div>
</div>
</div>
{% endfor %}
</div>
site.html
{% extends 'base.html' %}
{% block biaoti %}
<div class="row mb-2">
<div class="col-md-6" style="margin-top: 30px">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="row">
<div class="col-md-8">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">我的小世界</strong>
<h3 class="mb-0">关于努力</h3>
<div class="mb-1 text-muted">2023年12月~</div>
<p class="card-text mb-auto">生活不可能像你想象得那么好 但也不会像你想象得那么糟...</p>
<div style="margin-top: 40px">
<a href="#" class="stretched-link">滴滴答答</a>
</div>
</div>
</div>
<div class="col-md-4">
<img src="https://img1.baidu.com/it/u=2097685793,1392182149&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
alt="">
</div>
</div>
</div>
</div>
<div class="col-md-6" style="margin-top: 30px">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="row">
<div class="col-md-8">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">异想星空</strong>
<h3 class="mb-0">关于情感</h3>
<div class="mb-1 text-muted">2023年12月~</div>
<p class="card-text mb-auto">
关于我想你的瞬间每天都会发生无数次，像满天星，细细碎碎攒起来能照亮整个天空...</p>
<div style="margin-top: 35px">
<a href="#" class="stretched-link">滴滴答答</a>
</div>
</div>
</div>
<div class="col-md-4">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F10%2F20180510195509_ndjtk.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704941585&t=7689dce9f86472fb0cdd762c98cc23e9"
alt="">
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block name %}
<h3 class="pb-4 mb-4 fst-italic border-bottom">
{{ user.username }}的个人博客
</h3>
{% endblock %}
{% block content %}
{% for article in article_list %}
<div class="media">
<h4 class="media-heading" style="font-weight: bolder"><a href="/{{ username }}/articles/{{ article.id }}.html">{{ article.title }}</a></h4>{#文章标题#}
<div class="media-left">
<div class="row">
<div class="col-md-1">
<a href=" ">
<img alt="64x64" class="media-object" style="width: 64px; height: 64px;"
{#用户头像#}
src="/media/{{ request.user.avatar }}/">
</a>
</div>
<div class="col-md-11" style="color: rgba(255,255,255,0.85)">
{{ article.desc }} {#摘要#}
</div>
</div>
</div>
{# #文章尾部#}
<div class="bottom-article" style="margin-top: 8px">
{#作者名字#}
<span style="margin-right: 3px;color: #245269 "><a
href="">{{ article.blog.userinfo.username }}</a></span>
{#文章发布时间,date过滤器#}
<span style="margin-right: 10px">发布博客{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
{#点赞数量#}
<span class="fa fa-heart" style="margin-right: 4px">{{ article.up_number }}</span>
<span><i class="fa fa-user-circle"
{#点赞数#}
style="margin-right: 10px"></i><span>{{ article.commit_number }}</span></span>
</div>
</div>
<hr>
{% endfor %}
{% endblock %}
今日思维导图：
