Skip to main content

【开发企业官网】4.渲染静态文件

现在呢，我们已经有了一个首页的helloworld和django后台，我们需要把我们的静态资源文件展示到这个首页中。在我们的静态资源文件中，它只有一个index.html，其它的文件都是css文件和js文件。如下图所示

01本地资源文件.jpg

那么我们看一下这是它的效果

02页面效果展示

我们现在就把这个页面渲染到我们的URL中，让输出helloworld页面内容显示index页面的内容，那么我们就需要使用模板的渲染了。我们先把这些资源文件给它准备好，我们的目录中通常会把这些静态资源文件放到一个文件夹中，这个文件夹通常叫做static。在这个website根目录下，我们新建一个文件夹叫做static。

03新建static文件夹

把所有的除了index.html页面的静态资源文件全都给它拷贝过来，放到static文件夹里面，如下图所示

04static文件夹文件

接下来咱们在website根目录下新建一个模板文件夹，我们给它起一个名字叫做templates。如下图：

05新建templates文件夹

所有的模板文件都放到这里，现在回到我们的配置文件中来配置一下它，找到website/config/settings.py文件中，使用快捷键ctrl+f搜索templates，定位到templates代码块来配置dirs，代码如下：

'DIRS': [os.path.join()],

这个os模块我们需要先导入一下，在settings.py文件中的顶部来导入。

import os

我们继续拼接路径，拼接使用BASE_DIR，为什么可以使用这个BASE_DIR呢？因为在这里（如下图所示）全局它已经配置了一个BASE_DIR这样的全局变量，我们就可以在这里使用，它就是这个目录结构。

06basedir

使用它和和我们的新建的templates文件夹进行拼接，拼接以后就是我们最终的templates这个文件夹里面，接下来我们新建一个index.html文件，在html文件中先写这是首页。如下图所示：

07新建index文件

接下来找到website/mysite/views.py文件中，它输出的是helloworld，现在我们要渲染一个页面，使用render来进行渲染，代码如下：

from django.http import HttpResponse 
from django.shortcuts import render
# Create your views here.
def index(request):
		return render(request,'index.html')

我们在vscode终端中输入如下代码来重启这个服务

python manage.py runserver

回到我们的浏览器，在地址栏输入127.0.0.1:8000，我们再来刷新，这里就提示这是首页了。如下图：

08这是首页

那接下来呢，我们要把整个静态资源文件全都给它弄过来，也就是说把已经准备好的index.html给它拷贝过来直接进行替换。 09替换后html文件 我们再来重启下这个服务，要不然它有缓存，在vscode终端中输入如下代码来重启这个服务

python manage.py runserver

回到页面我们再来刷新，我们看到这个页面内容就显示出来了。

10替换后的index

但是大家会发现这个和我们看到的原始的静态页并不一样，这是因为什么呢？这就是因为这些css文件、js文件没有加载进来，所以它看起来没有页面效果，我们也可以单击右键点击检查，

11单击鼠标右键.jpg

然后刷新，找到这里的console你会发现，页面中一片红色，就是因为它没有找到正确的加载文件。

12页面报错.jpg

来我们可以看一下在这个html中它加载了这些css文件、js文件，但是它找不到，没有找到这个路径，如下图所示：

13没有找到正确的路径

这些文件在我们的static文件夹下面，所以我们需要修改一下上面的路径，我们让它加载static文件夹下的文件，我们可以使用模板，这个index.html的顶部写入代码

{% load static %}

那接下来我们就可以使用static来引入这些文件了，使用static这个模板标签，它就会自动找到static这个文件夹下的文件了，修改后的代码如下

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/font.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/index.css' %}">
  <title>网络科技</title>
</head>

再来刷新，我们现在就看到部分效果了，但还有一些没有加载完成，比如说这些图片，如下图：

14图片没有加载成功

那同理，我们把图片给它加载过来，我们在加载的时候一样的，也可以用使用static文件夹下的文件，代码和加载css文件、js文件类似，整体修改后的代码如下：


{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/font.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/index.css' %}">
  <title>网络科技</title>
</head>

<body>

  <!-- 导航 -->
  <header>
    <div class="logo">网络科技</div>
    <nav>
      <a href="#home">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#showcases">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team-intro">团队介绍</a>
      <a href="#company-activities">资讯中心</a>
      <i class="fa fa-search"></i>
    </nav>
    <!-- 小屏幕按钮 -->
    <div class="burger">
      <div class="burger-line1"></div>
      <div class="burger-line2"></div>
      <div class="burger-line3"></div>
    </div>
  </header>

  <!-- 轮播图 -->
  <div id="home" class="glide">
    <div class="glide__track" data-glide-el="track">
      <div class="glide__slides">
        <!-- 第一张轮播图 -->
        
        <div class="glide__slide">
          <div class="slide-caption">
            <h1>十年高端网站设计经验，用创新点缀人生，让科技融入理想。</h1>
            <h3>
              科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想
            </h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="backdrop"></div>
          <img src="{% static 'media/slide/bg1.jpg' %}" alt="">
        </div>
        
        <div class="glide__slide">
          <div class="slide-caption">
            <h1>二十年高端网站设计经验，用创新点缀人生，让科技融入理想。</h1>
            <h3>
              科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想
            </h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="backdrop"></div>
          <img src="{% static 'media/slide/bg.jpg' %}" alt="">
        </div>
        
        <div class="glide__slide">
          <div class="slide-caption">
            <h1>科技改变世界</h1>
            <h3>
              立足科学发展，着力自主创新。加速科技进步，为全市经济社会发展提供有力支持。凝聚科技创意，成就创新梦想。
            </h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="backdrop"></div>
          <img src="{% static 'media/slide/15.jpg' %}" alt="">
        </div>
        
      </div>
    </div>
    <!-- 切换按钮 -->
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
        < </button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            >
          </button>
    </div>
    <!-- 控制圆点 -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
    </div>
  </div>

  <!-- 关于我们 -->
  <div class="container-wrapper">
    <section id="about-us" class="about-us">
      <h2 class="title1">关于我们</h2>
      <p class="intro">
        公司一直是以技术型开发为主的专业公司，高端的美工设计团队及程序开发团队，网站开发，网站建设与网络营销活动策划相关的企业组织。
      </p>
      <div class="features">
        <div class="feature">
          <i class="fa fa-lightbulb-o"></i>
          <h4 class="feature-title">品牌创意</h4>
          <p class="feature-content">让各知名行业门户脱颖而出,从满足预期到走向卓越。为企业设计独特的并能完美呈现企业价值观的视觉。</p>
        </div>
        <div class="feature">
          <i class="fa fa-line-chart"></i>
          <h4 class="feature-title">整合营销</h4>
          <p class="feature-content">通过市场进入分析，指定网络营销战略，网络营销实施。</p>
        </div>
        <div class="feature">
          <i class="fa fa-shopping-cart"></i>
          <h4 class="feature-title">电子商务</h4>
          <p class="feature-content">根据企业需求，开发不同的销售渠道，通过网上直销</p>
        </div>
        <div class="feature">
          <i class="fa fa-desktop"></i>
          <h4 class="feature-title">网页设计</h4>
          <p class="feature-content">企业官网专属的高端定制化服务
解决方案，全面满足建设核心与运行管理
并提升企业品牌的有效传播。</p>
        </div>
        <div class="feature">
          <i class="fa fa-tachometer"></i>
          <h4 class="feature-title">网站优化</h4>
          <p class="feature-content">先分析后合作，先排名后付费，整站SEO优化让您的网站有更多关键词的自然排名，长期稳定共赢</p>
        </div>
        <div class="feature">
          <i class="fa fa-lightbulb-o"></i>
          <h4 class="feature-title">网站架设</h4>
          <p class="feature-content">从策划到设计制作，每一步都追求做到细腻，结合搜索引擎优化与用户体验优化，制作可持续发展的企业网站</p>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section id="showcases" class="showcases section-bg">
      <h2 class="title1">成功案例</h2>
      <!-- 筛选按钮 -->
      <div class="filter-btns">
        <button class="filter-btn active" data-filter="*">全部</button>
        <button class="filter-btn" data-filter=".category_2">企业集团</button>
        <button class="filter-btn" data-filter=".category_3">移动金融</button>
        <button class="filter-btn" data-filter=".category_4">设计建筑</button>
      </div>
      <!-- 筛选图片 -->
      <div class="cases">
        
        <div class="case-item category_4">
          <a href="/news/9">
          <img src="{% static 'media/news/国贸三期.jpeg' %}" alt="">
          </a>
        </div>
        
        <div class="case-item category_4">
          <a href="/news/8">
          <img src="{% static 'media/news/电视台总部大楼.png' %}" alt="">
          </a>
        </div>
        
        <div class="case-item category_3">
          <a href="/news/7">
          <img src="{% static 'media/news/财付通.jpeg' %}" alt="">
          </a>
        </div>
        
        <div class="case-item category_3">
          <a href="/news/6">
          <img src="{% static 'media/news/蚂蚁金融.webp' %}" alt="">
          </a>
        </div>
        
        <div class="case-item category_2">
          <a href="/news/5">
          <img src="{% static 'media/news/阿里.png' %}" alt="">
          </a>
        </div>
        
        <div class="case-item category_2">
          <a href="/news/4">
          <img src="{% static 'media/news/4.jpg' %}" alt="">
          </a>
        </div>
        

      </div>
    </section>

    <!-- 服务 -->
    <section id="service" class="service">
      <h2 class="title1">服务流程</h2>
      <p class="intro">
        网络综合公司，提供包括网络基础服务（比如域名，主机，邮箱）和网络增值服务（如网站建设和推广，网站优化）等业务
      </p>
      <div class="services">
        <div class="service-item">
          <i class="fa fa-comments"></i>
          <h2 class="service-title">需求沟通</h2>
          <p class="service-content">
            客户提出网站建设基本需求，包括设计要求及功能要求。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-sign-in"></i>
          <h2 class="service-title">项目评估</h2>
          <p class="service-content">
            根据客户提出的需求进行评估，估算出相应的时间与费用。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-signal"></i>
          <h2 class="service-title">签订合同</h2>
          <p class="service-content">
            合作双方确认费用，工期，合作要求的基础上，双方共同签订合同。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-user"></i>
          <h2 class="service-title">提案阶段</h2>
          <p class="service-content">
            完成网站初稿设计，包括首页风格，内页风格页面。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-thumb-tack"></i>
          <h2 class="service-title">制作阶段</h2>
          <p class="service-content">
            完成所有网页的设计，进行程序开发以及前后台的页面整合。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-check-circle"></i>
          <h2 class="service-title">网站验收</h2>
          <p class="service-content">
            根据合同条款进行网站验收，并签署网站验收确认单。
          </p>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section id="team-intro" class="team-intro section-bg">
      <h2 class="title1">团队介绍</h2>
      <div class="team-members">
        
          <div class="team-member">
            <div class="profile-image">
              <img src="{% static 'media/team/03.jpeg' %}" alt="">
            </div>
            <h4 class="name">马老师</h4>
            <p class="position">董事长</p>
            <ul class="social-links">
              <li><i class="fa fa-weixin"></i></li>
              <li><i class="fa fa-weibo"></i></li>
              <li><i class="fa fa-github"></i></li>
              <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
          </div>
        
          <div class="team-member">
            <div class="profile-image">
              <img src="{% static 'media/team/01.jpeg' %}" alt="">
            </div>
            <h4 class="name">andy</h4>
            <p class="position">CEO</p>
            <ul class="social-links">
              <li><i class="fa fa-weixin"></i></li>
              <li><i class="fa fa-weibo"></i></li>
              <li><i class="fa fa-github"></i></li>
              <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
          </div>
        
          <div class="team-member">
            <div class="profile-image">
              <img src="{% static 'media/team/科比.jpeg' %}" alt="">
            </div>
            <h4 class="name">kobe</h4>
            <p class="position">体育部长</p>
            <ul class="social-links">
              <li><i class="fa fa-weixin"></i></li>
              <li><i class="fa fa-weibo"></i></li>
              <li><i class="fa fa-github"></i></li>
              <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
          </div>
        
          <div class="team-member">
            <div class="profile-image">
              <img src="{% static 'media/team/04.jpeg' %}" alt="">
            </div>
            <h4 class="name">赵四</h4>
            <p class="position">文艺部长</p>
            <ul class="social-links">
              <li><i class="fa fa-weixin"></i></li>
              <li><i class="fa fa-weibo"></i></li>
              <li><i class="fa fa-github"></i></li>
              <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
          </div>
        
          <div class="team-member">
            <div class="profile-image">
              <img src="{% static 'media/team/02.jpeg' %}" alt="">
            </div>
            <h4 class="name">张三</h4>
            <p class="position">HR</p>
            <ul class="social-links">
              <li><i class="fa fa-weixin"></i></li>
              <li><i class="fa fa-weibo"></i></li>
              <li><i class="fa fa-github"></i></li>
              <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
          </div>
        
      </div>
    </section>

    <!-- 数据区域 -->
    <section class="data-section">
      <div class="data-price">
        <i class="fa fa-code"></i>
        <div class="num">280万</div>
        <div class="data-desc">行代码</div>
      </div>
      <div class="data-price">
        <i class="fa fa-trophy"></i>
        <div class="num">168</div>
        <div class="data-desc">个奖项</div>
      </div>
      <div class="data-price">
        <i class="fa fa-male"></i>
        <div class="num">2969</div>
        <div class="data-desc">位客户</div>
      </div>
      <div class="data-price">
        <i class="fa fa-folder"></i>
        <div class="num">684</div>
        <div class="data-desc">个项目</div>
      </div>
    </section>

    <!-- 公司动态 -->
    <section id="company-activities" class="company-activities">
      <h2 class="title1">资讯中心</h2>
      <p class="intro">关注公司动态，获取一手信息</p>
      <div class="activities">
        
        <div class="activity">
          <div class="act-image-wrapper">
            <img src="{% static 'media/news/23.png' %}" alt="">
          </div>
          <div class="meta">
            <p class="date-published">
              <i class="fa fa-calendar"></i> 2022年9月7日 11:24
            </p>
          </div>
          <h2 class="act-title">网站建设中常见的五大问题</h2>
          <article>网站建设过程中会遇到许多问题，南京网站制...</article>
          <a href="/news/3">
          <button class="readmore-btn">阅读更多</button>
          </a>
        </div>
        
        <div class="activity">
          <div class="act-image-wrapper">
            <img src="{% static 'media/news/19.jpg' %}" alt="">
          </div>
          <div class="meta">
            <p class="date-published">
              <i class="fa fa-calendar"></i> 2022年9月7日 11:24
            </p>
          </div>
          <h2 class="act-title">SEO网站的基本术语</h2>
          <article>&lt;table border=&quot;1&quot; ce...</article>
          <a href="/news/2">
          <button class="readmore-btn">阅读更多</button>
          </a>
        </div>
        
        <div class="activity">
          <div class="act-image-wrapper">
            <img src="{% static 'media/news/21.png' %}" alt="">
          </div>
          <div class="meta">
            <p class="date-published">
              <i class="fa fa-calendar"></i> 2022年9月7日 11:23
            </p>
          </div>
          <h2 class="act-title">什么是伪静态</h2>
          <article>伪静态是相对真实静态来讲的，真实静态会生...</article>
          <a href="/news/1">
          <button class="readmore-btn">阅读更多</button>
          </a>
        </div>
        
      </div>
      <div>
        <a href="/news/list">
          <button class="readmore-btn">查看全部新闻</button>
        </a>
      </div>
    </section>
  </div>


  <!-- 尾部 -->
  <footer>
    <div class="footer-menus">
      <div class="contact-us">
        <p class="menu-title">联系我们</p>
        <p>地址:北京市XXXX</p>
        <p>电话:12345678977</p>
        <p>传真:12345678977</p>
        <p>电子邮箱:12345678977@qq.com</p>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">服务概览</p>
        <ul class="menu-items">
          <li><a href="#">网站建设</a></li>
          <li><a href="#">域名购买</a></li>
          <li><a href="#">网页设计</a></li>
          <li><a href="#">移动应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">成功案例</p>
        <ul class="menu-items">
          <li><a href="#">桌面网站</a></li>
          <li><a href="#">移动网站</a></li>
          <li><a href="#">科研项目</a></li>
          <li><a href="#">软件应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">资讯中心</p>
        <ul class="menu-items">
          <li><a href="#">信息公开</a></li>
          <li><a href="#">最近新闻</a></li>
          <li><a href="#">最新博客</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">帮助与支持</p>
        <ul class="menu-items">
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">文档资源</a></li>
        </ul>
      </div>
      <p class="icp-info">京ICP备案 1234556789 号</p>
      <p class="rights">
        &copy; 2020 XX科技 - 响应式网站 版权所有
      </p>
      <p class="scrollToTop">
        <a href="#home"><i class="fa fa-chevron-up"></i></a>
      </p>
    </div>
  </footer>

  <script src="./static/libs/anime/anime.min.js"></script>
  <script src="./static/libs/glide/glide.min.js"></script>
  <script src="./static/libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./static/libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
  <script src="./static/js/index.js"></script>
</body>

</html>

刷新浏览器，这些图片并没有引入成功如下图所示：

15图片没有引入

接下来我们需要在配置文件中来配置一下，在我们的website/config/settings.py配置文件中找到STATIC_URL下面已经设置static，如下图：

16staticurl

我们还需要在下面添加一个STATICFILES_DIRS，代码如下：

STATIC_URL = 'static/'
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static')
]

再来启动试一下，我们在vscode终端中输入如下代码来重启这个服务

python manage.py runserver

现在我们就看到这些文件全部加载出来了，也就是说我们的静态页，经过我们的使用render函数进行渲染以及配置静态文件，这些内容全部都可以正常显示了。

17文件全部加载出来了