BBS项目分布搭建四(点赞点踩及评论功能)

Bertha 。 2023-09-30 09:47 7阅读 0赞

## 1. 点赞点踩样式准备 ##

# 在base.html文件中 head标签内 添加css模块：
        {% block css %}
    
        {% endblock %}
    
    
    
    # 修改 article_detail.html内容：
    {% extends 'base.html' %}
    
    {% block css %}
        <style>
            #div_digg {
                float: right;
                margin-bottom: 10px;
                margin-right: 30px;
                font-size: 12px;
                width: 125px;
                text-align: center;
                margin-top: 10px;
            }
    
            .diggit {
                float: left;
                width: 46px;
                height: 52px;
                background: url(/static/img/upup.gif) no-repeat;
                text-align: center;
                cursor: pointer;
                margin-top: 2px;
                padding-top: 5px;
            }
    
            .buryit {
                float: right;
                margin-left: 20px;
                width: 46px;
                height: 52px;
                background: url(/static/img/downdown.gif) no-repeat;
                text-align: center;
                cursor: pointer;
                margin-top: 2px;
                padding-top: 5px;
            }
    
            .clear {
                clear: both;
            }
    
            .diggword {
                margin-top: 5px;
                margin-left: 0;
                font-size: 12px;
                color: #808080;
            }
    
        </style>
    {% endblock %}
    
    
    {% block content %}
        <h1>{
      
       { article_detail.title }}</h1>
        <div class="article_content">
            {
      
       { article_detail.content|safe }}
        </div>
    
        {#    点赞点踩样式开始#}
        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit active">
                    <span class="diggnum" id="digg_count">{
      
       { article_detail.up_num }}</span>
                </div>
                <div class="buryit active">
                    <span class="bur