99 lines
3.8 KiB
HTML
99 lines
3.8 KiB
HTML
{% extends 'programmer/base.html' %}
|
|
{% load static %}
|
|
{% load django_bootstrap5 %}
|
|
{% load seo_tags %}
|
|
|
|
{% block extra_css %}
|
|
<link id="theme-css-1c" rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}">
|
|
<link rel="stylesheet" href="{% static 'blog/css/article.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<h1 class="page-title">{{ article.title }}</h1>
|
|
<p class="page-subtitle">
|
|
Категория: <a href="{% url 'blog:category_detail' article.category.slug %}">{{ article.category.name }}</a> |
|
|
{{ article.time_create|date:"d.m.Y" }} |
|
|
Просмотров: {{ article.views_count }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
{% if article.image %}
|
|
<img src="{{ article.image.url }}" alt="{{ article.title }}" style="max-width: 100%; margin-bottom: 1rem;">
|
|
{% endif %}
|
|
<div class="card-content">
|
|
{{ article.content|safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Комментарии -->
|
|
<h3>Комментарии</h3>
|
|
{% for comment in moderated_comments %}
|
|
<div class="modern-card" style="margin-bottom: 1rem;">
|
|
<p><strong>{{ comment.author_name }}</strong> ({{ comment.time_create|date:"d.m.Y H:i" }})</p>
|
|
<p>{{ comment.content|linebreaks }}</p>
|
|
{% if not comment.is_moderated %}
|
|
<p><em>Комментарий ожидает модерации</em></p>
|
|
{% endif %}
|
|
</div>
|
|
{% empty %}
|
|
<p>Пока нет комментариев. Будьте первым!</p>
|
|
{% endfor %}
|
|
|
|
<!-- Форма добавления комментария -->
|
|
<div class="modern-card">
|
|
<h4>Добавить комментарий</h4>
|
|
|
|
{% if user_is_authenticated %}
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
{{ form.as_p }}
|
|
<button type="submit" class="btn btn-primary">Отправить</button>
|
|
</form>
|
|
{% else %}
|
|
<p class="alert alert-info">
|
|
Только авторизованные пользователи могут оставлять комментарии.
|
|
<a href="{% url 'login' %}?next={{ request.path|urlencode }}">Войдите</a> или
|
|
<a href="{% url 'register' %}?next={{ request.path|urlencode }}">зарегистрируйтесь</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Модальное окно для увеличения изображений -->
|
|
<div id="imageModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Просмотр изображения</h3>
|
|
<button class="modal-close" onclick="ImageModal.close()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img class="modal-image" id="modalImage" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Скрипт для модального окна -->
|
|
<script src="{% static 'programmer/js/recall.js' %}"></script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Находим все изображения внутри .content-card (основной контент статьи)
|
|
document.querySelectorAll('.content-card img').forEach(function(img) {
|
|
// Игнорируем, если изображение уже обёрнуто в ссылку
|
|
if (img.closest('a')) return;
|
|
|
|
// Меняем курсор, чтобы показать, что изображение кликабельно
|
|
img.style.cursor = 'pointer';
|
|
img.addEventListener('click', function() {
|
|
// Вызываем глобальную функцию openModal из recall.js
|
|
ImageModal.open(this.src, this.alt || 'Изображение из статьи');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|