时间戳

首页 > 解决方案 > 使用精美的 Html 模板

javascript - 使用精美的 Html 模板

问题描述

在我的博客中添加了很多东西之后，我想添加一个模板，但要做到这一点，我似乎需要重写。所以我创建了一个新应用程序，它与第一个应用程序完全相同。在新的模板中，我将添加模板，然后将一堆代码复制并粘贴到新模板中。但是当我这样做时，我陷入了一个错误。这真的很难解决。导入模板后，我向所有包含图像、js、视频和其他内容的内容添加了一个静态条码/代码。但仍然没有任何变化。我希望有一个人可以帮助我。如果还需要什么，请务必询问。我真的很抱歉粘贴了整个代码。如果我编辑代码，我可能会错过一些重要的东西。它的外观和外观之间有一百万个差异。但我似乎无法解决。

这是我的样子：

https://www.free-css.com/assets/files/free-css-templates/preview/page252/scenic/

视图.py：

from django.shortcuts import render

def home(request):
    return render(request,'home.html',{})

代码：

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

<title>Scenic HTML Template</title>


<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="{% static 'myblog/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'myblog/css/font-awesome.min.css/' %}">
<link rel="stylesheet" href="{% static 'myblog/css/magnific-popup.css' %}">

<link rel="stylesheet" href="{% static 'myblog/css/owl.theme.css' %}">
<link rel="stylesheet" href="{% static 'myblog/css/owl.carousel.css' %}">

<!-- MAIN CSS -->
<link rel="stylesheet" href="{% static 'myblog/css/tooplate-style.css' %}">

</head>
<body>

<!-- PRE LOADER -->
<div class="preloader">
     <div class="spinner">
          <span class="sk-inner-circle"></span>
     </div>
</div>


<!-- MENU -->
<div class="navbar custom-navbar navbar-fixed-top" role="navigation">
     <div class="container">

          <!-- NAVBAR HEADER -->
          <div class="navbar-header">
               <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
               </button>
               <!-- lOGO -->
               <a href="home.html" class="navbar-brand">Scenic</a>
          </div>

          <!-- MENU LINKS -->
          <div class="collapse navbar-collapse">
               <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home" class="smoothScroll">Home</a></li>
                    <li><a href="#about" class="smoothScroll">Studio</a></li>
                    <li><a href="#team" class="smoothScroll">Our People</a></li>  
                    <li><a href="#contact" class="smoothScroll">Let's talk</a></li>
               </ul>
          </div>

     </div>
</div>


<!-- HOME -->
<section id="home" class="parallax-section">
     <div class="overlay"></div>
     <div class="container">
          <div class="row">

               <div class="col-md-8 col-sm-12">
                    <div class="home-text">
                         <h1>Your Website has a video background!</h1>
                         <p>Feel free to download and use HTML templates from Tooplate</p>
                         <ul class="section-btn">
                              <a href="#about" class="smoothScroll"><span data-hover="Discover More">Discover More</span></a>
                         </ul>
                    </div>
               </div>

          </div>
     </div>

     <!-- Video -->
     <video controls autoplay loop muted>
          <source src="{% static 'myblog/videos/video.mp4' %}" type="video/mp4">
          Your browser does not support the video tag.
     </video>
</section>


<!-- ABOUT -->
<section id="about" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="col-md-offset-1 col-md-10 col-sm-12">
                    <div class="about-info">
                         <h3>Introducing Scenic</h3>
                         <h1>This template is designed for you. Sed ornare, tortor nec placerat lacinia, leo quam rutrum leo, eget posuere ipsum sem eu justo. Integer nunc libero.</h1>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- PROJECT -->
<section id="project" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="col-md-6 col-sm-6">
                    <!-- PROJECT ITEM -->
                    <div class="project-item">
                         <a href="{% static 'myblog/images/project-image1.jpg' %}" class="image-popup">
                              <img src="{% static 'myblog/images/project-image1.jpg' %}" class="img-responsive" alt="">
                         
                              <div class="project-overlay">
                                   <div class="project-info">
                                        <h1>Beautiful Women</h1>
                                        <h3>Click to pop up!</h3>
                                   </div>
                              </div>
                         </a>
                    </div>
               </div>

               <div class="col-md-6 col-sm-6">
                    <!-- PROJECT ITEM -->
                    <div class="project-item">
                         <a href="{% static 'myblog/images/project-image2.jpg' %}" class="image-popup">
                              <img src="{% static 'myblog/images/project-image2.jpg' %}" class="img-responsive" alt="">
                         
                              <div class="project-overlay">
                                   <div class="project-info">
                                        <h1>Nulla efficitur quam</h1>
                                        <h3>Sed ligula accumsan</h3>
                                   </div>
                              </div>
                         </a>
                    </div>
               </div>

               <div class="col-md-6 col-sm-6">
                    <!-- PROJECT ITEM -->
                    <div class="project-item">
                         <a href="{% static 'myblog/images/project-image3.jpg' %}" class="image-popup">
                              <img src="{% static 'myblog/images/project-image3.jpg' %}" class="img-responsive" alt="">
                         
                              <div class="project-overlay">
                                   <div class="project-info">
                                        <h1>Large Sea Wave</h1>
                                        <h3>Nam feugiat dui in nisi</h3>
                                   </div>
                              </div>
                         </a>
                    </div>
               </div>

               <div class="col-md-6 col-sm-6">
                    <!-- PROJECT ITEM -->
                    <div class="project-item">
                         <a href="{% static 'myblog/images/project-image4.jpg' %}" class="image-popup">
                              <img src="{% static 'myblog/images/project-image4.jpg' %}" class="img-responsive" alt="">
                         
                              <div class="project-overlay">
                                   <div class="project-info">
                                        <h1>Lorem ipsum dolor</h1>
                                        <h3>Mollis aliquam faucibus urna</h3>
                                   </div>
                              </div>
                         </a>
                    </div>
               </div>               

          </div>
     </div>
</section>


<!-- TEAM -->
<section id="team" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="col-md-offset-2 col-md-8 col-sm-12">
                    <!-- SECTION TITLE -->
                    <div class="section-title">
                         <h1>Meet Our People</h1>
                    </div>
               </div>

               <div class="clearfix"></div>

               <div id="owl-team" class="owl-carousel">
                    <div class="col-md-4 col-sm-4 item">
                         <div class="team-item">
                              <img src="{% static 'myblog/images/team-image1.jpg' %}" class="img-responsive" alt="">
                              <div class="team-overlay">
                                   <ul class="social-icon">
                                        <li><a href="#" class="fa fa-twitter"></a></li>
                                        <li><a href="#" class="fa fa-linkedin"></a></li>
                                   </ul>
                              </div>
                         </div>
                         <p>Catherine Jann</p>
                         <h3>Head Designer</h3>
                    </div>

                    <div class="col-md-4 col-sm-4 item">
                         <div class="team-item">
                              <img src="{% static 'myblog/images/team-image2.jpg' %}" class="img-responsive" alt="">
                              <div class="team-overlay">
                                   <ul class="social-icon">
                                        <li><a href="#" class="fa fa-instagram"></a></li>
                                        <li><a href="#" class="fa fa-github"></a></li>
                                        <li><a href="#" class="fa fa-facebook"></a></li>
                                   </ul>
                              </div>
                         </div>
                         <p>Luke Wara</p>
                         <h3>Speciality Focus</h3>
                    </div>

                    <div class="col-md-4 col-sm-4 item">
                         <div class="team-item">
                              <img src="{% static 'myblog/images/team-image3.jpg' %}" class="img-responsive" alt="">
                              <div class="team-overlay">
                                   <ul class="social-icon">
                                        <li><a href="#" class="fa fa-instagram"></a></li>
                                        <li><a href="#" class="fa fa-dribbble"></a></li>
                                        <li><a href="#" class="fa fa-behance"></a></li>
                                   </ul>
                              </div>
                         </div>
                         <p>Mono Mana</p>
                         <h3>Art director</h3>
                    </div>

                    
                    <div class="col-md-4 col-sm-4 item">
                         <div class="team-item">
                              <img src="{% static 'myblog/images/team-image1.jpg' %}" class="img-responsive" alt="">
                              <div class="team-overlay">
                                   <ul class="social-icon">
                                        <li><a href="#" class="fa fa-twitter"></a></li>
                                        <li><a href="#" class="fa fa-linkedin"></a></li>
                                   </ul>
                              </div>
                         </div>
                         <p>Cherry Lynn</p>
                         <h3>Marketing Manager</h3>
                    </div>
               </div>

          </div>
     </div>
</section>





<!-- FOOTER -->
<footer>
     <div class="container">
          <div class="row">

               <div class="col-md-5 col-sm-6">
                    <h2>Digital Studio</h2>
                    <p>321 Donec et justo id risus, Malesuada pharetra,<br> Tristique vestibulum,<br> Lorem ipsum dolor</p>
                    
                    
               </div>

               

               <div class="col-md-3 col-sm-12">
                    
                    <h2>About Us</h2>
                    <p>Sed vestibulum posuere ante, eget blandit metus. Morbi sodales feugiat erat, et placerat sapien suscipit ut.</p>
                    <ul class="social-icon">
                         <li><a href="#" class="fa fa-twitter"></a></li>
                         <li><a href="#" class="fa fa-facebook"></a></li>
                         <li><a href="#" class="fa fa-instagram"></a></li>
                         <li><a href="#" class="fa fa-linkedin"></a></li>
                    </ul>
                    
               </div>

               <div class="clearfix"></div>

               <div class="col-md-12 col-sm-12">
                    <div class="copyright-text">
                         <p>Copyright © 2018 Company Name 
                         
                         | Design: Tooplate</p>
                    </div>
               </div>
               
          </div>
     </div>
</footer>

<!-- SCRIPTS -->
<script src="{% static 'myblog/js/jquery.js' %}"></script>
<script src="{% static 'myblog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'myblog/js/jquery.parallax.js' %}"></script>
<script src="{% static 'myblog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'myblog/js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'myblog/js/magnific-popup-options.js' %}"></script>
<script src="{% static 'myblog/js/modernizr.custom.js' %}"></script>
<script src="{% static 'myblog/js/smoothscroll.js' %}"></script>
<script src="{% static 'myblog/js/custom.js' %}"></script>

</body>
</html>

设置.py：

from pathlib import Path
import os

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myblog',
]

STATIC_URL = '/static/'

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

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

[1]：https ://i.stack.imgur.com/7UNSE.png [1]：

[1]：https ://i.stack.imgur.com/olYzg.png [1]：

[1]：https ://i.stack.imgur.com/z5vFL.png [1]：

标签： javascriptpythonhtmltemplates

解决方案

好的，我不确定您将模板“home.html”文件放在哪里，所以我假设您将它放在与所有其他资产（js/css 文件夹）相同的“静态”文件中

所以我基本上在settings.py中制作了以下模板部分：

    TEMPLATES = [
        {'DIRS': [os.path.join(BASE_DIR, 'static')],},]
    BASE_DIR = Path(__file__).resolve().parent.parent
    STATIC_URL = '/static/'

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

然后在“home.html”中，我将每个“myblog”都更改为“。” 它工作得很好。

哦，因为自动生成的模板设置基本上有特定的搜索方式，在“https://docs.djangoproject.com/en/3.2/ref/settings/#std:setting-TEMPLATES”提供

因此，提供您当前的静态文件设置

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

您的 django 设置告诉它在 manage.py 所在的同一文件夹中查找 static，（BASE_DIR 的值）因此在您的 html 中，删除“myblog/”，以便引擎查找“static/js, static/” css' 但是，如果您想将“myblog”保留在必须与 manage.py 位于同一文件夹中的静态文件中，请创建“myblog”并在其中移动所有文件夹（js、css ..），以便您的文件路径看起来像

mainsite: app_name
          another_app
          manage.py
          static:
                 myblog:
                        css
                        js

为糟糕的答案格式道歉。

推荐阅读