个人站点搭建
个人站点搭建
一、后端
1.个人站点文章展示
@login_required
def site(request, username, **kwargs):
user_obj = models.UserInfo.objects.filter(username=username).first()
if not user_obj:
return render(request, '04error.html')
blog_obj = user_obj.blog
# 查询当前用户所有文章数
article_list = models.Article.objects.filter(blog=blog_obj)
# 侧边栏数据查询
if kwargs:
condition = kwargs.get('condition')
param = kwargs.get('param')
if condition == 'category':
# 根据分类中的id进行筛选
article_list = article_list.filter(category=param)
elif condition == 'tag':
# 连表查询实现便签类别的id查询
article_list = article_list.filter(tag__id=param)
else:
# 根据年月进行查询
year, month = param.split('-')
article_list = article_list.filter(create_time__year=year, create_time__month=month)
print(kwargs)
# 1查询当前用户所有分类及分类下的所有文章数
category_list = models.Category.objects.filter(blog=blog_obj).annotate(count_num=Count('article__pk')).values_list(
'name', 'count_num', 'pk')
# print(category_list)
# 2.查询当前用户所有的标签及标签下的文章数
tag_list = models.Tag.objects.filter(blog=blog_obj).annotate(count_num=Count('article__pk')).values_list('name',
'count_num',
'pk')
# print(tag_list)
# 3.根据年月统计文章数
data_list = models.Article.objects.filter(blog=blog_obj).annotate(month=TruncMonth('create_time')).values(
'month').annotate(count=Count('pk')).values_list('month', 'count')
# print(data_list)
return render(request, '05site.html', locals())
2.自定义标签实现侧边栏数据展示
"""
@author RansySun
@create 2019-11-05-23:52
"""
from django.template import Library
register = Library()
from app import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
@register.inclusion_tag('08left_menu.html')
def index(username):
"""缺什么传什么"""
user_obj = models.UserInfo.objects.filter(username=username).first()
blog_obj = user_obj.blog
# 1查询当前用户所有分类及分类下的所有文章数
category_list = models.Category.objects.filter(blog=blog_obj).annotate(count_num=Count('article__pk')).values_list(
'name', 'count_num', 'pk')
# print(category_list)
# 2.查询当前用户所有的标签及标签下的文章数
tag_list = models.Tag.objects.filter(blog=blog_obj).annotate(count_num=Count('article__pk')).values_list('name',
'count_num',
'pk')
# print(tag_list)
# 3.根据年月统计文章数
data_list = models.Article.objects.filter(blog=blog_obj).annotate(month=TruncMonth('create_time')).values(
'month').annotate(count=Count('pk')).values_list('month', 'count')
return locals()
# return {'usernmae':username....}
@register.simple_tag
def get_css(username):
user_obj = models.UserInfo.objects.filter(username=username).first()
blog_css = user_obj.blog.site_name
print(blog_css)
return blog_css
二、前端
1.模板个人站点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'bootstrap/js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
<link rel="stylesheet" href="/media/css/{{ user_obj.blog.site_theme }}">
{% block css %}
{% endblock %}
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ user_obj.blog.site_title }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">个人站点</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">文章</a></li>
<li><a href="#">作者</a></li>
<li><a href="#">时间</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">站点</a></li>
<li role="separator" class="divider">站点</li>
<li><a href="#">用户</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li><a href="#">个人站点</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">用户信息 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a>
</li>
<li><a href="#">用户信息</a></li>
<li><a href="#">修改样式</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">注销</a></li>
</ul>
</li>
{% else %}
<ul class="dropdown-menu">
<li><a href="/login/">登录</a></li>
<li><a href="/register">注册</a></li>
</ul>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
{# 左边广告#}
<div class="col-md-2">
{% load mytag %}
{% index username %}
</div>
{# 中间内容#}
<div class="col-md-8">
{% block content %}
{% endblock %}
{{ page_obj.page_html|safe }}
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
2.个人站点
{% extends '06base.html' %}
<link rel="stylesheet" href="/media/css/{{ request.user.blog.site_theme }}">
{{ user_obj.blog.site_theme }}
{% block content %}
<div class="col-md-12">
<ul class="media-list">
{# 显示文章内容#}
{% for article in article_list %}
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-rounded" width="150px" height="150px"
src="/media/{{ article.blog.userinfo.avatar }}" alt="..."
style="border-radius: 50%">
</a>
</div>
<div class="media-body">
<a href="/{{ username }}/article/{{ article.pk }}">
<h4 class="media-heading">{{ article.title }}</h4>
</a>
<p>{{ article.desc }}</p>
</div>
<br>
{# posted @ 2019-09-28 17:42 武沛齐 阅读 (1607) 评论 (2) 编辑#}
<div class="pull-right">
<a href="">
<span>posted @ </span>
</a>
<span>
<span class="glyphicon glyphicon-time"></span>
{{ article.create_time|date:'Y-m-d' }}
</span>
<span>
<span class="glyphicon glyphicon-user"></span>
{{ article.blog.userinfo.username }}
</span>
<span>
<span class="glyphicon glyphicon-comment"></span>
评论数 ({{ article.comment_num }})
</span>
<span>
<span class="glyphicon glyphicon-thumbs-up"></span>
点赞数 ({{ article.up_num }})
</span>
<span><span class="glyphicon glyphicon-pencil"></span>
<a href="#">编辑</a>
</span>
</div>
</li>
<hr>
{% endfor %}
</ul>
{{ page_obj.page_html|safe }}
</div>
{% endblock %}
3.侧边栏实现
{# 一#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">文章分类</h3>
</div>
<div class="panel-body">
{% for category in category_list %}
<p><a href="/{{ user_obj.username }}/category/{{ category.2 }}">{{ category.0 }}
({{ category.1 }})</a></p>
{% endfor %}
</div>
</div>
{#二#}
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">文章标签</h3>
</div>
<div class="panel-body">
{% for tag in tag_list %}
<p><a href="/{{ user_obj.username }}/tag/{{ tag.2 }}">{{ tag.0 }} ({{ tag.1 }})</a></p>
{% endfor %}
</div>
</div>
{# 三#}
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">日期归档</h3>
</div>
<div class="panel-body">
{% for data in data_list %}
<p><a href="/{{ user_obj.username }}/archive/{{ data.0|date:'Y-m' }}">{{ data.0|date:'Y年m月' }}
({{ data.1 }})</a></p>
{% endfor %}
</div>
</div>
{# 四#}
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">广告位招聘</h3>
</div>
<div class="panel-body">
联系地址
</div>
</div>
在当下的阶段，必将由程序员来主导，甚至比以往更甚。
