时间戳

首页 > 解决方案 > Laravel 7页脚未显示在某些网页中

html - Laravel 7页脚未显示在某些网页中

问题描述

我创建了一个我想@include 到其他网页的页脚。因此，我创建了@section('content')，然后在底部创建了@include('footer')，然后是@endsection。现在这仅适用于显示页脚的我的联系页面。但不适用于我的主页或博客页面。下面我将包含我在 Laravel 7 上工作的代码，使用刀片、tailwindcss、html/css。我尝试了多种方法，例如移动@include、@extends 或@yeild，但无法解决这个问题。任何帮助或方向将不胜感激。

例如，当我检查主页时，页脚正在通过，但与导航栏混合在一起。当我检查联系页面时，它应该位于页面底部。这让我很难过。

页脚

@extends('layout')
<footer>
    <div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">

        <a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
                src="/images/global.svg"></a>

        <a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
                src="/images/twitter-black.svg"></a>

        <a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
                src="/images/github.svg"></a>

        <p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
    </div>
</footer>
@yield('footer')

布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
  <title>@yield('title')</title>
</head>
<html>

<body>
  <div class="absolute inset-x-0 top-0">
    <nav x-data="{ open: false }" @keydown.window.escape="open = false" class="bg-gray-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center h-24">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
            </div>
            <div class="hidden md:block">
              <div class="ml-10 flex items-baseline">
                <a href="/home"
                  class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
                <a href="/contact"
                  class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
                <a href="/blog"
                  class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
                <a href="po"
                  class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
                <a href="#"
                  class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
              </div>
            </div>
          </div>
          <div class="-mr-2 flex md:hidden">
            <button @click="open = !open"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
              <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                <path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
                  stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
        <div class="px-2 pt-2 pb-3 sm:px-3">
          <a href="/home"
            class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
          <a href="/contact"
            class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
          <a href="/blog"
            class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
          <a href="#"
            class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
          <a href="#"
            class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700">
          <div class="flex items-center px-5">
            <div class="flex-shrink-0">
              <img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
            </div>
            <div class="ml-3">
              <div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
              <div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli@gmail.com</div>
            </div>
          </div>
        </div>
    </nav>
    @yield('content')

</body>

</html>

联系页面

@extends('layout')
@section('title', 'Contact')

@section('content')

<div class="bg-gray-700 text-center text-lg full-screen pt-6">
    <h1 class="pb-8 text-white text-xl">Contact</h1>
    <form action="/contact" method="POST">
        <div class="justify-center relative">
            <label>
                <input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
                    autocomplete="off">
            </label>
        </div>
        <div class="justify-center pt-4">
            <label>
                <input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
            </label>
        </div>
        <div class="justify-center pt-4">
            <label>
                <input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
                    autocomplete="off">
            </label>
        </div>
        @csrf
        <div class="text-center pt-6">
            <button
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
                Submit</button>
            <h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
            <div class="bg-cover content-center flex justify-center min-h-50">
                <img src="/images/contact.svg" alt="background image">
            </div>
        </div>
    </form>

    @include('footer')
    @endsection

主页

@extends('layout')

@section('title', 'Home')
@section('content')

<main>
    <div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
        <h1 class="pt-6 pb-6 text-lg font-semibold">
            A Website Built and Designed By Me!
        </h1>
        <img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
        <p class="pt-6 text-base capitalize font-semibold">
            Who am I you ask?
        </p>
        <div class="inline-flex">
            <p class="flex-1"></p>
            <p class="flex-1 text-center pt-3 text-justify">
                I am a father of two, a husband of one, and someone who loves to build things. I tend to find
                something I enjoy
                get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
                obsession, in
                case you didn't notice, creating this website by programming it myself. I have been diving deep into the
                world
                of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
                certain
                I love to learn and build.
            </p>
            <p class="flex-1"></p>
        </div>
        <p class="text-center pt-6 capitalize font-semibold">
            So what will this site be or provide?</p>
        <div class="inline-flex pt-3">
            <p class="flex-1"></p>
            <p class="flex-1 text-justify">
                I plan to <a href="/blog" target="blank" class="text-teal-500">blog</a> about
                various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
                use
                this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
                I
                go.
            </p>
            <p class="flex-1"></p>
        </div>
    </div>
    </div>
</main>

@include('footer')
@endsection

最后是博客页面

@extends('layout')
@section('title', 'Blog')

@section('content')

<main>
    <div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
        <h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
        </h3>
        <div class="pt-6">
            <form action="/blog" method="post">
        </div>
        <label class=""></label>
        <input type="text" name="title" autocomplete="off">
        @csrf
        <div class="text-center pt-6">
            <button
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
                Add Blog Post</button>
        </div>
        </form>
        <p style="color: red">@error('title') {{ $message }} @enderror</p>
        <ul>
            @forelse ($blogs as $blog)
            <li>{{ $blog->title }}</li>
            @empty
            <li>
                <h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
            </li>
            @endforelse
        </ul>
    </div>
    </div>
</main>

@include('footer')
@endsection

标签： htmlcsslaraveltailwind-css

解决方案

简单地说，不正确的 html 标签。确保打开和关闭标签相等的经验教训。因为我是短</div>标签，所以我的代码很痛苦并且不能正常工作。归功于@kerbholz

推荐阅读