个人站点

个人站点

关注
发信
关注(28)粉丝(399)

个人站点搭建

个人站点搭建

一、后端

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&nbsp;@&nbsp;</span>
                        </a>
                        <span>
                            <span class="glyphicon glyphicon-time"></span>
                            &nbsp; {{ article.create_time|date:'Y-m-d' }}
                        </span>
                        <span>
                           <span class="glyphicon glyphicon-user"></span>
                            &nbsp; {{ article.blog.userinfo.username }}
                        </span>
                        <span>
                            <span class="glyphicon glyphicon-comment"></span>
                            评论数&nbsp; ({{ article.comment_num }})
                        </span>
                        <span>
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                            点赞数&nbsp; ({{ 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>
01-13 19:35
Powered by LMLPHP ©2024 个人站点 0.065365