Python Django个人网站搭建16-优化首页
作者： zifanwang 发布于2020-05-24
首先修改mysite/mysite/views.py：
from django.shortcuts import render
from article.models import ArticlePost
from django.core.paginator import Paginator
def total_articles():
return ArticlePost.objects.count()
def shou(request):
article_list = ArticlePost.objects.all()
paginator = Paginator(article_list, 5)
articles = paginator.get_page(1)
total_article=total_articles()
context = {'articles': articles,'total_articles': total_article}
return render(request, 'shou/shou.html', context)
在static文件夹里新建img文件夹并下载一个首页的背景图片放入其中比如：
再在mysite/urls.py里面增加：
url(r'^img/(?P<path>.*)$', serve, {'document_root':'c:/mysite/static/img'}),
修改shou.html：
{% extends "basee.html" %}
{% block title %}
My Site-Home
{% endblock title %}
{% block content %}
<style type="text/css">
.cardbox {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
text-align: center;
float: left;
margin-right: 10px;
padding: 2px;
padding-top: 2px;
background-color: #FFFFFF;
}
.headerbox {
color: #fff;
padding: 1px;
font-size: 16px;
height: 100%;
}
.bodybox {
padding: 8px;
}
.bodybox p {
margin-left: 5px;
}
</style>
<body background="/img/ice_range.jpg"
style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;">
<br>
<center>
<h1>My Site</h1>
<p>Welcome to my site</p>
<hr>
</center>
{% for article in articles %}
<div class="col-12 mb-12">
<div class="row mt-2 container">
<div class="cardbox">
<div class="headerbox" style="background-color: #99ffcc;">
<h5>
<h5><a title="article" style="cursor: pointer; color:black">{{ article.title }}</a></h5>
</h5>
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">read</a>
<span>
<span style="color: green">
{{ article.created|date:"Y-m-d" }}
</span>
<small class="col align-self-end" style="color: gray;">
views: {{ article.total_views }}
</small>
</span>
<h6></h6>
</div>
</div>
<div class="cardbox">
<div class="bodybox"><p>{{ article.body|slice:'130'|cut:"#"|cut:"```"|striptags }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock content %}
效果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
