73 lines
3.1 KiB
HTML
73 lines
3.1 KiB
HTML
{% extends "bottom.html" %}
|
|
{% load static %}
|
|
|
|
{% block stylesheethref %}
|
|
<link rel="stylesheet" href="{% static 'index.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<!-- 文章容器 -->
|
|
<div class="article-list">
|
|
{% for artcle in artchles %}
|
|
<article class="article-card">
|
|
<div class="article-content">
|
|
<div class="article-image">
|
|
<img src="http://iph.href.lu/200x150?text=正在开发中" alt="文章图片">
|
|
</div>
|
|
<div class="article-info">
|
|
<p class="article-id" style="display: none">{{ artcle.id }}</p>
|
|
<h2 class="article-title">{{ artcle.title }}</h2>
|
|
<p class="article-excerpt">
|
|
{{ artcle.abstract }}
|
|
</p>
|
|
<div class="article-meta">
|
|
<div class="meta-data">
|
|
<span>发布时间：{{ artcle.created }}</span>
|
|
<span>点赞：{{ artcle.stat }}</span>
|
|
<span>阅读: {{ artcle.read }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 搜索功能
|
|
const searchBtn = document.querySelector('.search-box button');
|
|
const searchInput = document.querySelector('.search-box input');
|
|
|
|
searchBtn.addEventListener('click', function() {
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
alert('搜索: ' + query);
|
|
// 实际应用中这里应该是跳转到搜索页面或执行搜索操作
|
|
}
|
|
});
|
|
|
|
searchInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
alert('搜索: ' + query);
|
|
// 实际应用中这里应该是跳转到搜索页面或执行搜索操作
|
|
}
|
|
}
|
|
});
|
|
|
|
// 文章卡片交互
|
|
const articleCards = document.querySelectorAll('.article-card');
|
|
articleCards.forEach(card => {
|
|
card.addEventListener('click', function(e) {
|
|
if (!e.target.closest('.read-more')) {
|
|
const id = this.querySelector('.article-id').textContent;
|
|
window.open(`/archives/${id}`)
|
|
}
|
|
});
|
|
});
|
|
});
|
|
{% endblock %} |