184 lines
9.3 KiB
HTML
184 lines
9.3 KiB
HTML
{% extends "bottom.html" %}
|
|
{% load static %}
|
|
|
|
{#文章详情#}
|
|
{% block sitename %}
|
|
<title>{{ title }}-我的个人博客</title>
|
|
{% endblock %}
|
|
{% block stylesheethref %}
|
|
<link rel="stylesheet" href="{% static 'archives.css' %}">
|
|
<script src="{% static 'marked.min.js' %}"></script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="article-detail-container">
|
|
<article class="article-detail">
|
|
<!-- 文章头部信息 -->
|
|
<div class="article-header">
|
|
<h1 class="article-title">{{ title }}</h1>
|
|
<div class="article-meta">
|
|
<span class="author">
|
|
作者 {{ author }}
|
|
</span>
|
|
<span class="date">
|
|
发布时间 {{ created|date:"Y-m-d" }}
|
|
</span>
|
|
<span class="category">
|
|
{{ stat }} 点赞
|
|
|
|
</span>
|
|
<span class="views">
|
|
{{ read }} 浏览
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="article-cover">
|
|
<img src="http://iph.href.lu/200x150?text=封面功能,正在开发中" alt="{{ title }}封面图">
|
|
</div>
|
|
|
|
<!-- 文章内容 -->
|
|
<div class="article-content">
|
|
{{ content|safe }}
|
|
</div>
|
|
<div class="dz" style="width: 42px;height: 42px;margin: 0 auto">
|
|
<div class="dz-icon" id="likeBtn" style="background-color: red;width: 42px;height: 42px;border-radius: 50%">
|
|
<div>
|
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="38" height="38" style="margin: 2px">
|
|
<path id="link_svg" d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z" fill="#fff"></path>
|
|
</svg>
|
|
</div>
|
|
<p style="text-align: center" id="likeCount">{{ stat }}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- 文章导航 -->
|
|
<nav class="article-nav">
|
|
{% if previous %}
|
|
<a href="/archives/{{ previous.id }}" class="prev">
|
|
<i class="fas fa-chevron-left"></i>
|
|
上一篇: {{ previous.title }}
|
|
</a>
|
|
{% endif %}
|
|
{% if next %}
|
|
<a href="/archives/{{ next.id }}" class="next">
|
|
下一篇: {{ next.title }}
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
<!-- 评论区域 -->
|
|
<section class="comment-section">
|
|
<h3 class="section-title">评论</h3>
|
|
<div class="comment-form">
|
|
<form id="comment-form" action="/api/create_comment/{{ id }}" method="post">
|
|
{% csrf_token %}
|
|
<div class="form-group">
|
|
<input name="username" class="comment-input" placeholder="昵称">
|
|
<input name="qqNum" class="comment-input" placeholder="qq号(仅用于头像显示)">
|
|
<textarea name="comment" rows="5" placeholder="写下你的评论..."></textarea>
|
|
</div>
|
|
<button type="submit" class="submit-btn">提交评论</button>
|
|
</form>
|
|
</div>
|
|
<div class="comment-list">
|
|
{% for comment in comments %}
|
|
<div class="comment-item">
|
|
<div class="comment-avatar">
|
|
<img src="http://q1.qlogo.cn/g?b=qq&nk={{ comment.qq }}&s=100" alt="用户头像">
|
|
</div>
|
|
<div class="comment-content">
|
|
<div class="comment-header">
|
|
<span class="comment-user">{{ comment.comment_User }}</span>
|
|
<span class="comment-time">{{ comment.comment_Time|timesince }}</span>
|
|
</div>
|
|
<p>{{ comment.comment_Content }}</p>
|
|
{% if comment.replies.all %}
|
|
<div class="comment-replies">
|
|
{% for reply in comment.replies.all %}
|
|
<div class="reply-item">
|
|
<div class="reply-avatar">
|
|
<img src="{{ reply.user.profile.avatar.url|default:'https://via.placeholder.com/40' }}" alt="用户头像">
|
|
</div>
|
|
<div class="reply-content">
|
|
<div class="reply-header">
|
|
<span class="reply-user">{{ reply.user.username }}</span>
|
|
<span class="reply-time">{{ reply.created_at|timesince }}前</span>
|
|
</div>
|
|
<p>{{ reply.content }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="no-comments">暂无评论，快来抢沙发吧~</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
const no_active_path = "M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z"
|
|
const active_path = "M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z"
|
|
const path = document.getElementById('link_svg');
|
|
|
|
const fpPromise = import('{% static "FingerprintJS.js" %}').then(FingerprintJS => FingerprintJS.load());
|
|
fpPromise.then(fp => fp.get()).then(result => {localStorage.setItem("uuid",result.visitorId)});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const likeBtn = document.getElementsByClassName('dz')[0];
|
|
if (!likeBtn) return;
|
|
fetch(`/api/check_like/{{ id }}/${localStorage.getItem("uuid")}`,{
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
credentials: 'include'
|
|
}).then(response => response.json()).then(data => {
|
|
if (data.liked) {
|
|
path.setAttribute('d', active_path)
|
|
likeBtn.classList.add('active');
|
|
}
|
|
});
|
|
const dz_icon = document.getElementsByClassName('dz-icon')[0];
|
|
dz_icon.addEventListener('click', function() {
|
|
if (likeBtn.classList.contains('active')) {
|
|
fetch(`/api/unlink/{{ id }}/${localStorage.getItem("uuid")}`,{
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
credentials: 'include'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
likeBtn.classList.remove('active');
|
|
path.setAttribute('d', no_active_path)
|
|
document.getElementById('likeCount').textContent = data.new_count;
|
|
}
|
|
});
|
|
} else {
|
|
fetch(`/api/link/{{ id }}/${localStorage.getItem("uuid")}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
credentials: 'include'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
likeBtn.classList.add('active');
|
|
path.setAttribute('d', active_path)
|
|
document.getElementById('likeCount').textContent = data.new_count;
|
|
}
|
|
});
|
|
}
|
|
})
|
|
});
|
|
|
|
{% endblock %} |