将搜索结果链接到它自己的详细信息页面

linking search results to a its own detail page

这是一个 django 相关的问题:

我正在做一个作业,我们正在制作一个搜索栏,然后让每个单独的搜索结果链接到它自己的页面,其中包含更多详细信息。在这种情况下,我们正在做一个职位搜索引擎,当您单击每个职位发布时,我需要帮助,它会将您带到一个单独的页面,其中包含有关职位的更多信息。我们已经为所有页面制作了模板。我知道我们必须在为搜索栏中的视图功能执行此操作后再次向 api 发出请求,并使用模板填写详细搜索 results.Im 只是不确定我将如何将这些概念应用到我们拥有的 html 文件中。

这是代码 查看功能代码

import requests
from django.shortcuts import render


def home(request):

    context = {
        'example_context_variable': 'Change me.',
    }

    return render(request, 'pages/home.html', context)


def search_results(request):
    search_query = request.GET['searchterm']

    context = {
        'result_count': 0,
        'search_term': search_query,
     }

    context['results_count'] = 0

    url = 'https://jobs.github.com/positions.json?location=bay+area&description='
    url += search_query

    response = requests.get(url)
    results_data = response.json()
    job_list =[]
    for result in results_data:
        job_list.append(result)


    context['job_results'] = job_list


    return render(request, 'pages/search_results.html', context)

搜索结果页

{% extends "base.html" %}

{% block title %}
    Search Results
{% endblock title %}

{% block additional_styles %}
<style>
    body {
        background-color: white;
    }
</style>
{% endblock %}


{% block content %}
<div id="home-content" class="container">
  <div class="row">

      <div class="col-lg-3"></div> <!-- Column for spacing -->

      <div class="col-lg-6">
          <div class="mt-5 mb-3 text-center">
            <h1>Search Results</h1>
          </div>

<form method="GET" action="/search-results/">
  <div class="input-group mb-2">
    <input name="searchterm" type="text" class="form-control form-control-lg" placeholder="Let's find a job..." />
    <div class="input-group-append">
      <button class="btn btn-primary btn-lg">Search</button></a>
  </div>
</div>

</form>

<!-- 2start -->
<p>You Searched for: {{search_term}}</p>
{% for job in job_results %}
<div class="list-group">
  <a href="/detailed-search-results/" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">{{job.title}}</h5>
    </div>
    <div>
      <small class="text-muted">{{job.location}}</small>
    </div>
  </a> 
</div>
<br>
{% endfor %}
<!-- End -->

{% endblock content %}

** 详细搜索结果 Html 文件 **

到目前为止,当你点击一个帖子时,它会将你带到详细的搜索结果页面,上面没有任何内容。

那是因为您已将每个职位发布超链接到 /detailed-search-results/。 查看 API 响应,您需要将其更改为 job.url

将您的 for 循环替换为:

{% for job in job_results %}
<div class="list-group">
  <a href="{{ job.url }}" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">{{job.title}}</h5>
    </div>
    <div>
      <small class="text-muted">{{job.location}}</small>
    </div>
  </a> 
</div>
<br>
{% endfor %}