新闻网站项目django--首页

models.py（与首页相关的部分）：

# 分类表
class Category(models.Model):
    name = models.CharField(max_length=40, null=False)  # 分类名

    def __str__(self):
        return self.name

# 文章表
class Article(models.Model):
    title = models.CharField(max_length=100, null=False)  # 标题
    intro = models.CharField(max_length=1000)  # 导语
    abstract = models.TextField()  # 摘要
    category = models.ForeignKey(Category, related_name="cate") #连接分类表的外键，多对一关系
    content = models.TextField(null=False)  # 内容
    publish_time = models.DateTimeField(null=False, default=now)  # 发布时间
    image = models.FileField(upload_to=‘article_image‘)  # 文章配图
    source_link = models.CharField(max_length=200)  # 原文链接
    author_name = models.CharField(max_length=100, null=False)  # 作者名字
    author_avatar = models.FileField(upload_to=‘author_avatar‘)  # 作者头像
    author_desc = models.CharField(max_length=100, null=False)  # 作者签名

    def __str__(self):
        return self.title

# 精选文章
class Best(models.Model):
    select_article = models.ForeignKey(Article, related_name=‘select_article‘)  # 被精选的文章
    SELECT_REASON = (
        (‘今日新闻‘, ‘今日新闻‘),
        (‘首页推荐‘, ‘首页推荐‘),
        (‘编辑推荐‘, ‘编辑推荐‘)
    )
    select_reason = models.CharField(choices=SELECT_REASON, max_length=50, null=False)  # 精选的理由

    def __str__(self):
        return self.select_reason + ‘-‘ + self.select_article.title

# 用户信息表
class UserProfile(models.Model):
    belong_to = models.OneToOneField(to=User, related_name="profile")  # 所属用户
    avatar = models.FileField(upload_to=‘avatar‘)  # 用户头像

    def __str__(self):
        return self.belong_to.username

views.py：

def index(request):
    cates = Category.objects.all().order_by("-id") #分类列表

    todaynew_big = Best.objects.filter(select_reason="今日新闻")[0].select_article #取出一篇今日新闻作为大标题
    todaynew = Best.objects.filter(select_reason="今日新闻")[:3]
    todaynew_top3 = [i.select_article for i in todaynew]                          #取出三篇今日新闻

    index_recommend = Best.objects.filter(select_reason="首页推荐")[:4]
    index_recommendlist = [i.select_article for i in index_recommend]   #取出四篇首页推荐

    editor_recommendtop3 = Best.objects.filter(select_reason="编辑推荐")[:3]
    editor_recommendtop3list = [i.select_article for i in editor_recommendtop3] #取出三篇编辑推荐作为大标题

    editor_recommend = Best.objects.filter(select_reason="编辑推荐")[3:10]
    editor_recommendlist = [i.select_article for i in editor_recommend]     #再取出七篇编辑推荐

    article_list = Article.objects.all().order_by("-publish_time") #取出所有文章
    pagerobot = Paginator(article_list,5)                         #创建分页器，每页限定五篇文章
    page_num = request.GET.get("page",1)                            #取到当前页数
    try:
        article_list = pagerobot.page(page_num)                   #一般情况下返回当前页码下的文章
    except EmptyPage:
        article_list = pagerobot.page(pagerobot.num_pages)        #如果不存在该业，返回最后一页
    except PageNotAnInteger:
        article_list = pagerobot.page(1)                          #如果页码不是一个整数，返回第一页
    context=[]
    context={
      "cates":cates,
      "todaynew_big":todaynew_big,
      "todaynew_top3":todaynew_top3,
      "index_recommendlist":index_recommendlist,
      "editor_recommendtop3list":editor_recommendtop3list,
      "editor_recommendlist":editor_recommendlist,
      "article_list":article_list
    }

    print(article_list.paginator.page_range)
    return render(request,‘index.html‘,context=context)

模板 index.html：

<!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static ‘css/semantic.css‘ %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static ‘css/index.css‘ %}" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="ui red basic segment  topmenu">
      <div class="ui borderless menu container" style="border:0;box-shadow:none;">
          <div class="header item" style="margin-right:10px;">
            <div class="ui image">
              <img src="{%static ‘images/index/zhiribao.png‘ %}" alt="" />
            </div>
          </div>
          <div class="item" style="margin-right:10px;">
            <a href="#">首页</a>
          </div>
          {% for cate in cates %}
          <div class="item" style="margin-right:10px;">
            <a href="/category/{{cate.id}}">{{cate.name}}</a>
          </div>
          {% endfor%}

        <div class="right menu login">
        {% if request.user.is_authenticated %}
          <div class="item">
            <a href="{% url ‘profile‘ %}"><div class="ui image">
                <img src="/upload/{{ request.user.profile.avatar }}" style="height:26px;width:24px;" alt="" />
            </div>
            <p style="margin-right:10px;margin-top:6px;color:black;">{{ request.user.username }}</p>
            </a>

          </div>
          <div class="item">
            <a href="{% url "logout" %}">
                                  退出
            </a>
          </div>
        {% else %}
          <div class="item">
            <a href="{% url ‘login‘ %}"><div class="ui image">
                <img src="{% static ‘images/index/login.png‘ %}" alt="" />
            </div>
            <p style="margin-right:10px;margin-top:6px;color:black;">登录</p>
            </a>

          </div>
          <div class="item">
            <a href="{% url ‘register‘ %}">  <div class="ui image">
                 <img src="{% static ‘images/index/register.png‘ %}" alt="" />
              </div>
              <p style="color:black;">注册</p>
            </a>
          </div>
        {% endif %}
        </div>
      </div>
    </div>
    <div class="ui basic segment body container">
      <div class="ui basic segment container topcontent" style="border:none">
        <div class="ui horizontal basic segments" style="border:none;">
          <div class="ui basic segment topleft" style="background: url(‘/upload/{{todaynew_big.image}}‘);background-size:cover;background-repeat: no-repeat;" >
            <a href="#" class="ui circular red  button" style="width:80px;height:35px;padding:0px;padding-top:10px;">今日热闻</a>
            <div class="ui basic segment title">
                 <a href="/detail/{{todaynew_big.id}}"><p style="color:#fff;font-size:28px;margin-left:8px;">{{todaynew_big.title}}</p></a>
            </div>
          </div>
          <div class="ui basic segment topright" >
            {% for todaynew in todaynew_top3 %}
                <div class="ui  segment" style="border:solid red 1px;">
                  <a href="/detail/{{todaynew.id}}">
                  <p>
                    {{todaynew.title}}
                  </p>
                  </a>
                  <span style="color:rgb(195, 200, 194)">{{todaynew.publish_time | date:"Y-m-d"}}</span>
                </div>
             {% endfor %}
          </div>
        </div>
      </div>

      <div class="ui  grid container">
      {% for index_recommend in index_recommendlist %}
        <div class="four wide column">
         <div class="ui basic segment" style="background:url(‘/upload/{{index_recommend.image}}‘);background-size: cover;
         background-repeat: no-repeat;">
           <div class="ui basic segment title">
                <p style="color:#fff;font-size:18px;margin-left:0px;">{{index_recommend.title}}</p>
           </div>
         </div>
       </div>
      {% endfor %}
      </div>

      <div class="ui horizontal basic segments bottomcontent">
        <div class="ui segment bottomleft" style="border:none;box-shadow:none;">
          {% for article in article_list %}
          <div class="ui segment article" style="border:none;box-shadow:none;">
            <div class="ui image">
              <img src="/upload/{{article.image}}" alt="" />
            </div>
            <div class="ui segment articlecontent" style="border:none;box-shadow:none;">
              <a href="/detail/{{article.id}}"><h3><b>{{article.title}}</b></h3></a>
              <p>
                {{article.abstract}}
              </p>
              <span style="color:rgb(206, 208, 204);position:absolute;transform:translate(0,100%);bottom:10%">{{article.publish_time | date:"Y-m-d"}}</span>
            </div>
          </div>
          {% endfor %}
          <div class="ui pagination menu" style="margin-left:50%;transform:translate(-50%,0%);">
            {% if article_list.has_previous %}
                <a href="?page={{article_list.previous_page_number}}" class="item"><i class="icon red left caret"></i></a>
            {% else %}
                <a href="?page={{article_list.start_index}}" class="disabled item"><i class="icon left caret"></i></a>
            {% endif %}

            {% for pagenumber in article_list.paginator.page_range %}
               {% ifequal pagenumber article_list.number %}
               <a href="?page={{ pagenumber }}" class="active item" style="background-color: red; color:white">
                                        {{ pagenumber }}
               </a>
               {% else %}
               <a href="?page={{ pagenumber }}" class="item">
                                        {{ pagenumber }}
               </a>
               {% endifequal %}
            {% endfor %}

            {% if article_list.has_next %}
                <a href="?page={{article_list.next_page_number}}" class="item"><i class="icon red right caret"></i></a>
            {% else %}
                <a href="?page={{article_list.paginator.num_pages}}" class="disabled item"><i class="icon right caret"></i></a>
            {% endif %}
          </div>
        </div>
        <div class="ui segment bottomright" style="border:none;box-shadow:none;">
          <div class="ui red segment best">
            <h4 class="ui center aligned header"><b>编辑推荐</b></h4>
            {% for editor_recommendtop3 in editor_recommendtop3list %}
            <div class="ui segment top3" style="background:url(‘/upload/{{editor_recommendtop3.image}}‘);
            background-size:cover;background-repeat:no-repeat;border-radius:0;">
             <div class="sidebutton">
               <img src="{% static ‘images/index/redtag.png‘ %}" alt="" />
               <p>Top{{ forloop.counter }}</p>
             </div>
             <div class="ui basic segment title" style="height:40px;padding-top:2px;">
                  <p style="color:#fff;font-size:14px;margin-left:0px;">{{editor_recommendtop3.title}}</p>
             </div>
            </div>
            {% endfor %}

            {% for editor_recommend in editor_recommendlist %}
            <div class="ui segment bestlast">
              <img src="{% static ‘images/index/Triangle.png‘ %}" alt="" />
              <p>
               {{editor_recommend.title}}
              </p>
             <span>{{editor_recommend.publish_time | date:"Y-m-d"}}</span>
            </div>
            {% endfor %}
            <div class="ui image">
              <img src="{% static ‘images/index/ad.png‘ %}" alt="" style="width:300px;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  <div class="ui basic segment bottomblack">
    <div class="ui image">
      <img src="{% static ‘images/index/white_zhiribao.png‘ %}" alt="" />
    </div>
    <p style="color:red;margin-top:50px;font-size:20px;">
      关于我们<span style="color:rgb(143, 143, 143)">｜</span>加入我们<span style="color:rgb(143, 143, 143)">｜</span>联系我们｜寻求报道
    </p>
    <p style="color:white;font-size:20px;">
      反馈建议:<span style="color:red;">[email protected]</span>
    </p>
    <div class="ui  basic segment wechat">
      <img src="{% static ‘images/index/qrcode.png‘ %}" style="margin-left:38px;"/>
      <h2 class="ui header" style="color:rgb(255, 255, 255);margin-left:20px;">扫码关注微信号</h2>
    </div>
    <button type="button" name="button" class="ui circular red button backtotop">
      <img src="{% static ‘images/index/upicon.png‘ %}" style="position:absolute;left:18%;top:10%;">
      <img src="{% static ‘images/index/TOP.png‘ %}" style="position:absolute;left:18%;bottom:28%;">
    </button>
  </div>
  <div class="ui basic segment bottomwhite">
    <p>
      Designed by Mugglecoding
    </p>
    <p>
      Developed by XYX
    </p>
    <p style="position:absolute;right:250px;top:40px;">
      京ICP备123878345号
    </p>
  </div>
  </body>
</html>

css文件 index.css：

a{color: black}
.ui.red.basic.segment.topmenu{
  height: 100px;
  padding-left:140px;
  padding-right: 140px;
  border-bottom: 1px solid rgb(189, 189, 189);
}
.ui.borderless.menu.container > .item > a{
  color: black;
  font-weight: bold;
}
.ui.horizontal.basic.segments{
  box-shadow: none;
}
.ui.basic.segment.topleft{
  height:380px;
  width: 655px;
  border:none;
  padding-left: 35px;
  padding-top: 20px;
}
.ui.basic.segment.title{
  background: rgba(110, 110, 110,0.7);
  position: absolute;
  width: 100%;
  height: 70px;
  left:0;
  bottom: 0;
}
.ui.basic.segment.topright{
  height:380px;
  padding:0;
  border:none;
}
.ui.basic.segment.topright > .ui.segment{
  height: 118px;
  border-radius: 0;
  margin-left: 15px;
  padding-top: 30px;
  padding-left: 50px;
}
.four.wide.column > .ui.basic.segment{
 height: 150px;
}
.ui.horizontal.basic.segments.bottomcontent{
  padding-top: 20px;
  border-radius: 0;
  border-right: none;
  border-left: none;
  border-bottom: none;
}
.ui.segment.bottomleft{
  width: 700px;

}
.ui.segment.bottomright{
  width: 100px;
}
.ui.segment.article{
 padding: 0;
 border-radius: 0;
 height: 200px;
 width: 820px;
}
.ui.segment.article > .ui.image{
  float: left;
  margin: 0;
}
.ui.segment.articlecontent{
  position: relative;
  margin: 0;
  padding: 0;
  width: 400px;
  height: 200px;
  float: right;
  padding-left: 10px;
}
.ui.segment.articlecontent > p{
  color:rgb(206, 208, 204)
}
.ui.segment.article > .ui.image >img{
  height: 200px;
  width:400px;
}
.ui.red.segment.best{
  border-left:none;
  border-right:none;
  border-bottom:none;
  box-shadow:none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.ui.segment.top3{
  height: 120px;
  padding-top: 0;
  position: relative;
  border: none;
  box-shadow: none;
}
.sidebutton > p{
  position: absolute;
  top:0;
  left:20px;
  color:white;
}
.ui.segment.bestlast{
  border-radius: 0;
  height: 60px;
  padding-top: 0;
  border: none;
  box-shadow: none;
}
.ui.segment.bestlast > img{
  position: absolute;
  top:4px;
  left:0;
}
.ui.segment.bestlast > p{
  font-size: 12px;
}
.ui.segment.bestlast > span{
  font-size: 12px;
  color: rgb(206, 208, 204);
  position: absolute;
  bottom: 0;
}
.ui.basic.segment.bottomblack{
  height: 400px;
  background-color: rgb(50,50,50);
  padding-left: 250px;
  padding-top: 100px;
}
.ui.circular.red.button.backtotop{
  height: 60px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  bottom:-15%;
}
.ui.basic.segment.wechat{
  position: absolute;
  top:80px;
  right: 250px;
  margin-top: 0;
}
.ui.basic.segment.bottomwhite{
  padding-left: 250px;
  border-bottom: 2px solid red;
}
.ui.basic.segment.bottomwhite > p{
  font-size: 20px;
}

时间： 2024-12-16 06:49:11

新闻网站项目django--首页的相关文章

iis发布的C#项目设置首页

IIS发布的C#项目,设置访问项目的首页,步骤如下: 1.下打开IIS,找到默认文档,如下图所示: 2.双击打开默认文档,点击右侧操作中的添加按钮,如下图所示: 输入首页名称,点击确定即可.

Django博客项目之首页

一.Django-admin 1.创建表和注册表 settings.py文件: TIME_ZONE = 'Asia/Shanghai'    #支持中文数据 models.py文件内容: from django.db import models from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUser):     """     用户信息     ""&q

vue-cli3项目优化首页加载过慢的一些心得

博主最近发现vue-cli3项目做完后,点击首页加载时间好久啊,一般都要3-5s.这样的加载时间博主自己都受不了,所以就有了这个随笔,将自己的一些研究心得分享给大家. 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer,这个工具用作分析你项目的打包出来的js包的大小.然后你可以根据这个工具找到需要优化的js包优化.比如打的包js里echarts.momentjs等都很大,我可以对echarts.momentjs采用cdn方式引入 在vue-cli3

Django项目 -- Django完成常用四大功能

内容目录: 1.pycharm连接数据库及相应操作 2.手撸登录注册编辑删除 2.1 登录.注册 2.2 ORM简单操作 2.3 编辑.删除 3.完整代码 一.pycharm连接数据库及相应操作 此处附上链接地址:https://www.cnblogs.com/xt12321/p/10992542.html 二.手撸登录注册编辑删除 2.1 登录.注册 (1)登录 1> 先在urls.py里面添加路由设置 2> 再在视图层 view.py里面定义login的处理逻辑 3> 在templa

新闻网站项目django--注册页

models.py: # 用户信息表 class UserProfile(models.Model): belong_to = models.OneToOneField(to=User, related_name="profile") # 所属用户 avatar = models.FileField(upload_to='avatar') # 用户头像 def __str__(self): return self.belong_to.username views.py: def reg

新闻网站项目静态页面--个人资料页

外联css profile.css: body{ background-image:url(../images/login/backgroundimg.png); background-size: cover; background-repeat: no-repeat; } .ui.basic.segment.container.content{ width: 425px; margin-left: 50%; margin-top: 389px; } .ui.header{ color:red;

新闻网站项目django--一些必要的配置

settings.py: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'zhidaily', #记得在这里添加你的app ] TEMPLATES = [ { 'BACKEND': '

新闻网站项目静态页面--登录页

外联css login.css: body{ background-image:url(../images/login/backgroundimg.png); background-size: cover; background-repeat: no-repeat; } .ui.basic.segment.container.content{ width: 425px; margin-left: 50%; margin-top: 389px; } .ui.header{ color:red; f

第 20 章 项目实战--首页内容介绍[下][4]

学习要点: 1.首页内容介绍[下] 主讲教师:李炎恢 本节课我们制作一下首页内容介绍的下半部分. 一．首页内容介绍[下] //先完成底部的 footer <footer id="footer" class="text-muted"> <div class="container"> <p> 企业培训 | 合作事宜 | 版权投诉 </p> <p> 苏 ICP 备 12345678. © 20