Desing category page to list all objects in one category or keyword

Navigation is one of the sore points of any site. First, it shouldn't look too similar to Google and should also be easy for users to use. If it looks too similar for Google with roughly the same title then it will be ignored by Google and that is undesirable. We also need to make it look easy and intuitive, usable for users.

So for Google we can't have the same description user and the same title. But make sure it has a unique title and description of the page.

To give a page a unique title and a unique description, you can use django generator code to generate command / view title and description of items that can be found in the list at the moment. For example, these elements will always be unique and provide a short summary of what is actually good in search results.




{{ title }}

{{ description }}


for page_num in paginator.page_range:

page = paginator.page(page_num)

data['current_page'] = page_num

data['jobs'] = page.object_list

data['title'] = self.create_title(cat, page.object_list)

data['description'] = self.create_description(page.object_list)

name = '%s%s.html' % (cat, str(page_num))

self.save_file(CAT_FOLDER, data, name)


You can find full example in code repository see command

permanentjob/management/commands/gen_cat_permanentjob.py

Visual Elements Gives breathing space between list elements.
Unordered list not aligning all the way to the left in a div




As you can see though that <li> elements are not aligning all the way to the left of the <div> they are contained in. I have tried text-align: left; in the containing <div> but that seems to have no effect.

ul and li have margin or padding, depending on the browser, by default. You need to override this default style within your menu:


#menu ul, #menu li { margin: 0; padding: 0; }


Create a pagination with django paginator object

permanentjobs = PermanentJob.objects.filter(industry=cat)

paginator = Paginator(permanentjobs, RESULTS_PER_PAGE)

print('Jobs count: ' + str(permanentjobs.count()))

data = self.get_data()

data['industry'] = cat

data['page_range'] = paginator.page_range

for page_num in paginator.page_range:

page = paginator.page(page_num)

data['current_page'] = page_num

data['jobs'] = page.object_list

data['title'] = self.create_title(cat, page.object_list)

data['description'] = self.create_description(page.object_list)

name = '%s%s.html' % (cat, str(page_num))

self.save_file(CAT_FOLDER, data, name)



Css for buttons


.pagination {

display: inline-block;

}


.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

}


.pagination a.active {

background-color: #2464eb;

color: white;

}


.pagination a:hover:not(.active) {background-color: #ddd;}



HTML template


<div class="pagination p3">

<a>&laquo;</a>

{% for page in page_range %}

<a href="{{ industry }}{{ page }}.html"{% if page == current_page %}class="active"{% endif %}>{{ page }}</a>

{% endfor %}

<a>&raquo;</a>

</div>