-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic.html
166 lines (150 loc) · 7.79 KB
/
basic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
{% if title %}
<title> Tech Diary - {{ title }} </title>
{% else %}
<title> Tech Diary </title>
{% endif %}
<style>{% block css %} {% endblock css %}</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'blog_home' %}">Tech Diary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link {% block homeactive %} {% endblock homeactive %}" aria-current="page"
href="{% url 'blog_home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link {% block aboutactive %} {% endblock aboutactive %}"
href="{% url 'blog_about' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-link {% block contactactive %} {% endblock contactactive %}"
href="{% url 'blog_contact' %}">Contact</a>
</li>
</ul>
<form method="get" action="{% url 'search_posts' %}" class="d-flex">
<input class="form-control me-2" id="query" name="q" type="search" value="{{ request.GET.q }}"
placeholder="Search blog posts" aria-label="Search">
<button class="btn btn-outline-success">Search</button>
</form>
<!--Show login and sign in button if user is not logged in, else show Welcome username and logout button-->
{% if user.is_authenticated %}
<div class="dropdown mx-2">
<button class="btn btn-outline-success dropdown-toggle" type="button" id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Welcome {{request.user}}</strong>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="{% url 'profile' %}">Profile</a></li>
<li><a class="dropdown-item border-top" href="{% url 'post_create' %}">New Post</a></li>
<li><a class="dropdown-item border-top" href="{% url 'user_posts' user %}">View Your Posts</a></li>
<li><a class="dropdown-item border-top" href="{% url 'logout' %}">Logout</a></li>
</ul>
</div>
{% else %}
<ul class="navbar-nav mx-2">
<li class="nav-item me-2">
<a class="btn btn-success" role="button" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-success" role="button" href="{% url 'register' %}">Register</a>
</li>
</ul>
{% endif %}
</div>
</div>
</nav>
<div class="container">
<div class="row g-5 mt-1">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% block body %} {% endblock body %}
</div>
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0"><em>Tech Diary</em> is a Tech based blog site. You can use it to read different tech
related posts online. Also you can post your own blogs here. To do so you need to create an
an account.</p>
</div>
<div class="content-section p-4 mb-3 bg-light rounded">
<h3>Our sidebar</h3>
<p class="text-muted">You can put any information here you'd like</p>
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</div>
<div class="p-4 mb-4">
<h4 class="fst-italic">Contact Us On:</h4>
<ol class="list-unstyled">
<li><a class="text-decoration-none" href="#">GitHub</a></li>
<li><a class="text-decoration-none" href="#">Twitter</a></li>
<li><a class="text-decoration-none" href="#">Facebook</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!--Pagination-->
{% if is_paginated %}
{% if page_obj.has_previous %} <!--For previous pages-->
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
<!--page_range: Loop over all pages in paginator, paginator: get current page paginator object-->
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %} <!--current page-->
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} <!--previous and next 2 pages of current page-->
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %} <!--For Next pages-->
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
<footer class="bg-dark text-light position-fixed fixed-bottom">
<p class="text-center py-2 my-0">Copyright © 2021 | All rights reserved</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
{% block js %} {% endblock js %}
</body>
</html>