堆栈内存溢出
  简体   繁体   English

使用花哨的 Html 模板

[英]Using fancy Html templates

 原文  2021-07-22 08:43:42  1   2    javascript/ python/ html/ templates

问题描述

After I added a lots of thing to my blog I wanted to add a template but to do that it seemed like I need to override.在我的博客中添加了很多东西后，我想添加一个模板，但这样做似乎需要覆盖。 So I created a new app that is exact replica of the first one.所以我创建了一个新的应用程序，它是第一个完全复制的。 in the new one I would add the template and then copy and paste a bunch of code into the new one.在新模板中，我会添加模板，然后将一堆代码复制并粘贴到新模板中。 But When I did that I was caught in an error.但是当我这样做时，我陷入了一个错误。 which was really hard to fix.这真的很难修复。 After I imported the template I added a static bar/code to everything that has images, js, videos and others.导入模板后，我向所有包含图像、js、视频和其他内容的内容添加了静态条码/代码。 But still there was no change.但仍然没有任何变化。 I hope someone can help me.我希望有一个人可以帮助我。 If anything else is needed please do ask.如果还有什么需要请尽管问。 I am really sorry for pasting the entire code.我真的很抱歉粘贴整个代码。 If I edit the code I might miss something important.如果我编辑代码，我可能会错过一些重要的东西。 There is a million difference between how it should look and not.它应该看起来和不应该看起来之间有一百万种差异。 but I cant seem to work it out.但我似乎无法解决。

Here's how mine should looks:这是我的应该看起来如何：

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

views.py:视图.py：

from django.shortcuts import render

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

Code:代码：

{% 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>

settings.py:设置.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/7UNSE.png [1]：

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

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

2 个解决方案

解决方案1
 2 已采纳  2021-07-26 12:29:36

Okay, i'm not exactly sure where did you put your template "home.html" file so i made the assumption of you putting it in the 'static' file same with all the other assets (js/css folders)好的，我不确定你把模板“home.html”文件放在哪里，所以我假设你把它放在与所有其他资产相同的“静态”文件中（js/css文件夹）

So i basically made the template section in settings.py the following:所以我基本上在 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'),
    ]

then inside "home.html", i changed every single 'myblog' to '.'然后在“home.html”中，我将每个“myblog”都更改为“.” and it worked just fine.它工作得很好。

Oh, since the Auto-generated template settings basically has a specific way of searching, provided at "https://docs.djangoproject.com/en/3.2/ref/settings/#std:setting-TEMPLATES"哦，因为自动生成的模板设置基本上有一个特定的搜索方式，提供在“https://docs.djangoproject.com/en/3.2/ref/settings/#std:setting-TEMPLATES”

So provided your current settings of static files所以提供了您当前的静态文件设置

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

Your django settings tells it to look for static on the same folder that manage.py is located at, (The value of the BASE_DIR) So in your html, remove 'myblog/' so the engine looks for 'static/js, static/css' however if you want to keep "myblog", inside static file which must be in the same folder as manage.py, create 'myblog' and move all the folders (js, css..) inside it so your file path would look like您的 django 设置告诉它在 manage.py 所在的同一文件夹中查找静态（BASE_DIR 的值）因此在您的 html 中，删除 'myblog/' 以便引擎查找 'static/js, static/但是，如果您想将“myblog”保留在必须与 manage.py 位于同一文件夹中的静态文件中，请创建“myblog”并移动其中的所有文件夹（js、css ..），以便您的文件路径看起来像

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

Apologies for the terrible answer format.为糟糕的答案格式道歉。

解决方案2
 0  2021-07-23 09:41:30

Edit your settings.py :- replace BASE_DIR = Path(__file__).resolve().parent.parent on the top of the file just after importing os.编辑您的 settings.py :- 在导入 os 后替换BASE_DIR = Path(__file__).resolve().parent.parent顶部的BASE_DIR = Path(__file__).resolve().parent.parent 。

try this in setttings.py:在settings.py中试试这个：

from pathlib import Path
import os

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

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'),
]

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用花式选择选择选项 - Selecting an option using fancy select 使用字符串模板而不是HTML文件 - Using string templates instead of HTML files 使用HTML模板时使用Document.titles吗？ - Document.titles while using html templates? 在生产代码中使用text / html javascript模板 - Using text/html javascript templates in production code 使用 flask 渲染对 html 模板的更改 - Rendering changes to html templates using flask 如何使用handlebar.js创建HTML列表模板 - how to create HTML List templates using handlebarjs 在Chrome内容脚本中使用html模板 - Using html templates inside chrome content script 使用Angular模板生成可导出的HTML - Using Angular templates to generate exportable HTML 如何使用早午餐将Jade模板呈现为HTML - How to render jade templates into HTML using brunch 在ReactJS中使用服务器端HTML模板 - Using serverside HTML-templates with ReactJS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM