Django/ HTML：阅读更多不适用于主博客页面答案

【问题标题】：Django/ HTML: Read more doesn't work on a main blog pageDjango/ HTML：阅读更多不适用于主博客页面
【发布时间】：2022-01-25 02:36:20
【问题描述】：

我正在本地开发 django 页面，当我点击“阅读更多”按钮时遇到一些问题。

对于名为“测试”的帖子，它工作正常，我放了随机文本。

对于帖子：“Projekty：API do spradzania pogody 2”和“Projekty：API do spradzania pogody”不起作用。我放入了一些 yt 链接。当我单击“阅读更多”时，没有任何反应。此外，当我将鼠标悬停在按钮上时，不会显示任何链接。你知道为什么我不能点击那里吗？

index.html:

{% extends "base.html" %} 
{% block content %}
<style>
    body {
        font-family: "Roboto", sans-serif;
        font-size: 18px;
        background-color: #fdfdfd;
    }
    
    .head_text {
        color: black;
    }
    
    .card {
        box-shadow: 0 16px 48px #E3E7EB;
    }
</style>

<header class="masthead">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class=" col-md-8 col-md-10 mx-auto">
                <div class="site-heading">
                    <h3 class=" site-heading my-4 mt-3 text-black"> Welcome to my awesome Blog </h3>
                    <p class="text-light">We Love Django As much as you do..! &nbsp
                    </p>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8 mt-3 left">
            {% for post in post_list %}
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title">{{ post.title }}</h2>
                    <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
                    <p class="card-text">{{post.content|safe|slice:":200" }}</p>
                    <a href="{% url 'post_detail' post.slug  %}" class="btn btn-primary">Read More &rarr;</a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
    </div>
</div>
{%endblock%}

urls.py 项目：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
     path('portfolio/', include('blog.urls')),
     path('about_me/', include('blog.urls')),
    ]

urls.py 应用程序：

from . import views
from django.urls import path
from django.conf.urls import include

urlpatterns = [
    path('', views.PostList.as_view(), name='home'),
    path('portfolio/', views.Portfolio.as_view(), name='portfolio'),
    path('about_me/', views.Portfolio.as_view(), name='about_me'),
    path('<slug:slug>/', views.PostDetail.as_view(), name='post_detail'),
    path('summernote/', include('django_summernote.urls')),


    ]
# to jest dla wysiwyg
  # add condition in django urls file

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

查看页面来源：

  <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title">Projekty: APi do sprawdzania pogody 2</h2>
                    <p class="card-text text-muted h6">marcin | Jan. 17, 2022, 10:48 a.m. </p>
                    <p class="card-text"><p>To jest aplikacja do sprawdzania temperatury w mieście podanym przez użytkownika. Aplikacja łączy się z API&nbsp;&nbsp;strony openweathermap.org i pobiera dane temperatury.</p><p><span style="color</p>
                    <a href="/about_me/projekty-api-do-sprawdzania-pogody2/" class="btn btn-primary">Więcej...</a>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title">test</h2>
                    <p class="card-text text-muted h6">marcin | Jan. 17, 2022, 10:45 a.m. </p>
                    <p class="card-text"><p>agagadsfgsadgasgasdgasdg</p></p>
                    <a href="/about_me/test/" class="btn btn-primary">Więcej...</a>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title">Projekty: APi do sprawdzania pogody</h2>
                    <p class="card-text text-muted h6">marcin | Jan. 17, 2022, 10:40 a.m. </p>
                    <p class="card-text"><p>To jest aplikacja do sprawdzania temperatury w mieście podanym przez użytkownika. Aplikacja łączy się z API&nbsp;&nbsp;strony openweathermap.org i pobiera dane temperatury.</p><p><span style="color</p>
                    <a href="/about_me/projekty-api-do-sprawdzania-pogody/" class="btn btn-primary">Więcej...</a>
                </div>
            </div>

我做了一些测试：

不知道为什么所有链接都有这个url“/about_me”，我认为应该删除这个。你知道怎么做吗？
当我将鼠标悬停在此网址“/about_me/test/”上时，它有链接。当我点击它时，它会正确打开页面。另外两个没有，你知道原因吗？
当我从网络浏览器打开时，所有链接都可以正常工作：
1. 127.0.0.1:8080/about_me/projekty-api-do-sprawdzania-pogody2/
2. http://127.0.0.1:8080/about_me/projekty-api-do-sprawdzania-pogody/
3. 127.0.0.1:8080/about_me/test/

urls.py 应用如你所说更新：

path('posts/<slug:the_slug>/', views.PostDetail.as_view(), name='post_detail'),

更新后也是同样的问题。

about_me.html：

{% extends 'base.html' %} {% block content %}

<style>
        .card{
            box-shadow: 0 16px 48px #E3E7EB;
        }
       img {
          width: 60%;
          height: auto;
          object-fit: contain;      
</style>
<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top">
      <div class="card-body">
        <p class="card-text"></p>
        <p style="text-align: center;">Witam na mojej stronie.<br /><br />&nbsp;<br /><br />Uczę sie w wolnym czasie programowania. Interesuje sie gł&oacute;wne Full stack Web dev, technologie z kt&oacute;rymi mam największe doświadczenie:<br /><br />Python<br />Django<br />Css bootstrap<br />HTML<br />API<br /><br />Na stronie będę zamieszczał r&oacute;żne interesujące mnie informacje odnośnie programowania.<br /><br />W sekcji portfolio są projekty kt&oacute;re zrobiłem.<br /><br />&nbsp;<br /><br />W razie chęci kontaktu prosze o kontakt na email: marcin.idzik1@gmail.com</p>
<div>&nbsp;</div>
<div>pozdrawiam,</div>
<div>Marcin</div>
      </div>
    </div>
    {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
  </div>
</div>

{% endblock content %}

base.html:

<!DOCTYPE html>
<html>

    <head>
        <title>Moja strona</title>
         <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <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-color: #fdfdfd;
        }
        .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;
        }
        img {
            width: 00%;
            height: auto;
            object-fit: contain; 
    </style>
        {% load static %}
               <center> <img src="{% static 'blog/moj.png' %}" alt="My image"> </center>

        <!-- Navigation -->
        <nav class="navbar navbar-expand-sm navbar-light bg-light shadow" id="mainNav">
            <div class="container-fluid">
                
                
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item text-black">
                            <a class="nav-link text-black font-weight-bold" href="/">Blog</a>
                        </li>
                        <li class="nav-item text-black">
                            <a class="nav-link text-black font-weight-bold" href="portfolio/">Moje projekty</a>
                        </li>
                        <li class="nav-item text-black">
                            <a class="nav-link text-black font-weight-bold" href="about_me">Kontakt</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        {% block content %}
        <!-- Content Goes here -->
        {% endblock content %}
        <!-- Footer -->

    </body>
</html>

portfolio.html：

{% extends 'base.html' %} {% block content %}

<style>
        .card{
            box-shadow: 0 16px 48px #E3E7EB;
        }
       img {
          width: 60%;
          height: auto;
          object-fit: contain;      
</style>
<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top">
      <div class="card-body">
        <p class="card-text"> Tutaj znajdziesz liste mich projektów!</p>
        <p style="text-align: center;">1. Python/ API - sprawdź temperaturę <a href="https://github.com/Pr00bit/API">link</a></p>
      </div>
    </div>
    {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
  </div>
</div>

{% endblock content %}

post_detail.html：

{% extends 'base.html' %} {% block content %}

<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top">
      <div class="card-body">
        <h1>{% block title %} {{ object.title }} {% endblock title %}</h1>
        <p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
        <p class="card-text ">{{ object.content | safe }}</p>
      </div>
    </div>
    {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
  </div>
</div>

{% endblock content %}

sidebar.html:

{% block sidebar %}

<style>
        .card{
            box-shadow: 0 16px 48px #E3E7EB;
        }
       img {
            width: 60%;
            height: auto;
            object-fit: contain;        
</style>

<!-- Sidebar Widgets Column -->
<div class="col-md-4 float-right ">
<div class="card my-4">
        <h5 class="card-header">O mnie</h5>
    <div class="card-body">
        {% load static %}
        <center><img src="{% static 'blog/zdjecie.png' %}" alt="My image"></center>
        <p class="card-text">Uczę się programowania, ta strona została napisana w ulubionym frameworku Django. Więcej o mnie w linku niżej.</p>
         <a class="nav-link text-black font-weight-bold" href="about_me/">Więcej</a>
    </div>
</div>
</div>

{% endblock sidebar %}

【问题讨论】：

标签： html django

【解决方案1】：

您的<a> 标签看起来不错。尝试通过右键单击浏览器并选择“查看页面源代码”来查看源代码，然后查看在页面呈现的<a> 标记中生成的 url 链接。

【讨论】：

感谢 Ajit 提供信息，但由于我是初学者，我不确定打开控制台后该做什么。你有机会提供一些步骤吗？
不要打开控制台。只需右键单击您的网页并选择“查看源代码”或“查看页面源代码”，然后将该代码添加到您的问题中作为更新。
我已经打开了你提到的“查看源代码”或“查看页面源代码”的页面，现在我可以看到整个 HTML 并且不知道现在该做什么，因为我看不到任何按钮？
将该代码添加到您的问题中，以便我查看。当您使用它时，如果您还可以向我展示 urls.py 文件，那就太好了。
我添加了网址。所以你提到的代码在哪里添加？