Случайный вопрос

как добавить ссылки на липкую панель навигации

0

Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-image: url("images/background.png"); .и это тоже не сработало. Если вы знаете способ исправить это или знаете другой способ сделать это, пожалуйста, сообщите мне, что

    {% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Dinindu Theekshana</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700"
      rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <td class="tdStyle"> 
    <style>
      body {
        font-family: "Roboto", sans-serif;
        font-size: 17px;
      }
      .tdStyle{
        background-image:url('{{ STATIC_URL }}images/sample.JPG');
        background-repeat:no-repeat;
        background-size:100%;
      }
    .shadow{
           box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
       }
      .btn-danger {
        color: #fff;
        background-color: #f00000;
        border-color: #dc281e;
      }
     
     .masthead {
              background:#3398E1;
              height: auto;
              padding-bottom: 15px;
              box-shadow: 0 16px 48px #E3E7EB;
              padding-top: 10px;
    }
      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }
        #navbar {
          overflow: hidden;
          background-color: #333;
          color: #333;
          z-index: 9999999;
        }
        #navbar a:hover {
          background-color: #ddd;
          color: black;
        }

        #navbar a.active {
          background-color: #294bc5;
          color: white;
        }

        .content {
          padding: 16px;
          padding-top: 50px;
        }

        .sticky {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }

        .sticky + .content {
          padding-top: 60px;
        }
    </style>

    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
      <div id="navbar">
        <a class="active" href="{% url 'home' %}">Home</a>
        <a href="#">News</a>
        <a href="javascript:void(0)">Contact</a>
      </div>    
      <script>
      window.onscroll = function() {myFunction()};

      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;

      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
      </script>
    </nav>
            {% block content %} 
          <!-- Content Goes here -->
            {% endblock content %}
    
    <!-- Footer -->
    <footer class="py-3 bg-grey">
              <p class="m-0 text-dark text-center ">Copyright &copy; Dinindu Theekshana</p>
    </footer>
    
  </body>
</html>
  • 0
    ты новичок в джанго?
Теги:
django
javascript
python
html
css
CodeFix

2 ответа

0
Лучший ответ

Я нашел способ сделать это, сначала вам нужно перейти в файл setting.py и добавить этот кодSTATICFILES_DIRS = [ os.path.join(BASE_DIR, 'templates').replace('\\','/'), ] После этого откройте файл base.html и попробуйте это. Надеюсь, это сработает. Если вам нужна дополнительная информация, обратитесь к этой статье.

`{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Dinindu Theekshana</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700"
      rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <style>
      body {
        font-family: "Roboto", sans-serif;
        font-size: 17px;
        background-image: url("{% static "images/sun-pattern.png" %}");
      }
    .shadow{
           box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
       }
      .btn-danger {
        color: #fff;
        background-color: #f00000;
        border-color: #dc281e;
      }
     
     .masthead {
              background:#3398E1;
              height: auto;
              padding-bottom: 15px;
              box-shadow: 0 16px 48px #E3E7EB;
              padding-top: 10px;
    }
      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }
        #navbar {
          overflow: hidden;
          background-color: #333;
          color: #333;
          z-index: 9999999;
        }
        #navbar a:hover {
          background-color: #ddd;
          color: black;
        }

        #navbar a.active {
          background-color: #294bc5;
          color: white;
        }

        .content {
          padding: 16px;
          padding-top: 50px;
        }

        .sticky {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }

        .sticky + .content {
          padding-top: 60px;
        }
    </style>

    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
      <div id="navbar">
        <a class="active" href="{% url 'home' %}">Home</a>
        <a href="#">News</a>
        <a href="javascript:void(0)">Contact</a>
      </div>    
      <script>
      window.onscroll = function() {myFunction()};

      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;

      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
      </script>
    </nav>
            {% block content %} 
          <!-- Content Goes here -->
            {% endblock content %}
    
    <!-- Footer -->
    <footer class="py-3 bg-grey">
              <p class="m-0 text-dark text-center ">Copyright &copy; Dinindu Theekshana</p>
    </footer>
    
  </body>
</html>
`
Поделиться
Источник
2

В Django вы добавляете URL-адреса при рендеринге страницы. Итак, для ваших ссылок на панели навигации это будет выглядеть так:

<a class="active" href="{% url 'home' %}">Home</a>
<a href="{% url 'news' %}">News</a>
<a href="{% url 'contact' %}">Contact</a>

затем вам нужно будет написать представления для этих страниц и добавить их в свой urls.py.

Поделиться
Источник

Другие вопросы

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум